From abb2fa159c1a9b2666e70d25d8de1ea964e99593 Mon Sep 17 00:00:00 2001
From: mfo <mfo@users.noreply.github.com>
Date: Wed, 21 Aug 2024 17:59:30 +0200
Subject: [PATCH] feat(Champ.rna): avoid spaces that breaks API calls

---
 .../rna_component/rna_component.html.haml            |  2 +-
 app/javascript/controllers/format_controller.ts      | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/components/editable_champ/rna_component/rna_component.html.haml b/app/components/editable_champ/rna_component/rna_component.html.haml
index 4d7240518..03bcd30d5 100644
--- a/app/components/editable_champ/rna_component/rna_component.html.haml
+++ b/app/components/editable_champ/rna_component/rna_component.html.haml
@@ -1,4 +1,4 @@
-= @form.text_field(:value, input_opts( id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: { controller: 'turbo-input', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.data.blank?, turbo_input_url_value: update_path }, required: @champ.required?, pattern: "W[0-9]{9}", class: "width-33-desktop", maxlength: 10))
+= @form.text_field(:value, input_opts( id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: { controller: 'turbo-input format', format: 'deleteSpace', turbo_input_load_on_connect_value: @champ.prefilled? && @champ.value.present? && @champ.data.blank?, turbo_input_url_value: update_path }, required: @champ.required?, pattern: "W[0-9]{9}", class: "width-33-desktop", maxlength: 10))
 
 .rna-info{ id: dom_id(@champ, :rna_info) }
   = render 'shared/champs/rna/association', champ: @champ, error: nil
diff --git a/app/javascript/controllers/format_controller.ts b/app/javascript/controllers/format_controller.ts
index 9eacd690e..1e76d4219 100644
--- a/app/javascript/controllers/format_controller.ts
+++ b/app/javascript/controllers/format_controller.ts
@@ -4,6 +4,13 @@ export class FormatController extends ApplicationController {
   connect() {
     const format = this.element.getAttribute('data-format');
     switch (format) {
+      case 'deleteSpace':
+        this.on('change', (event) => {
+          const target = event.target as HTMLInputElement;
+          const value = this.deleteSpace(target.value);
+          replaceValue(target, value);
+        });
+        break;
       case 'list':
         this.on('change', (event) => {
           const target = event.target as HTMLInputElement;
@@ -41,16 +48,21 @@ export class FormatController extends ApplicationController {
         break;
     }
   }
+  private deleteSpace(value: string) {
+    return value.replace(/\s*/g, '');
+  }
 
   private formatList(value: string) {
     return value.replace(/;/g, ',');
   }
+
   private formatSIRET(value: string) {
     return value
       .replace(/[^\d]/gi, '')
       .replace(/^\s*(\d{3})\s*(\d{3})\s*(\d{3})\s*(\d{5})\s*$/gi, '$1 $2 $3 $4')
       .trim();
   }
+
   private formatIBAN(value: string) {
     return value
       .replace(/[^\dA-Z]/gi, '')