Skip to content

Instantly share code, notes, and snippets.

@panchew
Created June 23, 2023 17:27
Show Gist options
  • Save panchew/eb0af6150af873a633e361b821e7a645 to your computer and use it in GitHub Desktop.
Save panchew/eb0af6150af873a633e361b821e7a645 to your computer and use it in GitHub Desktop.
For HelloText
<%= form_with(model: section, url: url, local: true, class: 'form', id: 'product_section_form') do |f| %>
<% if section.errors.any? %>
<div id="error_explanation">
<h3><%= pluralize(section.errors.count, "error") %> prohibited this product section from being saved:</h3>
<ul>
<% section.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%= hidden_field_tag 'full_html_content', nil, id: 'full_html_content' %>
<div class="form-group">
<label for="slug" >Slug</label>
<%= f.text_field :slug, class: 'form-control', placeholder: 'Slug' %>
</div>
<div class="form-group">
<label for="content" >Content</label>
<%= f.text_area :content, class: 'form-control', placeholder: 'Enter HTML', size: "20x20" %>
</div>
<div class="form-group">
<% if @section.form %>
<%=
link_to 'Remove form', remove_form_product_product_section_path(@section.product_id, @section.id),
class: 'btn btn-md btn-danger', id: 'remove_form', method: :delete, data: { confirm: 'Are you sure?' }
%>
&nbsp;
<span>
<i>
Do not forget to add a container for the form in the section above:
<b>&lt;div id="form_container"&gt;&lt;/div&gt;</b>
</i>
</span>
<%= render 'form_builder', form: @section.form %>
<% else %>
<%=
link_to 'Add form', add_form_product_product_section_path(@section.product_id, @section.id),
class: 'btn btn-md btn-warning', id: 'add_form' unless @section.new_record?
%>
<% end %>
</div>
<div class="form-actions" style="margin-bottom: 5px;">
<%= f.submit 'Save', class: 'btn btn-success', id: 'product_section_submit' %>
<button type="button" class="btn btn-success" onclick="$('#load-section-file-modal').modal('show');" style="color: #fff;">Load from file</button>
</div>
<% end %>
<%= render 'shared/froala', selector: 'product_section_content', use_iframe: false %>
<%= render partial: 'load_from_file', locals: { section_id: @section.id } %>
<hr>
<h4>Form in section</h4>
<div class="form-group">
<%= text_field_tag 'form[submit_to]', form.submit_to, class: 'form-control', placeholder: 'Submit to path' %>
</div>
<%= hidden_field_tag 'form[content]', form.content, id: 'form_content' %>
<div id="form_builder"></div>
<script>
var form_builder;
var content = JSON.stringify(<%= form.content ? form.content.html_safe : [] %>);
$('#form_builder').formBuilder().promise.then( formBuilder => {
form_builder = formBuilder;
formBuilder.actions.setData(content);
});
$('#product_section_form').submit(function() {
$('#form_content').val(JSON.stringify(form_builder.actions.getData()));
return true;
});
</script>
<div class="load-section-file-modal modal fade" id="load-section-file-modal" tabindex="-1" role="dialog" aria-labelledby="#load-section-file-modal" aria-hidden="true">
<div class="modal-dialog modal-xs" role="document">
<div class="modal-content">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fas fa-times"></i>
</span>
</button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<!-- Title -->
<h5 class="portfolio-modal-title text-secondary mb-10">Load Form Content from File</h5>
<%= form_tag '/load_section_file', :method => :post, :multipart => true do %>
<div class="form-group">
<%= file_field_tag 'file', required: true %>
<%= hidden_field_tag :id, section_id %>
</div>
<div class="form-actions">
<%= button_tag 'LOAD', class: 'btn btn-success' %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-12">
<h2>Edit section</h2>
<div class="text-right">
<%= link_to 'Manage Questionnaire', edit_product_product_section_questionnaire_template_path(@section.product_id, @section.id), class: 'btn btn-warning text-right' %>
</div>
<%= render 'form', section: @section, url: product_product_section_path(@section.product_id, @section.id) %>
</div>
</div>
</div>
class ProductSectionsController < ApplicationController
def show
end
def new
@section = ProductSection.new
@product = Product.find params[:product_id]
end
def create
@product = Product.find params[:product_id]
product_section = @product.product_sections.new section_params
if product_section.save
redirect_to product_path(@product), notice: 'Saved'
else
render :new
end
end
def edit
@section = ProductSection.find params[:id]
end
def update
@section = ProductSection.find params[:id]
if @section.update(section_params)
if params[:form].present?
form = Form.find_or_create_by(product_section_id: @section.id)
form.update submit_to: form_params[:submit_to], content: sanitize_select(form_params[:content])
end
redirect_to product_path(@section.product_id), notice: 'Saved!'
else
render :edit, alert: 'Could not save'
end
end
def destroy
@section = ProductSection.find params[:id]
@product = @section.product
if @section.delete
redirect_to product_path(@product.id), alert: 'Are you sure?'
else
render :questionnaire_completed, warning: 'Could not delete'
end
end
def add_form
product_section = ProductSection.find params[:id]
product_section.create_form
redirect_to edit_product_product_section_path(product_section.product_id, product_section.id), notice: 'Form added!'
end
def remove_form
product_section = ProductSection.find params[:id]
product_section.form.delete
redirect_to edit_product_product_section_path(product_section.product_id, product_section.id), notice: 'Form removed!'
end
def load_file
@section = ProductSection.find params[:id]
file = File.open params[:file].tempfile
content = file.read
form = Form.find_or_create_by(product_section_id: @section.id)
form.update content: JSON.parse(content).to_json
redirect_to edit_product_product_section_path(@section.product_id, @section.id), notice: 'Content loaded from file!'
end
private
def section_params
params.require(:product_section).permit(:slug, :content, :has_form)
end
def form_params
params.require(:form).permit(:submit_to, :content)
end
end
<%= @section.content.html_safe %>
<% if @section.form %>
<script>
var form_tag = '<form action="<%= @section.form.submit_to %>"' +
'class="form" accept-charset="UTF-8" method="post">' +
'<div id="form_fields"></div><div id="questionnaire-modal-container"></div></form>'
$('#form_container').html(form_tag);
var formData = JSON.stringify(<%= @section.form.content ? @section.form.content.html_safe : [] %>);
var formRenderOptions = {formData};
$('#form_fields').formRender(formRenderOptions);
// Post form processing
// Add elements to DOM or do some styling or JS execution
inlineProcessing();
// Add the modal skeleton
let modal = '<%= j(render 'questionnaire_modal') %>';
$('#questionnaire-modal-container').html(modal);
$("#form_submit").click(function(e){
//e.stopPropagation();
e.preventDefault();
// form needs questionanaire
if ($('#requires_questionnaire').val() == 'always') {
let path = '/questionnaires/new?section_id=' + <%= @section.id %>;
$('#questionnaire-container').load(path);
$("#questionnaire_modal").modal('show');
}
// form needs questionnaire based on age
if ($('#requires_questionnaire').val() == 'age') {
if (parseInt($('#age').val()) >= 60) {
let path = '/questionnaires/new?section_id=' + <%= @section.id %>;
$('#questionnaire-container').load(path);
$("#questionnaire_modal").modal('show');
} else {
$('#questionnaire-container').html('');
$("form").submit();
}
}
// form does not need questionnaire at all
if ($('#requires_questionnaire').val() == 'never') {
$('#questionnaire-container').html('');
$("form").submit();
}
});
</script>
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment