diff --git a/app/components/editable_champ/iban_component/iban_component.html.haml b/app/components/editable_champ/iban_component/iban_component.html.haml index 65e233bb4..151bfaa56 100644 --- a/app/components/editable_champ/iban_component/iban_component.html.haml +++ b/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 diff --git a/app/javascript/controllers/format_controller.ts b/app/javascript/controllers/format_controller.ts new file mode 100644 index 000000000..855324860 --- /dev/null +++ b/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(); + } +} diff --git a/app/javascript/controllers/iban_input_controller.ts b/app/javascript/controllers/iban_input_controller.ts deleted file mode 100644 index d06e83031..000000000 --- a/app/javascript/controllers/iban_input_controller.ts +++ /dev/null @@ -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(); - }); - } -} diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index 718c5c32a..cec0372c2 100644 --- a/app/javascript/entrypoints/application.js +++ b/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 diff --git a/app/javascript/new_design/avis.js b/app/javascript/new_design/avis.js index 1d84d4d67..99b4f869c 100644 --- a/app/javascript/new_design/avis.js +++ b/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, ','); -} diff --git a/app/views/experts/avis/shared/avis/_form.html.haml b/app/views/experts/avis/shared/avis/_form.html.haml index ec832f257..e8685241c 100644 --- a/app/views/experts/avis/shared/avis/_form.html.haml +++ b/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