[FEATURE] Translate form builder

refs OSC-17

app/assets/javascripts/custom_form_builder.coffee

@@ -95,7 +95,7 @@ class CIF.CustomFormBuilder
         self.preventClickEnterOrTab(fld)
         ),50
 
-  eventSelectOption: ->
+  eventSelectOption: (fields = [])->
     self = @
     onadd: (fld) ->
       $('.className-wrap, .access-wrap, .description-wrap, .name-wrap').hide()
@@ -104,6 +104,7 @@ class CIF.CustomFormBuilder
       self.addOptionCallback(fld)
       self.generateValueForSelectOption(fld)
       self.preventClickEnterOrTab(fld)
+      self.handleAddTranslateLabelField(fld, fields)
     onclone: (fld) ->
       setTimeout ( ->
         self.handleCheckingForm()
@@ -259,3 +260,16 @@ class CIF.CustomFormBuilder
         event.preventDefault()
         key = if event.which == 13 then 'Enter key' else 'Semi-colon'
         alert("#{key} is not allowed!")
+
+  handleAddTranslateLabelField: (fld, fields) ->
+    fldElement = $(fld)
+    fldId = fldElement.attr('id')
+    fldId = fldId.substr(fldId.length - 1)
+    localLabelName = "local_label_#{fldId}"
+    localLabel = "Local Label #{fldId}"
+    for field in fields
+      localLabel = if field[localLabelName] then field[localLabelName] else localLabel
+    frmHolder = fldElement.find('.frm-holder')
+    localLabelBlock = "<div class='form-group local-label-wrap' style='display: block'><label for='local-label-#{fldId}'>Local Label</label><div class='input-wrap'><div name='#{localLabelName}' placeholder='Local Label' class='fld-label-#{fldId} form-control' id='local-label-#{fldId}' contenteditable='true'>#{localLabel}</div></div></div>"
+    localLabelBlockElement = $.parseHTML(localLabelBlock)
+    frmHolder.find('.label-wrap').after(localLabelBlockElement)

app/assets/javascripts/multiple_form/form.coffee

@@ -10,6 +10,13 @@ CIF.Client_trackingsNew = CIF.Client_trackingsCreate = CIF.Client_custom_fieldsN
     _initDatePicker()
     _preventCreateDatePickerClientEnrollment()
 
+    $('select').on 'select2-selecting', (e) ->
+      console.log $(e.target).data('label')
+      console.log $(e.choice.element).data('value')
+      console.log $('#' + $(e.target).data('label'))
+      $('#' + $(e.target).data('label')).val($(e.choice.element).data('value')).trigger("change")
+      return
+
   _initICheckBox = ->
     $('.i-checks').iCheck
       checkboxClass: 'icheckbox_square-green'

app/assets/javascripts/program_streams/form.coffee

@@ -249,7 +249,8 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
     $('#trackings').on 'cocoon:after-insert', (e, element) ->
       trackingBuilder = $(element).find('.tracking-builder')
       $(element).attr('id', Date.now())
-      _initProgramBuilder(trackingBuilder, [])
+      # _initProgramBuilder(trackingBuilder, [])
+      _initMultipleFormBuilder(0, trackingBuilder)
       _editTrackingFormName()
       _handleRemoveCocoon()
       _initSelect2TimeOfFrequency()
@@ -259,6 +260,57 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
       _custom_field_list()
       _initCheckbox()
 
+  _initMultipleFormBuilder = (startIndex, elements) ->
+    if startIndex < elements.length
+      dataElement = JSON.parse($(elements[startIndex]).children('span').text())
+      builderOption = new CIF.CustomFormBuilder()
+      specialCharacters = { '&amp;': '&', '&lt;': '<', '&gt;': '>', "&qoute;": '"' }
+      format = new CIF.FormatSpecialCharacters()
+      fields = format.formatSpecialCharacters((dataElement || []), specialCharacters)
+
+      $(elements[startIndex]).formBuilder(
+        templates: separateLine: (fieldData) ->
+          { field: '<hr/>' }
+        fields: builderOption.thematicBreak()
+        dataType: 'json'
+        formData: JSON.stringify(fields)
+        disableFields: ['autocomplete', 'header', 'hidden', 'button', 'checkbox']
+        showActionButtons: false
+        messages: {
+          cannotBeEmpty: 'name_separated_with_underscore'
+        }
+        stickyControls: {
+          enable: true
+          offset:
+            width: '17%'
+            right: 78
+            left: 'auto'
+        }
+        typeUserEvents: {
+          'checkbox-group': builderOption.eventCheckboxOption()
+          date: builderOption.eventDateOption()
+          file: builderOption.eventFileOption()
+          number: builderOption.eventNumberOption()
+          'radio-group': builderOption.eventRadioOption()
+          select: builderOption.eventSelectOption(fields)
+          text: builderOption.eventTextFieldOption()
+          textarea: builderOption.eventTextAreaOption()
+          separateLine: builderOption.eventSeparateLineOption()
+          paragraph: builderOption.eventParagraphOption()
+        }
+        onAddOption: (optionTemplate, optionIndex) ->
+          index = optionIndex.index + 1
+          if !optionTemplate.local_label
+            optionTemplate.local_label = "Local option #{index}"
+            optionTemplate.local_value = "Local option #{index}"
+          return optionTemplate
+      ).promise.then((form) ->
+        form.element = elements[startIndex]
+        @formBuilder.push form
+        startIndex++
+        _initMultipleFormBuilder(startIndex, elements)
+      )
+
   _initProgramBuilder = (element, data) ->
     builderOption = new CIF.CustomFormBuilder()
     specialCharacters = { '&amp;': '&', '&lt;': '<', '&gt;': '>', "&qoute;": '"' }
@@ -294,9 +346,18 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
         textarea: builderOption.eventTextAreaOption()
         separateLine: builderOption.eventSeparateLineOption()
         paragraph: builderOption.eventParagraphOption()
-      })
-    formBuilder.element = element
-    @formBuilder.push formBuilder
+      }
+      onAddOption: (optionTemplate, optionIndex) ->
+        index = optionIndex.index + 1
+        optionTemplate.local_label = "Local option #{index}"
+        optionTemplate.local_value = "local-option-#{index}"
+        return optionTemplate
+      onOpenFieldEdit: (editPanel) ->
+        $(editPanel).find('.option-local_value').hide()
+    ).promise
+
+    form.element = element
+    @formBuilder.push form
 
    _editTrackingFormName = ->
     inputNames = $(".program_stream_trackings_name input[type='text']")
@@ -439,19 +500,23 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
       $('.links a').trigger('click')
 
   _handleInitProgramFields = ->
-    for element in $('#enrollment, #exit-program')
-      dataElement = JSON.parse($(element).children('span').text())
-      _initProgramBuilder($(element), (dataElement || []))
+    # for element in $('#enrollment, #exit-program')
+    #   dataElement = JSON.parse($(element).children('span').text())
+      # _initProgramBuilder($(element), (dataElement || []))
 
+    elements = ['#enrollment', '#exit-program']
+    _initMultipleFormBuilder(0, elements)
+    for element in elements
       if element.id == 'enrollment' and $('#program_stream_id').val() != ''
         _preventRemoveField(ENROLLMENT_URL, '#enrollment')
       else if element.id == 'exit-program' and $('#program_stream_id').val() != ''
         _preventRemoveField(EXIT_PROGRAM_URL, '#exit-program')
 
     trackings = $('.tracking-builder')
-    for tracking in trackings
-      trackingValue = JSON.parse($(tracking).children('span').text())
-      _initProgramBuilder(tracking, (trackingValue || []))
+    _initMultipleFormBuilder(0, trackings)
+    # for tracking in trackings
+    #   trackingValue = JSON.parse($(tracking).children('span').text())
+    #   _initProgramBuilder(tracking, (trackingValue || []))
     _preventRemoveField(TRACKING_URL, '') if $('#program_stream_id').val() != ''
 
   _initButtonSave = ->
@@ -465,10 +530,11 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
 
   _handleSetValueToField = ->
     for formBuilder in @formBuilder
+      console.log(formBuilder.actions.save(), 'form builder actions')
       element = formBuilder.element
       specialCharacters = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&qoute;" }
       format = new CIF.FormatSpecialCharacters()
-      fields = format.formatSpecialCharacters(JSON.parse(formBuilder.actions.save()), specialCharacters)
+      fields = format.formatSpecialCharacters(formBuilder.actions.save(), specialCharacters)
       fields = JSON.stringify(fields)
       if $(element).is('#enrollment')
         $('#program_stream_enrollment').val(fields)

app/assets/stylesheets/application.scss

@@ -97,4 +97,4 @@
 @import "care_plans/*";
 @import "family_advanced_searches/*";
 @import "service_deliveries/*";
-@import "case_conferences/*";
+@import "case_conferences/*";

app/assets/stylesheets/client_program_stream.scss

@@ -15,3 +15,5 @@
     }
   }
 }
+
+.d-none { display: none !important; }

app/assets/stylesheets/program_streams/form.scss

@@ -188,4 +188,12 @@ body[id='program_streams-update'], body[id='program_streams-create'] {
       cursor: pointer;
     }
   }
+
+  .wizard > .content > .body {
+    #enrollment, #trackings, #exit-program {
+      .field-options {
+        input.option-value, input[type='radio'].option-selected, input.option-local_value { display: none; }
+      }
+    }
+  }
 }

app/classes/advanced_searches/enrollment_sql_builder.rb

@@ -35,7 +35,7 @@ def get_sql
           properties_result = client_enrollments.where.not("properties -> '#{@field}' ? '#{@value}' ")
         end
       when 'less'
-        properties_result = client_enrollments.where("(properties ->> '#{@field}')#{'::numeric' if integer? } < '#{@value}' AND properties ->> '#{@field}' != '' ")
+        properties_result = client_enrollments.where("((properties ->> '#{@field}')#{'::numeric' if integer? } < '#{@value}' OR properties ->> 'Local_label #{@field}')#{'::numeric' if integer? } < '#{@value}') AND properties ->> '#{@field}' != '' ")
       when 'less_or_equal'
         properties_result = client_enrollments.where("(properties ->> '#{@field}')#{ '::numeric' if integer? } <= '#{@value}' AND properties ->> '#{@field}' != '' ")
       when 'greater'

app/controllers/client_enrollments_controller.rb

@@ -51,6 +51,7 @@ def show
 
   def create
     @client_enrollment = @client.client_enrollments.new(client_enrollment_params)
+    binding.pry
     authorize(@client) && authorize(@client_enrollment)
     if @client_enrollment.save
       redirect_to client_client_enrolled_program_path(@client, @client_enrollment, program_stream_id: @program_stream), notice: t('.successfully_created')

app/helpers/client_enrollment_helper.rb

@@ -76,4 +76,13 @@ def client_enrollment_destroy_link
       end
     end
   end
+
+  def field_label(props, index = nil)
+    label = props['label']
+    field_name = index.nil? ? "local_label" : "local_label_#{index}"
+    if I18n.locale.to_s != I18n.default_locale.to_s
+      label = props[field_name]
+    end
+    label
+  end
 end

app/helpers/custom_field_properties_helper.rb

@@ -57,6 +57,10 @@ def remove_field_prop_unicode(field_props)
     field = field_props['label'].gsub(/\&gt\;|\&lt\;|\&amp\;|\"/, '&lt;' => '<', '&gt;' => '>', '&amp;' => '&', '"' => '%22')
   end
 
+  def remove_local_field_prop_unicode(field_props, index)
+    field = field_props["local_label_#{index}"].gsub(/\&gt\;|\&lt\;|\&amp\;|\"/, '&lt;' => '<', '&gt;' => '>', '&amp;' => '&', '"' => '%22')
+  end
+
   def mapping_custom_field_values(field_props)
     field_props['values'].map do |f|
       [format_placeholder(f['label']).blank? ? f['label'] : format_placeholder(f['label']), f['label'], id: "custom_field_property_properties_#{field_props['label'].gsub('"', '&qoute;').html_safe}_#{f['label'].html_safe}"]

app/validators/custom_form_present_validator.rb

@@ -7,8 +7,8 @@ def initialize(record,table_name,field)
 
   def validate
     return unless @record.properties.present?
-    @record.send(@table_name).send(@field).each do |field|
-      field_label = field['label']
+    @record.send(@table_name).send(@field).each_with_index do |field, index|
+      field_label = I18n.locale.to_s == I18n.default_locale.to_s ? field['label'] : field["local_label_#{index + 1}"]
       next unless field['required'] && (@record.properties[field_label].blank? || @record.properties[field_label][0].blank?)
       @record.errors.add(field_label, I18n.t('cannot_be_blank')) if field['type'] != 'file'
     end

app/views/client_enrollments/_form.haml

@@ -23,12 +23,12 @@
         = f.error :enrollment_date
 
     = f.simple_fields_for :properties, OpenStruct.new(@client_enrollment.properties) do |prop_f|
-      - @program_stream.enrollment.each do |enrollment|
+      - @program_stream.enrollment.each_with_index do |enrollment, index|
         .row
           .col-xs-12{ class: enrollment['type'] == 'paragraph' ? '' : 'col-md-6' }
             - enrollment['label'] = convert_bracket(enrollment['label'])
             - unless enrollment['type'] == 'file'
-              = render "/shared/fields/#{enrollment['type'].underscore}", f: prop_f, field_props: enrollment, errors: @client_enrollment.errors.messages, entity: f
+              = render "/shared/fields/#{enrollment['type'].underscore}", f: prop_f, field_props: enrollment, errors: @client_enrollment.errors.messages, entity: f, index: index + 1
             - else
               = f.simple_fields_for :form_builder_attachments, @attachments.file_by_name(enrollment['label']) ||  @attachments.build do |attachment|
                 = render 'shared/form_builder/attachment', f: attachment, property: enrollment, entity: f, resource: @client_enrollment

app/views/shared/fields/_select.haml

@@ -1,8 +1,10 @@
-%div{ class: "form-group #{field_with(field_props['label'],errors)}" }
+- label = field_label(field_props, index)
+%div{ class: "form-group #{field_with(label,errors)}" }
   %label.control-label{ class: required?(field_props['required'] || false) }
     %abbr{ title: 'required' }= '*' if field_props['required'] || false
-    = field_props['label'].gsub('[', '[').gsub(']', ']').html_safe
+    = label.gsub('[', '[').gsub(']', ']').html_safe
 
-  = f.input field_props['label'], collection: field_props['values'].map { |f| [format_placeholder(f['label']), f['label'], id: "custom_field_property_properties_#{field_props['label'].gsub('"', '&qoute;').html_safe}_#{f['label'].html_safe}"] }, required: (field_props['required'] || false), input_html: { id: field_props['label'].gsub("'", ""), class: field_props['ClassName'], multiple: field_props['multiple'].present?, name: "#{f.object_name}[#{remove_field_prop_unicode(field_props)}][]", placeholder: format_placeholder(field_props['placeholder']) }, label: false
+  = f.input field_props['label'].gsub(' ', '_'), collection: field_props['values'].map { |f| [format_placeholder(f['label']), f['label'].gsub(' ', '_'), id: "custom_field_property_properties_#{field_props['label'].gsub('"', '&qoute;').html_safe}_#{f['label'].html_safe}", 'data-value': f['local_label']] }, required: (field_props['required'] || false), input_html: { id: field_props['label'].gsub(' ', '_').gsub("'", ""), class: field_props['ClassName'], multiple: field_props['multiple'].present?, name: "#{f.object_name}[#{remove_field_prop_unicode(field_props)}][]", placeholder: format_placeholder(field_props['placeholder']), 'data-label': field_props["local_label_#{index}"].gsub(' ', '_').gsub("'", "") }, label: false
+  = f.input field_props["local_label_#{index}"].gsub(' ', '_'), collection: field_props['values'].map { |f| [format_placeholder(f['local_label']), f['local_label'], id: "custom_field_property_properties_#{field_props["local_label_#{index}"].gsub('"', '&qoute;').html_safe}_#{f['local_label'].html_safe}", 'data-value': f['label']] }, required: (field_props['required'] || false), input_html: { id: field_props["local_label_#{index}"].gsub(' ', '_').gsub("'", ""), class: "field_props['ClassName'] d-none", multiple: field_props['multiple'].present?, name: "#{f.object_name}[Local_label #{remove_local_field_prop_unicode(field_props, index)}][]", placeholder: format_placeholder(field_props['placeholder']), 'data-label': field_props["label"].gsub(' ', '_').gsub("'", "") }, label: false
   %span.help-block
-    = field_message(field_props['label'], errors)
+    = field_message(label, errors)

config/environments/development.rb

@@ -1,5 +1,4 @@
 Rails.application.configure do
-  config.assets.js_compressor = :terser
   # Settings specified here will take precedence over those in config/application.rb.
 
   # In the development environment your application's code is reloaded on