signature - modale and translations in the vue app

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

@@ -1,51 +1,80 @@
 <template>
   <teleport to="body">
-    <modal v-if="state.show_modal" @close="close">
+    <modal v-if="modalOpen" @close="modalOpen = false">
       <template v-slot:header>
-        <h2>eh là!</h2>
+        <h2>{{ $t("signature_confirmation") }}</h2>
       </template>
       <template v-slot:body>
-        <p>Etes-vous sur de vouloir signer?</p>
+        <p>{{ $t("you_are_going_to_sign") }}</p>
+        <p>{{ $t("are_you_sure") }}</p>
+      </template>
+      <template v-slot:footer>
+        <button class="btn btn-action" @click.prevent="confirm_sign">
+          {{ $t("yes") }}
+        </button>
       </template>
     </modal>
   </teleport>
   <div class="col-12">
-
     <div class="row justify-content-center">
       <div class="col-6">
-        <button class="btn btn-create me-2" :disabled="!userSignatureZones" @click="confirm_sign">
+        <button
-          Signer
+          class="btn btn-action me-2"
+          :disabled="!userSignatureZones"
+          @click="modalOpen = true"
+        >
+          {{ $t("sign") }}
         </button>
-        <button class="btn btn-misc" :disabled="!userSignatureZones" @click="undo_sign">
+        <button
-          Enlever la signature
+          class="btn btn-misc"
+          :hidden="!userSignatureZones"
+          @click="undo_sign"
+        >
+          {{ $t("choose_another_signature") }}
         </button>
       </div>
       <div class="col-6">
-        <button class="btn float-end btn-delete" :disabled="!userSignatureZones" @click="undo_sign">
+        <button class="btn float-end btn-delete" @click="undo_sign">
-          Refuser de signer
+          {{ $t("cancel_signing") }}
         </button>
       </div>
     </div>
 
     <div class="row justify-content-center">
-      <div class="col-4">
+      <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
+        <button class="btn btn-light" @click="turn_signature(-1)">
+          {{ $t("last_sign_zone") }}
+        </button>
       </div>
-      <div class="col-4">
+      <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
+        <button class="btn btn-light" @click="turn_signature(1)">
+          {{ $t("next_sign_zone") }}
+        </button>
       </div>
     </div>
 
     <div class="row justify-content-center" v-if="pageCount > 1">
-      <div class="col-3">
+      <div class="col-3 text-center">
-        <button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)">❮</button>
+        <button
-          page {{ page }} / {{ pageCount }}
+          class="btn btn-light"
-        <button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
+          :disabled="page <= 1"
+          @click="turn_page(-1)"
+        >
+          ❮
+        </button>
+        page {{ page }} / {{ pageCount }}
+        <button
+          class="btn btn-light"
+          :disabled="page >= pageCount"
+          @click="turn_page(1)"
+        >
+          ❯
+        </button>
       </div>
     </div>
   </div>
-  <div class="col-12">
+  <div class="col-12 text-center">
-    <canvas id="canvas" style="width:100%"></canvas>
+    <canvas class="m-auto" id="canvas"></canvas>
   </div>
 </template>
 
@@ -73,15 +102,7 @@ import {
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
-// export const i18n = {
+const modalOpen: Ref<boolean> = ref(false);
-//   messages: {
-//     fr: {
-//       upload_a_document: "Téléversez un document",
-//     },
-//   },
-// };
-
-const modalOpened: Ref<boolean> = ref(false);
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
 const zone: Ref<number> = ref(0);
@@ -95,17 +116,6 @@ declare global {
   }
 }
 
-interface AddressModalState {
-  show_modal: boolean,
-}
-const state: AddressModalState = reactive({show_modal: false});
-const open = (): void => {
-  state.show_modal = true;
-}
-const close = (): void => {
-  state.show_modal = false;
-}
-
 const signature = window.signature;
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
@@ -188,7 +198,10 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
       ) {
         const ctx = canvas.getContext("2d");
         if (ctx) {
-          draw_zone(z, ctx, canvas.width, canvas.height, true);
+          setTimeout(
+            () => draw_zone(z, ctx, canvas.width, canvas.height, true),
+            200
+          );
         }
         userSignatureZones.value = z;
       }
@@ -215,7 +228,6 @@ const turn_signature = async (upOrDown: number) => {
   }
 };
 
-
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
@@ -260,10 +272,6 @@ const add_zones = (page: number) => {
 };
 
 const confirm_sign = () => {
-  open()
-};
-
-const post_zone = () => {
   console.log(userSignatureZones.value);
   //TODO POST userSignatureZones to backend
 };

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts

@@ -1,12 +1,27 @@
 import { createApp } from "vue";
-//import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+// @ts-ignore
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 import App from "./App.vue";
 
-// const i18n = _createI18n(appMessages);
+const appMessages = {
+    fr: {
+        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 signature',
+        cancel_signing: 'Refuser de signer',
+        last_sign_zone: 'Zone de signature précédente',
+        next_sign_zone: 'Zone de signature suivante',
+    }
+}
+
+const i18n = _createI18n(appMessages);
 
 const app = createApp({
     template: `<app></app>`,
 })
-    // .use(i18n)
+    .use(i18n)
     .component("app", App)
     .mount("#document-signature");