refactor(js): make generic format controller

app/components/editable_champ/iban_component/iban_component.html.haml

@@ -3,6 +3,6 @@
   placeholder: t(".placeholder"),
   required: @champ.required?,
   aria: { describedby: @champ.describedby_id },
-  data: { controller: 'iban-input'},
+  data: { controller: 'format', format: 'iban' },
   class: "width-66-desktop",
   maxlength: 34 + 9 # count space separator of 4 digits-groups

app/javascript/controllers/format_controller.ts

@@ -0,0 +1,31 @@
+import { ApplicationController } from './application_controller';
+
+export class FormatController extends ApplicationController {
+  connect() {
+    const format = this.element.getAttribute('data-format');
+    switch (format) {
+      case 'list':
+        this.on('change', (event) => {
+          const target = event.target as HTMLInputElement;
+          target.value = this.formatList(target.value);
+        });
+        break;
+      case 'iban':
+        this.on('input', (event) => {
+          const target = event.target as HTMLInputElement;
+          target.value = this.formatIBAN(target.value);
+        });
+    }
+  }
+
+  private formatList(value: string) {
+    return value.replace(/;/g, ',');
+  }
+
+  private formatIBAN(value: string) {
+    return value
+      .replace(/[^\dA-Z]/g, '')
+      .replace(/(.{4})/g, '$1 ')
+      .trim();
+  }
+}

app/javascript/controllers/iban_input_controller.ts

@@ -1,13 +0,0 @@
-import { ApplicationController } from './application_controller';
-
-export class IBANInputController extends ApplicationController {
-  connect() {
-    this.on('input', (event) => {
-      const target = event.target as HTMLInputElement;
-      target.value = target.value
-        .replace(/[^\dA-Z]/g, '')
-        .replace(/(.{4})/g, '$1 ')
-        .trim();
-    });
-  }
-}

app/javascript/entrypoints/application.js

@@ -15,10 +15,7 @@ import '../new_design/form-validation';
 import '../new_design/procedure-context';
 import '../new_design/procedure-form';
 
-import {
-  toggleCondidentielExplanation,
-  replaceSemicolonByComma
-} from '../new_design/avis';
+import { toggleCondidentielExplanation } from '../new_design/avis';
 import {
   showMotivation,
   motivationCancel,
@@ -36,8 +33,7 @@ const DS = {
   motivationCancel,
   showImportJustificatif,
   showFusion,
-  showNewAccount,
-  replaceSemicolonByComma
+  showNewAccount
 };
 
 // Start Rails helpers

app/javascript/new_design/avis.js

@@ -3,7 +3,3 @@ import { toggle } from '@utils';
 export function toggleCondidentielExplanation() {
   toggle(document.querySelector('.confidentiel-explanation'));
 }
-
-export function replaceSemicolonByComma(event) {
-  event.target.value = event.target.value.replace(/;/g, ',');
-}

app/views/experts/avis/shared/avis/_form.html.haml

@@ -3,7 +3,7 @@
   %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
 
   = form_for avis, url: url, html: { class: 'form' } do |f|
-    = f.email_field :emails, placeholder: 'Adresses email, séparées par des virgules', required: true, multiple: true, onchange: "javascript:DS.replaceSemicolonByComma(event);"
+    = f.email_field :emails, placeholder: 'Adresses email, séparées par des virgules', required: true, multiple: true, data: { controller: 'format', format: 'list' }
     = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
     %p.tab-title Ajouter une pièce jointe
     .form-group