avo 2.9.1.pre5 → 2.9.2.pre1

data/app/components/avo/fields/date_field/edit_component.html.erb

@@ -6,7 +6,6 @@
         'date-field-target': 'input',
         'first-day-of-week': @field.first_day_of_week,
         'picker-format': @field.picker_format,
-        'disable-mobile': @field.disable_mobile,
         'enable-time': false,
         format: @field.format,
         placeholder: @field.placeholder,

data/app/components/avo/fields/date_time_field/edit_component.html.erb

@@ -1,16 +1,31 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
-  <div data-controller="date-field">
-    <%= @form.datetime_field @field.id,
+  <%= content_tag :div, data: {
+      controller: "date-field",
+      date_field_view_value: @view,
+      date_field_enable_time_value: true,
+      date_field_picker_format_value: @field.picker_format,
+      date_field_first_day_of_week_value: @field.first_day_of_week,
+      date_field_time24_hr_value: @field.time_24hr,
+      date_field_timezone_value: @field.timezone,
+  } do %>
+    <%= datetime_field "fake_#{@field.id}", "fake",
+      value: @field.edit_formatted_value,
       class: classes("w-full"),
+      data: {
+        'date-field-target': 'fakeInput',
+        placeholder: @field.placeholder,
+        relative: @field.relative,
+        **@field.get_html(:data, view: view, element: :input)
+      },
+      disabled: @field.readonly,
+      placeholder: @field.placeholder,
+      style: @field.get_html(:style, view: view, element: :input)
+    %>
+    <%= @form.text_field @field.id,
+      value: @field.edit_formatted_value,
+      class: classes("w-full hidden"),
       data: {
         'date-field-target': 'input',
-        'first-day-of-week': @field.first_day_of_week,
-        'picker-format': @field.picker_format,
-        'disable-mobile': @field.disable_mobile,
-        'enable-time': true,
-        time24hr: @field.time_24hr,
-        timezone: @field.timezone,
-        format: @field.format,
         placeholder: @field.placeholder,
         relative: @field.relative,
         **@field.get_html(:data, view: view, element: :input)
@@ -19,5 +34,5 @@
       placeholder: @field.placeholder,
       style: @field.get_html(:style, view: view, element: :input)
     %>
-  </div>
+  <% end %>
 <% end %>

data/app/components/avo/fields/date_time_field/index_component.html.erb

@@ -1,3 +1,11 @@
 <%= index_field_wrapper field: @field, resource: @resource do %>
-  <%= @field.formatted_value %>
+   <%= content_tag :div, data: {
+    controller: "date-field",
+    date_field_view_value: @view,
+    date_field_format_value: @field.format,
+    date_field_timezone_value: @field.timezone,
+    date_field_picker_format_value: @field.picker_format,
+  } do %>
+    <%= @field.formatted_value %>
+  <% end %>
 <% end %>

data/app/components/avo/fields/date_time_field/show_component.html.erb

@@ -1,3 +1,11 @@
 <%= show_field_wrapper field: @field, resource: @resource, index: @index do %>
-  <%= @field.formatted_value %>
+  <%= content_tag :div, data: {
+    controller: "date-field",
+    date_field_view_value: @view,
+    date_field_format_value: @field.format,
+    date_field_timezone_value: @field.timezone,
+    date_field_picker_format_value: @field.picker_format,
+  } do %>
+    <%= @field.formatted_value %>
+  <% end %>
 <% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -32,7 +32,7 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   # The save button is dependent on the edit? policy method.
   # The update? method should be called only when the user clicks the Save button so the developer gets access to the params from the form.
   def can_see_the_save_button?
-    @resource.authorization.authorize_action @view, raise_exception: false
+    @resource.authorization.authorize_action :edit, raise_exception: false
   end
 
   private

data/app/javascript/js/controllers/fields/date_field_controller.js

@@ -2,63 +2,125 @@ import { Controller } from '@hotwired/stimulus'
 import { DateTime } from 'luxon'
 import flatpickr from 'flatpickr'
 
-import { castBoolean } from '../../helpers/cast_boolean'
-
 // Get the DateTime with the TZ offset applied.
 function universalTimestamp(timestampStr) {
   return new Date(new Date(timestampStr).getTime() + (new Date(timestampStr).getTimezoneOffset() * 60 * 1000))
 }
 
 export default class extends Controller {
-  static targets = ['input']
+  static targets = ['input', 'fakeInput']
+
+  static values = {
+    view: String,
+    timezone: String,
+    format: String,
+    enableTime: Boolean,
+    pickerFormat: String,
+    firstDayOfWeek: Number,
+    time24Hr: Boolean,
+  }
+
+  get browserZone() {
+    const time = DateTime.local()
+
+    return time.zoneName
+  }
+
+  get initialValue() {
+    if (this.isOnShow || this.isOnIndex) {
+      return this.context.element.innerText
+    } if (this.isOnEdit) {
+      return this.inputTarget.value
+    }
+
+    return null
+  }
+
+  get isOnIndex() {
+    return this.viewValue === 'index'
+  }
+
+  get isOnEdit() {
+    return this.viewValue === 'edit'
+  }
+
+  get isOnShow() {
+    return this.viewValue === 'show'
+  }
+
+  // Parse the time as if it were UTC
+  get parsedValue() {
+    return DateTime.fromISO(this.initialValue, { zone: 'UTC' })
+  }
+
+  get displayTimezone() {
+    return this.timezoneValue || this.browserZone
+  }
 
   connect() {
+    if (this.isOnShow || this.isOnIndex) {
+      this.initShow()
+    } else if (this.isOnEdit) {
+      this.initEdit()
+    }
+  }
+
+  // Turns the value in the controller wrapper into the timezone of the browser
+  initShow() {
+    this.context.element.innerText = this.parsedValue.setZone(this.displayTimezone).toFormat(this.formatValue)
+  }
+
+  initEdit() {
     const options = {
       enableTime: false,
       enableSeconds: false,
       // eslint-disable-next-line camelcase
-      time_24hr: false,
+      time_24hr: this.time24HrValue,
       locale: {
         firstDayOfWeek: 0,
       },
       altInput: true,
+      onChange: this.onChange.bind(this),
     }
-    const enableTime = castBoolean(this.inputTarget.dataset.enableTime)
 
     // Set the format of the displayed input field.
-    options.altFormat = this.inputTarget.dataset.pickerFormat
-
-    // Disable native input in mobile browsers
-    options.disableMobile = this.inputTarget.dataset.disableMobile
+    options.altFormat = this.pickerFormatValue
 
     // Set first day of the week.
-    options.locale.firstDayOfWeek = this.inputTarget.dataset.firstDayOfWeek
+    options.locale.firstDayOfWeek = this.firstDayOfWeekValue
 
     // Enable time if needed.
-    options.enableTime = enableTime
-    options.enableSeconds = enableTime
-
-    let currentValue
+    options.enableTime = this.enableTimeValue
+    options.enableSeconds = this.enableTimeValue
 
     // enable timezone display
-    if (enableTime) {
-      currentValue = DateTime.fromISO(this.inputTarget.value, { zone: window.Avo.configuration.timezone })
-      currentValue = currentValue.setZone(this.inputTarget.dataset.timezone)
-      currentValue = currentValue.toISO()
+    if (this.enableTimeValue) {
+      options.defaultDate = this.parsedValue.setZone(this.displayTimezone).toISO()
 
       options.dateFormat = 'Y-m-d H:i:S'
-      // eslint-disable-next-line camelcase
-      options.time_24hr = castBoolean(this.inputTarget.dataset.time24hr)
-      // this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-      options.appTimezone = this.inputTarget.dataset.timezone
     } else {
       // Because the browser treats the date like a timestamp and updates it ot 00:00 hour, when on a western timezone the date will be converted with one day offset.
       // Ex: 2022-01-30 will render as 2022-01-29 on an American timezone
-      currentValue = universalTimestamp(this.inputTarget.value)
+      options.defaultDate = universalTimestamp(this.initialValue)
     }
 
-    options.defaultDate = currentValue
+    flatpickr(this.fakeInputTarget, options)
+
+    this.updateRealInput(this.parsedValue.setZone(this.displayTimezone).toISO())
+  }
+
+  onChange(selectedDates) {
+    let time
+
+    if (this.timezoneValue) {
+      time = DateTime.fromISO(selectedDates[0].toISOString()).setZone('UTC', { keepLocalTime: true })
+    } else {
+      time = DateTime.fromISO(selectedDates[0].toISOString()).setZone('UTC', { keepLocalTime: false })
+    }
+    this.updateRealInput(time)
+  }
 
-    flatpickr(this.inputTarget, options)
+  updateRealInput(value) {
+    this.inputTarget.value = value
   }
 }

data/lib/avo/app.rb

@@ -31,12 +31,12 @@ module Avo
 
       def init(request:, context:, current_user:, root_path:, view_context:, params:)
         self.error_messages = []
+        self.request = request
         self.context = context
         self.current_user = current_user
-        self.params = params
-        self.request = request
         self.root_path = root_path
         self.view_context = view_context
+        self.params = params
 
         self.license = Licensing::LicenseManager.new(Licensing::HQ.new(request).response).license
         self.translation_enabled = license.has(:localization)

data/lib/avo/base_resource.rb

@@ -8,7 +8,6 @@ module Avo
     include Avo::Concerns::HasModel
     include Avo::Concerns::HasFields
     include Avo::Concerns::HasStimulusControllers
-    include Avo::Concerns::ModelClassConstantized
 
     delegate :view_context, to: ::Avo::App
     delegate :simple_format, :content_tag, to: :view_context
@@ -30,6 +29,7 @@ module Avo
     class_attribute :search_query, default: nil
     class_attribute :search_query_help, default: ""
     class_attribute :includes, default: []
+    class_attribute :model_class
     class_attribute :translation_key
     class_attribute :default_view_type, default: :table
     class_attribute :devise_password_optional, default: false

data/lib/avo/concerns/handles_field_args.rb

@@ -28,7 +28,7 @@ module Avo
         add_prop_from_args args, name: name, default: default, type: :array
       end
 
-      def add_string_prop(args, name, default = [])
+      def add_string_prop(args, name, default = nil)
         add_prop_from_args args, name: name, default: default, type: :string
       end
     end

data/lib/avo/fields/date_field.rb

@@ -3,7 +3,6 @@ module Avo
     class DateField < TextField
       attr_reader :first_day_of_week
       attr_reader :picker_format
-      attr_reader :disable_mobile
       attr_reader :format
       attr_reader :relative
 
@@ -14,7 +13,6 @@ module Avo
         @picker_format = args[:picker_format].present? ? args[:picker_format] : "Y-m-d"
         @format = args[:format].present? ? args[:format] : :long
         @relative = args[:relative].present? ? args[:relative] : false
-        @disable_mobile = args[:disable_mobile].present? ? args[:disable_mobile] : false
       end
 
       def formatted_value

data/lib/avo/fields/date_time_field.rb

@@ -2,25 +2,29 @@ module Avo
   module Fields
     class DateTimeField < DateField
       attr_reader :format
+      attr_reader :picker_format
       attr_reader :time_24hr
       attr_reader :timezone
 
       def initialize(id, **args, &block)
         super(id, **args, &block)
 
-        @picker_format = args[:picker_format].present? ? args[:picker_format] : "Y-m-d H:i:S"
-        @time_24hr = args[:time_24hr].present? ? args[:time_24hr] : false
-        @timezone = args[:timezone].present? ? args[:timezone] : Rails.application.config.time_zone
+        add_boolean_prop args, :time_24hr
+        add_string_prop args, :picker_format, "Y-m-d H:i:S"
+        add_string_prop args, :format, "yyyy-LL-dd TT"
+        add_string_prop args, :timezone
       end
 
       def formatted_value
         return nil if value.nil?
 
-        if @format.is_a?(Symbol)
-          value.to_time.in_time_zone(timezone).to_formatted_s(@format)
-        else
-          value.to_time.in_time_zone(timezone).strftime(@format)
-        end
+        value.utc.to_time.iso8601
+      end
+
+      def edit_formatted_value
+        return nil if value.nil?
+
+        value.utc.iso8601
       end
 
       def fill_field(model, key, value, params)
@@ -32,10 +36,18 @@ module Avo
 
         return model if value.blank?
 
-        model[id] = value.to_time.in_time_zone(Rails.application.config.time_zone)
+        model[id] = utc_time(value)
 
         model
       end
+
+      def utc_time(value)
+        if timezone.present?
+          ActiveSupport::TimeZone.new(timezone).local_to_utc(Time.parse(value))
+        else
+          value
+        end
+      end
     end
   end
 end

data/lib/avo/menu/builder.rb

@@ -5,13 +5,6 @@ class Avo::Menu::Builder
     end
   end
 
-  delegate :context, to: Avo::App
-  delegate :current_user, to: Avo::App
-  delegate :params, to: Avo::App
-  delegate :request, to: Avo::App
-  delegate :root_path, to: Avo::App
-  delegate :view_context, to: Avo::App
-
   def initialize(name: nil, items: [])
     @menu = Avo::Menu::Menu.new
 
@@ -75,4 +68,10 @@ class Avo::Menu::Builder
   def build
     @menu
   end
+
+  protected
+
+  def root_path
+    Avo::App.root_path
+  end
 end

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "2.9.1.pre5" unless const_defined?(:VERSION)
+  VERSION = "2.9.2.pre1" unless const_defined?(:VERSION)
 end