Progressively enhance filters form

src/assets/customElements/fairCalendarFiltersForm.js

@@ -1,55 +1,73 @@
 // @ts-check
 import { onParsed } from '../lib/customElements';
 
-export default class extends HTMLFormElement {
+export default class extends HTMLElement {
+  /** @type {HTMLFormElement} */
+  #form;
+
   connectedCallback() {
     onParsed(() => {
-      this.previousBtn.addEventListener('click', () => {
-        this.month.value = this._clipMonth(+this.month.value - 1);
+      const form = /** @type {HTMLFormElement} */ (this.querySelector('form'));
+
+      // Progressive enhancement:
+      // If this custom element activates, then we enable auto-submission and remove the manual submit button.
+      const submitBtn = /** @type {HTMLButtonElement} */ (this.querySelector('button[type="submit"]'));
+      const navigationTemplate = /** @type {HTMLTemplateElement} */ (this.querySelector('#faircalendar-filters-form-navigation'));
+      const navigation = document.importNode(navigationTemplate.content, true);
+      navigationTemplate.after(navigation);
+      submitBtn.remove();
+
+      this.#form = form;
+
+      form.previousBtn.addEventListener('click', () => {
+        this._updateMonth(+form.month.value - 1);
         this._submit();
       });
 
-      this.todayBtn.addEventListener('click', () => {
+      form.todayBtn.addEventListener('click', () => {
         const today = new Date();
-        this.month.value = today.getMonth();
-        this.year.value = today.getFullYear();
+        form.month.value = today.getMonth();
+        form.year.value = today.getFullYear();
         this._submit();
       });
 
-      this.nextBtn.addEventListener('click', () => {
-        this.month.value = this._clipMonth(+this.month.value + 1);
+      form.nextBtn.addEventListener('click', () => {
+        this._updateMonth(+form.month.value + 1);
         this._submit();
       });
 
-      this.month.addEventListener('change', () => {
+      form.month.addEventListener('change', () => {
         this._submit();
       });
 
-      this.year.addEventListener('change', () => {
+      form.year.addEventListener('change', () => {
         this._submit();
       });
 
-      this.userId.addEventListener('change', () => {
+      form.userId.addEventListener('change', () => {
         this._submit();
       });
     });
   }
 
   _submit() {
-    this.requestSubmit();
+    this.#form.requestSubmit();
   }
 
-  _clipMonth(month) {
+  /**
+   * @param {number} month
+   */
+  _updateMonth(month) {
     if (month < 0) {
       month += 12;
-      this.year.value = +this.year.value - 1;
+      this.#form.year.value = +this.#form.year.value - 1;
     }
 
     if (month > 11) {
       month -= 12;
-      this.year.value = +this.year.value + 1;
+      this.#form.year.value = +this.#form.year.value + 1;
     }
 
-    return month;
+    this.#form.month.value = month;
   }
 }

src/assets/customElements/index.js

@@ -13,9 +13,7 @@ customElements.define('pc-clipboard-button', clipboardButton, {
   extends: 'button'
 });
 customElements.define('pc-event-form', eventForm, { extends: 'form' });
-customElements.define('pc-faircalendar-filters-form', fairCalendarFiltersForm, {
-  extends: 'form'
-});
+customElements.define('pc-faircalendar-filters-form', fairCalendarFiltersForm);
 customElements.define('pc-nav-menu-button', navMenuButton, {
   extends: 'button'
 });

src/templates/pages/faircalendar/_filters_form.njk

@@ -1,37 +1,44 @@
 {% macro filters_form() %}
-    <form
-        is="pc-faircalendar-filters-form"
-        method="GET"
-        action="{{ path('faircalendar_index') }}"
-        class="pc-cluster pc-gap"
-        style="--cluster-align: flex-end"
-    >
-        <div class="pc-cluster" style="--cluster-align: stretch">
-            <button id="previousBtn" type="button" class="pc-btn pc-btn--muted" title="Mois précédent">{{ '<' }}</button>
-            <button id="todayBtn" type="button" class="pc-btn pc-btn--muted" title="Aujourd'hui">
-                {{ icons.calendar() }}
+    <pc-faircalendar-filters-form>
+        <form
+            method="GET"
+            action="{{ path('faircalendar_index') }}"
+            class="pc-cluster pc-gap"
+            style="--cluster-align: flex-end"
+        >
+            <template id="faircalendar-filters-form-navigation">
+                <div class="pc-cluster" style="--cluster-align: stretch">
+                    <button id="previousBtn" type="button" class="pc-btn pc-btn--muted" title="Mois précédent">{{ '<' }}</button>
+                    <button id="todayBtn" type="button" class="pc-btn pc-btn--muted" title="Aujourd'hui">
+                        {{ icons.calendar() }}
+                    </button>
+                    <button id="nextBtn" type="button" class="pc-btn pc-btn--muted" title="Mois suivant">{{ '>' }}</button>
+                </div>
+            </template>
+
+            <div class="pc-select-group pc-m" style="--m: 0">
+                <label class="pc-label" for="month">{{ 'faircalendar-filters-month-title'|trans }}</label>
+                <select name="month" id="month">
+                    {% for month in range(12) %}
+                        <option value="{{ month }}" {% if month == currentMonth %}selected{% endif %}>{{ month|longMonth|capitalize }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div class="pc-input-group pc-m" style="--m: 0">
+                <label class="pc-label" for="year">{{ 'faircalendar-filters-year-title'|trans }}</label>
+                <input name="year" id="year" type="number" value="{{ currentYear }}">
+            </div>
+            <div class="pc-select-group pc-m" style="--m: 0">
+                <label class="pc-label" for="userId">{{ 'faircalendar-filters-userId-title'|trans }}</label>
+                <select name="userId" id="userId">
+                    {% for user in users %}
+                        <option value="{{ user.id }}" {% if user.id == userId %}selected{% endif %}>{{ user|fullName }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <button type="submit" class="pc-btn pc-btn--secondary">
+                {{ 'faircalendar-filters-submit'|trans }}
             </button>
-            <button id="nextBtn" type="button" class="pc-btn pc-btn--muted" title="Mois suivant">{{ '>' }}</button>
-        </div>
-        <div class="pc-select-group pc-m" style="--m: 0">
-            <label class="pc-label" for="month">{{ 'faircalendar-filters-month-title'|trans }}</label>
-            <select name="month" id="month">
-                {% for month in range(12) %}
-                    <option value="{{ month }}" {% if month == currentMonth %}selected{% endif %}>{{ month|longMonth|capitalize }}</option>
-                {% endfor %}
-            </select>
-        </div>
-        <div class="pc-input-group pc-m" style="--m: 0">
-            <label class="pc-label" for="year">{{ 'faircalendar-filters-year-title'|trans }}</label>
-            <input name="year" id="year" type="number" value="{{ currentYear }}">
-        </div>
-        <div class="pc-select-group pc-m" style="--m: 0">
-            <label class="pc-label" for="userId">{{ 'faircalendar-filters-userId-title'|trans }}</label>
-            <select name="userId" id="userId">
-                {% for user in users %}
-                    <option value="{{ user.id }}" {% if user.id == userId %}selected{% endif %}>{{ user|fullName }}</option>
-                {% endfor %}
-            </select>
-        </div>
-    </form>
+        </form>
+    </pc-faircalendar-filters-form>
 {% endmacro %}

src/translations/fr-FR.ftl

@@ -63,6 +63,7 @@ faircalendar-time-title = Temps passé
 faircalendar-filters-month-title = Mois
 faircalendar-filters-year-title = Année
 faircalendar-filters-userId-title = Coopérateur·ice - salarié·e
+faircalendar-filters-submit = Mettre à jour
 faircalendar-overview-days = {$days ->
     [0] 0
     [1] 1 jour