Signature: refresh document after signature

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

@@ -82,7 +82,7 @@
           {{ $t("cancel") }}
         </button>
       </div>
-      <div class="col-1">
+      <div class="col-1" v-if="signedState !== 'signed'">
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -113,7 +113,7 @@
         </button>
       </div>
       <div
-        v-if="signature.zones.length > 1"
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
         class="col text-end d-xl-none"
       >
         <button
@@ -125,7 +125,7 @@
         </button>
       </div>
       <div
-        v-if="signature.zones.length > 1"
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
         class="col text-start d-xl-none"
       >
         <button
@@ -137,7 +137,7 @@
         </button>
       </div>
       <div
-        v-if="signature.zones.length > 1"
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
         class="col text-end d-none d-xl-flex p-0"
       >
         <button
@@ -149,7 +149,7 @@
         </button>
       </div>
       <div
-        v-if="signature.zones.length > 1"
+        v-if="signature.zones.length > 1 && signedState !== 'signed'"
         class="col text-start d-none d-xl-flex p-0"
       >
         <button
@@ -160,7 +160,7 @@
           {{ $t("next_sign_zone") }}
         </button>
       </div>
-      <div class="col text-end p-0">
+      <div class="col text-end p-0" v-if="signedState !== 'signed'">
         <button
           class="btn btn-misc btn-sm"
           :hidden="!userSignatureZone"
@@ -178,7 +178,10 @@
           {{ $t("cancel") }}
         </button>
       </div>
-      <div class="col text-end p-0 pe-2 pe-xxl-4">
+      <div
+        class="col text-end p-0 pe-2 pe-xxl-4"
+        v-if="signedState !== 'signed'"
+      >
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -194,13 +197,9 @@
     <canvas class="m-auto" id="canvas"></canvas>
   </div>
 
-  <div
+  <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
-    class="col-xs-12 col-md-12 col-lg-9 m-auto p-4"
-    id="action-buttons"
-    v-if="signedState !== 'signed'"
-  >
     <div class="row">
-      <div class="col-4">
+      <div class="col-4" v-if="signedState !== 'signed'">
         <button
           class="btn btn-action me-2"
           :disabled="!userSignatureZone"
@@ -209,10 +208,18 @@
           {{ $t("sign") }}
         </button>
       </div>
+      <div class="col-4" v-else></div>
       <div class="col-8 d-flex justify-content-end">
-        <a class="btn btn-delete" :href="getReturnPath()">
+        <a
+          class="btn btn-delete"
+          v-if="signedState !== 'signed'"
+          :href="getReturnPath()"
+        >
           {{ $t("cancel_signing") }}
         </a>
+        <a class="btn btn-cancel" v-else :href="getReturnPath()">
+          {{ $t("return") }}
+        </a>
       </div>
     </div>
   </div>
@@ -274,7 +281,7 @@ const mountPdf = async (url: string) => {
   const loadingTask = pdfjsLib.getDocument(url);
   pdf = await loadingTask.promise;
   pageCount.value = pdf.numPages;
-  await setPage(1);
+  await setPage(page.value);
 };
 
 const getRenderContext = (pdfPage: PDFPageProxy) => {
@@ -297,6 +304,8 @@ const setPage = async (page: number) => {
   await pdfPage.render(renderContext);
 };
 
+const init = () => downloadAndOpen().then(initPdf);
+
 async function downloadAndOpen(): Promise<Blob> {
   let raw;
   try {
@@ -309,7 +318,6 @@ async function downloadAndOpen(): Promise<Blob> {
     throw e;
   }
   await mountPdf(URL.createObjectURL(raw));
-  initPdf();
   return raw;
 }
 
@@ -444,7 +452,7 @@ const drawZone = (
 const drawAllZones = (page: number) => {
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
-  if (ctx) {
+  if (ctx && signedState.value !== "signed") {
     signature.zones
       .filter((z) => z.PDFPage.index + 1 === page)
       .map((z) => {
@@ -461,7 +469,7 @@ const drawAllZones = (page: number) => {
 
 const checkSignature = () => {
   const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
-  return makeFetch<CheckSignature, CheckSignature>("GET", url)
+  return makeFetch<null, CheckSignature>("GET", url)
     .then((r) => {
       signedState.value = r.state;
       signature.storedObject = r.storedObject;
@@ -592,7 +600,7 @@ const getReturnPath = () =>
       window.location.pathname
     : window.location.pathname;
 
-downloadAndOpen();
+init();
 </script>
 
 <style scoped lang="scss">

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

@@ -23,6 +23,7 @@ const appMessages = {
         electronic_signature_in_progress: 'Signature électronique en cours...',
         loading: 'Chargement...',
         remove_sign_zone: 'Enlever la zone',
+        return: 'Retour',
     }
 }