FEATURE signature: show full pages - UI and turn pages

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

@@ -26,9 +26,9 @@
       </template>
     </modal>
   </teleport>
-  <div class="col-12 m-auto">
+  <div class="col-12 m-auto sticky-top">
     <div class="row justify-content-center border-bottom pdf-tools d-md-none">
-      <div class="col text-center turn-page">
+      <div class="col-5 text-center turn-page">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -75,10 +75,13 @@
           </button>
           <input
             type="checkbox"
-            id="checkbox"
+            id="checkboxMulti"
             v-model="multiPage"
             @change="toggleMultiPage"
           />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ $t("all_pages") }}
+          </label>
         </template>
       </div>
       <div
@@ -143,7 +146,7 @@
     <div
       class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
     >
-      <div class="col-3 text-center turn-page ps-3">
+      <div class="col-5 text-center turn-page ps-3">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -173,10 +176,13 @@
           </button>
         <input
             type="checkbox"
-            id="checkbox"
+            id="checkboxMulti"
             v-model="multiPage"
             @change="toggleMultiPage"
           />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ $t("see_all_pages") }}
+          </label>
         </template>
       </div>
       <div
@@ -263,15 +269,10 @@
   </div>
   <div
     v-if="multiPage"
-    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center d-flex flex-column"
     :class="{ onAddZone: canvasEvent === 'add' }"
   >
-    <canvas
+    <canvas v-for="p in pageCount" :key="p" :id="`canvas-${p}`"></canvas>
-      v-for="p in pageCount"
-      :key="p"
-      class="m-auto"
-      :id="`canvas-${p}`"
-    ></canvas>
   </div>
   <div
     v-else
@@ -339,7 +340,7 @@ import {download_and_decrypt_doc, download_doc_as_pdf} from "../StoredObjectButt
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
-const multiPage: Ref<boolean> = ref(false);
+const multiPage: Ref<boolean> = ref(true);
 const modalOpen: Ref<boolean> = ref(false);
 const loading: Ref<boolean> = ref(false);
 const adding: Ref<boolean> = ref(false);
@@ -405,7 +406,6 @@ declare global {
 const $toast = useToast();
 
 const signature = window.signature;
-console.log("signature", signature);
 
 const setZoomLevel = async (zoomLevel: string) => {
   zoom.value = Number.parseFloat(zoomLevel);
@@ -545,7 +545,6 @@ const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
           selectZone(z, canvas);
         } else {
           if (userSignatureZone.value.index === z.index) {
-            console.log("going to sign zone: ", z.index);
             sign();
           }
         }
@@ -558,10 +557,14 @@ const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
     : addZoneEvent(e, canvas);
 
 const turnPage = async (upOrDown: number) => {
-  //userSignatureZone.value = null; // desactivate the reset of the zone when turning page
   page.value = page.value + upOrDown;
-  await setPage(page.value);
+  if (multiPage.value) {
-  setTimeout(drawAllZones, 200);
+    const canvas = getCanvas(page.value);
+    canvas.scrollIntoView();
+  } else {
+    await setPage(page.value);
+    setTimeout(drawAllZones, 200);
+  }
 };
 
 const turnSignature = async (upOrDown: number) => {
@@ -579,6 +582,7 @@ const turnSignature = async (upOrDown: number) => {
     page.value = currentZone.PDFPage.index + 1;
     const canvas = getCanvas(currentZone.PDFPage.index + 1);
     selectZone(currentZone, canvas);
+    canvas.scrollIntoView();
   }
 };
 
@@ -786,6 +790,7 @@ init();
 <style scoped lang="scss">
 canvas {
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+  margin: 1rem auto;
 }
 
 .onAddZone {
@@ -805,6 +810,10 @@ div#action-buttons {
 div.pdf-tools {
   background-color: #f3f3f3;
   font-size: 0.6rem;
+  label {
+    font-size: 0.75rem !important;
+    margin: auto 0 auto 0.3rem;
+  }
   button {
     font-size: 0.75rem !important;
   }

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

@@ -24,6 +24,8 @@ const appMessages = {
         loading: 'Chargement...',
         remove_sign_zone: 'Enlever la zone',
         return: 'Retour',
+        see_all_pages: 'Voir toutes les pages',
+        all_pages: 'Toutes les pages',
     }
 }