Add button unique signature zone

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue

@@ -2,26 +2,26 @@
     <teleport to="body">
         <modal v-if="modalOpen" @close="modalOpen = false">
             <template v-slot:header>
-                <h2>{{ $t("signature_confirmation") }}</h2>
+                <h2>{{ trans(SIGNATURES_SIGNATURE_CONFIRMATION) }}</h2>
             </template>
             <template v-slot:body>
                 <div class="signature-modal-body text-center" v-if="loading">
-                    <p>{{ $t("electronic_signature_in_progress") }}</p>
+                    <p>{{ trans(SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS) }}</p>
                     <div class="loading">
                         <i
                             class="fa fa-circle-o-notch fa-spin fa-3x"
-                            :title="$t('loading')"
+                            :title="trans(SIGNATURES_LOADING)"
                         ></i>
                     </div>
                 </div>
                 <div class="signature-modal-body text-center" v-else>
-                    <p>{{ $t("you_are_going_to_sign") }}</p>
-                    <p>{{ $t("are_you_sure") }}</p>
+                    <p>{{ trans(SIGNATURES_YOU_ARE_GOING_TO_SIGN) }}</p>
+                    <p>{{ trans(SIGNATURES_ARE_YOU_SURE) }}</p>
                 </div>
             </template>
             <template v-slot:footer>
                 <button class="btn btn-action" @click.prevent="confirmSign">
-                    {{ $t("yes") }}
+                    {{ trans(SIGNATURES_YES) }}
                 </button>
             </template>
         </modal>
@@ -82,7 +82,7 @@
                         @change="toggleMultiPage"
                     />
                     <label class="form-check-label" for="checkboxMulti">
-                        {{ $t("all_pages") }}
+                        {{ trans(SIGNATURES_ALL_PAGES) }}
                     </label>
                 </template>
             </div>
@@ -95,7 +95,7 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(-1)"
                 >
-                    {{ $t("last_zone") }}
+                    {{ trans(SIGNATURES_LAST_ZONE) }}
                 </button>
                 <span>|</span>
                 <button
@@ -103,7 +103,7 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(1)"
                 >
-                    {{ $t("next_zone") }}
+                    {{ trans(SIGNATURES_NEXT_ZONE) }}
                 </button>
             </div>
             <div class="col text-end" v-if="signedState !== 'signed'">
@@ -112,9 +112,9 @@
                     :hidden="!userSignatureZone"
                     @click="undoSign"
                     v-if="signature.zones.length > 1"
-                    :title="$t('choose_another_signature')"
+                    :title="trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE)"
                 >
-                    {{ $t("another_zone") }}
+                    {{ trans(SIGNATURES_ANOTHER_ZONE) }}
                 </button>
                 <button
                     class="btn btn-misc btn-sm"
@@ -122,7 +122,7 @@
                     @click="undoSign"
                     v-else
                 >
-                    {{ $t("cancel") }}
+                    {{ trans(SIGNATURES_CANCEL) }}
                 </button>
                 <button
                     v-if="userSignatureZone === null"
@@ -134,7 +134,7 @@
                         active: canvasEvent === 'add',
                     }"
                     @click="toggleAddZone()"
-                    :title="$t('add_sign_zone')"
+                    :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
                 >
                     <template v-if="canvasEvent === 'add'">
                         <div
@@ -186,7 +186,7 @@
                         @change="toggleMultiPage"
                     />
                     <label class="form-check-label" for="checkboxMulti">
-                        {{ $t("see_all_pages") }}
+                        {{ trans(SIGNATURES_SEE_ALL_PAGES) }}
                     </label>
                 </template>
             </div>
@@ -199,7 +199,7 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(-1)"
                 >
-                    {{ $t("last_zone") }}
+                    {{ trans(SIGNATURES_LAST_ZONE) }}
                 </button>
                 <span>|</span>
                 <button
@@ -207,11 +207,20 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(1)"
                 >
-                    {{ $t("next_zone") }}
+                    {{ trans(SIGNATURES_NEXT_ZONE) }}
+                </button>
+            </div>
+            <div v-if="signature.zones.length === 1 && signedState !== 'signed'"
+                 class="col-4 d-none d-xl-flex p-0 text-center turnSignature">
+                <button
+                    class="btn btn-light btn-sm"
+                    @click="goToSignatureZoneUnique"
+                >
+                    {{ trans(SIGNATURES_GO_TO_SIGNATURE_UNIQUE) }}
                 </button>
             </div>
             <div
-                v-if="signature.zones.length > 0 && signedState !== 'signed'"
+                v-if="signature.zones.length > 1 && signedState !== 'signed'"
                 class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
             >
                 <button
@@ -219,7 +228,7 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(-1)"
                 >
-                    {{ $t("last_sign_zone") }}
+                    {{ trans(SIGNATURES_LAST_SIGN_ZONE) }}
                 </button>
                 <span>|</span>
                 <button
@@ -227,7 +236,7 @@
                     class="btn btn-light btn-sm"
                     @click="turnSignature(1)"
                 >
-                    {{ $t("next_sign_zone") }}
+                    {{ trans(SIGNATURES_NEXT_SIGN_ZONE) }}
                 </button>
             </div>
             <div class="col text-end" v-if="signedState !== 'signed'">
@@ -237,7 +246,7 @@
                     @click="undoSign"
                     v-if="signature.zones.length > 1"
                 >
-                    {{ $t("choose_another_signature") }}
+                    {{ trans(SIGNATURES_CHOOSE_ANOTHER_SIGNATURE) }}
                 </button>
                 <button
                     class="btn btn-misc btn-sm"
@@ -245,7 +254,7 @@
                     @click="undoSign"
                     v-else
                 >
-                    {{ $t("cancel") }}
+                    {{ trans(SIGNATURES_CANCEL) }}
                 </button>
                 <button
                     v-if="userSignatureZone === null"
@@ -257,13 +266,13 @@
                         active: canvasEvent === 'add',
                     }"
                     @click="toggleAddZone()"
-                    :title="$t('add_sign_zone')"
+                    :title="trans(SIGNATURES_ADD_SIGN_ZONE)"
                 >
                     <template v-if="canvasEvent !== 'add'">
-                        {{ $t("add_zone") }}
+                        {{ trans(SIGNATURES_ADD_ZONE) }}
                     </template>
                     <template v-else>
-                        {{ $t("click_on_document") }}
+                        {{ trans(SIGNATURES_CLICK_ON_DOCUMENT) }}
                         <div
                             class="spinner-border spinner-border-sm"
                             role="status"
@@ -297,10 +306,10 @@
                     v-if="signedState !== 'signed'"
                     :href="getReturnPath()"
                 >
-                    {{ $t("cancel") }}
+                    {{ trans(SIGNATURES_CANCEL) }}
                 </a>
                 <a class="btn btn-misc" v-else :href="getReturnPath()">
-                    {{ $t("return") }}
+                    {{ trans(SIGNATURES_RETURN) }}
                 </a>
             </div>
             <div class="col text-end" v-if="signedState !== 'signed'">
@@ -309,7 +318,7 @@
                     :disabled="!userSignatureZone"
                     @click="sign"
                 >
-                    {{ $t("sign") }}
+                    {{ trans(SIGNATURES_SIGN) }}
                 </button>
             </div>
             <div class="col-4" v-else></div>
@@ -329,13 +338,39 @@ import {
     SignedState,
     ZoomLevel,
 } from "../../types";
-import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
 import {
     PDFDocumentProxy,
     PDFPageProxy,
 } from "pdfjs-dist/types/src/display/api";
 
+import {
+    SIGNATURES_YES,
+    SIGNATURES_ARE_YOU_SURE,
+    SIGNATURES_YOU_ARE_GOING_TO_SIGN,
+    SIGNATURES_SIGNATURE_CONFIRMATION,
+    SIGNATURES_SIGN,
+    SIGNATURES_CHOOSE_ANOTHER_SIGNATURE,
+    SIGNATURES_CANCEL,
+    SIGNATURES_LAST_SIGN_ZONE,
+    SIGNATURES_NEXT_SIGN_ZONE,
+    SIGNATURES_ADD_SIGN_ZONE,
+    SIGNATURES_CLICK_ON_DOCUMENT,
+    SIGNATURES_LAST_ZONE,
+    SIGNATURES_NEXT_ZONE,
+    SIGNATURES_ADD_ZONE,
+    SIGNATURES_ANOTHER_ZONE,
+    SIGNATURES_ELECTRONIC_SIGNATURE_IN_PROGRESS,
+    SIGNATURES_LOADING,
+    SIGNATURES_RETURN,
+    SIGNATURES_SEE_ALL_PAGES,
+    SIGNATURES_ALL_PAGES,
+    SIGNATURES_GO_TO_SIGNATURE_UNIQUE,
+    trans
+} from "translator";
+
+
 // @ts-ignore incredible but the console.log is needed
 import * as PdfWorker from "pdfjs-dist/build/pdf.worker.mjs";
 console.log(PdfWorker);
@@ -415,8 +450,10 @@ const $toast = useToast();
 
 const signature = window.signature;
 
-const isFirstSignatureZone = () =>
-    userSignatureZone.value?.index ? userSignatureZone.value.index < 1 : false;
+const isFirstSignatureZone = () => {
+    console.log(userSignatureZone.value?.index)
+    return userSignatureZone.value?.index ? userSignatureZone.value.index < 1 : false;
+}
 const isLastSignatureZone = () =>
     userSignatureZone.value?.index
         ? userSignatureZone.value.index >= signature.zones.length - 1
@@ -600,6 +637,15 @@ const turnPage = async (upOrDown: number) => {
     }
 };
 
+const goToSignatureZoneUnique = () => {
+    let signatureZone = signature.zones[0];
+
+    page.value = signatureZone.PDFPage.index + 1;
+    const canvas = getCanvas(signatureZone.PDFPage.index + 1);
+    selectZone(signatureZone, canvas);
+    canvas.scrollIntoView();
+}
+
 const turnSignature = async (upOrDown: number) => {
     let zoneIndex = userSignatureZone.value?.index ?? -1;
     if (zoneIndex < -1) {

src/Bundle/ChillDocStoreBundle/translations/messages.fr.yml

@@ -99,3 +99,30 @@ CHILL_ACCOMPANYING_COURSE_DOCUMENT_UPDATE: Modifier un document
 entity_display_title:
     Document (n°%doc%): "Document (n°%doc%)"
     Doc for evaluation (n°%eval%): Document de l'évaluation n°%eval%
+
+
+# SIGNATURES
+
+signatures:
+    yes: Oui
+    are_you_sure: Êtes-vous sûr·e?
+    you_are_going_to_sign: Vous allez signer le document
+    signature_confirmation: Confirmation de la signature
+    sign: Signer
+    choose_another_signature: Choisir une autre zone
+    cancel: Annuler
+    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
+    another_zone: Autre zone
+    electronic_signature_in_progress: Signature électronique en cours...
+    loading: Chargement...
+    remove_sign_zone: Enlever la zone
+    return: Retour
+    see_all_pages: Voir toutes les pages
+    all_pages: Toutes les pages
+    go_to_signature_unique: Aller vers zone de signature