Merge pull request #393 from 3pns/themes_localization

Themes localization
bullet-train-co · Aug 16, 2023 · bd29210 · bd29210
2 parents 880d9f9 + 2a86562
commit bd29210
Show file tree

Hide file tree

Showing 16 changed files with 256 additions and 65 deletions.
diff --git a/bullet_train-api/app/controllers/account/platform/access_tokens_controller.rb b/bullet_train-api/app/controllers/account/platform/access_tokens_controller.rb
@@ -70,7 +70,6 @@ def destroy
   include strong_parameters_from_api
 
   def process_params(strong_params)
-    assign_date_and_time(strong_params, :last_used_at)
     # 🚅 super scaffolding will insert processing for new fields above this line.
   end
 end
diff --git a/bullet_train-fields/app/controllers/concerns/fields/date_and_time_support.rb b/bullet_train-fields/app/controllers/concerns/fields/date_and_time_support.rb
@@ -2,12 +2,22 @@ module Fields::DateAndTimeSupport
   extend ActiveSupport::Concern
 
   def assign_date_and_time(strong_params, attribute)
+    deprecator = ActiveSupport::Deprecation.new("2.0", "BulletTrain::Fields")
+    deprecator.deprecation_warning(
+      "assign_date_and_time",
+      "Please assign an ISO8601 datetime string as form field value instead and remove all assign_date_and_time assignments,
+      see https://ruby-doc.org/3.2.2/exts/date/DateTime.html"
+    )
     attribute = attribute.to_s
     time_zone_attribute = "#{attribute}_time_zone"
     if strong_params.dig(attribute).present?
-      time_zone = ActiveSupport::TimeZone.new(strong_params[time_zone_attribute] || current_team.time_zone)
-      strong_params.delete(time_zone_attribute)
-      strong_params[attribute] = time_zone.strptime(strong_params[attribute], t("global.formats.date_and_time"))
+      begin
+        strong_params[attribute] = DateTime.iso8601(strong_params[attribute])
+      rescue ArgumentError
+        time_zone = ActiveSupport::TimeZone.new(strong_params[time_zone_attribute] || current_team.time_zone)
+        strong_params.delete(time_zone_attribute)
+        strong_params[attribute] = time_zone.strptime(strong_params[attribute], t("global.formats.date_and_time"))
+      end
     end
   end
 end
diff --git a/bullet_train-fields/app/controllers/concerns/fields/date_support.rb b/bullet_train-fields/app/controllers/concerns/fields/date_support.rb
@@ -2,11 +2,21 @@ module Fields::DateSupport
   extend ActiveSupport::Concern
 
   def assign_date(strong_params, attribute)
+    deprecator = ActiveSupport::Deprecation.new("2.0", "BulletTrain::Fields")
+    deprecator.deprecation_warning(
+      "assign_date",
+      "Please assign an ISO8601 date string as field value instead and remove all assign_date assignments,
+      see https://ruby-doc.org/3.2.2/exts/date/Date.html"
+    )
     attribute = attribute.to_s
     if strong_params.dig(attribute).present?
-      parsed_value = Chronic.parse(strong_params[attribute])
-      return nil unless parsed_value
-      strong_params[attribute] = parsed_value.to_date
+      begin
+        strong_params[attribute] = Date.iso8601(strong_params[attribute])
+      rescue ArgumentError
+        parsed_value = Chronic.parse(strong_params[attribute])
+        return nil unless parsed_value
+        strong_params[attribute] = parsed_value.to_date
+      end
     end
   end
 end
diff --git a/bullet_train-fields/app/javascript/controllers/fields/date_controller.js b/bullet_train-fields/app/javascript/controllers/fields/date_controller.js
@@ -3,14 +3,18 @@ require("daterangepicker/daterangepicker.css");
 
 // requires jQuery, moment, might want to consider a vanilla JS alternative
 import 'daterangepicker';
+import moment from 'moment-timezone'
 
 export default class extends Controller {
-  static targets = [ "field", "clearButton", "currentTimeZoneWrapper", "timeZoneButtons", "timeZoneSelectWrapper", "timeZoneField" ]
+  static targets = [ "field", "displayField", "clearButton", "currentTimeZoneWrapper", "timeZoneButtons", "timeZoneSelectWrapper", "timeZoneField", "timeZoneSelect" ]
   static values = {
     includeTime: Boolean,
     defaultTimeZones: Array,
-    cancelButtonLabel: { type: String, default: "Cancel" },
-    applyButtonLabel: { type: String, default: "Apply" }
+    dateFormat: String,
+    timeFormat: String,
+    currentTimeZone: String,
+    isAmPm: Boolean,
+    pickerLocale: { type: Object, default: {} }
   }
 
   connect() {
@@ -26,13 +30,33 @@ export default class extends Controller {
     event.preventDefault()
 
     $(this.fieldTarget).val('')
+    $(this.displayFieldTarget).val('')
+  }
+
+  currentTimeZone(){
+    return (
+      ( this.hasTimeZoneSelectWrapperTarget && $(this.timeZoneSelectWrapperTarget).is(":visible") && this.timeZoneSelectTarget.value ) ||
+      ( this.hasTimeZoneFieldTarget && this.timeZoneFieldTarget.value ) ||
+        this.currentTimeZoneValue
+    )
   }
 
   applyDateToField(event, picker) {
-    const format = this.includeTimeValue ? 'MM/DD/YYYY h:mm A' : 'MM/DD/YYYY'
-    $(this.fieldTarget).val(picker.startDate.format(format))
+    const format = this.includeTimeValue ? this.timeFormatValue : this.dateFormatValue
+    const newTimeZone = this.currentTimeZone()
+    const momentVal = (
+      picker ?
+      moment(picker.startDate.toISOString()).tz(newTimeZone, true) :
+      moment.tz(moment(this.fieldTarget.value, "YYYY-MM-DDTHH:mm").format("YYYY-MM-DDTHH:mm"), newTimeZone) 
+    )
+    const displayVal = momentVal.format(format)
+    const dataVal = this.includeTimeValue ? momentVal.toISOString(true) : momentVal.format('YYYY-MM-DD')
+    $(this.displayFieldTarget).val(displayVal)
+    $(this.fieldTarget).val(dataVal)
     // bubble up a change event when the input is updated for other listeners
-    this.fieldTarget.dispatchEvent(new CustomEvent('change', { detail: { picker: picker }}))
+    if(picker){
+      this.displayFieldTarget.dispatchEvent(new CustomEvent('change', { detail: { picker: picker }}))
+    }
   }
 
   showTimeZoneButtons(event) {
@@ -43,15 +67,18 @@ export default class extends Controller {
     $(this.timeZoneButtonsTarget).toggleClass('hidden')
   }
 
+  // triggered on other click from the timezone buttons
   showTimeZoneSelectWrapper(event) {
     // don't follow the anchor
     event.preventDefault()
 
     $(this.timeZoneButtonsTarget).toggleClass('hidden')
-
     if (this.hasTimeZoneSelectWrapperTarget) {
       $(this.timeZoneSelectWrapperTarget).toggleClass('hidden')
     }
+    if(!["", null].includes(this.fieldTarget.value)){
+      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+    }
   }
 
   resetTimeZoneUI(e) {
@@ -65,39 +92,70 @@ export default class extends Controller {
     }
   }
 
+  // triggered on selecting a new timezone using the buttons
   setTimeZone(event) {
     // don't follow the anchor
     event.preventDefault()
-
     const currentTimeZoneEl = this.currentTimeZoneWrapperTarget.querySelector('a')
-    const {value} = event.target.dataset
-
-    $(this.timeZoneFieldTarget).val(value)
-    $(currentTimeZoneEl).text(value)
-
+    $(this.timeZoneFieldTarget).val(event.target.dataset.value)
+    $(currentTimeZoneEl).text(event.target.dataset.label)
     $('.time-zone-button').removeClass('button').addClass('button-alternative')
     $(event.target).removeClass('button-alternative').addClass('button')
+    this.resetTimeZoneUI()
+    if(!["", null].includes(this.fieldTarget.value)){
+      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+    }
+  }
+
+  // triggered on selecting a new timezone from the timezone picker
+  selectTimeZoneChange(event) {
+    if(!["", null].includes(this.fieldTarget.value)){
+      $(this.displayFieldTarget).trigger("apply.daterangepicker");
+    }
+  }
 
+  // triggered on cancel click from the timezone picker
+  cancelSelect(event) {
+    event.preventDefault()
     this.resetTimeZoneUI()
+    if(!["", null].includes(this.fieldTarget.value)){
+      $(this.displayFieldTarget).trigger("apply.daterangepicker")
+    }
+  }
+
+  displayFieldChange(event) {
+    const newTimeZone = this.currentTimeZone()
+    const format = this.includeTimeValue ? this.timeFormatValue : this.dateFormatValue
+    const momentParsed = moment(this.displayFieldTarget.value, format, false)
+    if(momentParsed.isValid()){
+      const momentVal = moment.tz(momentParsed.format("YYYY-MM-DDTHH:mm"), newTimeZone)
+      const dataVal = this.includeTimeValue ? momentVal.toISOString(true) : momentVal.format('YYYY-MM-DD')
+      $(this.fieldTarget).val(dataVal)
+    } else {
+      // nullify field value when the display format is wrong
+      $(this.fieldTarget).val("")
+    }
   }
 
   initPluginInstance() {
-    $(this.fieldTarget).daterangepicker({
+    const localeValues = this.pickerLocaleValue
+    const isAmPm = this.isAmPmValue
+    localeValues['format'] = this.includeTimeValue ? this.timeFormatValue : this.dateFormatValue
+
+    $(this.displayFieldTarget).daterangepicker({
       singleDatePicker: true,
       timePicker: this.includeTimeValue,
       timePickerIncrement: 5,
       autoUpdateInput: false,
-      locale: {
-        cancelLabel: this.cancelButtonLabelValue,
-        applyLabel: this.applyButtonLabelValue,
-        format: this.includeTimeValue ? 'MM/DD/YYYY h:mm A' : 'MM/DD/YYYY'
-      }
+      locale: localeValues,
+      timePicker24Hour: !isAmPm,
     })
 
-    $(this.fieldTarget).on('apply.daterangepicker', this.applyDateToField.bind(this))
-    $(this.fieldTarget).on('cancel.daterangepicker', this.clearDate.bind(this))
+    $(this.displayFieldTarget).on('apply.daterangepicker', this.applyDateToField.bind(this))
+    $(this.displayFieldTarget).on('cancel.daterangepicker', this.clearDate.bind(this))
+    $(this.displayFieldTarget).on('input', this,this.displayFieldChange.bind(this));
 
-    this.pluginMainEl = this.fieldTarget
+    this.pluginMainEl = this.displayFieldTarget
     this.plugin = $(this.pluginMainEl).data('daterangepicker') // weird
 
     // Init time zone select
@@ -113,7 +171,6 @@ export default class extends Controller {
       $(this.timeZoneSelect).on('change.select2', function(event) {
         const currentTimeZoneEl = self.currentTimeZoneWrapperTarget.querySelector('a')
         const {value} = event.target
-
         $(self.timeZoneFieldTarget).val(value)
         $(currentTimeZoneEl).text(value)
 
@@ -126,7 +183,6 @@ export default class extends Controller {
         } else {
           // deselect any selected button
           $('.time-zone-button').removeClass('button').addClass('button-alternative')
-
           selectedOptionTimeZoneButton.text(value)
           selectedOptionTimeZoneButton.attr('data-value', value).removeAttr('hidden')
           selectedOptionTimeZoneButton.removeClass(['hidden', 'button-alternative']).addClass('button')
@@ -139,10 +195,8 @@ export default class extends Controller {
 
   teardownPluginInstance() {
     if (this.plugin === undefined) { return }
-
     $(this.pluginMainEl).off('apply.daterangepicker')
     $(this.pluginMainEl).off('cancel.daterangepicker')
-
     // revert to original markup, remove any event listeners
     this.plugin.remove()
 

diff --git a/bullet_train-fields/package.json b/bullet_train-fields/package.json
@@ -47,6 +47,7 @@
     "cp-cli": "^2.0.0",
     "emoji-mart": "^5.1.0",
     "microbundle": "^0.13.0",
+    "moment-timezone": "^0.5.43",
     "np": "^7.6.0",
     "npm-watch": "^0.11.0",
     "rimraf": "^3.0.2",

diff --git a/bullet_train-fields/yarn.lock b/bullet_train-fields/yarn.lock
@@ -3445,6 +3445,18 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+moment-timezone@^0.5.43:
+  version "0.5.43"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.43.tgz#3dd7f3d0c67f78c23cd1906b9b2137a09b3c4790"
+  integrity sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==
+  dependencies:
+    moment "^2.29.4"
+
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 moment@^2.9.0:
   version "2.29.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"

diff --git a/...rain-outgoing_webhooks/app/controllers/account/webhooks/outgoing/deliveries_controller.rb b/...rain-outgoing_webhooks/app/controllers/account/webhooks/outgoing/deliveries_controller.rb
@@ -71,7 +71,6 @@ def delivery_params
       # 🚅 super scaffolding will insert new arrays above this line.
     )
 
-    assign_date_and_time(strong_params, :delivered_at)
     # 🚅 super scaffolding will insert processing for new fields above this line.
 
     strong_params

diff --git a/...ing/app/controllers/account/scaffolding/completely_concrete/tangible_things_controller.rb b/...ing/app/controllers/account/scaffolding/completely_concrete/tangible_things_controller.rb
@@ -68,7 +68,6 @@ def destroy
   def process_params(strong_params)
     # 🚅 skip this section when scaffolding.
     assign_boolean(strong_params, :boolean_button_value)
-    assign_date_and_time(strong_params, :date_and_time_field_value)
     assign_checkboxes(strong_params, :multiple_button_values)
     assign_checkboxes(strong_params, :multiple_option_values)
     assign_select_options(strong_params, :multiple_super_select_values)

diff --git a/...ding/app/controllers/api/v1/scaffolding/completely_concrete/tangible_things_controller.rb b/...ding/app/controllers/api/v1/scaffolding/completely_concrete/tangible_things_controller.rb
@@ -53,7 +53,6 @@ def tangible_thing_params
           :cloudinary_image_value,
           :date_field_value,
           :date_and_time_field_value,
-          :date_and_time_field_value_time_zone,
           :email_field_value,
           :file_field_value,
           :file_field_value_removal,

diff --git a/bullet_train-super_scaffolding/lib/scaffolding/transformer.rb b/bullet_train-super_scaffolding/lib/scaffolding/transformer.rb
@@ -1074,10 +1074,6 @@ def valid_#{collection_name}
         end
 
         special_processing = case type
-        when "date_field"
-          "assign_date(strong_params, :#{name})"
-        when "date_and_time_field"
-          "assign_date_and_time(strong_params, :#{name})"
         when "buttons"
           if boolean_buttons
             "assign_boolean(strong_params, :#{name})"