From 919288321795f1b2d59706a419803651f89803d2 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 18 Jun 2024 17:31:29 +0200
Subject: [PATCH 01/26] ADDED bootstrap signature vue app

---
 .../Controller/DocumentPersonController.php   | 19 ++++++
 .../public/vuejs/DocumentSignature/App.vue    | 16 +++++
 .../public/vuejs/DocumentSignature/index.ts   | 15 +++++
 .../views/PersonDocument/signature.html.twig  | 65 +++++++++++++++++++
 .../chill.webpack.config.js                   |  1 +
 5 files changed, 116 insertions(+)
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
 create mode 100644 src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
index ad58b6e0c..c0edbe492 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
@@ -197,4 +197,23 @@ class DocumentPersonController extends AbstractController
             ['document' => $document, 'person' => $person]
         );
     }
+
+    #[Route(path: '/{id}/signature', name: 'person_document_signature', methods: 'GET')]
+    public function signature(Person $person, PersonDocument $document): Response
+    {
+        $this->denyAccessUnlessGranted('CHILL_PERSON_SEE', $person);
+        $this->denyAccessUnlessGranted('CHILL_PERSON_DOCUMENT_SEE', $document);
+
+        $event = new PrivacyEvent($person, [
+            'element_class' => PersonDocument::class,
+            'element_id' => $document->getId(),
+            'action' => 'show',
+        ]);
+        $this->eventDispatcher->dispatch($event, PrivacyEvent::PERSON_PRIVACY_EVENT);
+
+        return $this->render(
+            '@ChillDocStore/PersonDocument/signature.html.twig',
+            ['document' => $document, 'person' => $person]
+        );
+    }
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
new file mode 100644
index 000000000..6dfdad330
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>hello {{msg}}</div>
+</template>
+
+<script setup lang="ts">
+
+import {ref, Ref} from "vue";
+
+const msg: Ref<string> = ref('world !');
+
+//console.log('signature', window.signature);
+
+</script>
+
+<style lang="scss">
+</style>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
new file mode 100644
index 000000000..2da7d0bf3
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+// import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+// import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
+//import { store } from "ChillDocStoreAssets/vuejs/DocumentSignature/store";
+import App from "./App.vue";
+
+//const i18n = _createI18n(appMessages);
+
+const app = createApp({
+    template: `<app></app>`,
+})
+    //.use(store)
+    //.use(i18n)
+    .component("app", App)
+    .mount("#document-signature");
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
new file mode 100644
index 000000000..d6e8b6d73
--- /dev/null
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -0,0 +1,65 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+
+{% set activeRouteKey = '' %}
+
+{% import "@ChillDocStore/Macro/macro.html.twig" as m %}
+{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
+
+{% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+    <script type="text/javascript">
+        const signature = {
+            id: 1,
+            storedObject: 'pKNlhCrQDCRsAuC8vYHDKa', // filename, should be maybe a full StoredObjectCreated
+            zones: [
+                {page: 1, origin: [0,0], x: 10, y: 10}
+            ]
+        };
+        window.signature = signature;
+    </script>
+    {{ encore_entry_script_tags('vue_document_signature') }}
+{% endblock %}
+
+{% block css %}
+    {{ encore_entry_link_tags('mod_document_action_buttons_group') }}
+{% endblock %}
+
+{% block content %}
+    <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
+
+    {{ mm.mimeIcon(document.object.type) }}
+
+    <dl class="chill_view_data">
+        <dt>{{ 'Title'|trans }}</dt>
+        <dd>{{ document.title }}</dd>
+    </dl>
+
+    <div id="document-signature"></div>
+
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a href="{{ chill_return_path_or('chill_docstore_generic-doc_by-person_index', {'id': person.id}) }}" class="btn btn-cancel">
+                {{ 'Back to the list' | trans }}
+            </a>
+        </li>
+
+        {% if is_granted('CHILL_PERSON_DOCUMENT_DELETE', document) %}
+            <li class="delete">
+                <a href="{{ chill_return_path_or('chill_docstore_person_document_delete', {'person': person.id, 'id': document.id}) }}" class="btn btn-delete"></a>
+            </li>
+        {% endif %}
+
+        <li>
+            {{ document.object|chill_document_button_group(document.title, is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document)) }}
+        </li>
+
+        {% if is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document) %}
+            <li>
+                <a href="{{ path('person_document_edit', {'id': document.id, 'person': person.id}) }}" class="btn btn-edit">
+                    {{ 'Edit' | trans }}
+                </a>
+            </li>
+        {% endif %}
+{% endblock %}
diff --git a/src/Bundle/ChillDocStoreBundle/chill.webpack.config.js b/src/Bundle/ChillDocStoreBundle/chill.webpack.config.js
index 5d021462d..0a95f61b0 100644
--- a/src/Bundle/ChillDocStoreBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillDocStoreBundle/chill.webpack.config.js
@@ -5,4 +5,5 @@ module.exports = function(encore)
     });
     encore.addEntry('mod_async_upload', __dirname + '/Resources/public/module/async_upload/index.ts');
     encore.addEntry('mod_document_action_buttons_group', __dirname + '/Resources/public/module/document_action_buttons_group/index');
+    encore.addEntry('vue_document_signature', __dirname + '/Resources/public/vuejs/DocumentSignature/index.ts');
 };

From bbfd0caf10281a7bde01b454d2a360103ba99d5b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 19 Jun 2024 09:51:21 +0200
Subject: [PATCH 02/26] signature: download storedObject document in the vuejs
 app

---
 .../public/vuejs/DocumentSignature/App.vue    | 48 +++++++++++++++++--
 .../public/vuejs/DocumentSignature/index.ts   |  2 -
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 6dfdad330..5ad144e3d 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,16 +1,58 @@
 <template>
-  <div>hello {{msg}}</div>
+  <div>hello {{ msg }}</div>
 </template>
 
 <script setup lang="ts">
+import { ref, Ref } from "vue";
 
-import {ref, Ref} from "vue";
+//import { build_download_info_link, download_and_decrypt_doc } from "ChillDocStoreAssets/vuejs/StoredObjectButton/helpers.js";
+import {
+  build_download_info_link,
+  download_and_decrypt_doc,
+} from "../StoredObjectButton/helpers";
 
-const msg: Ref<string> = ref('world !');
+const msg: Ref<string> = ref("world !");
 
 //console.log('signature', window.signature);
 
+const signature = {
+  id: 1,
+  storedObject: {
+    filename: "pKNlhCrQDCRsAuC8vYHDKa",
+    keyInfos: {
+      alg: "A256CBC",
+      ext: true,
+      k: "_VihnD41-VDHlpS-ouwtbMPnu-OXVdtA7ENQWWtAQYM",
+      key_ops: ["encrypt", "decrypt"],
+      kty: "oct",
+    },
+    iv: [
+      86, 231, 83, 148, 117, 107, 149, 173, 130, 19, 105, 194, 224, 145, 8, 48,
+    ],
+  },
+  zones: [{ page: 1, origin: [0, 0], x: 10, y: 10 }],
+};
+
+const urlInfo = build_download_info_link(signature.storedObject.filename);
+
+async function download_and_open(): Promise<Blob> {
+  let raw;
+  try {
+    raw = await download_and_decrypt_doc(
+      urlInfo,
+      signature.storedObject.keyInfos,
+      new Uint8Array(signature.storedObject.iv)
+    );
+  } catch (e) {
+    console.error("error while downloading and decrypting document", e);
+    throw e;
+  };
+  return raw;
+}
+
+download_and_open();
 </script>
 
 <style lang="scss">
 </style>
+
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index 2da7d0bf3..2b2b75242 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -1,7 +1,6 @@
 import { createApp } from "vue";
 // import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
 // import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
-//import { store } from "ChillDocStoreAssets/vuejs/DocumentSignature/store";
 import App from "./App.vue";
 
 //const i18n = _createI18n(appMessages);
@@ -9,7 +8,6 @@ import App from "./App.vue";
 const app = createApp({
     template: `<app></app>`,
 })
-    //.use(store)
     //.use(i18n)
     .component("app", App)
     .mount("#document-signature");

From 21c1e77d366fd482eff798381d02d2612a41f816 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 19 Jun 2024 11:16:50 +0200
Subject: [PATCH 03/26] signature: POC of showing a pdf with vue-pdf-embed

---
 package.json                                    |  1 +
 .../public/vuejs/DocumentSignature/App.vue      | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 2873e1317..fad48f34b 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "vue": "^3.2.37",
     "vue-i18n": "^9.1.6",
     "vue-multiselect": "3.0.0-alpha.2",
+    "vue-pdf-embed": "^2.0.4",
     "vue-toast-notification": "^2.0",
     "vuex": "^4.0.0"
   },
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 5ad144e3d..11a69c782 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,11 +1,13 @@
 <template>
   <div>hello {{ msg }}</div>
+  <VuePdfEmbed :source="pdfSource" />
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+import "vue-pdf-embed/dist/style/index.css";
 
-//import { build_download_info_link, download_and_decrypt_doc } from "ChillDocStoreAssets/vuejs/StoredObjectButton/helpers.js";
 import {
   build_download_info_link,
   download_and_decrypt_doc,
@@ -18,16 +20,17 @@ const msg: Ref<string> = ref("world !");
 const signature = {
   id: 1,
   storedObject: {
-    filename: "pKNlhCrQDCRsAuC8vYHDKa",
+    filename: "V2DZStOWtonw1TiKxzVPDRzlS4YO",
     keyInfos: {
       alg: "A256CBC",
       ext: true,
-      k: "_VihnD41-VDHlpS-ouwtbMPnu-OXVdtA7ENQWWtAQYM",
+      k: "x0vaQO0n3QZnipLEmddF3MOF_5_QYnS4g67n0AwZ6YA",
       key_ops: ["encrypt", "decrypt"],
       kty: "oct",
     },
     iv: [
-      86, 231, 83, 148, 117, 107, 149, 173, 130, 19, 105, 194, 224, 145, 8, 48,
+      150, 175, 71, 136, 62, 123, 230, 141, 72, 204, 116, 110, 139, 22, 246,
+      114,
     ],
   },
   zones: [{ page: 1, origin: [0, 0], x: 10, y: 10 }],
@@ -35,6 +38,8 @@ const signature = {
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
+let pdfSource: Ref<string> = ref("");
+
 async function download_and_open(): Promise<Blob> {
   let raw;
   try {
@@ -43,10 +48,12 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
+    //pdfSource.value = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
+    pdfSource.value = URL.createObjectURL(raw);
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
-  };
+  }
   return raw;
 }
 

From c950400fe2a64c0b9eff856db74fcc855b30443b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 20 Jun 2024 11:42:12 +0200
Subject: [PATCH 04/26] signature: POC of drawing signature zones and click
 event on canvas

---
 .../public/vuejs/DocumentSignature/App.vue    | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 11a69c782..44f191048 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,12 +1,14 @@
 <template>
   <div>hello {{ msg }}</div>
   <VuePdfEmbed :source="pdfSource" />
+  <!-- <canvas id="canvas"></canvas> -->
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
 import "vue-pdf-embed/dist/style/index.css";
+//import * as pdfjsLib from "pdfjs-dist";
 
 import {
   build_download_info_link,
@@ -20,20 +22,19 @@ const msg: Ref<string> = ref("world !");
 const signature = {
   id: 1,
   storedObject: {
-    filename: "V2DZStOWtonw1TiKxzVPDRzlS4YO",
+    filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
     keyInfos: {
       alg: "A256CBC",
       ext: true,
-      k: "x0vaQO0n3QZnipLEmddF3MOF_5_QYnS4g67n0AwZ6YA",
+      k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
       key_ops: ["encrypt", "decrypt"],
       kty: "oct",
     },
     iv: [
-      150, 175, 71, 136, 62, 123, 230, 141, 72, 204, 116, 110, 139, 22, 246,
-      114,
+      50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
     ],
   },
-  zones: [{ page: 1, origin: [0, 0], x: 10, y: 10 }],
+  zones: [{ page: 1, pageWidth: 500, pageHeight: 800, x: 30, y: 50, width: 100, height: 50 }],
 };
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
@@ -48,13 +49,33 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
-    //pdfSource.value = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
     pdfSource.value = URL.createObjectURL(raw);
+    setTimeout(() => draw_zones(), 2000); //TODO gestion async
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
   return raw;
+};
+
+const canvas_click = (e: PointerEvent) => {
+  console.log('click event x and y', e.x, e.y)
+}
+
+const draw_zones = () => {
+  const canvas = document.querySelectorAll('canvas')[0];
+  console.log('canvas', canvas);
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    console.log(canvas.height)
+    console.log(canvas.width)
+    //TODO the zone where the signature should go will depend on the canvas dimensions! see page.getViewport({ scale });
+    ctx.fillStyle = "green";
+    signature.zones.map(//TODO gestion du numéro de la page
+      z => ctx.fillRect(z.x, z.y, z.width, z.height)
+    )
+  }
+  canvas.addEventListener('pointerup', (e: PointerEvent) => canvas_click(e), false);
 }
 
 download_and_open();

From c80f23f0db97b575ae3b87a07989fdb46b703aea Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 20 Jun 2024 15:52:47 +0200
Subject: [PATCH 05/26] signature: scale the signature zone to the canvas
 dimension

---
 .../Resources/public/types.ts                 |  9 +++
 .../public/vuejs/DocumentSignature/App.vue    | 64 ++++++++++++++-----
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index 25d956312..95f95dd1e 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -62,3 +62,12 @@ export interface PostStoreObjectSignature {
     signature: string,
 }
 
+export interface SignatureZone {
+  page: number,
+  pageWidth: number,
+  pageHeight: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 44f191048..dce51c8ca 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -8,6 +8,7 @@
 import { ref, Ref } from "vue";
 import VuePdfEmbed from "vue-pdf-embed";
 import "vue-pdf-embed/dist/style/index.css";
+import { SignatureZone } from "../../types";
 //import * as pdfjsLib from "pdfjs-dist";
 
 import {
@@ -34,9 +35,21 @@ const signature = {
       50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
     ],
   },
-  zones: [{ page: 1, pageWidth: 500, pageHeight: 800, x: 30, y: 50, width: 100, height: 50 }],
+  zones: [
+    {
+      page: 1,
+      pageWidth: 210,
+      pageHeight: 297,
+      x: 21, //from top-left corner
+      y: 50,
+      width: 80,
+      height: 50,
+    },
+  ],
 };
 
+let userSignatureZones = {} as SignatureZone;
+
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
 let pdfSource: Ref<string> = ref("");
@@ -50,33 +63,52 @@ async function download_and_open(): Promise<Blob> {
       new Uint8Array(signature.storedObject.iv)
     );
     pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => draw_zones(), 2000); //TODO gestion async
+    setTimeout(() => add_zones(), 2000); //TODO gestion async
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
   return raw;
+}
+const canvas_click = (e: PointerEvent) => {
+  console.log("click event x and y", e.x, e.y);
+  //TODO what to do with this: 1) draw the signature if it falls within a zone, 2) output the zone
+  userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
 };
 
-const canvas_click = (e: PointerEvent) => {
-  console.log('click event x and y', e.x, e.y)
-}
+const draw_zone = (
+  zone: SignatureZone,
+  ctx: CanvasRenderingContext2D,
+  canvasWidth: number,
+  canvasHeight: number
+) => {
+  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
+  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
+  ctx.fillRect(
+    scaleXToCanvas(zone.x),
+    scaleYToCanvas(zone.y),
+    scaleXToCanvas(zone.width),
+    scaleYToCanvas(zone.height)
+  );
+};
 
-const draw_zones = () => {
-  const canvas = document.querySelectorAll('canvas')[0];
-  console.log('canvas', canvas);
+const add_zones = () => {
+  //TODO multipage: draw zones on page change?
+  const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    console.log(canvas.height)
-    console.log(canvas.width)
-    //TODO the zone where the signature should go will depend on the canvas dimensions! see page.getViewport({ scale });
     ctx.fillStyle = "green";
-    signature.zones.map(//TODO gestion du numéro de la page
-      z => ctx.fillRect(z.x, z.y, z.width, z.height)
-    )
+    signature.zones.map(
+      //TODO gestion du numéro de la page
+      (z) => draw_zone(z, ctx, canvas.width, canvas.height)
+    );
   }
-  canvas.addEventListener('pointerup', (e: PointerEvent) => canvas_click(e), false);
-}
+  canvas.addEventListener(
+    "pointerup",
+    (e: PointerEvent) => canvas_click(e),
+    false
+  );
+};
 
 download_and_open();
 </script>

From 2d4fc45a0c55da351e4d024bfb4bbb9a4bedcb3a Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 20 Jun 2024 18:27:41 +0200
Subject: [PATCH 06/26] signature: manage multi-pages doc

---
 .../public/vuejs/DocumentSignature/App.vue    | 85 ++++++++++++++-----
 1 file changed, 64 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index dce51c8ca..eab7d64aa 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,6 +1,12 @@
 <template>
-  <div>hello {{ msg }}</div>
-  <VuePdfEmbed :source="pdfSource" />
+  <div>
+    <span>
+      <button :disabled="page <= 1" @click="unTurnPage">❮</button>
+      {{ page }} / {{ pageCount }}
+      <button :disabled="page >= pageCount" @click="turnPage">❯</button>
+    </span>
+  </div>
+  <VuePdfEmbed :source="pdfSource" :page="page"/>
   <!-- <canvas id="canvas"></canvas> -->
 </template>
 
@@ -16,23 +22,39 @@ import {
   download_and_decrypt_doc,
 } from "../StoredObjectButton/helpers";
 
-const msg: Ref<string> = ref("world !");
+const page: Ref<number> = ref(1);
+const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, can be done with pdfjs (https://stackoverflow.com/questions/10253669/how-to-get-the-number-of-pages-of-a-pdf-uploaded-by-user)
+let userSignatureZones = {} as SignatureZone;
+let pdfSource: Ref<string> = ref("");
 
 //console.log('signature', window.signature);
 
 const signature = {
   id: 1,
+  // storedObject: {
+  //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+  //   keyInfos: {
+  //     alg: "A256CBC",
+  //     ext: true,
+  //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+  //     key_ops: ["encrypt", "decrypt"],
+  //     kty: "oct",
+  //   },
+  //   iv: [
+  //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+  //   ],
+  // },
   storedObject: {
-    filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+    filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
     keyInfos: {
       alg: "A256CBC",
       ext: true,
-      k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+      k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
       key_ops: ["encrypt", "decrypt"],
       kty: "oct",
     },
     iv: [
-      50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+      254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
     ],
   },
   zones: [
@@ -45,15 +67,20 @@ const signature = {
       width: 80,
       height: 50,
     },
+    {
+      page: 3,
+      pageWidth: 210,
+      pageHeight: 297,
+      x: 60, //from top-left corner
+      y: 20,
+      width: 80,
+      height: 50,
+    },
   ],
 };
 
-let userSignatureZones = {} as SignatureZone;
-
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
-let pdfSource: Ref<string> = ref("");
-
 async function download_and_open(): Promise<Blob> {
   let raw;
   try {
@@ -63,19 +90,40 @@ async function download_and_open(): Promise<Blob> {
       new Uint8Array(signature.storedObject.iv)
     );
     pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => add_zones(), 2000); //TODO gestion async
+    setTimeout(() => init_pdf(), 2000); //TODO gestion async
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
   return raw;
 }
+
+const init_pdf = () => {
+  const canvas = document.querySelectorAll("canvas")[0];
+  canvas.addEventListener(
+    "pointerup",
+    (e: PointerEvent) => canvas_click(e),
+    false
+  );
+  add_zones();
+};
+
 const canvas_click = (e: PointerEvent) => {
   console.log("click event x and y", e.x, e.y);
   //TODO what to do with this: 1) draw the signature if it falls within a zone, 2) output the zone
   userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
 };
 
+const turnPage = () => {
+  page.value = page.value + 1;
+  setTimeout(() => add_zones(), 200);
+};
+
+const unTurnPage = () => {
+  page.value = page.value - 1;
+  setTimeout(() => add_zones(), 200);
+};
+
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
@@ -93,21 +141,16 @@ const draw_zone = (
 };
 
 const add_zones = () => {
-  //TODO multipage: draw zones on page change?
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
     ctx.fillStyle = "green";
-    signature.zones.map(
-      //TODO gestion du numéro de la page
-      (z) => draw_zone(z, ctx, canvas.width, canvas.height)
-    );
+    signature.zones.map((z) => {
+      if (z.page === page.value) {
+        draw_zone(z, ctx, canvas.width, canvas.height);
+      }
+    });
   }
-  canvas.addEventListener(
-    "pointerup",
-    (e: PointerEvent) => canvas_click(e),
-    false
-  );
 };
 
 download_and_open();

From 0f589ec57e0cc74894b665229f5e227ebdece1a0 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 21 Jun 2024 13:44:41 +0200
Subject: [PATCH 07/26] signature: POC of showing PDF with pdfjs-dist

---
 .../public/vuejs/DocumentSignature/App.vue    | 53 +++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index eab7d64aa..e4ed22cd6 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -6,16 +6,23 @@
       <button :disabled="page >= pageCount" @click="turnPage">❯</button>
     </span>
   </div>
-  <VuePdfEmbed :source="pdfSource" :page="page"/>
-  <!-- <canvas id="canvas"></canvas> -->
+  <!-- <VuePdfEmbed :source="pdfSource" :page="page"/> -->
+  <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
-import VuePdfEmbed from "vue-pdf-embed";
-import "vue-pdf-embed/dist/style/index.css";
+// import VuePdfEmbed from "vue-pdf-embed";
+// import "vue-pdf-embed/dist/style/index.css";
 import { SignatureZone } from "../../types";
-//import * as pdfjsLib from "pdfjs-dist";
+import * as pdfjsLib from "pdfjs-dist";
+
+// @ts-ignore
+import * as PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs';
+pdfjsLib.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs';
+console.log(PdfWorker) // incredible but this is needed
+// import { PdfWorker } from 'pdfjs-dist/build/pdf.worker.mjs'
+// pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker;
 
 import {
   build_download_info_link,
@@ -27,8 +34,6 @@ const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, ca
 let userSignatureZones = {} as SignatureZone;
 let pdfSource: Ref<string> = ref("");
 
-//console.log('signature', window.signature);
-
 const signature = {
   id: 1,
   // storedObject: {
@@ -81,6 +86,32 @@ const signature = {
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
+const showPdf = async (url: string) => {
+  const loadingTask = pdfjsLib.getDocument(url);
+  const pdf = await loadingTask.promise;
+
+  // Load information from the first page.
+  const page = await pdf.getPage(1);
+
+  const scale = 1;
+  const viewport = page.getViewport({ scale });
+
+  // Apply page dimensions to the `<canvas>` element.
+  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+  const context = canvas.getContext("2d") as CanvasRenderingContext2D;
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
+
+  // Render the page into the `<canvas>` element.
+  const renderContext = {
+    canvasContext: context,
+    viewport: viewport,
+  };
+  await page.render(renderContext);
+  console.log("Page rendered!");
+};
+
+
 async function download_and_open(): Promise<Blob> {
   let raw;
   try {
@@ -89,8 +120,8 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
-    pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => init_pdf(), 2000); //TODO gestion async
+    await showPdf(URL.createObjectURL(raw));
+    init_pdf();
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
@@ -99,13 +130,13 @@ async function download_and_open(): Promise<Blob> {
 }
 
 const init_pdf = () => {
-  const canvas = document.querySelectorAll("canvas")[0];
+  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   canvas.addEventListener(
     "pointerup",
     (e: PointerEvent) => canvas_click(e),
     false
   );
-  add_zones();
+  setTimeout(() => add_zones(), 200);
 };
 
 const canvas_click = (e: PointerEvent) => {

From b0a8fd54a8536927c8fa6ec2bc7d9b965068c66b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 21 Jun 2024 14:55:11 +0200
Subject: [PATCH 08/26] signature: fully working app with pdfjs-dist

---
 package.json                                  |  2 +-
 .../public/vuejs/DocumentSignature/App.vue    | 81 ++++++++++---------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index fad48f34b..d36197aa9 100644
--- a/package.json
+++ b/package.json
@@ -53,12 +53,12 @@
     "marked": "^12.0.2",
     "masonry-layout": "^4.2.2",
     "mime": "^4.0.0",
+    "pdfjs-dist": "^4.3.136",
     "swagger-ui": "^4.15.5",
     "vis-network": "^9.1.0",
     "vue": "^3.2.37",
     "vue-i18n": "^9.1.6",
     "vue-multiselect": "3.0.0-alpha.2",
-    "vue-pdf-embed": "^2.0.4",
     "vue-toast-notification": "^2.0",
     "vuex": "^4.0.0"
   },
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index e4ed22cd6..6da29691a 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,26 +1,25 @@
 <template>
-  <div>
-    <span>
-      <button :disabled="page <= 1" @click="unTurnPage">❮</button>
-      {{ page }} / {{ pageCount }}
-      <button :disabled="page >= pageCount" @click="turnPage">❯</button>
-    </span>
+  <div v-if="pageCount > 1">
+    <button :disabled="page <= 1" @click="unTurnPage">❮</button>
+    {{ page }} / {{ pageCount }}
+    <button :disabled="page >= pageCount" @click="turnPage">❯</button>
   </div>
-  <!-- <VuePdfEmbed :source="pdfSource" :page="page"/> -->
   <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
-// import VuePdfEmbed from "vue-pdf-embed";
-// import "vue-pdf-embed/dist/style/index.css";
 import { SignatureZone } from "../../types";
 import * as pdfjsLib from "pdfjs-dist";
+import {
+  PDFDocumentProxy,
+  PDFPageProxy,
+} from "pdfjs-dist/types/src/display/api";
 
 // @ts-ignore
-import * as PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs';
-pdfjsLib.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs';
-console.log(PdfWorker) // incredible but this is needed
+import * as PdfWorker from "pdfjs-dist/build/pdf.worker.mjs";
+console.log(PdfWorker); // incredible but this is needed
+
 // import { PdfWorker } from 'pdfjs-dist/build/pdf.worker.mjs'
 // pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker;
 
@@ -29,10 +28,13 @@ import {
   download_and_decrypt_doc,
 } from "../StoredObjectButton/helpers";
 
+pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
+
 const page: Ref<number> = ref(1);
-const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, can be done with pdfjs (https://stackoverflow.com/questions/10253669/how-to-get-the-number-of-pages-of-a-pdf-uploaded-by-user)
+const pageCount: Ref<number> = ref(0);
 let userSignatureZones = {} as SignatureZone;
 let pdfSource: Ref<string> = ref("");
+let pdf = {} as PDFDocumentProxy;
 
 const signature = {
   id: 1,
@@ -86,31 +88,32 @@ const signature = {
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
-const showPdf = async (url: string) => {
+const mount_pdf = async (url: string) => {
   const loadingTask = pdfjsLib.getDocument(url);
-  const pdf = await loadingTask.promise;
-
-  // Load information from the first page.
-  const page = await pdf.getPage(1);
+  pdf = await loadingTask.promise;
+  pageCount.value = pdf.numPages;
+  await set_page(1);
+};
 
+const get_render_context = (pdfPage: PDFPageProxy) => {
   const scale = 1;
-  const viewport = page.getViewport({ scale });
-
-  // Apply page dimensions to the `<canvas>` element.
+  const viewport = pdfPage.getViewport({ scale });
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   const context = canvas.getContext("2d") as CanvasRenderingContext2D;
   canvas.height = viewport.height;
   canvas.width = viewport.width;
 
-  // Render the page into the `<canvas>` element.
-  const renderContext = {
+  return {
     canvasContext: context,
     viewport: viewport,
   };
-  await page.render(renderContext);
-  console.log("Page rendered!");
 };
 
+const set_page = async (page: number) => {
+  const pdfPage = await pdf.getPage(page);
+  const renderContext = get_render_context(pdfPage);
+  await pdfPage.render(renderContext);
+};
 
 async function download_and_open(): Promise<Blob> {
   let raw;
@@ -120,12 +123,12 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
-    await showPdf(URL.createObjectURL(raw));
-    init_pdf();
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
+  await mount_pdf(URL.createObjectURL(raw));
+  init_pdf();
   return raw;
 }
 
@@ -136,7 +139,7 @@ const init_pdf = () => {
     (e: PointerEvent) => canvas_click(e),
     false
   );
-  setTimeout(() => add_zones(), 200);
+  setTimeout(() => add_zones(page.value), 800);
 };
 
 const canvas_click = (e: PointerEvent) => {
@@ -145,14 +148,16 @@ const canvas_click = (e: PointerEvent) => {
   userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
 };
 
-const turnPage = () => {
+const turnPage = async () => {
   page.value = page.value + 1;
-  setTimeout(() => add_zones(), 200);
+  await set_page(page.value);
+  setTimeout(() => add_zones(page.value), 200);
 };
 
-const unTurnPage = () => {
+const unTurnPage = async () => {
   page.value = page.value - 1;
-  setTimeout(() => add_zones(), 200);
+  await set_page(page.value);
+  setTimeout(() => add_zones(page.value), 200);
 };
 
 const draw_zone = (
@@ -171,20 +176,20 @@ const draw_zone = (
   );
 };
 
-const add_zones = () => {
+const add_zones = (page: number) => {
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
     ctx.fillStyle = "green";
-    signature.zones.map((z) => {
-      if (z.page === page.value) {
-        draw_zone(z, ctx, canvas.width, canvas.height);
-      }
-    });
+    signature.zones
+      .filter((z) => z.page === page)
+      .map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
   }
 };
 
+
 download_and_open();
+
 </script>
 
 <style lang="scss">

From 68dcf4dd283a3369f2799802eb5609dc68a1136f Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 21 Jun 2024 16:38:46 +0200
Subject: [PATCH 09/26] signature: confirm signature and undo buttons

---
 .../public/vuejs/DocumentSignature/App.vue    | 90 ++++++++++++++-----
 1 file changed, 69 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 6da29691a..21d98c627 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -1,8 +1,16 @@
 <template>
+  <div>
+    <button :disabled="!userSignatureZones" @click="confirm_sign">
+      Confirmer la signature
+    </button>
+    <button :disabled="!userSignatureZones" @click="undo_sign">
+      Supprimer la signature
+    </button>
+  </div>
   <div v-if="pageCount > 1">
-    <button :disabled="page <= 1" @click="unTurnPage">❮</button>
+    <button :disabled="page <= 1" @click="turn_page(-1)">❮</button>
     {{ page }} / {{ pageCount }}
-    <button :disabled="page >= pageCount" @click="turnPage">❯</button>
+    <button :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
   </div>
   <canvas id="canvas"></canvas>
 </template>
@@ -32,7 +40,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
-let userSignatureZones = {} as SignatureZone;
+let userSignatureZones: Ref<null | SignatureZone> = ref(null);
 let pdfSource: Ref<string> = ref("");
 let pdf = {} as PDFDocumentProxy;
 
@@ -136,26 +144,46 @@ const init_pdf = () => {
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   canvas.addEventListener(
     "pointerup",
-    (e: PointerEvent) => canvas_click(e),
+    (e: PointerEvent) => canvas_click(e, canvas),
     false
   );
   setTimeout(() => add_zones(page.value), 800);
 };
 
-const canvas_click = (e: PointerEvent) => {
-  console.log("click event x and y", e.x, e.y);
-  //TODO what to do with this: 1) draw the signature if it falls within a zone, 2) output the zone
-  userSignatureZones = signature.zones[0]; //TODO for now, need another way to select a zone
+const hit_signature = (
+  zone: SignatureZone,
+  xy: number[],
+  canvasWidth: number,
+  canvasHeight: number
+) => {
+  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
+  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
+  return (
+    scaleXToCanvas(zone.x) < xy[0] &&
+    xy[0] < scaleXToCanvas(zone.x + zone.width) &&
+    scaleYToCanvas(zone.y) < xy[1] &&
+    xy[1] < scaleYToCanvas(zone.y + zone.height)
+  );
 };
 
-const turnPage = async () => {
-  page.value = page.value + 1;
-  await set_page(page.value);
-  setTimeout(() => add_zones(page.value), 200);
-};
+const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+  signature.zones
+    .filter((z) => z.page === page.value)
+    .map((z) => {
+      if (
+        hit_signature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
+      ) {
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          draw_zone(z, ctx, canvas.width, canvas.height, true);
+        }
+        userSignatureZones.value = z;
+      }
+    });
 
-const unTurnPage = async () => {
-  page.value = page.value - 1;
+const turn_page = async (upOrDown: number) => {
+  userSignatureZones.value = null;
+  page.value = page.value + upOrDown;
   await set_page(page.value);
   setTimeout(() => add_zones(page.value), 200);
 };
@@ -164,11 +192,17 @@ const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
-  canvasHeight: number
+  canvasHeight: number,
+  selected = false,
 ) => {
-  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
-  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
-  ctx.fillRect(
+  const scaleXToCanvas = (x: number) =>
+    Math.round((x * canvasWidth) / zone.pageWidth);
+  const scaleYToCanvas = (y: number) =>
+    Math.round((y * canvasHeight) / zone.pageHeight);
+  ctx.strokeStyle = selected ? "orange " : "yellow";
+  ctx.lineWidth = 10;
+  ctx.lineJoin = "bevel";
+  ctx.strokeRect(
     scaleXToCanvas(zone.x),
     scaleYToCanvas(zone.y),
     scaleXToCanvas(zone.width),
@@ -180,16 +214,30 @@ const add_zones = (page: number) => {
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "green";
     signature.zones
       .filter((z) => z.page === page)
       .map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
   }
 };
 
+const confirm_sign = () => {
+  console.log(userSignatureZones.value);
+  //TODO POST userSignatureZones to backend
+};
+
+const undo_sign = async () => {
+  const canvas = document.querySelectorAll("canvas")[0];
+  const ctx = canvas.getContext("2d");
+  if (ctx && userSignatureZones.value) {
+    draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
+    //another option is to reload the canvas
+    //await set_page(page.value);
+    //setTimeout(() => add_zones(page.value), 200);
+  }
+  userSignatureZones.value = null;
+};
 
 download_and_open();
-
 </script>
 
 <style lang="scss">

From 1344b65dd42c14b26ddf287061eb9a648b95cd75 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 21 Jun 2024 17:07:10 +0200
Subject: [PATCH 10/26] signature: fix using of window variable

---
 .../Resources/public/types.ts                 |  6 ++
 .../public/vuejs/DocumentSignature/App.vue    | 57 +++----------------
 .../views/PersonDocument/signature.html.twig  | 52 +++++++++++++++--
 3 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index 95f95dd1e..a96949fdc 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -70,4 +70,10 @@ export interface SignatureZone {
   y: number,
   width: number,
   height: number,
+}
+
+export interface Signature {
+  id: number,
+  storedObject: StoredObject,
+  zones: SignatureZone[],
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 21d98c627..e1c6adec9 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
-import { SignatureZone } from "../../types";
+import { Signature, SignatureZone } from "../../types";
 import * as pdfjsLib from "pdfjs-dist";
 import {
   PDFDocumentProxy,
@@ -44,56 +44,13 @@ let userSignatureZones: Ref<null | SignatureZone> = ref(null);
 let pdfSource: Ref<string> = ref("");
 let pdf = {} as PDFDocumentProxy;
 
-const signature = {
-  id: 1,
-  // storedObject: {
-  //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
-  //   keyInfos: {
-  //     alg: "A256CBC",
-  //     ext: true,
-  //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
-  //     key_ops: ["encrypt", "decrypt"],
-  //     kty: "oct",
-  //   },
-  //   iv: [
-  //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
-  //   ],
-  // },
-  storedObject: {
-    filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
-    keyInfos: {
-      alg: "A256CBC",
-      ext: true,
-      k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
-      key_ops: ["encrypt", "decrypt"],
-      kty: "oct",
-    },
-    iv: [
-      254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
-    ],
-  },
-  zones: [
-    {
-      page: 1,
-      pageWidth: 210,
-      pageHeight: 297,
-      x: 21, //from top-left corner
-      y: 50,
-      width: 80,
-      height: 50,
-    },
-    {
-      page: 3,
-      pageWidth: 210,
-      pageHeight: 297,
-      x: 60, //from top-left corner
-      y: 20,
-      width: 80,
-      height: 50,
-    },
-  ],
-};
+declare global {
+  interface Window {
+    signature: Signature;
+  }
+}
 
+const signature = window.signature;
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
 const mount_pdf = async (url: string) => {
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index d6e8b6d73..9c2017184 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -11,11 +11,53 @@
     {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
     <script type="text/javascript">
         const signature = {
-            id: 1,
-            storedObject: 'pKNlhCrQDCRsAuC8vYHDKa', // filename, should be maybe a full StoredObjectCreated
-            zones: [
-                {page: 1, origin: [0,0], x: 10, y: 10}
-            ]
+        id: 1,
+        //   // storedObject: {
+        //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+        //   //   keyInfos: {
+        //   //     alg: "A256CBC",
+        //   //     ext: true,
+        //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+        //   //     key_ops: ["encrypt", "decrypt"],
+        //   //     kty: "oct",
+        //   //   },
+        //   //   iv: [
+        //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+        //   //   ],
+        //   // },
+        storedObject: {
+            filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
+            keyInfos: {
+            alg: "A256CBC",
+            ext: true,
+            k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
+            key_ops: ["encrypt", "decrypt"],
+            kty: "oct",
+            },
+            iv: [
+            254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
+            ],
+        },
+        zones: [
+            {
+            page: 1,
+            pageWidth: 210,
+            pageHeight: 297,
+            x: 21, //from top-left corner
+            y: 50,
+            width: 80,
+            height: 50,
+            },
+            {
+            page: 3,
+            pageWidth: 210,
+            pageHeight: 297,
+            x: 60, //from top-left corner
+            y: 20,
+            width: 80,
+            height: 50,
+            },
+        ],
         };
         window.signature = signature;
     </script>

From 1bee3114ac1b2eb119f0fda7b921839291e8af7e Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 25 Jun 2024 19:36:11 +0200
Subject: [PATCH 11/26] signature: improve signature vue app

---
 .../public/vuejs/DocumentSignature/App.vue    | 69 ++++++++++++++++++-
 .../public/vuejs/DocumentSignature/index.ts   |  7 +-
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index e1c6adec9..9c2ad2bfb 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/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
 };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index 2b2b75242..6d73bf6a4 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/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");

From 794c479b9ef4ff69c1ed8cb6f98c9752160dcd4b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 2 Jul 2024 15:08:45 +0200
Subject: [PATCH 12/26] signature: layout and css bootstrap class of the vue
 app

---
 .../public/vuejs/DocumentSignature/App.vue    |  59 ++++--
 .../views/PersonDocument/signature.html.twig  | 177 ++++++++----------
 2 files changed, 117 insertions(+), 119 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 9c2ad2bfb..da31c1b47 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -9,23 +9,41 @@
       </template>
     </modal>
   </teleport>
-  <div>
-    <button :disabled="!userSignatureZones" @click="confirm_sign">
-      Confirmer la signature
-    </button>
-    <button :disabled="!userSignatureZones" @click="undo_sign">
-      Supprimer la signature
-    </button>
+  <div class="col-12">
+
+    <div class="row justify-content-center">
+      <div class="col-3">
+        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="confirm_sign">
+          Confirmer la signature
+        </button>
+      </div>
+      <div class="col-3">
+        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="undo_sign">
+          Supprimer la signature
+        </button>
+      </div>
+    </div>
+
+    <div class="row justify-content-center">
+      <div class="col-2">
+        <button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
+      </div>
+      <div class="col-2">
+        <button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
+      </div>
+    </div>
+
+    <div class="row justify-content-center" v-if="pageCount > 1">
+      <div class="col-3">
+        <button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)">❮</button>
+          {{ page }} / {{ pageCount }}
+        <button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
+      </div>
+    </div>
   </div>
-  <div v-if="pageCount > 1">
-    <button :disabled="page <= 1" @click="turn_page(-1)">❮</button>
-    {{ page }} / {{ pageCount }}
-    <button :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
+  <div class="col-12">
+    <canvas id="canvas" style="width:100%"></canvas>
   </div>
-  <div>
-    <button @click="go_next_signature()">Voir les zones de signature</button>
-  </div>
-  <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
@@ -180,8 +198,7 @@ const turn_page = async (upOrDown: number) => {
   setTimeout(() => add_zones(page.value), 200);
 };
 
-const go_next_signature = async () => {
-  open()
+const turn_signature = async (upOrDown: number) => {
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
     page.value = currentZone.page;
@@ -189,12 +206,13 @@ const go_next_signature = async () => {
     setTimeout(() => add_zones(page.value), 200);
   }
   if (zone.value < signature.zones.length - 1) {
-    zone.value = zone.value + 1;
+    zone.value = zone.value + upOrDown;
   } else {
     zone.value = 0;
   }
 };
 
+
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
@@ -262,6 +280,9 @@ const undo_sign = async () => {
 download_and_open();
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+canvas {
+  width: 100%;
+}
 </style>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index 9c2017184..431de25b7 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -1,107 +1,84 @@
-{% extends "@ChillPerson/Person/layout.html.twig"  %}
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
+    <title>Signature</title>
 
-{% set activeRouteKey = '' %}
+    {{ encore_entry_link_tags('mod_bootstrap') }}
 
-{% import "@ChillDocStore/Macro/macro.html.twig" as m %}
-{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
+</head>
 
-{% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %}
+<body>
 
-{% block js %}
-    {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
-    <script type="text/javascript">
-        const signature = {
-        id: 1,
-        //   // storedObject: {
-        //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
-        //   //   keyInfos: {
-        //   //     alg: "A256CBC",
-        //   //     ext: true,
-        //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
-        //   //     key_ops: ["encrypt", "decrypt"],
-        //   //     kty: "oct",
-        //   //   },
-        //   //   iv: [
-        //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
-        //   //   ],
-        //   // },
-        storedObject: {
-            filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
-            keyInfos: {
-            alg: "A256CBC",
-            ext: true,
-            k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
-            key_ops: ["encrypt", "decrypt"],
-            kty: "oct",
+    {% block js %}
+        {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+        <script type="text/javascript">
+            const signature = {
+            id: 1,
+            //   // storedObject: {
+            //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+            //   //   keyInfos: {
+            //   //     alg: "A256CBC",
+            //   //     ext: true,
+            //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+            //   //     key_ops: ["encrypt", "decrypt"],
+            //   //     kty: "oct",
+            //   //   },
+            //   //   iv: [
+            //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+            //   //   ],
+            //   // },
+            storedObject: {
+                filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
+                keyInfos: {
+                alg: "A256CBC",
+                ext: true,
+                k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
+                key_ops: ["encrypt", "decrypt"],
+                kty: "oct",
+                },
+                iv: [
+                254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
+                ],
             },
-            iv: [
-            254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
+            zones: [
+                {
+                page: 1,
+                pageWidth: 210,
+                pageHeight: 297,
+                x: 21, //from top-left corner
+                y: 50,
+                width: 80,
+                height: 50,
+                },
+                {
+                page: 3,
+                pageWidth: 210,
+                pageHeight: 297,
+                x: 60, //from top-left corner
+                y: 20,
+                width: 80,
+                height: 50,
+                },
             ],
-        },
-        zones: [
-            {
-            page: 1,
-            pageWidth: 210,
-            pageHeight: 297,
-            x: 21, //from top-left corner
-            y: 50,
-            width: 80,
-            height: 50,
-            },
-            {
-            page: 3,
-            pageWidth: 210,
-            pageHeight: 297,
-            x: 60, //from top-left corner
-            y: 20,
-            width: 80,
-            height: 50,
-            },
-        ],
-        };
-        window.signature = signature;
-    </script>
-    {{ encore_entry_script_tags('vue_document_signature') }}
-{% endblock %}
+            };
+            window.signature = signature;
+        </script>
+        {{ encore_entry_script_tags('vue_document_signature') }}
+    {% endblock %}
 
-{% block css %}
-    {{ encore_entry_link_tags('mod_document_action_buttons_group') }}
-{% endblock %}
-
-{% block content %}
-    <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
-
-    {{ mm.mimeIcon(document.object.type) }}
-
-    <dl class="chill_view_data">
-        <dt>{{ 'Title'|trans }}</dt>
-        <dd>{{ document.title }}</dd>
-    </dl>
-
-    <div id="document-signature"></div>
-
-    <ul class="record_actions sticky-form-buttons">
-        <li class="cancel">
-            <a href="{{ chill_return_path_or('chill_docstore_generic-doc_by-person_index', {'id': person.id}) }}" class="btn btn-cancel">
-                {{ 'Back to the list' | trans }}
-            </a>
-        </li>
-
-        {% if is_granted('CHILL_PERSON_DOCUMENT_DELETE', document) %}
-            <li class="delete">
-                <a href="{{ chill_return_path_or('chill_docstore_person_document_delete', {'person': person.id, 'id': document.id}) }}" class="btn btn-delete"></a>
-            </li>
-        {% endif %}
-
-        <li>
-            {{ document.object|chill_document_button_group(document.title, is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document)) }}
-        </li>
-
-        {% if is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document) %}
-            <li>
-                <a href="{{ path('person_document_edit', {'id': document.id, 'person': person.id}) }}" class="btn btn-edit">
-                    {{ 'Edit' | trans }}
-                </a>
-            </li>
-        {% endif %}
-{% endblock %}
+    <div class="content" id="content">
+        <div class="container-xxl">
+            <div class="row">
+               <div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
+                   <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
+                   <div class="row" id="document-signature"></div>
+               </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

From 0c8ef3786092c783e263e2ff2930eea06e4b9022 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 2 Jul 2024 16:20:40 +0200
Subject: [PATCH 13/26] signature - more css bootstrap layout of the signature
 vue app

---
 .../public/vuejs/DocumentSignature/App.vue    | 21 +++++++++++--------
 .../views/PersonDocument/signature.html.twig  |  2 ++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index da31c1b47..1cecea801 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -12,23 +12,26 @@
   <div class="col-12">
 
     <div class="row justify-content-center">
-      <div class="col-3">
-        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="confirm_sign">
-          Confirmer la signature
+      <div class="col-6">
+        <button class="btn btn-create me-2" :disabled="!userSignatureZones" @click="confirm_sign">
+          Signer
+        </button>
+        <button class="btn btn-misc" :disabled="!userSignatureZones" @click="undo_sign">
+          Enlever la signature
         </button>
       </div>
-      <div class="col-3">
-        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="undo_sign">
-          Supprimer la signature
+      <div class="col-6">
+        <button class="btn float-end btn-delete" :disabled="!userSignatureZones" @click="undo_sign">
+          Refuser de signer
         </button>
       </div>
     </div>
 
     <div class="row justify-content-center">
-      <div class="col-2">
+      <div class="col-4">
         <button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
       </div>
-      <div class="col-2">
+      <div class="col-4">
         <button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
       </div>
     </div>
@@ -36,7 +39,7 @@
     <div class="row justify-content-center" v-if="pageCount > 1">
       <div class="col-3">
         <button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)">❮</button>
-          {{ page }} / {{ pageCount }}
+          page {{ page }} / {{ pageCount }}
         <button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
       </div>
     </div>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index 431de25b7..df21b178d 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -8,6 +8,8 @@
     <title>Signature</title>
 
     {{ encore_entry_link_tags('mod_bootstrap') }}
+    {{ encore_entry_link_tags('mod_forkawesome') }}
+    {{ encore_entry_link_tags('chill') }}
 
 </head>
 

From 5b7e3f033601f46544dfd1c5aba23678ad3aa05e Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 3 Jul 2024 16:08:44 +0200
Subject: [PATCH 14/26] signature - modale and translations in the vue app

---
 .../public/vuejs/DocumentSignature/App.vue    | 100 ++++++++++--------
 .../public/vuejs/DocumentSignature/index.ts   |  21 +++-
 2 files changed, 72 insertions(+), 49 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 1cecea801..dd702c2b1 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/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">
-          Signer
+        <button
+          class="btn btn-action me-2"
+          :disabled="!userSignatureZones"
+          @click="modalOpen = true"
+        >
+          {{ $t("sign") }}
         </button>
-        <button class="btn btn-misc" :disabled="!userSignatureZones" @click="undo_sign">
-          Enlever la signature
+        <button
+          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">
-          Refuser de signer
+        <button class="btn float-end btn-delete" @click="undo_sign">
+          {{ $t("cancel_signing") }}
         </button>
       </div>
     </div>
 
     <div class="row justify-content-center">
-      <div class="col-4">
-        <button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
+      <div class="col-4 gap-2 d-grid">
+        <button class="btn btn-light" @click="turn_signature(-1)">
+          {{ $t("last_sign_zone") }}
+        </button>
       </div>
-      <div class="col-4">
-        <button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
+      <div class="col-4 gap-2 d-grid">
+        <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">
-        <button class="btn btn-light" :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 class="col-3 text-center">
+        <button
+          class="btn btn-light"
+          :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">
-    <canvas id="canvas" style="width:100%"></canvas>
+  <div class="col-12 text-center">
+    <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 = {
-//   messages: {
-//     fr: {
-//       upload_a_document: "Téléversez un document",
-//     },
-//   },
-// };
-
-const modalOpened: Ref<boolean> = ref(false);
+const modalOpen: 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
 };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index 6d73bf6a4..d141a9358 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/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");

From c428e6665fb15bf42910f07bfdb522ad7ebac8a4 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 4 Jul 2024 15:17:04 +0200
Subject: [PATCH 15/26] signature: use PDFSignatureZoneParser in vue app
 signature

---
 .../Controller/DocumentPersonController.php   | 19 ++++++-
 .../Resources/public/types.ts                 | 37 +++++++-------
 .../public/vuejs/DocumentSignature/App.vue    | 14 ++---
 .../views/PersonDocument/signature.html.twig  | 51 +------------------
 4 files changed, 46 insertions(+), 75 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
index c0edbe492..4867a12b2 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
@@ -26,6 +26,8 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Contracts\Translation\TranslatorInterface;
+use Chill\DocStoreBundle\Service\Signature\PDFSignatureZoneParser;
+use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
 
 /**
  * Class DocumentPersonController.
@@ -40,6 +42,8 @@ class DocumentPersonController extends AbstractController
         protected TranslatorInterface $translator,
         protected EventDispatcherInterface $eventDispatcher,
         protected AuthorizationHelper $authorizationHelper,
+        protected PDFSignatureZoneParser $PDFSignatureZoneParser,
+        protected StoredObjectManagerInterface $storedObjectManagerInterface,
         private readonly \Doctrine\Persistence\ManagerRegistry $managerRegistry
     ) {}
 
@@ -211,9 +215,22 @@ class DocumentPersonController extends AbstractController
         ]);
         $this->eventDispatcher->dispatch($event, PrivacyEvent::PERSON_PRIVACY_EVENT);
 
+        $storedObject = $document->getObject();
+        $content = $this->storedObjectManagerInterface->read($storedObject);
+        $zones = $this->PDFSignatureZoneParser->findSignatureZones($content);
+
+        $signature = [];
+        $signature['id'] = 1;
+        $signature['storedObject'] = [ //TEMP
+            'filename' => $storedObject->getFilename(),
+            'iv'=> $storedObject->getIv(),
+            'keyInfos' => $storedObject->getKeyInfos()
+        ];
+        $signature['zones'] = $zones;
+
         return $this->render(
             '@ChillDocStore/PersonDocument/signature.html.twig',
-            ['document' => $document, 'person' => $person]
+            ['document' => $document, 'person' => $person, 'signature' => $signature]
         );
     }
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index a96949fdc..8fad4d9c8 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -26,11 +26,11 @@ export interface StoredObject {
 }
 
 export interface StoredObjectCreated {
-    status: "stored_object_created",
-    filename: string,
-    iv: Uint8Array,
-    keyInfos: object,
-    type: string,
+  status: "stored_object_created",
+  filename: string,
+  iv: Uint8Array,
+  keyInfos: object,
+  type: string,
 }
 
 export interface StoredObjectStatusChange {
@@ -51,21 +51,24 @@ export type WopiEditButtonExecutableBeforeLeaveFunction = {
  * Object containing information for performering a POST request to a swift object store
  */
 export interface PostStoreObjectSignature {
-    method: "POST",
-    max_file_size: number,
-    max_file_count: 1,
-    expires: number,
-    submit_delay: 180,
-    redirect: string,
-    prefix: string,
-    url: string,
-    signature: string,
+  method: "POST",
+  max_file_size: number,
+  max_file_count: 1,
+  expires: number,
+  submit_delay: 180,
+  redirect: string,
+  prefix: string,
+  url: string,
+  signature: string,
 }
 
+export interface PDFPage {
+  index: number,
+  width: number,
+  height: number,
+}
 export interface SignatureZone {
-  page: number,
-  pageWidth: number,
-  pageHeight: number,
+  PDFPage: PDFPage,
   x: number,
   y: number,
   width: number,
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index dd702c2b1..b22f4bdbd 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -179,8 +179,8 @@ const hit_signature = (
   canvasWidth: number,
   canvasHeight: number
 ) => {
-  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.pageWidth;
-  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.pageHeight;
+  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width;
+  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.PDFPage.height;
   return (
     scaleXToCanvas(zone.x) < xy[0] &&
     xy[0] < scaleXToCanvas(zone.x + zone.width) &&
@@ -191,7 +191,7 @@ const hit_signature = (
 
 const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
-    .filter((z) => z.page === page.value)
+    .filter((z) => z.PDFPage.index + 1 === page.value)
     .map((z) => {
       if (
         hit_signature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
@@ -217,7 +217,7 @@ const turn_page = async (upOrDown: number) => {
 const turn_signature = async (upOrDown: number) => {
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
-    page.value = currentZone.page;
+    page.value = currentZone.PDFPage.index + 1;
     await set_page(page.value);
     setTimeout(() => add_zones(page.value), 200);
   }
@@ -236,9 +236,9 @@ const draw_zone = (
   selected = false
 ) => {
   const scaleXToCanvas = (x: number) =>
-    Math.round((x * canvasWidth) / zone.pageWidth);
+    Math.round((x * canvasWidth) / zone.PDFPage.width);
   const scaleYToCanvas = (y: number) =>
-    Math.round((y * canvasHeight) / zone.pageHeight);
+    Math.round((y * canvasHeight) / zone.PDFPage.height);
   ctx.strokeStyle = selected ? "orange " : "yellow";
   ctx.lineWidth = 10;
   ctx.lineJoin = "bevel";
@@ -266,7 +266,7 @@ const add_zones = (page: number) => {
   const ctx = canvas.getContext("2d");
   if (ctx) {
     signature.zones
-      .filter((z) => z.page === page)
+      .filter((z) => z.PDFPage.index + 1 === page)
       .map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
   }
 };
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index df21b178d..5f2a2da3b 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -18,56 +18,7 @@
     {% block js %}
         {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
         <script type="text/javascript">
-            const signature = {
-            id: 1,
-            //   // storedObject: {
-            //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
-            //   //   keyInfos: {
-            //   //     alg: "A256CBC",
-            //   //     ext: true,
-            //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
-            //   //     key_ops: ["encrypt", "decrypt"],
-            //   //     kty: "oct",
-            //   //   },
-            //   //   iv: [
-            //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
-            //   //   ],
-            //   // },
-            storedObject: {
-                filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
-                keyInfos: {
-                alg: "A256CBC",
-                ext: true,
-                k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
-                key_ops: ["encrypt", "decrypt"],
-                kty: "oct",
-                },
-                iv: [
-                254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
-                ],
-            },
-            zones: [
-                {
-                page: 1,
-                pageWidth: 210,
-                pageHeight: 297,
-                x: 21, //from top-left corner
-                y: 50,
-                width: 80,
-                height: 50,
-                },
-                {
-                page: 3,
-                pageWidth: 210,
-                pageHeight: 297,
-                x: 60, //from top-left corner
-                y: 20,
-                width: 80,
-                height: 50,
-                },
-            ],
-            };
-            window.signature = signature;
+            window.signature = {{ signature|json_encode|raw }};
         </script>
         {{ encore_entry_script_tags('vue_document_signature') }}
     {% endblock %}

From c968d6c541c737b1a4db51b3d68411448efa196c Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 4 Jul 2024 17:10:20 +0200
Subject: [PATCH 16/26] signature: improve layout and some functionalities of
 the signature app

---
 .../public/vuejs/DocumentSignature/App.vue    | 115 +++++++++++-------
 .../public/vuejs/DocumentSignature/index.ts   |   1 +
 .../views/PersonDocument/signature.html.twig  |   3 +-
 3 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index b22f4bdbd..1720ce996 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -16,7 +16,52 @@
     </modal>
   </teleport>
   <div class="col-12">
-    <div class="row justify-content-center">
+    <div
+      class="row justify-content-center mb-2"
+      v-if="signature.zones.length > 1"
+    >
+      <div class="col-4 gap-2 d-grid">
+        <button class="btn btn-light btn-sm" @click="turn_signature(-1)">
+          {{ $t("last_sign_zone") }}
+        </button>
+      </div>
+      <div class="col-4 gap-2 d-grid">
+        <button class="btn btn-light btn-sm" @click="turn_signature(1)">
+          {{ $t("next_sign_zone") }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      id="turn-page"
+      class="row justify-content-center mb-2"
+      v-if="pageCount > 1"
+    >
+      <div class="col-6-sm col-3-md text-center">
+        <button
+          class="btn btn-light btn-sm"
+          :disabled="page <= 1"
+          @click="turn_page(-1)"
+        >
+          ❮
+        </button>
+        <span>page {{ page }} / {{ pageCount }}</span>
+        <button
+          class="btn btn-light btn-sm"
+          :disabled="page >= pageCount"
+          @click="turn_page(1)"
+        >
+          ❯
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="col-12 text-center">
+    <canvas class="m-auto" id="canvas"></canvas>
+  </div>
+
+  <div class="col-12 p-4" id="action-buttons">
+    <div class="row">
       <div class="col-6">
         <button
           class="btn btn-action me-2"
@@ -29,9 +74,18 @@
           class="btn btn-misc"
           :hidden="!userSignatureZones"
           @click="undo_sign"
+          v-if="signature.zones.length > 1"
         >
           {{ $t("choose_another_signature") }}
         </button>
+        <button
+          class="btn btn-misc"
+          :hidden="!userSignatureZones"
+          @click="undo_sign"
+          v-else
+        >
+          {{ $t("cancel") }}
+        </button>
       </div>
       <div class="col-6">
         <button class="btn float-end btn-delete" @click="undo_sign">
@@ -39,42 +93,6 @@
         </button>
       </div>
     </div>
-
-    <div class="row justify-content-center">
-      <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light" @click="turn_signature(-1)">
-          {{ $t("last_sign_zone") }}
-        </button>
-      </div>
-      <div class="col-4 gap-2 d-grid">
-        <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 text-center">
-        <button
-          class="btn btn-light"
-          :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 text-center">
-    <canvas class="m-auto" id="canvas"></canvas>
   </div>
 </template>
 
@@ -180,7 +198,8 @@ const hit_signature = (
   canvasHeight: number
 ) => {
   const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width;
-  const scaleYToCanvas = (y: number) => (y * canvasHeight) / zone.PDFPage.height;
+  const scaleYToCanvas = (y: number) =>
+    (y * canvasHeight) / zone.PDFPage.height;
   return (
     scaleXToCanvas(zone.x) < xy[0] &&
     xy[0] < scaleXToCanvas(zone.x + zone.width) &&
@@ -189,7 +208,8 @@ const hit_signature = (
   );
 };
 
-const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
+  undo_sign();
   signature.zones
     .filter((z) => z.PDFPage.index + 1 === page.value)
     .map((z) => {
@@ -206,6 +226,7 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
         userSignatureZones.value = z;
       }
     });
+};
 
 const turn_page = async (upOrDown: number) => {
   userSignatureZones.value = null;
@@ -292,8 +313,20 @@ download_and_open();
 </script>
 
 <style scoped lang="scss">
-canvas {
-  width: 100%;
+#canvas {
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
+}
+div#action-buttons {
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 100;
+}
+div#turn-page {
+  span {
+    font-size: 0.8rem;
+    margin: 0 0.4rem;
+  }
 }
 </style>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index d141a9358..b2bc57feb 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -11,6 +11,7 @@ const appMessages = {
         signature_confirmation: 'Confirmation de la signature',
         sign: 'Signer',
         choose_another_signature: 'Choisir une autre signature',
+        cancel: 'Annuler',
         cancel_signing: 'Refuser de signer',
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index 5f2a2da3b..b410f70d3 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -10,6 +10,7 @@
     {{ encore_entry_link_tags('mod_bootstrap') }}
     {{ encore_entry_link_tags('mod_forkawesome') }}
     {{ encore_entry_link_tags('chill') }}
+    {{ encore_entry_link_tags('vue_document_signature') }}
 
 </head>
 
@@ -27,7 +28,7 @@
         <div class="container-xxl">
             <div class="row">
                <div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
-                   <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
+                   <h4>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h4>
                    <div class="row" id="document-signature"></div>
                </div>
             </div>

From fb62e54d63bf460cd50b15fc9823a0a36fcd85f5 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 5 Jul 2024 10:10:26 +0200
Subject: [PATCH 17/26] signature: correct positioning of zones in vue app  wrt
 to PDFSignatureZoneParser

---
 .../public/vuejs/DocumentSignature/App.vue      | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 1720ce996..160028ce2 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -197,14 +197,17 @@ const hit_signature = (
   canvasWidth: number,
   canvasHeight: number
 ) => {
-  const scaleXToCanvas = (x: number) => (x * canvasWidth) / zone.PDFPage.width;
+  const scaleXToCanvas = (x: number) =>
+    Math.round((x * canvasWidth) / zone.PDFPage.width);
+  const scaleHeightToCanvas = (h: number) =>
+    Math.round((h * canvasHeight) / zone.PDFPage.height);
   const scaleYToCanvas = (y: number) =>
-    (y * canvasHeight) / zone.PDFPage.height;
+    Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
   return (
     scaleXToCanvas(zone.x) < xy[0] &&
     xy[0] < scaleXToCanvas(zone.x + zone.width) &&
     scaleYToCanvas(zone.y) < xy[1] &&
-    xy[1] < scaleYToCanvas(zone.y + zone.height)
+    xy[1] < scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height)
   );
 };
 
@@ -258,8 +261,10 @@ const draw_zone = (
 ) => {
   const scaleXToCanvas = (x: number) =>
     Math.round((x * canvasWidth) / zone.PDFPage.width);
+  const scaleHeightToCanvas = (h: number) =>
+    Math.round((h * canvasHeight) / zone.PDFPage.height);
   const scaleYToCanvas = (y: number) =>
-    Math.round((y * canvasHeight) / zone.PDFPage.height);
+    Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
   ctx.strokeStyle = selected ? "orange " : "yellow";
   ctx.lineWidth = 10;
   ctx.lineJoin = "bevel";
@@ -267,13 +272,13 @@ const draw_zone = (
     scaleXToCanvas(zone.x),
     scaleYToCanvas(zone.y),
     scaleXToCanvas(zone.width),
-    scaleYToCanvas(zone.height)
+    scaleHeightToCanvas(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;
+  const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(zone.height) / 2;
   ctx.strokeStyle = "grey";
   ctx.strokeText("Choisir cette", xText, yText - 12);
   ctx.strokeText("zone de signature", xText, yText + 12);

From 39d3ba2f40a42d6d366a55ac9312c3bd15eea1cd Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 5 Jul 2024 14:59:46 +0200
Subject: [PATCH 18/26] signature: fake POSTing of signature, adjustments

---
 .../public/vuejs/DocumentSignature/App.vue    | 90 ++++++++++++-------
 .../public/vuejs/DocumentSignature/index.ts   |  2 +
 .../Signature/PDFSignatureZoneParser.php      |  2 +-
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 160028ce2..35e842243 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -5,8 +5,19 @@
         <h2>{{ $t("signature_confirmation") }}</h2>
       </template>
       <template v-slot:body>
-        <p>{{ $t("you_are_going_to_sign") }}</p>
-        <p>{{ $t("are_you_sure") }}</p>
+        <div class="signature-modal-body text-center" v-if="loading">
+          <p>{{ $t("electronic_signature_in_progress") }}</p>
+          <div class="loading">
+            <i
+              class="fa fa-circle-o-notch fa-spin fa-3x"
+              :title="$t('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>
+        </div>
       </template>
       <template v-slot:footer>
         <button class="btn btn-action" @click.prevent="confirm_sign">
@@ -21,7 +32,7 @@
       v-if="signature.zones.length > 1"
     >
       <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light btn-sm" @click="turn_signature(-1)">
+        <button :disabled="zone < 1" class="btn btn-light btn-sm" @click="turn_signature(-1)">
           {{ $t("last_sign_zone") }}
         </button>
       </div>
@@ -60,7 +71,7 @@
     <canvas class="m-auto" id="canvas"></canvas>
   </div>
 
-  <div class="col-12 p-4" id="action-buttons">
+  <div class="col-12 p-4" id="action-buttons" v-if="!signed">
     <div class="row">
       <div class="col-6">
         <button
@@ -121,6 +132,8 @@ import {
 pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
 const modalOpen: Ref<boolean> = ref(false);
+const loading: Ref<boolean> = ref(false);
+const signed: Ref<boolean> = ref(false);
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
 const zone: Ref<number> = ref(0);
@@ -211,8 +224,7 @@ const hit_signature = (
   );
 };
 
-const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
-  undo_sign();
+const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
     .filter((z) => z.PDFPage.index + 1 === page.value)
     .map((z) => {
@@ -221,15 +233,15 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) => {
       ) {
         const ctx = canvas.getContext("2d");
         if (ctx) {
+          set_page(page.value);
           setTimeout(
-            () => draw_zone(z, ctx, canvas.width, canvas.height, true),
+            () => draw_zone(z, ctx, canvas.width, canvas.height),
             200
           );
         }
         userSignatureZones.value = z;
       }
     });
-};
 
 const turn_page = async (upOrDown: number) => {
   userSignatureZones.value = null;
@@ -239,34 +251,37 @@ const turn_page = async (upOrDown: number) => {
 };
 
 const turn_signature = async (upOrDown: number) => {
+  userSignatureZones.value = null;
+  if (zone.value < signature.zones.length - 1) {
+    zone.value = zone.value + upOrDown;
+  } else {
+    zone.value = 0;
+  }
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
     page.value = currentZone.PDFPage.index + 1;
     await set_page(page.value);
     setTimeout(() => add_zones(page.value), 200);
   }
-  if (zone.value < signature.zones.length - 1) {
-    zone.value = zone.value + upOrDown;
-  } else {
-    zone.value = 0;
-  }
 };
 
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
-  canvasHeight: number,
-  selected = false
+  canvasHeight: number
 ) => {
+  const unselectedBlue = "#007bff";
+  const selectedBlue = "#034286";
   const scaleXToCanvas = (x: number) =>
     Math.round((x * canvasWidth) / zone.PDFPage.width);
   const scaleHeightToCanvas = (h: number) =>
     Math.round((h * canvasHeight) / zone.PDFPage.height);
   const scaleYToCanvas = (y: number) =>
     Math.round(zone.PDFPage.height - scaleHeightToCanvas(y));
-  ctx.strokeStyle = selected ? "orange " : "yellow";
-  ctx.lineWidth = 10;
+  ctx.strokeStyle =
+    userSignatureZones.value === null ? unselectedBlue : selectedBlue;
+  ctx.lineWidth = 2;
   ctx.lineJoin = "bevel";
   ctx.strokeRect(
     scaleXToCanvas(zone.x),
@@ -279,12 +294,17 @@ const draw_zone = (
   ctx.fillStyle = "black";
   const xText = scaleXToCanvas(zone.x) + scaleXToCanvas(zone.width) / 2;
   const yText = scaleYToCanvas(zone.y) + scaleHeightToCanvas(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);
+  if (userSignatureZones.value !== null) {
+    ctx.fillStyle = selectedBlue;
+    ctx.fillText("Signer ici", xText, yText);
+  } else {
+    ctx.fillStyle = unselectedBlue;
+    ctx.fillText("Choisir cette", xText, yText - 12);
+    ctx.fillText("zone de signature", xText, yText + 12);
+    // ctx.strokeStyle = "#c6c6c6"; // halo
+    // ctx.strokeText("Choisir cette", xText, yText - 12);
+    // ctx.strokeText("zone de signature", xText, yText + 12);
+  }
 };
 
 const add_zones = (page: number) => {
@@ -299,18 +319,23 @@ const add_zones = (page: number) => {
 
 const confirm_sign = () => {
   console.log(userSignatureZones.value);
+  loading.value = true;
   //TODO POST userSignatureZones to backend
+  setTimeout(() => {
+    loading.value = false;
+    modalOpen.value = false;
+    signed.value = true;
+  }, 3000); // FAKE
 };
 
 const undo_sign = async () => {
-  const canvas = document.querySelectorAll("canvas")[0];
-  const ctx = canvas.getContext("2d");
-  if (ctx && userSignatureZones.value) {
-    draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
-    //another option is to reload the canvas
-    //await set_page(page.value);
-    //setTimeout(() => add_zones(page.value), 200);
-  }
+  // const canvas = document.querySelectorAll("canvas")[0];
+  // const ctx = canvas.getContext("2d");
+  // if (ctx && userSignatureZones.value) {
+  //   //draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
+  // }
+  await set_page(page.value);
+  setTimeout(() => add_zones(page.value), 200);
   userSignatureZones.value = null;
 };
 
@@ -333,5 +358,8 @@ div#turn-page {
     margin: 0 0.4rem;
   }
 }
+div.signature-modal-body {
+  height: 8rem;
+}
 </style>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
index b2bc57feb..264622e72 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts
@@ -15,6 +15,8 @@ const appMessages = {
         cancel_signing: 'Refuser de signer',
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
+        electronic_signature_in_progress: 'Signature électronique en cours...',
+        loading: 'Chargement...'
     }
 }
 
diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
index d57b98abf..44bed3298 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
@@ -20,7 +20,7 @@ class PDFSignatureZoneParser
     private Parser $parser;
 
     public function __construct(
-        public float $defaultHeight = 180.0,
+        public float $defaultHeight = 90.0,
         public float $defaultWidth = 180.0,
     ) {
         $this->parser = new Parser();

From 77da2c1ac6a92b0a4ca536633ed8e6fa89df783a Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Thu, 11 Jul 2024 08:06:18 +0200
Subject: [PATCH 19/26] signature: add index on PDFSignatureZone + init POST
 signature

---
 .../Controller/SignatureRequestController.php | 42 +++++++++++++++----
 .../Resources/public/types.ts                 |  3 +-
 .../public/vuejs/DocumentSignature/App.vue    | 24 ++++++++---
 .../Service/Signature/PDFSignatureZone.php    |  5 ++-
 .../Signature/PDFSignatureZoneParser.php      |  4 +-
 .../RequestPdfSignMessageSerializerTest.php   |  6 +--
 .../Signature/PDFSignatureZoneParserTest.php  |  2 +
 7 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
index d76e9e5db..9cbd656cd 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
@@ -16,7 +16,9 @@ use Chill\DocStoreBundle\Service\Signature\Driver\BaseSigner\RequestPdfSignMessa
 use Chill\DocStoreBundle\Service\Signature\PDFPage;
 use Chill\DocStoreBundle\Service\Signature\PDFSignatureZone;
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
-use Symfony\Component\HttpFoundation\Response;
+use Chill\MainBundle\Entity\Workflow\EntityWorkflowStepSignature;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Messenger\MessageBusInterface;
 use Symfony\Component\Routing\Annotation\Route;
 
@@ -28,19 +30,41 @@ class SignatureRequestController
     ) {}
 
     #[Route('/api/1.0/document/workflow/{id}/signature-request', name: 'chill_docstore_signature_request')]
-    public function processSignature(StoredObject $storedObject): Response
+    //public function processSignature(EntityWorkflowStepSignature $signature): Response // using ParamConverter
+    public function processSignature(EntityWorkflowStepSignature $signature, Request $request): JsonResponse
     {
-        $content = $this->storedObjectManager->read($storedObject);
+        dump($signature);
+        // $signature = $this->signatureRepository($signature); //not useful?
+        // $entityWorkflow = $signature->getStep()->getEntityWorkflow();
+        // $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
+
+        dump($request);
+        // TODO parse payload: json_decode ou, mieux, dataTransfertObject
+        // dump($request);
+        $data = \json_decode((string) $request->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        dump($data);
+        $signatureId = 1;
+        $storedObjectId = 9; //$data['storedObject']['id'];
+        $content = 'blop';// $this->storedObjectManager->read($storedObjectId);
+
+        $zone = new PDFSignatureZone(
+            $data['zone']['index'],
+            $data['zone']['x'],
+            $data['zone']['y'],
+            $data['zone']['height'],
+            $data['zone']['width'],
+            $page = new PDFPage($data['zone']['PDFPage']['index'], $data['zone']['PDFPage']['width'], $data['zone']['PDFPage']['height'])
+        );
 
         $this->messageBus->dispatch(new RequestPdfSignMessage(
-            0,
-            new PDFSignatureZone(10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0)),
-            0,
-            'test signature',
-            'Mme Caroline Diallo',
+            $signatureId,
+            $zone,
+            $data['zone']['index'],
+            'test signature', //reason (string)
+            'Mme Caroline Diallo', //signerText (string)
             $content
         ));
 
-        return new Response('<html><head><title>test</title></head><body><p>ok</p></body></html>');
+        return new JsonResponse(null, JsonResponse::HTTP_OK, []);
     }
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index 8fad4d9c8..63d85a3df 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -68,11 +68,12 @@ export interface PDFPage {
   height: number,
 }
 export interface SignatureZone {
-  PDFPage: PDFPage,
+  index: number,
   x: number,
   y: number,
   width: number,
   height: number,
+  PDFPage: PDFPage,
 }
 
 export interface Signature {
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 35e842243..ee2daf498 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -110,6 +110,7 @@
 <script setup lang="ts">
 import { ref, Ref, reactive } from "vue";
 import { Signature, SignatureZone } from "../../types";
+import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
 import {
   PDFDocumentProxy,
@@ -321,11 +322,24 @@ const confirm_sign = () => {
   console.log(userSignatureZones.value);
   loading.value = true;
   //TODO POST userSignatureZones to backend
-  setTimeout(() => {
-    loading.value = false;
-    modalOpen.value = false;
-    signed.value = true;
-  }, 3000); // FAKE
+  const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
+  const body = {
+    storedObject: signature.storedObject,
+    zone: userSignatureZones.value,
+  };
+  makeFetch('POST', url, body)
+      .then(r => {
+
+      })
+      .catch((error) => {
+
+      });
+
+  // setTimeout(() => {
+  //   loading.value = false;
+  //   modalOpen.value = false;
+  //   signed.value = true;
+  // }, 3000); // FAKE
 };
 
 const undo_sign = async () => {
diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZone.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZone.php
index bdb4dcd65..c21b2fdc2 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZone.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZone.php
@@ -16,6 +16,8 @@ use Symfony\Component\Serializer\Annotation\Groups;
 final readonly class PDFSignatureZone
 {
     public function __construct(
+        #[Groups(['read'])]
+        public int $index,
         #[Groups(['read'])]
         public float $x,
         #[Groups(['read'])]
@@ -31,7 +33,8 @@ final readonly class PDFSignatureZone
     public function equals(self $other): bool
     {
         return
-            $this->x == $other->x
+            $this->index == $other->index
+            && $this->x == $other->x
             && $this->y == $other->y
             && $this->height == $other->height
             && $this->width == $other->width
diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
index 44bed3298..2e35bc568 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
@@ -37,6 +37,7 @@ class PDFSignatureZoneParser
         $defaults = $pdf->getObjectsByType('Pages');
         $defaultPage = reset($defaults);
         $defaultPageDetails = $defaultPage->getDetails();
+        $zoneIndex = 0;
 
         foreach ($pdf->getPages() as $index => $page) {
             $details = $page->getDetails();
@@ -48,7 +49,8 @@ class PDFSignatureZoneParser
 
             foreach ($page->getDataTm() as $dataTm) {
                 if (str_starts_with($dataTm[1], self::ZONE_SIGNATURE_START)) {
-                    $zones[] = new PDFSignatureZone((float) $dataTm[0][4], (float) $dataTm[0][5], $this->defaultHeight, $this->defaultWidth, $pdfPage);
+                    $zones[] = new PDFSignatureZone((int) $zoneIndex, (float) $dataTm[0][4], (float) $dataTm[0][5], $this->defaultHeight, $this->defaultWidth, $pdfPage);
+                    $zoneIndex++;
                 }
             }
         }
diff --git a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/RequestPdfSignMessageSerializerTest.php b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/RequestPdfSignMessageSerializerTest.php
index 6fda535df..312fabb19 100644
--- a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/RequestPdfSignMessageSerializerTest.php
+++ b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/RequestPdfSignMessageSerializerTest.php
@@ -36,7 +36,7 @@ class RequestPdfSignMessageSerializerTest extends TestCase
         $envelope = new Envelope(
             $request = new RequestPdfSignMessage(
                 0,
-                new PDFSignatureZone(10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0)),
+                new PDFSignatureZone(0, 10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0)),
                 0,
                 'metadata to add to the signature',
                 'Mme Caroline Diallo',
@@ -66,7 +66,7 @@ class RequestPdfSignMessageSerializerTest extends TestCase
 
         $request = new RequestPdfSignMessage(
             0,
-            new PDFSignatureZone(10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0)),
+            new PDFSignatureZone(0, 10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0)),
             0,
             'metadata to add to the signature',
             'Mme Caroline Diallo',
@@ -121,7 +121,7 @@ class RequestPdfSignMessageSerializerTest extends TestCase
         $denormalizer = new class () implements DenormalizerInterface {
             public function denormalize($data, string $type, ?string $format = null, array $context = [])
             {
-                return new PDFSignatureZone(10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0));
+                return new PDFSignatureZone(0, 10.0, 10.0, 180.0, 180.0, new PDFPage(0, 500.0, 800.0));
             }
 
             public function supportsDenormalization($data, string $type, ?string $format = null)
diff --git a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
index 5a78c8bbf..299c90dd8 100644
--- a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
+++ b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
@@ -58,6 +58,7 @@ class PDFSignatureZoneParserTest extends TestCase
             __DIR__.'/data/signature_2_signature_page_1.pdf',
             [
                 new PDFSignatureZone(
+                    0,
                     127.7,
                     95.289,
                     180.0,
@@ -65,6 +66,7 @@ class PDFSignatureZoneParserTest extends TestCase
                     $page = new PDFPage(0, 595.30393, 841.8897)
                 ),
                 new PDFSignatureZone(
+                    1,
                     269.5,
                     95.289,
                     180.0,

From 421226c0dcb7b0737e9eed4a51a3818c2ac0af10 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 12 Jul 2024 11:52:22 +0200
Subject: [PATCH 20/26] signature: check for signature state

---
 .../Controller/SignatureRequestController.php | 22 +++--
 .../Resources/public/types.ts                 |  4 +-
 .../public/vuejs/DocumentSignature/App.vue    | 93 ++++++++++++++-----
 3 files changed, 85 insertions(+), 34 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
index 9cbd656cd..d148e82b7 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
@@ -17,6 +17,8 @@ use Chill\DocStoreBundle\Service\Signature\PDFPage;
 use Chill\DocStoreBundle\Service\Signature\PDFSignatureZone;
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
 use Chill\MainBundle\Entity\Workflow\EntityWorkflowStepSignature;
+use Chill\MainBundle\Entity\Workflow\EntityWorkflowSignatureStateEnum;
+use Chill\MainBundle\Workflow\EntityWorkflowManager;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Messenger\MessageBusInterface;
@@ -27,26 +29,20 @@ class SignatureRequestController
     public function __construct(
         private MessageBusInterface $messageBus,
         private StoredObjectManagerInterface $storedObjectManager,
+        private EntityWorkflowManager $entityWorkflowManager,
     ) {}
 
     #[Route('/api/1.0/document/workflow/{id}/signature-request', name: 'chill_docstore_signature_request')]
-    //public function processSignature(EntityWorkflowStepSignature $signature): Response // using ParamConverter
     public function processSignature(EntityWorkflowStepSignature $signature, Request $request): JsonResponse
     {
         dump($signature);
         // $signature = $this->signatureRepository($signature); //not useful?
         // $entityWorkflow = $signature->getStep()->getEntityWorkflow();
         // $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
+        $content = 'blop';// $this->storedObjectManager->read($storedObject);
 
-        dump($request);
-        // TODO parse payload: json_decode ou, mieux, dataTransfertObject
-        // dump($request);
-        $data = \json_decode((string) $request->getContent(), true, 512, JSON_THROW_ON_ERROR);
+        $data = \json_decode((string) $request->getContent(), true, 512, JSON_THROW_ON_ERROR); // TODO parse payload: json_decode ou, mieux, dataTransfertObject
         dump($data);
-        $signatureId = 1;
-        $storedObjectId = 9; //$data['storedObject']['id'];
-        $content = 'blop';// $this->storedObjectManager->read($storedObjectId);
-
         $zone = new PDFSignatureZone(
             $data['zone']['index'],
             $data['zone']['x'],
@@ -57,7 +53,7 @@ class SignatureRequestController
         );
 
         $this->messageBus->dispatch(new RequestPdfSignMessage(
-            $signatureId,
+            $signature->getId(),
             $zone,
             $data['zone']['index'],
             'test signature', //reason (string)
@@ -67,4 +63,10 @@ class SignatureRequestController
 
         return new JsonResponse(null, JsonResponse::HTTP_OK, []);
     }
+
+    #[Route('/api/1.0/document/workflow/{id}/check-signature', name: 'chill_docstore_check_signature')]
+    public function checkSignature(EntityWorkflowStepSignature $signature): JsonResponse
+    {
+        return new JsonResponse($signature->getState(), JsonResponse::HTTP_OK, []);
+    }
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
index 63d85a3df..1fc8b1cdd 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/types.ts
@@ -80,4 +80,6 @@ export interface Signature {
   id: number,
   storedObject: StoredObject,
   zones: SignatureZone[],
-}
\ No newline at end of file
+}
+
+export type SignedState = 'pending' | 'signed' | 'rejected' | 'canceled' | 'error';
\ No newline at end of file
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index ee2daf498..268e75636 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -32,7 +32,11 @@
       v-if="signature.zones.length > 1"
     >
       <div class="col-4 gap-2 d-grid">
-        <button :disabled="zone < 1" class="btn btn-light btn-sm" @click="turn_signature(-1)">
+        <button
+          :disabled="zone < 1"
+          class="btn btn-light btn-sm"
+          @click="turn_signature(-1)"
+        >
           {{ $t("last_sign_zone") }}
         </button>
       </div>
@@ -71,7 +75,7 @@
     <canvas class="m-auto" id="canvas"></canvas>
   </div>
 
-  <div class="col-12 p-4" id="action-buttons" v-if="!signed">
+  <div class="col-12 p-4" id="action-buttons" v-if="signedState !== 'signed'">
     <div class="row">
       <div class="col-6">
         <button
@@ -109,7 +113,7 @@
 
 <script setup lang="ts">
 import { ref, Ref, reactive } from "vue";
-import { Signature, SignatureZone } from "../../types";
+import { Signature, SignatureZone, SignedState } from "../../types";
 import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 import * as pdfjsLib from "pdfjs-dist";
 import {
@@ -134,7 +138,7 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
 
 const modalOpen: Ref<boolean> = ref(false);
 const loading: Ref<boolean> = ref(false);
-const signed: Ref<boolean> = ref(false);
+const signedState: Ref<SignedState> = ref("pending");
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
 const zone: Ref<number> = ref(0);
@@ -235,10 +239,7 @@ const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
         const ctx = canvas.getContext("2d");
         if (ctx) {
           set_page(page.value);
-          setTimeout(
-            () => draw_zone(z, ctx, canvas.width, canvas.height),
-            200
-          );
+          setTimeout(() => draw_zone(z, ctx, canvas.width, canvas.height), 200);
         }
         userSignatureZones.value = z;
       }
@@ -318,28 +319,74 @@ const add_zones = (page: number) => {
   }
 };
 
+const check_signature = () => {
+  const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
+  return makeFetch("GET", url)
+    .then((r) => {
+      signedState.value = r as SignedState;
+      if (signedState.value === "pending") {
+        check_for_ready();
+      }
+    })
+    .catch((error) => {
+      signedState.value = "error";
+      console.log('Error while checking the signature', error);
+      //TODO toast error
+    });
+};
+
+const maxTryForReady = 60; //2 minutes for trying to sign
+let tryForReady = 0;
+
+const stop_try_signing = () => {
+  loading.value = false;
+  modalOpen.value = false;
+};
+
+const check_for_ready = () => {
+  if (tryForReady > maxTryForReady) {
+    signedState.value = "error";
+    stop_try_signing();
+    console.log("Reached the maximum number of tentative to try signing");
+    //TODO toast error
+  }
+  if (signedState.value === "rejected") {
+    stop_try_signing();
+    console.log("Signature rejected by the server");
+    //TODO toast error
+  }
+  if (signedState.value === "canceled") {
+    stop_try_signing();
+    console.log("Signature canceledconsole.log('Error while posting the signature', error);");
+    //TODO toast error
+  }
+  if (signedState.value === "pending") {
+    tryForReady = tryForReady + 1;
+    setTimeout(() => check_signature(), 2000);
+  } else {
+    stop_try_signing();
+    if (signedState.value === "signed") {
+      //TODO recharger le document signé
+    }
+  }
+};
+
 const confirm_sign = () => {
-  console.log(userSignatureZones.value);
   loading.value = true;
-  //TODO POST userSignatureZones to backend
   const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
   const body = {
     storedObject: signature.storedObject,
     zone: userSignatureZones.value,
   };
-  makeFetch('POST', url, body)
-      .then(r => {
-
-      })
-      .catch((error) => {
-
-      });
-
-  // setTimeout(() => {
-  //   loading.value = false;
-  //   modalOpen.value = false;
-  //   signed.value = true;
-  // }, 3000); // FAKE
+  makeFetch("POST", url, body)
+    .then((r) => {
+      check_for_ready();
+    })
+    .catch((error) => {
+      console.log('Error while posting the signature', error);
+      stop_try_signing();
+      //TODO toast
+    });
 };
 
 const undo_sign = async () => {

From 67395f52b550e0b849958bdc15650954e447f7aa Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 12 Jul 2024 14:31:34 +0200
Subject: [PATCH 21/26] signature: fix cs + test PDFParser

---
 .../Controller/DocumentPersonController.php               | 6 +++---
 .../Controller/SignatureRequestController.php             | 8 +++-----
 .../Service/Signature/PDFSignatureZoneParser.php          | 2 +-
 .../Service/Signature/PDFSignatureZoneParserTest.php      | 4 ++--
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
index 4867a12b2..ba17c1c73 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/DocumentPersonController.php
@@ -221,10 +221,10 @@ class DocumentPersonController extends AbstractController
 
         $signature = [];
         $signature['id'] = 1;
-        $signature['storedObject'] = [ //TEMP
+        $signature['storedObject'] = [ // TEMP
             'filename' => $storedObject->getFilename(),
-            'iv'=> $storedObject->getIv(),
-            'keyInfos' => $storedObject->getKeyInfos()
+            'iv' => $storedObject->getIv(),
+            'keyInfos' => $storedObject->getKeyInfos(),
         ];
         $signature['zones'] = $zones;
 
diff --git a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
index d148e82b7..3dd99a814 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
@@ -11,13 +11,11 @@ declare(strict_types=1);
 
 namespace Chill\DocStoreBundle\Controller;
 
-use Chill\DocStoreBundle\Entity\StoredObject;
 use Chill\DocStoreBundle\Service\Signature\Driver\BaseSigner\RequestPdfSignMessage;
 use Chill\DocStoreBundle\Service\Signature\PDFPage;
 use Chill\DocStoreBundle\Service\Signature\PDFSignatureZone;
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
 use Chill\MainBundle\Entity\Workflow\EntityWorkflowStepSignature;
-use Chill\MainBundle\Entity\Workflow\EntityWorkflowSignatureStateEnum;
 use Chill\MainBundle\Workflow\EntityWorkflowManager;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
@@ -39,7 +37,7 @@ class SignatureRequestController
         // $signature = $this->signatureRepository($signature); //not useful?
         // $entityWorkflow = $signature->getStep()->getEntityWorkflow();
         // $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
-        $content = 'blop';// $this->storedObjectManager->read($storedObject);
+        $content = 'blop'; // $this->storedObjectManager->read($storedObject);
 
         $data = \json_decode((string) $request->getContent(), true, 512, JSON_THROW_ON_ERROR); // TODO parse payload: json_decode ou, mieux, dataTransfertObject
         dump($data);
@@ -56,8 +54,8 @@ class SignatureRequestController
             $signature->getId(),
             $zone,
             $data['zone']['index'],
-            'test signature', //reason (string)
-            'Mme Caroline Diallo', //signerText (string)
+            'test signature', // reason (string)
+            'Mme Caroline Diallo', // signerText (string)
             $content
         ));
 
diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
index 2e35bc568..450d65807 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
@@ -50,7 +50,7 @@ class PDFSignatureZoneParser
             foreach ($page->getDataTm() as $dataTm) {
                 if (str_starts_with($dataTm[1], self::ZONE_SIGNATURE_START)) {
                     $zones[] = new PDFSignatureZone((int) $zoneIndex, (float) $dataTm[0][4], (float) $dataTm[0][5], $this->defaultHeight, $this->defaultWidth, $pdfPage);
-                    $zoneIndex++;
+                    ++$zoneIndex;
                 }
             }
         }
diff --git a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
index 299c90dd8..4b70e61fc 100644
--- a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
+++ b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/PDFSignatureZoneParserTest.php
@@ -61,7 +61,7 @@ class PDFSignatureZoneParserTest extends TestCase
                     0,
                     127.7,
                     95.289,
-                    180.0,
+                    90.0,
                     180.0,
                     $page = new PDFPage(0, 595.30393, 841.8897)
                 ),
@@ -69,7 +69,7 @@ class PDFSignatureZoneParserTest extends TestCase
                     1,
                     269.5,
                     95.289,
-                    180.0,
+                    90.0,
                     180.0,
                     $page,
                 ),

From 111305d09ccc103a1dfe117539b48e591005a4d0 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 19 Jul 2024 10:00:16 +0200
Subject: [PATCH 22/26] DX change function names to camelCase format in vue app
 signature

---
 .../public/vuejs/DocumentSignature/App.vue    | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 268e75636..6773b5590 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -20,7 +20,7 @@
         </div>
       </template>
       <template v-slot:footer>
-        <button class="btn btn-action" @click.prevent="confirm_sign">
+        <button class="btn btn-action" @click.prevent="confirmSign">
           {{ $t("yes") }}
         </button>
       </template>
@@ -35,13 +35,13 @@
         <button
           :disabled="zone < 1"
           class="btn btn-light btn-sm"
-          @click="turn_signature(-1)"
+          @click="turnSignature(-1)"
         >
           {{ $t("last_sign_zone") }}
         </button>
       </div>
       <div class="col-4 gap-2 d-grid">
-        <button class="btn btn-light btn-sm" @click="turn_signature(1)">
+        <button class="btn btn-light btn-sm" @click="turnSignature(1)">
           {{ $t("next_sign_zone") }}
         </button>
       </div>
@@ -56,7 +56,7 @@
         <button
           class="btn btn-light btn-sm"
           :disabled="page <= 1"
-          @click="turn_page(-1)"
+          @click="turnPage(-1)"
         >
           ❮
         </button>
@@ -64,7 +64,7 @@
         <button
           class="btn btn-light btn-sm"
           :disabled="page >= pageCount"
-          @click="turn_page(1)"
+          @click="turnPage(1)"
         >
           ❯
         </button>
@@ -88,7 +88,7 @@
         <button
           class="btn btn-misc"
           :hidden="!userSignatureZones"
-          @click="undo_sign"
+          @click="undoSign"
           v-if="signature.zones.length > 1"
         >
           {{ $t("choose_another_signature") }}
@@ -96,14 +96,14 @@
         <button
           class="btn btn-misc"
           :hidden="!userSignatureZones"
-          @click="undo_sign"
+          @click="undoSign"
           v-else
         >
           {{ $t("cancel") }}
         </button>
       </div>
       <div class="col-6">
-        <button class="btn float-end btn-delete" @click="undo_sign">
+        <button class="btn float-end btn-delete" @click="undoSign">
           {{ $t("cancel_signing") }}
         </button>
       </div>
@@ -155,14 +155,14 @@ declare global {
 const signature = window.signature;
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
-const mount_pdf = async (url: string) => {
+const mountPdf = async (url: string) => {
   const loadingTask = pdfjsLib.getDocument(url);
   pdf = await loadingTask.promise;
   pageCount.value = pdf.numPages;
-  await set_page(1);
+  await setPage(1);
 };
 
-const get_render_context = (pdfPage: PDFPageProxy) => {
+const getRenderContext = (pdfPage: PDFPageProxy) => {
   const scale = 1;
   const viewport = pdfPage.getViewport({ scale });
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
@@ -176,13 +176,13 @@ const get_render_context = (pdfPage: PDFPageProxy) => {
   };
 };
 
-const set_page = async (page: number) => {
+const setPage = async (page: number) => {
   const pdfPage = await pdf.getPage(page);
-  const renderContext = get_render_context(pdfPage);
+  const renderContext = getRenderContext(pdfPage);
   await pdfPage.render(renderContext);
 };
 
-async function download_and_open(): Promise<Blob> {
+async function downloadAndOpen(): Promise<Blob> {
   let raw;
   try {
     raw = await download_and_decrypt_doc(
@@ -194,22 +194,22 @@ async function download_and_open(): Promise<Blob> {
     console.error("error while downloading and decrypting document", e);
     throw e;
   }
-  await mount_pdf(URL.createObjectURL(raw));
-  init_pdf();
+  await mountPdf(URL.createObjectURL(raw));
+  initPdf();
   return raw;
 }
 
-const init_pdf = () => {
+const initPdf = () => {
   const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   canvas.addEventListener(
     "pointerup",
-    (e: PointerEvent) => canvas_click(e, canvas),
+    (e: PointerEvent) => canvasClick(e, canvas),
     false
   );
-  setTimeout(() => add_zones(page.value), 800);
+  setTimeout(() => addZones(page.value), 800);
 };
 
-const hit_signature = (
+const hitSignature = (
   zone: SignatureZone,
   xy: number[],
   canvasWidth: number,
@@ -229,30 +229,30 @@ const hit_signature = (
   );
 };
 
-const canvas_click = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
   signature.zones
     .filter((z) => z.PDFPage.index + 1 === page.value)
     .map((z) => {
       if (
-        hit_signature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
+        hitSignature(z, [e.offsetX, e.offsetY], canvas.width, canvas.height)
       ) {
         const ctx = canvas.getContext("2d");
         if (ctx) {
-          set_page(page.value);
-          setTimeout(() => draw_zone(z, ctx, canvas.width, canvas.height), 200);
+          setPage(page.value);
+          setTimeout(() => drawZone(z, ctx, canvas.width, canvas.height), 200);
         }
         userSignatureZones.value = z;
       }
     });
 
-const turn_page = async (upOrDown: number) => {
+const turnPage = async (upOrDown: number) => {
   userSignatureZones.value = null;
   page.value = page.value + upOrDown;
-  await set_page(page.value);
-  setTimeout(() => add_zones(page.value), 200);
+  await setPage(page.value);
+  setTimeout(() => addZones(page.value), 200);
 };
 
-const turn_signature = async (upOrDown: number) => {
+const turnSignature = async (upOrDown: number) => {
   userSignatureZones.value = null;
   if (zone.value < signature.zones.length - 1) {
     zone.value = zone.value + upOrDown;
@@ -262,12 +262,12 @@ const turn_signature = async (upOrDown: number) => {
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
     page.value = currentZone.PDFPage.index + 1;
-    await set_page(page.value);
-    setTimeout(() => add_zones(page.value), 200);
+    await setPage(page.value);
+    setTimeout(() => addZones(page.value), 200);
   }
 };
 
-const draw_zone = (
+const drawZone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
   canvasWidth: number,
@@ -309,23 +309,23 @@ const draw_zone = (
   }
 };
 
-const add_zones = (page: number) => {
+const addZones = (page: number) => {
   const canvas = document.querySelectorAll("canvas")[0];
   const ctx = canvas.getContext("2d");
   if (ctx) {
     signature.zones
       .filter((z) => z.PDFPage.index + 1 === page)
-      .map((z) => draw_zone(z, ctx, canvas.width, canvas.height));
+      .map((z) => drawZone(z, ctx, canvas.width, canvas.height));
   }
 };
 
-const check_signature = () => {
+const checkSignature = () => {
   const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
   return makeFetch("GET", url)
     .then((r) => {
       signedState.value = r as SignedState;
       if (signedState.value === "pending") {
-        check_for_ready();
+        checkForReady();
       }
     })
     .catch((error) => {
@@ -338,40 +338,40 @@ const check_signature = () => {
 const maxTryForReady = 60; //2 minutes for trying to sign
 let tryForReady = 0;
 
-const stop_try_signing = () => {
+const stopTrySigning = () => {
   loading.value = false;
   modalOpen.value = false;
 };
 
-const check_for_ready = () => {
+const checkForReady = () => {
   if (tryForReady > maxTryForReady) {
     signedState.value = "error";
-    stop_try_signing();
+    stopTrySigning();
     console.log("Reached the maximum number of tentative to try signing");
     //TODO toast error
   }
   if (signedState.value === "rejected") {
-    stop_try_signing();
+    stopTrySigning();
     console.log("Signature rejected by the server");
     //TODO toast error
   }
   if (signedState.value === "canceled") {
-    stop_try_signing();
+    stopTrySigning();
     console.log("Signature canceledconsole.log('Error while posting the signature', error);");
     //TODO toast error
   }
   if (signedState.value === "pending") {
     tryForReady = tryForReady + 1;
-    setTimeout(() => check_signature(), 2000);
+    setTimeout(() => checkSignature(), 2000);
   } else {
-    stop_try_signing();
+    stopTrySigning();
     if (signedState.value === "signed") {
       //TODO recharger le document signé
     }
   }
 };
 
-const confirm_sign = () => {
+const confirmSign = () => {
   loading.value = true;
   const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
   const body = {
@@ -380,27 +380,27 @@ const confirm_sign = () => {
   };
   makeFetch("POST", url, body)
     .then((r) => {
-      check_for_ready();
+      checkForReady();
     })
     .catch((error) => {
       console.log('Error while posting the signature', error);
-      stop_try_signing();
+      stopTrySigning();
       //TODO toast
     });
 };
 
-const undo_sign = async () => {
+const undoSign = async () => {
   // const canvas = document.querySelectorAll("canvas")[0];
   // const ctx = canvas.getContext("2d");
   // if (ctx && userSignatureZones.value) {
-  //   //draw_zone(userSignatureZones.value, ctx, canvas.width, canvas.height);
+  //   //drawZone(userSignatureZones.value, ctx, canvas.width, canvas.height);
   // }
-  await set_page(page.value);
-  setTimeout(() => add_zones(page.value), 200);
+  await setPage(page.value);
+  setTimeout(() => addZones(page.value), 200);
   userSignatureZones.value = null;
 };
 
-download_and_open();
+downloadAndOpen();
 </script>
 
 <style scoped lang="scss">

From 567ca8a26f97678c66033dc319d63039f07f7ddd Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 19 Jul 2024 11:42:08 +0200
Subject: [PATCH 23/26] integrate signature vueapp to workflow

---
 .../Signature/PDFSignatureZoneParser.php      |  2 +-
 .../Controller/WorkflowController.php         | 42 +++++++++++++++++--
 .../views/Workflow/_signature_sign.html.twig  | 37 ++++++++++++++++
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig

diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
index 450d65807..082d1afa2 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/PDFSignatureZoneParser.php
@@ -49,7 +49,7 @@ class PDFSignatureZoneParser
 
             foreach ($page->getDataTm() as $dataTm) {
                 if (str_starts_with($dataTm[1], self::ZONE_SIGNATURE_START)) {
-                    $zones[] = new PDFSignatureZone((int) $zoneIndex, (float) $dataTm[0][4], (float) $dataTm[0][5], $this->defaultHeight, $this->defaultWidth, $pdfPage);
+                    $zones[] = new PDFSignatureZone($zoneIndex, (float) $dataTm[0][4], (float) $dataTm[0][5], $this->defaultHeight, $this->defaultWidth, $pdfPage);
                     ++$zoneIndex;
                 }
             }
diff --git a/src/Bundle/ChillMainBundle/Controller/WorkflowController.php b/src/Bundle/ChillMainBundle/Controller/WorkflowController.php
index cdd432cf7..7d277ef0e 100644
--- a/src/Bundle/ChillMainBundle/Controller/WorkflowController.php
+++ b/src/Bundle/ChillMainBundle/Controller/WorkflowController.php
@@ -11,6 +11,8 @@ declare(strict_types=1);
 
 namespace Chill\MainBundle\Controller;
 
+use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
+use Chill\DocStoreBundle\Service\Signature\PDFSignatureZoneParser;
 use Chill\MainBundle\Entity\User;
 use Chill\MainBundle\Entity\Workflow\EntityWorkflow;
 use Chill\MainBundle\Entity\Workflow\EntityWorkflowStep;
@@ -32,6 +34,7 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\Validator\Validator\ValidatorInterface;
 use Symfony\Component\Workflow\Registry;
@@ -44,6 +47,7 @@ class WorkflowController extends AbstractController
         private readonly EntityWorkflowManager $entityWorkflowManager,
         private readonly EntityWorkflowRepository $entityWorkflowRepository,
         private readonly ValidatorInterface $validator,
+        private readonly StoredObjectManagerInterface $storedObjectManagerInterface,
         private readonly PaginatorFactory $paginatorFactory,
         private readonly Registry $registry,
         private readonly EntityManagerInterface $entityManager,
@@ -51,6 +55,7 @@ class WorkflowController extends AbstractController
         private readonly ChillSecurity $security,
         private readonly \Doctrine\Persistence\ManagerRegistry $managerRegistry,
         private readonly ClockInterface $clock,
+        private readonly PDFSignatureZoneParser $PDFSignatureZoneParser,
     ) {}
 
     #[Route(path: '/{_locale}/main/workflow/create', name: 'chill_main_workflow_create')]
@@ -377,7 +382,7 @@ class WorkflowController extends AbstractController
         $signature = $this->entityManager->getRepository(EntityWorkflowStepSignature::class)->find($signature_id);
 
         if ($signature->getSigner() instanceof User) {
-            return $this->redirectToRoute('signature_route_user');
+            return $this->redirectToRoute('chill_main_workflow_signature', ['signature_id' => $signature_id]);
         }
 
         $metadataForm = $this->createForm(WorkflowSignatureMetadataType::class);
@@ -401,8 +406,7 @@ class WorkflowController extends AbstractController
             $this->entityManager->persist($signature);
             $this->entityManager->flush();
 
-            // Todo should redirect to document for actual signing? To be adjusted still
-            return $this->redirectToRoute('chill_main_workflow_show', ['id' => $signature->getStep()->getEntityWorkflow()->getId()]);
+            return $this->redirectToRoute('chill_main_workflow_signature', ['signature_id' => $signature_id]);
         }
 
         return $this->render(
@@ -413,4 +417,36 @@ class WorkflowController extends AbstractController
             ]
         );
     }
+
+    #[Route(path: '/{_locale}/main/workflow/signature/{signature_id}/sign', name: 'chill_main_workflow_signature', methods: 'GET')]
+    public function addSignature(int $signature_id, Request $request): Response
+    {
+        $signature = $this->entityManager->getRepository(EntityWorkflowStepSignature::class)->find($signature_id);
+        $entityWorkflow = $signature->getStep()->getEntityWorkflow();
+
+        $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
+        if (null === $storedObject) {
+            throw new NotFoundHttpException('No stored object found');
+        }
+
+        $zones = [];
+        $content = $this->storedObjectManagerInterface->read($storedObject);
+        if (null != $content) {
+            $zones = $this->PDFSignatureZoneParser->findSignatureZones($content);
+        }
+
+        $signatureClient = [];
+        $signatureClient['id'] = $signature->getId();
+        $signatureClient['storedObject'] = [
+            'filename' => $storedObject->getFilename(),
+            'iv' => $storedObject->getIv(),
+            'keyInfos' => $storedObject->getKeyInfos(),
+        ];
+        $signatureClient['zones'] = $zones;
+
+        return $this->render(
+            '@ChillMain/Workflow/_signature_sign.html.twig',
+            ['signature' => $signatureClient]
+        );
+    }
 }
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig
new file mode 100644
index 000000000..8b2770952
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
+    <title>Signature</title>
+
+    {{ encore_entry_link_tags('mod_bootstrap') }}
+    {{ encore_entry_link_tags('mod_forkawesome') }}
+    {{ encore_entry_link_tags('chill') }}
+    {{ encore_entry_link_tags('vue_document_signature') }}
+
+</head>
+
+<body>
+
+    {% block js %}
+        {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+        <script type="text/javascript">
+            window.signature = {{ signature|json_encode|raw }};
+        </script>
+        {{ encore_entry_script_tags('vue_document_signature') }}
+    {% endblock %}
+
+    <div class="content" id="content">
+        <div class="container-xxl">
+            <div class="row">
+               <div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
+                   <div class="row" id="document-signature"></div>
+               </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file

From 51ab4bef3826f4dd4b06db29ac580eb5eb785eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 22 Jul 2024 23:06:49 +0200
Subject: [PATCH 24/26] Improve rendering for signature zone

---
 .../views/Workflow/_signature.html.twig       | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig
index a61808500..f613b69dd 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig
@@ -1,19 +1,20 @@
 <h2>{{ 'workflow.signature_zone.title'|trans }}</h2>
 
-<div class="flex-table justify-content-center">
-    <div class="item-bloc">
+<div class="container">
+    <div class="row align-items-center">
         {% for s in signatures %}
-            <div class="item-row mb-2">
-                    <div class="col-sm-6"><span>{{ s.signer|chill_entity_render_box }}</span></div>
-            <div class="col-sm-6">
-                <a class="btn btn-show" href="{{ chill_path_add_return_path('chill_main_workflow_signature_metadata', { 'signature_id': s.id}) }}">{{ 'workflow.signature_zone.button_sign'|trans }}</a>
-                {% if s.state is same as('signed') %}
-                    <p class="updatedBy">{{ s.stateDate }}</p>
-                {% endif %}
-                </div>
+            <div class="col-sm-12 col-md-8"><span>{{ s.signer|chill_entity_render_box }}</span></div>
+            <div class="col-sm-12 col-md-4">
+                <ul class="record_actions">
+                    <li>
+                        <a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_main_workflow_signature_metadata', { 'signature_id': s.id}) }}"><i class="fa fa-pencil-square-o"></i> {{ 'workflow.signature_zone.button_sign'|trans }}</a>
+                        {% if s.state is same as('signed') %}
+                            <p class="updatedBy">{{ s.stateDate }}</p>
+                        {% endif %}
+                    </li>
+                </ul>
             </div>
         {% endfor %}
     </div>
 </div>
 
-

From 3836d0dc9b28c8aae84601161cc1c66784ff0364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 22 Jul 2024 23:40:10 +0200
Subject: [PATCH 25/26] Update PdfSignedMessageHandler to manage signature
 state

Additional dependencies have been added to the PdfSignedMessageHandler to handle the state of the signature. After writing the signed message content, the state is set to 'signed' and the state date is updated with the current time. Also, modifications are flushed in the EntityManager to save these changes to the database. Corresponding updates and tests have been made in the PdfSignedMessageHandlerTest file.
---
 .../BaseSigner/PdfSignedMessageHandler.php      |  9 +++++++++
 .../BaseSigner/PdfSignedMessageHandlerTest.php  | 17 ++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandler.php b/src/Bundle/ChillDocStoreBundle/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandler.php
index 81fb97dbf..5cb31de96 100644
--- a/src/Bundle/ChillDocStoreBundle/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandler.php
+++ b/src/Bundle/ChillDocStoreBundle/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandler.php
@@ -12,9 +12,12 @@ declare(strict_types=1);
 namespace Chill\DocStoreBundle\Service\Signature\Driver\BaseSigner;
 
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
+use Chill\MainBundle\Entity\Workflow\EntityWorkflowSignatureStateEnum;
 use Chill\MainBundle\Repository\Workflow\EntityWorkflowStepSignatureRepository;
 use Chill\MainBundle\Workflow\EntityWorkflowManager;
+use Doctrine\ORM\EntityManagerInterface;
 use Psr\Log\LoggerInterface;
+use Symfony\Component\Clock\ClockInterface;
 use Symfony\Component\Messenger\Handler\MessageHandlerInterface;
 
 final readonly class PdfSignedMessageHandler implements MessageHandlerInterface
@@ -29,6 +32,8 @@ final readonly class PdfSignedMessageHandler implements MessageHandlerInterface
         private EntityWorkflowManager $entityWorkflowManager,
         private StoredObjectManagerInterface $storedObjectManager,
         private EntityWorkflowStepSignatureRepository $entityWorkflowStepSignatureRepository,
+        private EntityManagerInterface $entityManager,
+        private ClockInterface $clock,
     ) {}
 
     public function __invoke(PdfSignedMessage $message): void
@@ -48,5 +53,9 @@ final readonly class PdfSignedMessageHandler implements MessageHandlerInterface
         }
 
         $this->storedObjectManager->write($storedObject, $message->content);
+
+        $signature->setState(EntityWorkflowSignatureStateEnum::SIGNED)->setStateDate($this->clock->now());
+        $this->entityManager->flush();
+        $this->entityManager->clear();
     }
 }
diff --git a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandlerTest.php b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandlerTest.php
index 62d50c03f..eb2142175 100644
--- a/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandlerTest.php
+++ b/src/Bundle/ChillDocStoreBundle/Tests/Service/Signature/Driver/BaseSigner/PdfSignedMessageHandlerTest.php
@@ -22,8 +22,10 @@ use Chill\MainBundle\Repository\Workflow\EntityWorkflowStepSignatureRepository;
 use Chill\MainBundle\Workflow\EntityWorkflowManager;
 use Chill\MainBundle\Workflow\WorkflowTransitionContextDTO;
 use Chill\PersonBundle\Entity\Person;
+use Doctrine\ORM\EntityManagerInterface;
 use PHPUnit\Framework\TestCase;
 use Psr\Log\NullLogger;
+use Symfony\Component\Clock\MockClock;
 
 /**
  * @internal
@@ -48,12 +50,16 @@ class PdfSignedMessageHandlerTest extends TestCase
             new NullLogger(),
             $this->buildEntityWorkflowManager($storedObject),
             $this->buildStoredObjectManager($storedObject, $expectedContent = '1234'),
-            $this->buildSignatureRepository($signature)
+            $this->buildSignatureRepository($signature),
+            $this->buildEntityManager(true),
+            new MockClock('now'),
         );
 
         // we simply call the handler. The mocked StoredObjectManager will check that the "write" method is invoked once
         // with the content "1234"
         $handler(new PdfSignedMessage(10, $expectedContent));
+
+        self::assertEquals('signed', $signature->getState()->value);
     }
 
     private function buildSignatureRepository(EntityWorkflowStepSignature $signature): EntityWorkflowStepSignatureRepository
@@ -81,4 +87,13 @@ class PdfSignedMessageHandlerTest extends TestCase
 
         return $storedObjectManager;
     }
+
+    private function buildEntityManager(bool $willFlush): EntityManagerInterface
+    {
+        $em = $this->createMock(EntityManagerInterface::class);
+        $em->expects($willFlush ? $this->once() : $this->never())->method('flush');
+        $em->expects($willFlush ? $this->once() : $this->never())->method('clear');
+
+        return $em;
+    }
 }

From 123168a5eeaea4d93fec977a8532c247ba7603db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 22 Jul 2024 23:40:38 +0200
Subject: [PATCH 26/26] Effectively process signature request

The processSignature method in SignatureRequestController has been cleaned up and unneeded comments were removed. The process now involves retrieving the EntityWorkflow and StoredObject from the Signature, and reading the content from the StoredObjectManager. Debugging dump functions and commented code were also removed for a cleaner look.
---
 .../Controller/SignatureRequestController.php         | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
index 3dd99a814..363ecafd4 100644
--- a/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
+++ b/src/Bundle/ChillDocStoreBundle/Controller/SignatureRequestController.php
@@ -33,21 +33,18 @@ class SignatureRequestController
     #[Route('/api/1.0/document/workflow/{id}/signature-request', name: 'chill_docstore_signature_request')]
     public function processSignature(EntityWorkflowStepSignature $signature, Request $request): JsonResponse
     {
-        dump($signature);
-        // $signature = $this->signatureRepository($signature); //not useful?
-        // $entityWorkflow = $signature->getStep()->getEntityWorkflow();
-        // $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
-        $content = 'blop'; // $this->storedObjectManager->read($storedObject);
+        $entityWorkflow = $signature->getStep()->getEntityWorkflow();
+        $storedObject = $this->entityWorkflowManager->getAssociatedStoredObject($entityWorkflow);
+        $content = $this->storedObjectManager->read($storedObject);
 
         $data = \json_decode((string) $request->getContent(), true, 512, JSON_THROW_ON_ERROR); // TODO parse payload: json_decode ou, mieux, dataTransfertObject
-        dump($data);
         $zone = new PDFSignatureZone(
             $data['zone']['index'],
             $data['zone']['x'],
             $data['zone']['y'],
             $data['zone']['height'],
             $data['zone']['width'],
-            $page = new PDFPage($data['zone']['PDFPage']['index'], $data['zone']['PDFPage']['width'], $data['zone']['PDFPage']['height'])
+            new PDFPage($data['zone']['PDFPage']['index'], $data['zone']['PDFPage']['width'], $data['zone']['PDFPage']['height'])
         );
 
         $this->messageBus->dispatch(new RequestPdfSignMessage(