avo 2.9.1.pre2 → 2.9.1.pre3

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

@@ -1,15 +1,18 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
-  <div data-controller="date-field">
+  <%= 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 %>
     <%= @form.datetime_field @field.id,
+      value: @field.edit_formatted_value,
       class: classes("w-full"),
       data: {
         'date-field-target': 'input',
-        'first-day-of-week': @field.first_day_of_week,
-        'picker-format': @field.picker_format,
-        '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)
@@ -18,5 +21,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,8 +2,6 @@ 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))
@@ -12,50 +10,99 @@ function universalTimestamp(timestampStr) {
 export default class extends Controller {
   static targets = ['input']
 
+  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,
     }
-    const enableTime = castBoolean(this.inputTarget.dataset.enableTime)
 
     // Set the format of the displayed input field.
-    options.altFormat = this.inputTarget.dataset.pickerFormat
+    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.inputTarget, options)
   }
 }

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_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.to_formatted_s(:db)
       end
 
       def fill_field(model, key, value, params)
@@ -32,7 +36,7 @@ module Avo
 
         return model if value.blank?
 
-        model[id] = value.to_time.in_time_zone(Rails.application.config.time_zone)
+        model[id] = value.in_time_zone(timezone)
 
         model
       end

data/lib/avo/version.rb

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