From e950335455fad08cebd3b59a5379bf908a94c35b Mon Sep 17 00:00:00 2001
From: bunhok <bunhok@web-essentials.co>
Date: Mon, 22 Aug 2022 18:17:30 +0700
Subject: [PATCH] [FEATURE] Translate form builder

refs OSC-17
---
 .../javascripts/custom_form_builder.coffee    | 16 +++-
 .../javascripts/program_streams/form.coffee   | 77 +++++++++++++++++--
 app/assets/stylesheets/application.scss       |  2 +-
 .../stylesheets/program_streams/form.scss     |  8 ++
 config/environments/development.rb            |  1 -
 5 files changed, 94 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/custom_form_builder.coffee b/app/assets/javascripts/custom_form_builder.coffee
index ac96e09989..b7ba7fe8e1 100644
--- a/app/assets/javascripts/custom_form_builder.coffee
+++ b/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)
diff --git a/app/assets/javascripts/program_streams/form.coffee b/app/assets/javascripts/program_streams/form.coffee
index 9dd308f636..c35a369c02 100644
--- a/app/assets/javascripts/program_streams/form.coffee
+++ b/app/assets/javascripts/program_streams/form.coffee
@@ -42,6 +42,8 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
     _filterSelecting()
     _selectServiceTypeTableResult()
     _handleTimeOfFrequencyInput()
+    elements = ['#enrollment', '#exit-program']
+    _initMultipleFormBuilder(0, elements)
 
   _initDataTable = ->
     $('.custom-field-table').each ->
@@ -249,7 +251,7 @@ 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, [])
       _editTrackingFormName()
       _handleRemoveCocoon()
       _initSelect2TimeOfFrequency()
@@ -259,6 +261,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 +347,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']")
@@ -441,7 +503,7 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
   _handleInitProgramFields = ->
     for element in $('#enrollment, #exit-program')
       dataElement = JSON.parse($(element).children('span').text())
-      _initProgramBuilder($(element), (dataElement || []))
+      # _initProgramBuilder($(element), (dataElement || []))
 
       if element.id == 'enrollment' and $('#program_stream_id').val() != ''
         _preventRemoveField(ENROLLMENT_URL, '#enrollment')
@@ -451,7 +513,7 @@ CIF.Program_streamsNew = CIF.Program_streamsEdit = CIF.Program_streamsCreate = C
     trackings = $('.tracking-builder')
     for tracking in trackings
       trackingValue = JSON.parse($(tracking).children('span').text())
-      _initProgramBuilder(tracking, (trackingValue || []))
+      # _initProgramBuilder(tracking, (trackingValue || []))
     _preventRemoveField(TRACKING_URL, '') if $('#program_stream_id').val() != ''
 
   _initButtonSave = ->
@@ -465,10 +527,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)
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8afb193915..17269cfafc 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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/*";
\ No newline at end of file
diff --git a/app/assets/stylesheets/program_streams/form.scss b/app/assets/stylesheets/program_streams/form.scss
index cce4825f3f..0db11c74b7 100644
--- a/app/assets/stylesheets/program_streams/form.scss
+++ b/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; }
+      }
+    }
+  }
 }
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 26716f2f75..3fa31dcc86 100644
--- a/config/environments/development.rb
+++ b/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