Merge pull request #8718 from tchak/feat-old-browsers-datetime

fix(datetime): improuve datetime field on old browsers

app/components/editable_champ/datetime_component/datetime_component.html.haml

@@ -1,2 +1,2 @@
 .datetime
-  = @form.datetime_field(:value, value: formatted_value_for_datetime_locale, id: @champ.input_id, aria: { describedby: @champ.describedby_id })
+  = @form.datetime_field(:value, value: formatted_value_for_datetime_locale, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: { controller: 'datetime' })

app/components/editable_champ/editable_champ_component/editable_champ_component.en.yml

@@ -0,0 +1,4 @@
+---
+en:
+  titre_identite_notice: National identity card (front side only), passport, residency permit or other proof of identity.
+  datetime_notice: "Expected format : dd/mm/yyyy hh:mm"

app/components/editable_champ/editable_champ_component/editable_champ_component.fr.yml

@@ -0,0 +1,4 @@
+---
+fr:
+  titre_identite_notice: Carte nationale d’identité (uniquement le recto), passeport, titre de séjour ou autre justificatif d’identité.
+  datetime_notice: "Format attendu : jj/mm/aaaa hh:mm"

app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml

@@ -6,8 +6,10 @@
 
   - elsif has_label?(@champ)
     = render EditableChamp::ChampLabelComponent.new form: @form, champ: @champ, seen_at: @seen_at
-  - if @champ.type_champ == "titre_identite"
+  - if @champ.titre_identite?
-    %p.notice  Carte nationale d’identité (uniquement le recto), passeport, titre de séjour ou autre justificatif d’identité.
+    %p.notice= t('.titre_identite_notice')
+  - elsif @champ.datetime?
+    %p.notice= t('.datetime_notice')
 
   = @form.hidden_field :id, value: @champ.id
   = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at)

app/javascript/controllers/datetime_controller.ts

@@ -0,0 +1,25 @@
+import format from 'date-fns/format';
+
+import { ApplicationController } from './application_controller';
+
+export class DatetimeController extends ApplicationController {
+  #isSupported = isDateTimeSupported();
+
+  connect() {
+    if (!this.#isSupported) {
+      const value = this.element.getAttribute('value');
+      if (value) {
+        const date = new Date(value);
+        this.element.setAttribute('value', format(date, `dd/MM/yyyy HH:mm`));
+      }
+    }
+  }
+}
+
+function isDateTimeSupported() {
+  const input = document.createElement('input');
+  const value = 'a';
+  input.setAttribute('type', 'datetime-local');
+  input.setAttribute('value', value);
+  return input.value !== value;
+}

app/models/champ.rb

@@ -68,6 +68,7 @@ class Champ < ApplicationRecord
     :rna?,
     :siret?,
     :carte?,
+    :datetime?,
     :stable_id,
     :mandatory?,
     :prefillable?,

app/models/type_de_champ.rb

@@ -388,6 +388,10 @@ class TypeDeChamp < ApplicationRecord
     type_champ == TypeDeChamp.type_champs.fetch(:mesri)
   end
 
+  def datetime?
+    type_champ == TypeDeChamp.type_champs.fetch(:datetime)
+  end
+
   def public?
     !private?
   end

package.json

@@ -21,6 +21,7 @@
     "@tmcw/togeojson": "^5.2.2",
     "chartkick": "^4.2.0",
     "core-js": "^3.27.1",
+    "date-fns": "^2.29.3",
     "debounce": "^1.2.1",
     "dom4": "^2.1.6",
     "email-butler": "^1.0.13",

yarn.lock

@@ -1989,6 +1989,11 @@ date-fns@>=2.0.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"