signature: improve signature vue app

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

@@ -1,4 +1,14 @@
 <template>
+  <teleport to="body">
+    <modal v-if="state.show_modal" @close="close">
+      <template v-slot:header>
+        <h2>eh là!</h2>
+      </template>
+      <template v-slot:body>
+        <p>Etes-vous sur de vouloir signer?</p>
+      </template>
+    </modal>
+  </teleport>
   <div>
     <button :disabled="!userSignatureZones" @click="confirm_sign">
       Confirmer la signature
@@ -12,11 +22,14 @@
     {{ page }} / {{ pageCount }}
     <button :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
   </div>
+  <div>
+    <button @click="go_next_signature()">Voir les zones de signature</button>
+  </div>
   <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from "vue";
+import { ref, Ref, reactive } from "vue";
 import { Signature, SignatureZone } from "../../types";
 import * as pdfjsLib from "pdfjs-dist";
 import {
@@ -31,6 +44,7 @@ console.log(PdfWorker); // incredible but this is needed
 // import { PdfWorker } from 'pdfjs-dist/build/pdf.worker.mjs'
 // pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker;
 
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import {
   build_download_info_link,
   download_and_decrypt_doc,
@@ -38,8 +52,18 @@ import {
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
+// export const i18n = {
+//   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);
 let userSignatureZones: Ref<null | SignatureZone> = ref(null);
 let pdfSource: Ref<string> = ref("");
 let pdf = {} as PDFDocumentProxy;
@@ -50,6 +74,17 @@ 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);
 
@@ -145,12 +180,27 @@ const turn_page = async (upOrDown: number) => {
   setTimeout(() => add_zones(page.value), 200);
 };
 
+const go_next_signature = async () => {
+  open()
+  let currentZone = signature.zones[zone.value];
+  if (currentZone) {
+    page.value = currentZone.page;
+    await set_page(page.value);
+    setTimeout(() => add_zones(page.value), 200);
+  }
+  if (zone.value < signature.zones.length - 1) {
+    zone.value = zone.value + 1;
+  } else {
+    zone.value = 0;
+  }
+};
+
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
   canvasHeight: number,
-  selected = false,
+  selected = false
 ) => {
   const scaleXToCanvas = (x: number) =>
     Math.round((x * canvasWidth) / zone.pageWidth);
@@ -165,6 +215,17 @@ const draw_zone = (
     scaleXToCanvas(zone.width),
     scaleYToCanvas(zone.height)
   );
+  ctx.font = "bold 16px serif";
+  ctx.textAlign = "center";
+  ctx.fillStyle = "black";
+  const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
+  const yText = scaleYToCanvas(zone.y) + scaleYToCanvas(zone.height) / 2;
+  ctx.strokeStyle = "grey";
+  ctx.strokeText("Choisir cette", xText, yText - 12);
+  ctx.strokeText("zone de signature", xText, yText + 12);
+  ctx.fillStyle = "yellow";
+  ctx.fillText("Choisir cette", xText, yText - 12);
+  ctx.fillText("zone de signature", xText, yText + 12);
 };
 
 const add_zones = (page: number) => {
@@ -178,6 +239,10 @@ 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,13 +1,12 @@
 import { createApp } from "vue";
-// import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
-// import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
+//import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 import App from "./App.vue";
 
-//const i18n = _createI18n(appMessages);
+// const i18n = _createI18n(appMessages);
 
 const app = createApp({
     template: `<app></app>`,
 })
-    //.use(i18n)
+    // .use(i18n)
     .component("app", App)
     .mount("#document-signature");