From 5339d4f5d92bfcf09638ad090c2d139f3db401d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Fri, 8 Nov 2024 19:35:03 +0100
Subject: [PATCH] Refactor button to add a manual zone

- do not show the button if a zone is selected (to avoid to create two selected zones on the document);
- change the button while waiting for the user to create a new zone: this make visible the fact that the app is waiting for a user action
---
 .../public/vuejs/DocumentSignature/App.vue    | 28 +++++++++++++------
 .../public/vuejs/DocumentSignature/index.ts   |  1 +
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 924e30c30..d10f13a97 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -96,12 +96,17 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button
-          class="btn btn-create btn-sm"
-          :class="{ active: canvasEvent === 'add' }"
+        <button v-if="userSignatureZone === null"
+          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
-        ></button>
+        >
+            <template v-if="canvasEvent === 'add'">
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </template>
+        </button>
       </div>
     </div>
 
@@ -195,13 +200,20 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button
-          class="btn btn-create btn-sm"
-          :class="{ active: canvasEvent === 'add' }"
+        <button v-if="userSignatureZone === null"
+          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
         >
-          {{ $t("add_zone") }}
+            <template v-if="canvasEvent !== 'add'">
+                {{ $t("add_zone") }}
+            </template>
+            <template v-else>
+              {{ $t("click_on_document")}}
+              <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </template>
         </button>
       </div>
     </div>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index 49b0f6f79..835b5598b 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -15,6 +15,7 @@ const appMessages = {
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
         add_sign_zone: 'Ajouter une zone de signature',
+        click_on_document: 'Cliquer sur le document',
         last_zone: 'Zone précédente',
         next_zone: 'Zone suivante',
         add_zone: 'Ajouter une zone',