Upgrade date picker

.github/workflows/frontend.yaml

@@ -17,7 +17,7 @@ permissions:
     contents: read
 
 jobs:
-    webpack-encore:
+    build:
         name: Webpack Encore
 
         runs-on: ubuntu-latest
@@ -48,3 +48,23 @@ jobs:
 
             - name: Check if the compilation is up to date
               run: git diff --no-patch --exit-code
+
+    test:
+        name: Vitest
+
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Install Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '18'
+
+            - name: Install NPM dependencies
+              uses: bahmutov/npm-install@v1
+
+            - name: Run Vitest
+              run: npx vitest run --coverage

assets/js/app.js

@@ -10,14 +10,9 @@
 // Any SCSS/CSS you require will output into a single css file (app.css in this case)
 import '../scss/app.scss';
 
-import moment from 'moment';
+// eslint-disable-next-line import/no-unresolved, import/no-webpack-loader-syntax
+import DatePicker from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!./controllers/datepicker_controller.js';
 
-// Eonasdan Bootstrap DateTimePicker in its version 3 does not
-// provide the scss or plain css, it only provides the less version
-// of its source files, that's why it is not included it via npm.
-import '../vendor/bootstrap-datetimepicker';
+const { sonataApplication } = global;
 
-// Create global moment variable to be used by the locale script.
-// It expects moment to be available on the global scope
-// in order to define the requested locale translations
-global.moment = moment;
+sonataApplication.register('datepicker', DatePicker);

assets/js/controllers/datepicker_controller.js

@@ -0,0 +1,141 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Controller } from '@hotwired/stimulus';
+import { TempusDominus, Namespace, loadLocale } from '@eonasdan/tempus-dominus';
+import { faFiveIcons } from '@eonasdan/tempus-dominus/dist/plugins/fa-five';
+
+export default class extends Controller {
+  static outlets = ['datepicker'];
+
+  static values = {
+    options: Object,
+  };
+
+  #allowedLocales = [
+    'ar',
+    'ar-SA',
+    'de',
+    'es',
+    'fi',
+    'fr',
+    'it',
+    'nl',
+    'pl',
+    'ro',
+    'ru',
+    'sl',
+    'tr',
+  ];
+
+  datePicker = null;
+
+  connect() {
+    const options = this.processOptions();
+    const locale = this.processLocale(options);
+
+    this.dispatchEvent('pre-connect', { options, locale });
+
+    this.datePicker = new TempusDominus(this.element, options);
+
+    if (locale !== null) {
+      import(`@eonasdan/tempus-dominus/dist/locales/${locale}`).then((data) => {
+        loadLocale(data);
+
+        this.datePicker.locale(data.name);
+        this.datePicker.updateOptions(options);
+
+        this.dispatchEvent('post-connect-changed-locale');
+      });
+    }
+
+    this.dispatchEvent('connect', { datePicker: this.datePicker });
+  }
+
+  datepickerOutletConnected(outlet, element) {
+    this.element.addEventListener(Namespace.events.change, (event) => {
+      outlet.datePicker.updateOptions({
+        restrictions: {
+          minDate: event.detail.date,
+        },
+      });
+    });
+
+    element.addEventListener(Namespace.events.change, (event) => {
+      this.datePicker.updateOptions({
+        restrictions: {
+          maxDate: event.detail.date,
+        },
+      });
+    });
+  }
+
+  processOptions() {
+    const options = this.optionsValue;
+    const { restrictions = {}, display = {} } = options;
+
+    if (options?.defaultDate) {
+      options.defaultDate = new Date(options.defaultDate);
+    }
+
+    if (options?.viewDate) {
+      options.viewDate = new Date(options.viewDate);
+    }
+
+    if (restrictions?.minDate) {
+      restrictions.minDate = new Date(restrictions.minDate);
+    }
+
+    if (restrictions?.maxDate) {
+      restrictions.maxDate = new Date(restrictions.maxDate);
+    }
+
+    if (restrictions?.disabledDates) {
+      restrictions.disabledDates = restrictions.disabledDates.map((date) => new Date(date));
+    }
+
+    if (restrictions?.enabledDates) {
+      restrictions.enabledDates = restrictions.enabledDates.map((date) => new Date(date));
+    }
+
+    if (!display?.icons) {
+      display.icons = faFiveIcons;
+    }
+
+    return options;
+  }
+
+  processLocale(options) {
+    const { localization: { locale } = {} } = options;
+
+    if (!locale) {
+      return null;
+    }
+
+    if (this.#allowedLocales.includes(locale)) {
+      return locale;
+    }
+
+    if (!locale.includes('-')) {
+      return null;
+    }
+
+    const localeCode = locale.split('-')[0];
+
+    if (this.#allowedLocales.includes(localeCode)) {
+      return localeCode;
+    }
+
+    return null;
+  }
+
+  dispatchEvent(name, payload) {
+    this.dispatch(name, { detail: payload, prefix: 'datepicker' });
+  }
+}