Resolve merge with master

src/Bundle/ChillDocStoreBundle/Resources/public/js/async-upload/uploader.ts

@@ -0,0 +1,70 @@
+import {makeFetch} from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+import {PostStoreObjectSignature, StoredObject} from "../../types";
+
+const algo = 'AES-CBC';
+
+const URL_POST = '/asyncupload/temp_url/generate/post';
+
+const keyDefinition = {
+    name: algo,
+    length: 256
+};
+
+const createFilename = (): string => {
+    var text = "";
+    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+    for (let i = 0; i < 7; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+
+    return text;
+};
+
+/**
+ * Fetches a new stored object from the server.
+ *
+ * @async
+ * @function fetchNewStoredObject
+ * @returns {Promise<StoredObject>} A Promise that resolves to the newly created StoredObject.
+ */
+export const fetchNewStoredObject = async (): Promise<StoredObject> => {
+    return makeFetch("POST", '/api/1.0/doc-store/stored-object/create', null);
+}
+
+export const uploadVersion = async (uploadFile: ArrayBuffer, storedObject: StoredObject): Promise<string> => {
+    const params = new URLSearchParams();
+    params.append('expires_delay', "180");
+    params.append('submit_delay', "180");
+    const asyncData: PostStoreObjectSignature = await makeFetch("GET", `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/post` + "?" + params.toString());
+    const suffix = createFilename();
+    const filename = asyncData.prefix + suffix;
+    const formData = new FormData();
+    formData.append("redirect", asyncData.redirect);
+    formData.append("max_file_size", asyncData.max_file_size.toString());
+    formData.append("max_file_count", asyncData.max_file_count.toString());
+    formData.append("expires", asyncData.expires.toString());
+    formData.append("signature", asyncData.signature);
+    formData.append(filename, new Blob([uploadFile]), suffix);
+
+    const response = await window.fetch(asyncData.url, {
+        method: "POST",
+        body: formData,
+    })
+
+    if (!response.ok) {
+        console.error("Error while sending file to store", response);
+        throw new Error(response.statusText);
+    }
+
+    return Promise.resolve(filename);
+}
+
+export const encryptFile = async (originalFile: ArrayBuffer): Promise<[ArrayBuffer, Uint8Array, JsonWebKey]> => {
+    const iv = crypto.getRandomValues(new Uint8Array(16));
+    const key = await window.crypto.subtle.generateKey(keyDefinition, true, [ "encrypt", "decrypt" ]);
+    const exportedKey = await window.crypto.subtle.exportKey('jwk', key);
+    const encrypted = await window.crypto.subtle.encrypt({ name: algo, iv: iv}, key, originalFile);
+
+    return Promise.resolve([encrypted, iv, exportedKey]);
+};

src/Bundle/ChillDocStoreBundle/Resources/public/module/async_upload/index.ts

@@ -1,22 +1,18 @@
-import { CollectionEventPayload } from "../../../../../ChillMainBundle/Resources/public/module/collection";
-import { createApp } from "vue";
-import DropFileWidget from "../../vuejs/DropFileWidget/DropFileWidget.vue";
-import { StoredObject, StoredObjectCreated } from "../../types";
-import { _createI18n } from "../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import {CollectionEventPayload} from "../../../../../ChillMainBundle/Resources/public/module/collection";
+import {createApp} from "vue";
+import DropFileWidget from "../../vuejs/DropFileWidget/DropFileWidget.vue"
+import {StoredObject, StoredObjectVersion} from "../../types";
+import {_createI18n} from "../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
 const i18n = _createI18n({});
 
-const startApp = (
-    divElement: HTMLDivElement,
-    collectionEntry: null | HTMLLIElement,
-): void => {
-    console.log("app started", divElement);
-    const input_stored_object: HTMLInputElement | null =
-        divElement.querySelector("input[data-stored-object]");
+const startApp = (divElement: HTMLDivElement, collectionEntry: null|HTMLLIElement): void => {
+    console.log('app started', divElement);
+    const input_stored_object: HTMLInputElement|null = divElement.querySelector("input[data-stored-object]");
     if (null === input_stored_object) {
-        throw new Error("input to stored object not found");
+        throw new Error('input to stored object not found');
     }
 
-    let existingDoc: StoredObject | null = null;
+    let existingDoc: StoredObject|null = null;
     if (input_stored_object.value !== "") {
         existingDoc = JSON.parse(input_stored_object.value);
     }
@@ -24,77 +20,69 @@ const startApp = (
     divElement.appendChild(app_container);
 
     const app = createApp({
-        template:
-            '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
+        template: '<drop-file-widget :existingDoc="this.$data.existingDoc" :allowRemove="true" @addDocument="this.addDocument" @removeDocument="removeDocument"></drop-file-widget>',
         data(vm) {
             return {
                 existingDoc: existingDoc,
-            };
+            }
         },
         components: {
             DropFileWidget,
         },
         methods: {
-            addDocument: function (object: StoredObjectCreated): void {
-                console.log("object added", object);
-                this.$data.existingDoc = object;
-                input_stored_object.value = JSON.stringify(object);
+            addDocument: function({stored_object, stored_object_version}: {stored_object: StoredObject, stored_object_version: StoredObjectVersion}): void {
+                console.log('object added', stored_object);
+                console.log('version added', stored_object_version);
+                this.$data.existingDoc = stored_object;
+                this.$data.existingDoc.currentVersion = stored_object_version;
+                input_stored_object.value = JSON.stringify(this.$data.existingDoc);
             },
-            removeDocument: function (object: StoredObject): void {
-                console.log("catch remove document", object);
+            removeDocument: function(object: StoredObject): void {
+                console.log('catch remove document', object);
                 input_stored_object.value = "";
-                this.$data.existingDoc = null;
-                console.log("collectionEntry", collectionEntry);
+                this.$data.existingDoc = undefined;
+                console.log('collectionEntry', collectionEntry);
 
                 if (null !== collectionEntry) {
-                    console.log("will remove collection");
+                    console.log('will remove collection');
                     collectionEntry.remove();
                 }
-            },
-        },
+            }
+        }
     });
 
     app.use(i18n).mount(app_container);
-};
-window.addEventListener("collection-add-entry", ((
-    e: CustomEvent<CollectionEventPayload>,
-) => {
+}
+window.addEventListener('collection-add-entry', ((e: CustomEvent<CollectionEventPayload>) => {
     const detail = e.detail;
-    const divElement: null | HTMLDivElement = detail.entry.querySelector(
-        "div[data-stored-object]",
-    );
+    const divElement: null|HTMLDivElement = detail.entry.querySelector('div[data-stored-object]');
 
     if (null === divElement) {
-        throw new Error("div[data-stored-object] not found");
+        throw new Error('div[data-stored-object] not found');
     }
 
     startApp(divElement, detail.entry);
 }) as EventListener);
 
-window.addEventListener("DOMContentLoaded", () => {
-    const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll(
-        "div[data-stored-object]",
-    );
+window.addEventListener('DOMContentLoaded', () => {
+    const upload_inputs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div[data-stored-object]');
 
     upload_inputs.forEach((input: HTMLDivElement): void => {
         // test for a parent to check if this is a collection entry
-        let collectionEntry: null | HTMLLIElement = null;
-        const parent = input.parentElement;
-        console.log("parent", parent);
+        let collectionEntry: null|HTMLLIElement = null;
+        let parent = input.parentElement;
+        console.log('parent', parent);
         if (null !== parent) {
-            const grandParent = parent.parentElement;
-            console.log("grandParent", grandParent);
+            let grandParent = parent.parentElement;
+            console.log('grandParent', grandParent);
             if (null !== grandParent) {
-                if (
-                    grandParent.tagName.toLowerCase() === "li" &&
-                    grandParent.classList.contains("entry")
-                ) {
+                if (grandParent.tagName.toLowerCase() === 'li' && grandParent.classList.contains('entry')) {
                     collectionEntry = grandParent as HTMLLIElement;
                 }
             }
         }
         startApp(input, collectionEntry);
-    });
+    })
 });
 
-export {};
+export {}

src/Bundle/ChillDocStoreBundle/Resources/public/module/button_download/index.ts

@@ -0,0 +1,27 @@
+import {_createI18n} from "../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import {createApp} from "vue";
+import DocumentActionButtonsGroup from "../../vuejs/DocumentActionButtonsGroup.vue";
+import {StoredObject, StoredObjectStatusChange} from "../../types";
+import {defineComponent} from "vue";
+import DownloadButton from "../../vuejs/StoredObjectButton/DownloadButton.vue";
+import ToastPlugin from "vue-toast-notification";
+
+
+
+const i18n = _createI18n({});
+
+window.addEventListener('DOMContentLoaded', function (e) {
+    document.querySelectorAll<HTMLDivElement>('div[data-download-button-single]').forEach((el) => {
+        const storedObject = JSON.parse(el.dataset.storedObject as string) as StoredObject;
+        const title = el.dataset.title as string;
+        const app = createApp({
+            components: {DownloadButton},
+            data() {
+                return {storedObject, title, classes: {btn: true, "btn-outline-primary": true}};
+            },
+            template: '<download-button :stored-object="storedObject" :at-version="storedObject.currentVersion" :classes="classes" :filename="title" :direct-download="true"></download-button>',
+        });
+
+        app.use(i18n).use(ToastPlugin).mount(el);
+    });
+});

src/Bundle/ChillDocStoreBundle/Resources/public/module/document_action_buttons_group/index.ts

@@ -1,72 +1,54 @@
-import { _createI18n } from "../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import {_createI18n} from "../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
 import DocumentActionButtonsGroup from "../../vuejs/DocumentActionButtonsGroup.vue";
-import { createApp } from "vue";
-import { StoredObject, StoredObjectStatusChange } from "../../types";
-import { is_object_ready } from "../../vuejs/StoredObjectButton/helpers";
+import {createApp} from "vue";
+import {StoredObject, StoredObjectStatusChange} from "../../types";
+import {is_object_ready} from "../../vuejs/StoredObjectButton/helpers";
+import ToastPlugin from "vue-toast-notification";
 
 const i18n = _createI18n({});
 
-window.addEventListener("DOMContentLoaded", function (e) {
-    document
-        .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
-        .forEach((el) => {
-            const app = createApp({
-                components: { DocumentActionButtonsGroup },
-                data() {
-                    const datasets = el.dataset as {
-                        filename: string;
-                        canEdit: string;
-                        storedObject: string;
-                        buttonSmall: string;
-                        davLink: string;
-                        davLinkExpiration: string;
-                    };
+window.addEventListener('DOMContentLoaded', function (e) {
+  document.querySelectorAll<HTMLDivElement>('div[data-download-buttons]').forEach((el) => {
+     const app = createApp({
+       components: {DocumentActionButtonsGroup},
+       data() {
 
-                    const storedObject = JSON.parse(
-                            datasets.storedObject,
-                        ) as StoredObject,
-                        filename = datasets.filename,
-                        canEdit = datasets.canEdit === "1",
-                        small = datasets.buttonSmall === "1",
-                        davLink =
-                            "davLink" in datasets && datasets.davLink !== ""
-                                ? datasets.davLink
-                                : null,
-                        davLinkExpiration =
-                            "davLinkExpiration" in datasets
-                                ? Number.parseInt(datasets.davLinkExpiration)
-                                : null;
-                    return {
-                        storedObject,
-                        filename,
-                        canEdit,
-                        small,
-                        davLink,
-                        davLinkExpiration,
-                    };
-                },
-                template:
-                    '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
-                methods: {
-                    onStoredObjectStatusChange: function (
-                        newStatus: StoredObjectStatusChange,
-                    ): void {
-                        this.$data.storedObject.status = newStatus.status;
-                        this.$data.storedObject.filename = newStatus.filename;
-                        this.$data.storedObject.type = newStatus.type;
+         const datasets = el.dataset as {
+           filename: string,
+           canEdit: string,
+           storedObject: string,
+           buttonSmall: string,
+           davLink: string,
+           davLinkExpiration: string,
+         };
 
-                        // remove eventual div which inform pending status
-                        document
-                            .querySelectorAll(
-                                `[data-docgen-is-pending="${this.$data.storedObject.id}"]`,
-                            )
-                            .forEach(function (el) {
-                                el.remove();
-                            });
-                    },
-                },
-            });
+         const
+           storedObject = JSON.parse(datasets.storedObject) as StoredObject,
+           filename = datasets.filename,
+           canEdit = datasets.canEdit === '1',
+           small = datasets.buttonSmall === '1',
+           davLink = 'davLink' in datasets && datasets.davLink !== '' ? datasets.davLink : null,
+           davLinkExpiration = 'davLinkExpiration' in datasets  ? Number.parseInt(datasets.davLinkExpiration) : null
+           ;
 
-            app.use(i18n).mount(el);
-        });
+         return { storedObject, filename, canEdit, small, davLink, davLinkExpiration };
+       },
+       template: '<document-action-buttons-group :can-edit="canEdit" :filename="filename" :stored-object="storedObject" :small="small" :dav-link="davLink" :dav-link-expiration="davLinkExpiration" @on-stored-object-status-change="onStoredObjectStatusChange"></document-action-buttons-group>',
+       methods: {
+         onStoredObjectStatusChange: function(newStatus: StoredObjectStatusChange): void {
+           this.$data.storedObject.status = newStatus.status;
+           this.$data.storedObject.filename = newStatus.filename;
+           this.$data.storedObject.type = newStatus.type;
+
+           // remove eventual div which inform pending status
+           document.querySelectorAll(`[data-docgen-is-pending="${this.$data.storedObject.id}"]`)
+             .forEach(function(el) {
+               el.remove();
+             });
+         }
+       }
+     });
+
+     app.use(i18n).use(ToastPlugin).mount(el);
+  })
 });

src/Bundle/ChillDocStoreBundle/Resources/public/types.ts

@@ -1,38 +1,62 @@
-import { DateTime } from "../../../ChillMainBundle/Resources/public/types";
+import {
+    DateTime,
+    User,
+} from "../../../ChillMainBundle/Resources/public/types";
+import {SignedUrlGet} from "./vuejs/StoredObjectButton/helpers";
 
-export type StoredObjectStatus = "ready" | "failure" | "pending";
+export type StoredObjectStatus = "empty" | "ready" | "failure" | "pending";
 
 export interface StoredObject {
     id: number;
-
-    /**
-     * filename of the object in the object storage
-     */
-    filename: string;
-    creationDate: DateTime;
-    datas: object;
-    iv: number[];
-    keyInfos: object;
-    title: string;
-    type: string;
+    title: string | null;
     uuid: string;
+    prefix: string;
     status: StoredObjectStatus;
+    currentVersion:
+        | null
+        | StoredObjectVersionCreated
+        | StoredObjectVersionPersisted;
+    totalVersions: number;
+    datas: object;
+    /** @deprecated */
+    creationDate: DateTime;
+    createdAt: DateTime | null;
+    createdBy: User | null;
+    _permissions: {
+        canEdit: boolean;
+        canSee: boolean;
+    };
     _links?: {
         dav_link?: {
             href: string;
             expiration: number;
         };
+        downloadLink?: SignedUrlGet;
     };
 }
 
-export interface StoredObjectCreated {
-    status: "stored_object_created";
+export interface StoredObjectVersion {
+    /**
+     * filename of the object in the object storage
+     */
     filename: string;
-    iv: Uint8Array;
-    keyInfos: object;
+    iv: number[];
+    keyInfos: JsonWebKey;
     type: string;
 }
 
+export interface StoredObjectVersionCreated extends StoredObjectVersion {
+    persisted: false;
+}
+
+export interface StoredObjectVersionPersisted
+    extends StoredObjectVersionCreated {
+    version: number;
+    id: number;
+    createdAt: DateTime | null;
+    createdBy: User | null;
+}
+
 export interface StoredObjectStatusChange {
     id: number;
     filename: string;
@@ -40,10 +64,23 @@ export interface StoredObjectStatusChange {
     type: string;
 }
 
+export interface StoredObjectVersionWithPointInTime extends StoredObjectVersionPersisted {
+    "point-in-times": StoredObjectPointInTime[];
+    "from-restored": StoredObjectVersionPersisted|null;
+}
+
+export interface StoredObjectPointInTime {
+    id: number;
+    byUser: User | null;
+    reason: 'keep-before-conversion'|'keep-by-user';
+}
+
 /**
  * Function executed by the WopiEditButton component.
  */
-export type WopiEditButtonExecutableBeforeLeaveFunction = () => Promise<void>;
+export type WopiEditButtonExecutableBeforeLeaveFunction = {
+    (): Promise<void>;
+};
 
 /**
  * Object containing information for performering a POST request to a swift object store
@@ -59,3 +96,46 @@ export interface PostStoreObjectSignature {
     url: string;
     signature: string;
 }
+
+export interface PDFPage {
+    index: number;
+    width: number;
+    height: number;
+}
+export interface SignatureZone {
+    index: number | null;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    PDFPage: PDFPage;
+}
+
+export interface Signature {
+    id: number;
+    storedObject: StoredObject;
+    zones: SignatureZone[];
+}
+
+export type SignedState =
+    | "pending"
+    | "signed"
+    | "rejected"
+    | "canceled"
+    | "error";
+
+export interface CheckSignature {
+    state: SignedState;
+    storedObject: StoredObject;
+}
+
+export type CanvasEvent = "select" | "add";
+
+export interface ZoomLevel {
+    id: number;
+    zoom: number;
+    label: {
+        fr?: string,
+        nl?: string
+    };
+}

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentActionButtonsGroup.vue

@@ -1,152 +1,92 @@
 <template>
-    <div
-        v-if="
-            'ready' === props.storedObject.status ||
-            'stored_object_created' === props.storedObject.status
-        "
-        class="btn-group"
-    >
-        <button
-            :class="
-                Object.assign({
-                    btn: true,
-                    'btn-outline-primary': true,
-                    'dropdown-toggle': true,
-                    'btn-sm': props.small,
-                })
-            "
-            type="button"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-        >
-            Actions
-        </button>
-        <ul class="dropdown-menu">
-            <li
-                v-if="
-                    props.canEdit &&
-                    is_extension_editable(props.storedObject.type) &&
-                    props.storedObject.status !== 'stored_object_created'
-                "
-            >
-                <wopi-edit-button
-                    :stored-object="props.storedObject"
-                    :classes="{ 'dropdown-item': true }"
-                    :execute-before-leave="props.executeBeforeLeave"
-                ></wopi-edit-button>
-            </li>
-            <li
-                v-if="
-                    props.canEdit &&
-                    is_extension_editable(props.storedObject.type) &&
-                    props.davLink !== undefined &&
-                    props.davLinkExpiration !== undefined
-                "
-            >
-                <desktop-edit-button
-                    :classes="{ 'dropdown-item': true }"
-                    :edit-link="props.davLink"
-                    :expiration-link="props.davLinkExpiration"
-                ></desktop-edit-button>
-            </li>
-            <li
-                v-if="
-                    props.storedObject.type != 'application/pdf' &&
-                    is_extension_viewable(props.storedObject.type) &&
-                    props.canConvertPdf &&
-                    props.storedObject.status !== 'stored_object_created'
-                "
-            >
-                <convert-button
-                    :stored-object="props.storedObject"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                ></convert-button>
-            </li>
-            <li v-if="props.canDownload">
-                <download-button
-                    :stored-object="props.storedObject"
-                    :filename="filename"
-                    :classes="{ 'dropdown-item': true }"
-                ></download-button>
-            </li>
-        </ul>
-    </div>
-    <div v-else-if="'pending' === props.storedObject.status">
-        <div class="btn btn-outline-info">Génération en cours</div>
-    </div>
-    <div v-else-if="'failure' === props.storedObject.status">
-        <div class="btn btn-outline-danger">La génération a échoué</div>
-    </div>
+  <div v-if="isButtonGroupDisplayable" class="btn-group">
+    <button :class="Object.assign({'btn': true, 'btn-outline-primary': true, 'dropdown-toggle': true, 'btn-sm': props.small})" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+      Actions
+    </button>
+    <ul class="dropdown-menu">
+      <li v-if="isEditableOnline">
+        <wopi-edit-button :stored-object="props.storedObject" :classes="{'dropdown-item': true}" :execute-before-leave="props.executeBeforeLeave"></wopi-edit-button>
+      </li>
+      <li v-if="isEditableOnDesktop">
+        <desktop-edit-button :classes="{'dropdown-item': true}" :edit-link="props.davLink" :expiration-link="props.davLinkExpiration"></desktop-edit-button>
+      </li>
+      <li v-if="isConvertibleToPdf">
+        <convert-button :stored-object="props.storedObject" :filename="filename" :classes="{'dropdown-item': true}"></convert-button>
+      </li>
+      <li v-if="isDownloadable">
+        <download-button :stored-object="props.storedObject" :at-version="props.storedObject.currentVersion" :filename="filename" :classes="{'dropdown-item': true}" :display-action-string-in-button="true"></download-button>
+      </li>
+      <li v-if="isHistoryViewable">
+        <history-button :stored-object="props.storedObject" :can-edit="canEdit && props.storedObject._permissions.canEdit"></history-button>
+      </li>
+    </ul>
+  </div>
+  <div v-else-if="'pending' === props.storedObject.status">
+    <div class="btn btn-outline-info">Génération en cours</div>
+  </div>
+  <div v-else-if="'failure' === props.storedObject.status">
+    <div class="btn btn-outline-danger">La génération a échoué</div>
+  </div>
+
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+
+import {computed, onMounted} from "vue";
 import ConvertButton from "./StoredObjectButton/ConvertButton.vue";
 import DownloadButton from "./StoredObjectButton/DownloadButton.vue";
 import WopiEditButton from "./StoredObjectButton/WopiEditButton.vue";
-import {
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
-} from "./StoredObjectButton/helpers";
+import {is_extension_editable, is_extension_viewable, is_object_ready} from "./StoredObjectButton/helpers";
 import {
     StoredObject,
-    StoredObjectCreated,
-    StoredObjectStatusChange,
-    WopiEditButtonExecutableBeforeLeaveFunction,
+    StoredObjectStatusChange, StoredObjectVersion,
+    WopiEditButtonExecutableBeforeLeaveFunction
 } from "../types";
 import DesktopEditButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DesktopEditButton.vue";
+import HistoryButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton.vue";
 
 interface DocumentActionButtonsGroupConfig {
-    storedObject: StoredObject | StoredObjectCreated;
-    small?: boolean;
-    canEdit?: boolean;
-    canDownload?: boolean;
-    canConvertPdf?: boolean;
-    returnPath?: string;
+  storedObject: StoredObject,
+  small?: boolean,
+  canEdit?: boolean,
+  canDownload?: boolean,
+  canConvertPdf?: boolean,
+  returnPath?: string,
 
-    /**
-     * Will be the filename displayed to the user when he·she download the document
-     * (the document will be saved on his disk with this name)
-     *
-     * If not set, 'document' will be used.
-     */
-    filename?: string;
+  /**
+   * Will be the filename displayed to the user when he·she download the document
+   * (the document will be saved on his disk with this name)
+   *
+   * If not set, 'document' will be used.
+   */
+  filename?: string,
 
-    /**
-     * If set, will execute this function before leaving to the editor
-     */
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  /**
+   * If set, will execute this function before leaving to the editor
+   */
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction,
 
-    /**
-     * a link to download and edit file using webdav
-     */
-    davLink?: string;
+  /**
+   * a link to download and edit file using webdav
+   */
+  davLink?: string,
 
-    /**
-     * the expiration date of the download, as a unix timestamp
-     */
-    davLinkExpiration?: number;
+  /**
+   * the expiration date of the download, as a unix timestamp
+   */
+  davLinkExpiration?: number,
 }
 
-const emit =
-    defineEmits<
-        (
-            e: "onStoredObjectStatusChange",
-            newStatus: StoredObjectStatusChange,
-        ) => void
-    >();
+const emit = defineEmits<{
+  (e: 'onStoredObjectStatusChange', newStatus: StoredObjectStatusChange): void
+}>();
 
 const props = withDefaults(defineProps<DocumentActionButtonsGroupConfig>(), {
-    small: false,
-    canEdit: true,
-    canDownload: true,
-    canConvertPdf: true,
-    returnPath:
-        window.location.pathname +
-        window.location.search +
-        window.location.hash,
+  small: false,
+  canEdit: true,
+  canDownload: true,
+  canConvertPdf: true,
+  returnPath: window.location.pathname + window.location.search + window.location.hash
 });
 
 /**
@@ -159,46 +99,86 @@ let tryiesForReady = 0;
  */
 const maxTryiesForReady = 120;
 
-const checkForReady = function (): void {
-    if (
-        "ready" === props.storedObject.status ||
-        "failure" === props.storedObject.status ||
-        "stored_object_created" === props.storedObject.status ||
-        // stop reloading if the page stays opened for a long time
-        tryiesForReady > maxTryiesForReady
-    ) {
-        return;
-    }
+const isButtonGroupDisplayable = computed<boolean>(() => {
+    return isDownloadable.value || isEditableOnline.value || isEditableOnDesktop.value || isConvertibleToPdf.value;
+});
 
-    tryiesForReady = tryiesForReady + 1;
+const isDownloadable = computed<boolean>(() => {
+    return props.storedObject.status === 'ready'
+        // happens when the stored object version is just added, but not persisted
+        || (props.storedObject.currentVersion !== null && props.storedObject.status === 'empty')
+});
 
-    setTimeout(onObjectNewStatusCallback, 5000);
+const isEditableOnline = computed<boolean>(() => {
+    return props.storedObject.status === 'ready'
+        && props.storedObject._permissions.canEdit
+        && props.canEdit
+        && props.storedObject.currentVersion !== null
+        && is_extension_editable(props.storedObject.currentVersion.type)
+        && props.storedObject.currentVersion.persisted !== false;
+});
+
+const isEditableOnDesktop = computed<boolean>(() => {
+    return isEditableOnline.value;
+});
+
+const isConvertibleToPdf = computed<boolean>(() => {
+    return props.storedObject.status === 'ready'
+        && props.storedObject._permissions.canSee
+        && props.canConvertPdf
+        && props.storedObject.currentVersion !== null
+        && is_extension_viewable(props.storedObject.currentVersion.type)
+        && props.storedObject.currentVersion.type !== 'application/pdf'
+        && props.storedObject.currentVersion.persisted !== false;
+});
+
+const isHistoryViewable = computed<boolean>(() => {
+    return props.storedObject.status === 'ready';
+});
+
+const checkForReady = function(): void {
+  if (
+    'ready' === props.storedObject.status
+    || 'empty' === props.storedObject.status
+    || 'failure' === props.storedObject.status
+    // stop reloading if the page stays opened for a long time
+    || tryiesForReady > maxTryiesForReady
+  ) {
+    return;
+  }
+
+  tryiesForReady = tryiesForReady + 1;
+
+  setTimeout(onObjectNewStatusCallback, 5000);
 };
 
-const onObjectNewStatusCallback = async function (): Promise<void> {
-    if (props.storedObject.status === "stored_object_created") {
-        return Promise.resolve();
-    }
-
-    const new_status = await is_object_ready(props.storedObject);
-    if (props.storedObject.status !== new_status.status) {
-        emit("onStoredObjectStatusChange", new_status);
-        return Promise.resolve();
-    } else if ("failure" === new_status.status) {
-        return Promise.resolve();
-    }
-
-    if ("ready" !== new_status.status) {
-        // we check for new status, unless it is ready
-        checkForReady();
-    }
+const onObjectNewStatusCallback = async function(): Promise<void> {
 
+  if (props.storedObject.status === 'stored_object_created') {
     return Promise.resolve();
+  }
+
+  const new_status = await is_object_ready(props.storedObject);
+  if (props.storedObject.status !== new_status.status) {
+    emit('onStoredObjectStatusChange', new_status);
+    return Promise.resolve();
+  } else if ('failure' === new_status.status) {
+    return Promise.resolve();
+  }
+
+  if ('ready' !== new_status.status) {
+    // we check for new status, unless it is ready
+    checkForReady();
+  }
+
+  return Promise.resolve();
 };
 
 onMounted(() => {
-    checkForReady();
-});
+  checkForReady();
+})
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>

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

@@ -0,0 +1,845 @@
+<template>
+  <teleport to="body">
+    <modal v-if="modalOpen" @close="modalOpen = false">
+      <template v-slot:header>
+        <h2>{{ $t("signature_confirmation") }}</h2>
+      </template>
+      <template v-slot:body>
+        <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="confirmSign">
+          {{ $t("yes") }}
+        </button>
+      </template>
+    </modal>
+  </teleport>
+  <div class="col-12 m-auto sticky-top">
+    <div class="row justify-content-center border-bottom pdf-tools d-md-none">
+      <div class="col-5 text-center turn-page">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
+        >
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ z.label.fr }}
+          </option>
+        </select>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }}/{{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+        </template>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }}/{{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+          <input
+            type="checkbox"
+            id="checkboxMulti"
+            v-model="multiPage"
+            @change="toggleMultiPage"
+          />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ $t("all_pages") }}
+          </label>
+        </template>
+      </div>
+      <div
+        v-if="signature.zones.length > 0"
+        class="col-5 p-0 text-center turnSignature"
+      >
+        <button
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ $t("last_zone") }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ $t("next_zone") }}
+        </button>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+          :title="$t('choose_another_signature')"
+        >
+          {{ $t("another_zone") }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ $t("cancel") }}
+        </button>
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
+          @click="toggleAddZone()"
+          :title="$t('add_sign_zone')"
+        >
+          <template v-if="canvasEvent === 'add'">
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </template>
+        </button>
+      </div>
+    </div>
+
+    <div
+      class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
+    >
+      <div class="col-5 text-center turn-page ps-3">
+        <select
+          class="form-select form-select-sm"
+          id="zoomSelect"
+          v-model="zoomLevel"
+          @change="setZoomLevel(zoomLevel)"
+        >
+          <option value="" selected disabled>Zoom</option>
+          <option v-for="z in zoomLevels" :value="z.zoom" :key="z.id">
+            {{ z.label.fr }}
+          </option>
+        </select>
+        <template v-if="pageCount > 1">
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page <= 1"
+            @click="turnPage(-1)"
+          >
+            ❮
+          </button>
+          <span>{{ page }} / {{ pageCount }}</span>
+          <button
+            class="btn btn-light btn-xs p-1"
+            :disabled="page >= pageCount"
+            @click="turnPage(1)"
+          >
+            ❯
+          </button>
+        <input
+            type="checkbox"
+            id="checkboxMulti"
+            v-model="multiPage"
+            @change="toggleMultiPage"
+          />
+          <label class="form-check-label" for="checkboxMulti">
+            {{ $t("see_all_pages") }}
+          </label>
+        </template>
+      </div>
+      <div
+        v-if="signature.zones.length > 0 && signedState !== 'signed'"
+        class="col-4 d-xl-none text-center turnSignature p-0"
+      >
+        <button
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ $t("last_zone") }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ $t("next_zone") }}
+        </button>
+      </div>
+      <div
+        v-if="signature.zones.length > 0 && signedState !== 'signed'"
+        class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
+      >
+        <button
+          :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(-1)"
+        >
+          {{ $t("last_sign_zone") }}
+        </button>
+        <span>|</span>
+        <button
+          :disabled="userSignatureZone?.index >= signature.zones.length - 1"
+          class="btn btn-light btn-sm"
+          @click="turnSignature(1)"
+        >
+          {{ $t("next_sign_zone") }}
+        </button>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-if="signature.zones.length > 1"
+        >
+          {{ $t("choose_another_signature") }}
+        </button>
+        <button
+          class="btn btn-misc btn-sm"
+          :hidden="!userSignatureZone"
+          @click="undoSign"
+          v-else
+        >
+          {{ $t("cancel") }}
+        </button>
+        <button
+          v-if="userSignatureZone === null"
+          :class="{
+            btn: true,
+            'btn-sm': true,
+            'btn-create': canvasEvent !== 'add',
+            'btn-chill-green': canvasEvent === 'add',
+            active: canvasEvent === 'add',
+          }"
+          @click="toggleAddZone()"
+          :title="$t('add_sign_zone')"
+        >
+          <template v-if="canvasEvent !== 'add'">
+            {{ $t("add_zone") }}
+          </template>
+          <template v-else>
+            {{ $t("click_on_document") }}
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </template>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="multiPage"
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center d-flex flex-column"
+    :class="{ onAddZone: canvasEvent === 'add' }"
+  >
+    <canvas v-for="p in pageCount" :key="p" :id="`canvas-${p}`"></canvas>
+  </div>
+  <div
+    v-else
+    class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center"
+    :class="{ onAddZone: canvasEvent === 'add' }"
+  >
+    <canvas class="m-auto" id="canvas"></canvas>
+  </div>
+  <div class="col-xs-12 col-md-12 col-lg-9 m-auto p-4" id="action-buttons">
+    <div class="row">
+      <div class="col d-flex">
+        <a
+          class="btn btn-cancel"
+          v-if="signedState !== 'signed'"
+          :href="getReturnPath()"
+        >
+          {{ $t("cancel") }}
+        </a>
+        <a class="btn btn-misc" v-else :href="getReturnPath()">
+          {{ $t("return") }}
+        </a>
+      </div>
+      <div class="col text-end" v-if="signedState !== 'signed'">
+        <button
+          class="btn btn-action me-2"
+          :disabled="!userSignatureZone"
+          @click="sign"
+        >
+          {{ $t("sign") }}
+        </button>
+      </div>
+      <div class="col-4" v-else></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, reactive } from "vue";
+import { useToast } from "vue-toast-notification";
+import "vue-toast-notification/dist/theme-sugar.css";
+import {
+  CanvasEvent,
+  CheckSignature,
+  Signature,
+  SignatureZone,
+  SignedState,
+  ZoomLevel,
+} from "../../types";
+import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+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";
+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 {download_and_decrypt_doc, download_doc_as_pdf} from "../StoredObjectButton/helpers";
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.mjs";
+
+const multiPage: Ref<boolean> = ref(true);
+const modalOpen: Ref<boolean> = ref(false);
+const loading: Ref<boolean> = ref(false);
+const adding: Ref<boolean> = ref(false);
+const canvasEvent: Ref<CanvasEvent> = ref("select");
+const signedState: Ref<SignedState> = ref("pending");
+const page: Ref<number> = ref(1);
+const pageCount: Ref<number> = ref(0);
+const zoom: Ref<number> = ref(1);
+let zoomLevel = "";
+const zoomLevels: Ref<ZoomLevel[]> = ref([
+  {
+    id: 0,
+    zoom: 0.75,
+    label: {
+      fr: "75%",
+    },
+  },
+  {
+    id: 1,
+    zoom: zoom.value,
+    label: {
+      fr: "100%",
+    },
+  },
+  {
+    id: 2,
+    zoom: 1.25,
+    label: {
+      fr: "125%",
+    },
+  },
+  {
+    id: 3,
+    zoom: 1.5,
+    label: {
+      fr: "150%",
+    },
+  },
+  {
+    id: 4,
+    zoom: 2,
+    label: {
+      fr: "200%",
+    },
+  },
+  {
+    id: 5,
+    zoom: 3,
+    label: {
+      fr: "300%",
+    },
+  },
+]);
+let userSignatureZone: Ref<null | SignatureZone> = ref(null);
+let pdf = {} as PDFDocumentProxy;
+
+declare global {
+  interface Window {
+    signature: Signature;
+  }
+}
+
+const $toast = useToast();
+
+const signature = window.signature;
+
+const setZoomLevel = async (zoomLevel: string) => {
+  zoom.value = Number.parseFloat(zoomLevel);
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+};
+
+const mountPdf = async (doc: ArrayBuffer) => {
+  const loadingTask = pdfjsLib.getDocument(doc);
+  pdf = await loadingTask.promise;
+  pageCount.value = pdf.numPages;
+  if (multiPage.value) {
+    await setAllPages();
+  } else {
+    await setPage(1);
+  }
+};
+
+const getCanvas = (page: number) =>
+  multiPage.value
+    ? (document.getElementById(`canvas-${page}`) as HTMLCanvasElement)
+    : (document.querySelectorAll("canvas")[0] as HTMLCanvasElement);
+
+const getCanvasId = (canvas: HTMLCanvasElement) => {
+  const number = canvas.id.split("-").pop();
+  return number ? parseInt(number) : 0;
+};
+
+const getRenderContext = (pdfPage: PDFPageProxy) => {
+  const scale = 1 * zoom.value;
+  const viewport = pdfPage.getViewport({ scale });
+  const canvas = getCanvas(pdfPage.pageNumber);
+  const context = canvas.getContext("2d") as CanvasRenderingContext2D;
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
+
+  return {
+    canvasContext: context,
+    viewport: viewport,
+  };
+};
+
+const setAllPages = async () =>
+  Array.from(Array(pageCount.value).keys()).map((p) => setPage(p + 1));
+
+const setPage = async (page: number) => {
+  const pdfPage = await pdf.getPage(page);
+  const renderContext = getRenderContext(pdfPage);
+  await pdfPage.render(renderContext);
+};
+
+const init = () => downloadAndOpen().then(initPdf);
+
+async function downloadAndOpen(): Promise<Blob> {
+  let raw;
+  try {
+    raw = await download_doc_as_pdf(signature.storedObject);
+  } catch (e) {
+    console.error("error while downloading and decrypting document", e);
+    throw e;
+  }
+  const doc = await raw.arrayBuffer();
+  await mountPdf(doc);
+  return raw;
+}
+
+const addCanvasEvents = () => {
+  if (multiPage.value) {
+    Array.from(Array(pageCount.value).keys()).map((p) => {
+      const canvas = getCanvas(p + 1);
+      canvas.addEventListener(
+        "pointerup",
+        (e) => canvasClick(e, canvas),
+        false
+      );
+    });
+  } else {
+    const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+    canvas.addEventListener("pointerup", (e) => canvasClick(e, canvas), false);
+  }
+};
+
+const initPdf = () => {
+  addCanvasEvents();
+  setTimeout(drawAllZones, 800);
+};
+
+const resetPages = () =>
+  multiPage.value ? setAllPages() : setPage(page.value);
+
+const toggleMultiPage = async () => {
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  addCanvasEvents();
+};
+
+const scaleXToCanvas = (x: number, canvasWidth: number, PDFWidth: number) =>
+  Math.round((x * canvasWidth) / PDFWidth);
+
+const scaleYToCanvas = (h: number, canvasHeight: number, PDFHeight: number) =>
+  Math.round((h * canvasHeight) / PDFHeight);
+
+const hitSignature = (
+  zone: SignatureZone,
+  xy: number[],
+  canvas: HTMLCanvasElement
+) =>
+  scaleXToCanvas(zone.x, canvas.width, zone.PDFPage.width) < xy[0] &&
+  xy[0] <
+    scaleXToCanvas(zone.x + zone.width, canvas.width, zone.PDFPage.width) &&
+  zone.PDFPage.height * zoom.value -
+    scaleYToCanvas(zone.y, canvas.height, zone.PDFPage.height) <
+    xy[1] &&
+  xy[1] <
+    scaleYToCanvas(zone.height - zone.y, canvas.height, zone.PDFPage.height) +
+      zone.PDFPage.height * zoom.value;
+
+const selectZone = async (z: SignatureZone, canvas: HTMLCanvasElement) => {
+  userSignatureZone.value = z;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    await resetPages();
+    setTimeout(drawAllZones, 200);
+  }
+};
+
+const selectZoneEvent = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+  signature.zones
+    .filter(
+      (z) =>
+        (z.PDFPage.index + 1 === getCanvasId(canvas) && multiPage.value) ||
+        (z.PDFPage.index + 1 === page.value && !multiPage.value)
+    )
+    .map((z) => {
+      if (hitSignature(z, [e.offsetX, e.offsetY], canvas)) {
+        if (userSignatureZone.value === null) {
+          selectZone(z, canvas);
+        } else {
+          if (userSignatureZone.value.index === z.index) {
+            sign();
+          }
+        }
+      }
+    });
+
+const canvasClick = (e: PointerEvent, canvas: HTMLCanvasElement) =>
+  canvasEvent.value === "select"
+    ? selectZoneEvent(e, canvas)
+    : addZoneEvent(e, canvas);
+
+const turnPage = async (upOrDown: number) => {
+  page.value = page.value + upOrDown;
+  if (multiPage.value) {
+    const canvas = getCanvas(page.value);
+    canvas.scrollIntoView();
+  } else {
+    await setPage(page.value);
+    setTimeout(drawAllZones, 200);
+  }
+};
+
+const turnSignature = async (upOrDown: number) => {
+  let zoneIndex = userSignatureZone.value?.index ?? -1;
+  if (zoneIndex < -1) {
+    zoneIndex = -1;
+  }
+  if (zoneIndex < signature.zones.length) {
+    zoneIndex = zoneIndex + upOrDown;
+  } else {
+    zoneIndex = 0;
+  }
+  let currentZone = signature.zones[zoneIndex];
+  if (currentZone) {
+    page.value = currentZone.PDFPage.index + 1;
+    const canvas = getCanvas(currentZone.PDFPage.index + 1);
+    selectZone(currentZone, canvas);
+    canvas.scrollIntoView();
+  }
+};
+
+const drawZone = (
+  zone: SignatureZone,
+  ctx: CanvasRenderingContext2D,
+  canvasWidth: number,
+  canvasHeight: number
+) => {
+  const unselectedBlue = "#007bff";
+  const selectedBlue = "#034286";
+  ctx.strokeStyle =
+    userSignatureZone.value?.index === zone.index
+      ? selectedBlue
+      : unselectedBlue;
+  ctx.lineWidth = 2;
+  ctx.lineJoin = "bevel";
+  ctx.strokeRect(
+    scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width),
+    zone.PDFPage.height * zoom.value -
+      scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height),
+    scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width),
+    scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height)
+  );
+  ctx.font = `bold ${16 * zoom.value}px serif`;
+  ctx.textAlign = "center";
+  ctx.fillStyle = "black";
+  const xText =
+    scaleXToCanvas(zone.x, canvasWidth, zone.PDFPage.width) +
+    scaleXToCanvas(zone.width, canvasWidth, zone.PDFPage.width) / 2;
+  const yText =
+    zone.PDFPage.height * zoom.value -
+    scaleYToCanvas(zone.y, canvasHeight, zone.PDFPage.height) +
+    scaleYToCanvas(zone.height, canvasHeight, zone.PDFPage.height) / 2;
+  if (userSignatureZone.value?.index === zone.index) {
+    ctx.fillStyle = selectedBlue;
+    ctx.fillText("Signer ici", xText, yText);
+  } else {
+    ctx.fillStyle = unselectedBlue;
+    ctx.fillText("Choisir cette", xText, yText - 12 * zoom.value);
+    ctx.fillText("zone de signature", xText, yText + 12 * zoom.value);
+  }
+};
+
+const drawAllZones = () => {
+  if (signedState.value !== "signed") {
+    signature.zones
+      .filter(
+        (z) =>
+          multiPage.value ||
+          (z.PDFPage.index + 1 === page.value && !multiPage.value)
+      )
+      .map((z) => {
+        const canvas = getCanvas(z.PDFPage.index + 1);
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          if (userSignatureZone.value) {
+            if (userSignatureZone.value?.index === z.index) {
+              drawZone(z, ctx, canvas.width, canvas.height);
+            }
+          } else {
+            drawZone(z, ctx, canvas.width, canvas.height);
+          }
+        }
+      });
+  }
+};
+
+const checkSignature = () => {
+  const url = `/api/1.0/document/workflow/${signature.id}/check-signature`;
+  return makeFetch<null, CheckSignature>("GET", url)
+    .then((r) => {
+      signedState.value = r.state;
+      signature.storedObject = r.storedObject;
+      checkForReady();
+    })
+    .catch((error) => {
+      signedState.value = "error";
+      console.log("Error while checking the signature", error);
+      $toast.error(
+        `Erreur lors de la vérification de la signature: ${error.txt}`
+      );
+    });
+};
+
+const maxTryForReady = 60; //2 minutes for trying to sign
+let tryForReady = 0;
+
+const stopTrySigning = () => {
+  loading.value = false;
+  modalOpen.value = false;
+};
+
+const checkForReady = () => {
+  if (tryForReady > maxTryForReady) {
+    stopTrySigning();
+    tryForReady = 0;
+    console.log("Reached the maximum number of tentative to try signing");
+    $toast.error(
+      "Le nombre maximum de tentatives pour essayer de signer est atteint"
+    );
+  }
+  if (signedState.value === "rejected") {
+    stopTrySigning();
+    console.log("Signature rejected by the server");
+    $toast.error("Signature rejetée par le serveur");
+  }
+  if (signedState.value === "canceled") {
+    stopTrySigning();
+    console.log("Signature canceled");
+    $toast.error("Signature annulée");
+  }
+  if (signedState.value === "pending") {
+    tryForReady = tryForReady + 1;
+    setTimeout(() => checkSignature(), 2000);
+  } else {
+    stopTrySigning();
+    if (signedState.value === "signed") {
+      userSignatureZone.value = null;
+      downloadAndOpen();
+    }
+  }
+};
+
+const sign = () => (modalOpen.value = true);
+
+const confirmSign = () => {
+  loading.value = true;
+  const url = `/api/1.0/document/workflow/${signature.id}/signature-request`;
+  const body = {
+    storedObject: signature.storedObject,
+    zone: userSignatureZone.value,
+  };
+  makeFetch("POST", url, body)
+    .then((r) => {
+      checkForReady();
+    })
+    .catch((error) => {
+      console.log("Error while posting the signature", error);
+      stopTrySigning();
+      $toast.error(
+        `Erreur lors de la soumission de la signature: ${error.txt}`
+      );
+    });
+};
+
+const undoSign = async () => {
+  signature.zones = signature.zones.filter((z) => z.index !== null);
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  userSignatureZone.value = null;
+  adding.value = false;
+  canvasEvent.value = "select";
+};
+
+const toggleAddZone = () => {
+  canvasEvent.value === "select"
+    ? (canvasEvent.value = "add")
+    : (canvasEvent.value = "select");
+};
+
+const addZoneEvent = async (e: PointerEvent, canvas: HTMLCanvasElement) => {
+  const BOX_WIDTH = 180;
+  const BOX_HEIGHT = 90;
+  const PDFPageHeight = canvas.height;
+  const PDFPageWidth = canvas.width;
+
+  const x = e.offsetX;
+  const y = e.offsetY;
+  const newZone: SignatureZone = {
+    index: null,
+    x:
+      scaleXToCanvas(x, canvas.width, PDFPageWidth) -
+      scaleXToCanvas(BOX_WIDTH / 2, canvas.width, PDFPageWidth),
+    y:
+      PDFPageHeight * zoom.value -
+      scaleYToCanvas(y, canvas.height, PDFPageHeight) +
+      scaleYToCanvas(BOX_HEIGHT / 2, canvas.height, PDFPageHeight),
+    width: BOX_WIDTH * zoom.value,
+    height: BOX_HEIGHT * zoom.value,
+    PDFPage: {
+      index: multiPage.value ? getCanvasId(canvas) - 1 : page.value - 1,
+      width: PDFPageWidth,
+      height: PDFPageHeight,
+    },
+  };
+  signature.zones.push(newZone);
+  userSignatureZone.value = newZone;
+
+  await resetPages();
+  setTimeout(drawAllZones, 200);
+  canvasEvent.value = "select";
+  adding.value = true;
+};
+
+const getReturnPath = () =>
+  window.location.search
+    ? window.location.search.split("?returnPath=")[1] ??
+      window.location.pathname
+    : window.location.pathname;
+
+init();
+</script>
+
+<style scoped lang="scss">
+canvas {
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+  margin: 1rem auto;
+}
+
+.onAddZone {
+  cursor: not-allowed;
+
+  canvas {
+    cursor: copy;
+  }
+}
+
+div#action-buttons {
+  position: sticky;
+  bottom: 0px;
+  background-color: white;
+  z-index: 100;
+}
+div.pdf-tools {
+  background-color: #f3f3f3;
+  font-size: 0.6rem;
+  label {
+    font-size: 0.75rem !important;
+    margin: auto 0 auto 0.3rem;
+  }
+  button {
+    font-size: 0.75rem !important;
+  }
+  div.turnSignature {
+    span {
+      font-size: 1rem;
+    }
+  }
+  @media (min-width: 1400px) {
+    // background: none;
+    // border: none !important;
+  }
+}
+div.turn-page {
+  display: flex;
+  span {
+    font-size: 0.75rem;
+    margin: auto 0.4rem;
+  }
+  select {
+    width: 5rem;
+    font-size: 0.75rem;
+  }
+}
+div.signature-modal-body {
+  height: 8rem;
+}
+</style>
+

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

@@ -0,0 +1,39 @@
+import { createApp } from "vue";
+// @ts-ignore
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+import App from "./App.vue";
+
+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 zone',
+        cancel: 'Annuler',
+        last_sign_zone: 'Zone de signature précédente',
+        next_sign_zone: 'Zone de signature suivante',
+        add_sign_zone: 'Ajouter une zone de signature',
+        click_on_document: 'Cliquer sur le document',
+        last_zone: 'Zone précédente',
+        next_zone: 'Zone suivante',
+        add_zone: 'Ajouter une zone',
+        another_zone: 'Autre zone',
+        electronic_signature_in_progress: 'Signature électronique en cours...',
+        loading: 'Chargement...',
+        remove_sign_zone: 'Enlever la zone',
+        return: 'Retour',
+        see_all_pages: 'Voir toutes les pages',
+        all_pages: 'Toutes les pages',
+    }
+}
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+    template: `<app></app>`,
+})
+    .use(i18n)
+    .component("app", App)
+    .mount("#document-signature");

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { StoredObject, StoredObjectCreated } from "../../types";
-import { encryptFile, uploadFile } from "../_components/helper";
-import { computed, ref, Ref } from "vue";
+
+import {StoredObject, StoredObjectVersionCreated} from "../../types";
+import {encryptFile, fetchNewStoredObject, uploadVersion} from "../../js/async-upload/uploader";
+import {computed, ref, Ref} from "vue";
+import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
 
 interface DropFileConfig {
-    existingDoc?: StoredObjectCreated | StoredObject;
+    existingDoc?: StoredObject,
 }
 
-const props = defineProps<DropFileConfig>();
+const props = withDefaults(defineProps<DropFileConfig>(), {existingDoc: null});
 
-const emit =
-    defineEmits<
-        (e: "addDocument", stored_object: StoredObjectCreated) => void
-    >();
+const emit = defineEmits<{
+    (e: 'addDocument', {stored_object_version: StoredObjectVersionCreated, stored_object: StoredObject}): void,
+}>();
 
 const is_dragging: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
-const display_filename: Ref<string | null> = ref(null);
+const display_filename: Ref<string|null> = ref(null);
 
 const has_existing_doc = computed<boolean>(() => {
     return props.existingDoc !== undefined && props.existingDoc !== null;
@@ -26,16 +27,15 @@ const onDragOver = (e: Event) => {
     e.preventDefault();
 
     is_dragging.value = true;
-};
+}
 
 const onDragLeave = (e: Event) => {
     e.preventDefault();
 
     is_dragging.value = false;
-};
+}
 
 const onDrop = (e: DragEvent) => {
-    console.log("on drop", e);
     e.preventDefault();
 
     const files = e.dataTransfer?.files;
@@ -49,8 +49,8 @@ const onDrop = (e: DragEvent) => {
         return;
     }
 
-    handleFile(files[0]);
-};
+    handleFile(files[0])
+}
 
 const onZoneClick = (e: Event) => {
     e.stopPropagation();
@@ -61,122 +61,64 @@ const onZoneClick = (e: Event) => {
     input.addEventListener("change", onFileChange);
 
     input.click();
-};
+}
 
 const onFileChange = async (event: Event): Promise<void> => {
     const input = event.target as HTMLInputElement;
-    console.log("event triggered", input);
 
     if (input.files && input.files[0]) {
-        console.log("file added", input.files[0]);
+        console.log('file added', input.files[0]);
         const file = input.files[0];
         await handleFile(file);
 
         return Promise.resolve();
     }
 
-    throw "No file given";
-};
+    throw 'No file given';
+}
 
 const handleFile = async (file: File): Promise<void> => {
     uploading.value = true;
     display_filename.value = file.name;
     const type = file.type;
+
+    // create a stored_object if not exists
+    let stored_object;
+    if (null === props.existingDoc) {
+        stored_object = await fetchNewStoredObject();
+    } else {
+        stored_object = props.existingDoc;
+    }
+
     const buffer = await file.arrayBuffer();
     const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
-    const filename = await uploadFile(encrypted);
+    const filename = await uploadVersion(encrypted, stored_object);
 
-    console.log(iv, jsonWebKey);
-
-    const storedObject: StoredObjectCreated = {
+    const stored_object_version: StoredObjectVersionCreated = {
         filename: filename,
-        iv,
+        iv: Array.from(iv),
         keyInfos: jsonWebKey,
         type: type,
-        status: "stored_object_created",
-    };
+        persisted: false,
+    }
 
-    emit("addDocument", storedObject);
+    emit('addDocument', {stored_object, stored_object_version});
     uploading.value = false;
-};
+}
+
 </script>
 
 <template>
     <div class="drop-file">
-        <div
-            v-if="!uploading"
-            :class="{ area: true, dragging: is_dragging }"
-            @click="onZoneClick"
-            @dragover="onDragOver"
-            @dragleave="onDragLeave"
-            @drop="onDrop"
-        >
+        <div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
             <p v-if="has_existing_doc" class="file-icon">
-                <i
-                    class="fa fa-file-pdf-o"
-                    v-if="props.existingDoc?.type === 'application/pdf'"
-                ></i>
-                <i
-                    class="fa fa-file-word-o"
-                    v-else-if="
-                        props.existingDoc?.type ===
-                        'application/vnd.oasis.opendocument.text'
-                    "
-                ></i>
-                <i
-                    class="fa fa-file-word-o"
-                    v-else-if="
-                        props.existingDoc?.type ===
-                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-                    "
-                ></i>
-                <i
-                    class="fa fa-file-word-o"
-                    v-else-if="props.existingDoc?.type === 'application/msword'"
-                ></i>
-                <i
-                    class="fa fa-file-excel-o"
-                    v-else-if="
-                        props.existingDoc?.type ===
-                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-                    "
-                ></i>
-                <i
-                    class="fa fa-file-excel-o"
-                    v-else-if="
-                        props.existingDoc?.type === 'application/vnd.ms-excel'
-                    "
-                ></i>
-                <i
-                    class="fa fa-file-image-o"
-                    v-else-if="props.existingDoc?.type === 'image/jpeg'"
-                ></i>
-                <i
-                    class="fa fa-file-image-o"
-                    v-else-if="props.existingDoc?.type === 'image/png'"
-                ></i>
-                <i
-                    class="fa fa-file-archive-o"
-                    v-else-if="
-                        props.existingDoc?.type ===
-                        'application/x-zip-compressed'
-                    "
-                ></i>
-                <i class="fa fa-file-code-o" v-else></i>
+                <file-icon :type="props.existingDoc?.type"></file-icon>
             </p>
 
-            <p v-if="display_filename !== null" class="display-filename">
-                {{ display_filename }}
-            </p>
+            <p v-if="display_filename !== null" class="display-filename">{{ display_filename }}</p>
             <!-- todo i18n -->
-            <p v-if="has_existing_doc">
-                Déposez un document ou cliquez ici pour remplacer le document
-                existant
-            </p>
-            <p v-else>
-                Déposez un document ou cliquez ici pour ouvrir le navigateur de
-                fichier
-            </p>
+            <p v-if="has_existing_doc">Déposez un document ou cliquez ici pour remplacer le document existant</p>
+            <p v-else>Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier</p>
         </div>
         <div v-else class="waiting">
             <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
@@ -198,8 +140,7 @@ const handleFile = async (file: File): Promise<void> => {
         font-weight: 200;
     }
 
-    & > .area,
-    & > .waiting {
+    & > .area, & > .waiting {
         width: 100%;
         height: 10rem;
 
@@ -207,6 +148,11 @@ const handleFile = async (file: File): Promise<void> => {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
+        p {
+            // require for display in DropFileModal
+            text-align: center;
+        }
     }
 
     & > .area {
@@ -217,4 +163,5 @@ const handleFile = async (file: File): Promise<void> => {
         }
     }
 }
+
 </style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileModal.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+import {StoredObject, StoredObjectVersion} from "../../types";
+import DropFileWidget from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileWidget.vue";
+import {computed, reactive} from "vue";
+import {useToast} from 'vue-toast-notification';
+
+interface DropFileConfig {
+    allowRemove: boolean,
+    existingDoc?: StoredObject,
+}
+
+const props = withDefaults(defineProps<DropFileConfig>(), {
+    allowRemove: false,
+});
+
+const emit = defineEmits<{
+    (e: 'addDocument', {stored_object: StoredObject, stored_object_version: StoredObjectVersion}): void,
+    (e: 'removeDocument'): void
+}>();
+
+const $toast = useToast();
+
+const state = reactive({showModal: false});
+
+const modalClasses = {"modal-dialog-centered": true, "modal-md": true};
+
+const buttonState = computed<'add'|'replace'>(() => {
+    if (props.existingDoc === undefined || props.existingDoc === null) {
+        return 'add';
+    }
+
+    return 'replace';
+})
+
+function onAddDocument({stored_object, stored_object_version}: {stored_object: StoredObject, stored_object_version: StoredObjectVersion}): void {
+    const message = buttonState.value === 'add' ? "Document ajouté" : "Document remplacé";
+    $toast.success(message);
+    emit('addDocument', {stored_object_version, stored_object});
+    state.showModal = false;
+}
+
+function onRemoveDocument(): void {
+   emit('removeDocument');
+}
+
+function openModal(): void {
+    state.showModal = true;
+}
+
+function closeModal(): void {
+    state.showModal = false;
+}
+</script>
+
+<template>
+    <button v-if="buttonState === 'add'" @click="openModal" class="btn btn-create">Ajouter un document</button>
+    <button v-else @click="openModal" class="btn btn-edit">Remplacer le document</button>
+    <modal v-if="state.showModal" :modal-dialog-class="modalClasses" @close="closeModal">
+        <template v-slot:body>
+            <drop-file-widget :existing-doc="existingDoc" :allow-remove="allowRemove" @add-document="onAddDocument" @remove-document="onRemoveDocument" ></drop-file-widget>
+        </template>
+    </modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFileWidget.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { StoredObject, StoredObjectCreated } from "../../types";
-import { computed, ref, Ref } from "vue";
+
+import {StoredObject, StoredObjectVersion} from "../../types";
+import {computed, ref, Ref} from "vue";
 import DropFile from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFile.vue";
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
 interface DropFileConfig {
-    allowRemove: boolean;
-    existingDoc?: StoredObjectCreated | StoredObject;
+    allowRemove: boolean,
+    existingDoc?: StoredObject,
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
@@ -14,53 +15,51 @@ const props = withDefaults(defineProps<DropFileConfig>(), {
 });
 
 const emit = defineEmits<{
-    (e: "addDocument", stored_object: StoredObjectCreated): void;
-    (e: "removeDocument", stored_object: null): void;
+    (e: 'addDocument', {stored_object: StoredObject, stored_object_version: StoredObjectVersion}): void,
+    (e: 'removeDocument'): void
 }>();
 
 const has_existing_doc = computed<boolean>(() => {
     return props.existingDoc !== undefined && props.existingDoc !== null;
 });
 
-const dav_link_expiration = computed<number | undefined>(() => {
+const dav_link_expiration = computed<number|undefined>(() => {
     if (props.existingDoc === undefined || props.existingDoc === null) {
         return undefined;
     }
-    if (props.existingDoc.status !== "ready") {
+    if (props.existingDoc.status !== 'ready') {
         return undefined;
     }
 
     return props.existingDoc._links?.dav_link?.expiration;
 });
 
-const dav_link_href = computed<string | undefined>(() => {
+const dav_link_href = computed<string|undefined>(() => {
     if (props.existingDoc === undefined || props.existingDoc === null) {
         return undefined;
     }
-    if (props.existingDoc.status !== "ready") {
+    if (props.existingDoc.status !== 'ready') {
         return undefined;
     }
 
     return props.existingDoc._links?.dav_link?.href;
-});
+})
 
-const onAddDocument = (s: StoredObjectCreated): void => {
-    emit("addDocument", s);
-};
+const onAddDocument = ({stored_object, stored_object_version}: {stored_object: StoredObject, stored_object_version: StoredObjectVersion}): void => {
+    emit('addDocument', {stored_object, stored_object_version});
+}
 
 const onRemoveDocument = (e: Event): void => {
     e.stopPropagation();
     e.preventDefault();
-    emit("removeDocument", null);
-};
+    emit('removeDocument');
+}
+
 </script>
 
 <template>
     <div>
-        <drop-file
-            :existingDoc="props.existingDoc"
-            @addDocument="onAddDocument"
-        ></drop-file>
+        <drop-file :existingDoc="props.existingDoc" @addDocument="onAddDocument"></drop-file>
 
         <ul class="record_actions">
             <li v-if="has_existing_doc">
@@ -73,14 +72,12 @@ const onRemoveDocument = (e: Event): void => {
                 />
             </li>
             <li>
-                <button
-                    v-if="allowRemove"
-                    class="btn btn-delete"
-                    @click="onRemoveDocument($event)"
-                ></button>
+                <button v-if="allowRemove" class="btn btn-delete" @click="onRemoveDocument($event)" ></button>
             </li>
         </ul>
     </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/FileIcon.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface FileIconConfig {
+    type: string;
+}
+
+const props = defineProps<FileIconConfig>();
+
+</script>
+
+<template>
+    <i class="fa fa-file-pdf-o" v-if="props.type === 'application/pdf'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/vnd.oasis.opendocument.text'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
+    <i class="fa fa-file-word-o" v-else-if="props.type === 'application/msword'"></i>
+    <i class="fa fa-file-excel-o" v-else-if="props.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"></i>
+    <i class="fa fa-file-excel-o" v-else-if="props.type === 'application/vnd.ms-excel'"></i>
+    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/jpeg'"></i>
+    <i class="fa fa-file-image-o" v-else-if="props.type === 'image/png'"></i>
+    <i class="fa fa-file-archive-o" v-else-if="props.type === 'application/x-zip-compressed'"></i>
+    <i class="fa fa-file-code-o" v-else ></i>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/ConvertButton.vue

@@ -1,64 +1,60 @@
 <template>
-    <a :class="props.classes" @click="download_and_open($event)" ref="btn">
-        <i class="fa fa-file-pdf-o"></i>
-        Télécharger en pdf
-    </a>
+  <a :class="props.classes" @click="download_and_open($event)" ref="btn">
+    <i class="fa fa-file-pdf-o"></i>
+    Télécharger en pdf
+  </a>
 </template>
 
 <script lang="ts" setup>
-import {
-    build_convert_link,
-    download_and_decrypt_doc,
-    download_doc,
-} from "./helpers";
+
+import {build_convert_link, download_and_decrypt_doc, download_doc} from "./helpers";
 import mime from "mime";
-import { reactive, ref } from "vue";
-import { StoredObject, StoredObjectCreated } from "../../types";
+import {reactive, ref} from "vue";
+import {StoredObject} from "../../types";
 
 interface ConvertButtonConfig {
-    storedObject: StoredObject;
-    classes: Record<string, boolean>;
-    filename?: string;
-}
+  storedObject: StoredObject,
+  classes: { [key: string]: boolean},
+  filename?: string,
+};
 
 interface DownloadButtonState {
-    content: null | string;
+  content: null|string
 }
 
 const props = defineProps<ConvertButtonConfig>();
-const state: DownloadButtonState = reactive({ content: null });
+const state: DownloadButtonState = reactive({content: null});
 const btn = ref<HTMLAnchorElement | null>(null);
 
 async function download_and_open(event: Event): Promise<void> {
-    const button = event.target as HTMLAnchorElement;
+  const button = event.target as HTMLAnchorElement;
 
-    if (null === state.content) {
-        event.preventDefault();
+  if (null === state.content) {
+    event.preventDefault();
 
-        const raw = await download_doc(
-            build_convert_link(props.storedObject.uuid),
-        );
-        state.content = window.URL.createObjectURL(raw);
+    const raw = await download_doc(build_convert_link(props.storedObject.uuid));
+    state.content = window.URL.createObjectURL(raw);
 
-        button.href = window.URL.createObjectURL(raw);
-        button.type = "application/pdf";
+    button.href = window.URL.createObjectURL(raw);
+    button.type = 'application/pdf';
 
-        button.download = props.filename + ".pdf" || "document.pdf";
-    }
+    button.download = (props.filename + '.pdf') || 'document.pdf';
+  }
 
-    button.click();
-    const reset_pending = setTimeout(reset_state, 45000);
+  button.click();
+  const reset_pending = setTimeout(reset_state, 45000);
 }
 
 function reset_state(): void {
     state.content = null;
-    btn.value?.removeAttribute("download");
-    btn.value?.removeAttribute("href");
-    btn.value?.removeAttribute("type");
+    btn.value?.removeAttribute('download');
+    btn.value?.removeAttribute('href');
+    btn.value?.removeAttribute('type');
 }
+
 </script>
 
-<style scoped lang="sass">
+<style scoped lang="scss">
 i.fa::before {
    color: var(--bs-dropdown-link-hover-color);
 }

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DesktopEditButton.vue

@@ -90,4 +90,7 @@ const editionUntilFormatted = computed<string>(() => {
 .desktop-edit {
     text-align: center;
 }
+i.fa::before {
+    color: var(--bs-dropdown-link-hover-color);
+}
 </style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue

@@ -1,124 +1,117 @@
 <template>
-    <a
-        v-if="!state.is_ready"
-        :class="props.classes"
-        @click="download_and_open($event)"
-    >
+    <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open()" title="T&#233;l&#233;charger">
         <i class="fa fa-download"></i>
-        Télécharger
+        <template v-if="displayActionStringInButton">Télécharger</template>
     </a>
-    <a
-        v-else
-        :class="props.classes"
-        target="_blank"
-        :type="props.storedObject.type"
-        :download="buildDocumentName()"
-        :href="state.href_url"
-        ref="open_button"
-    >
+    <a v-else :class="props.classes" target="_blank" :type="props.atVersion.type" :download="buildDocumentName()" :href="state.href_url" ref="open_button" title="Ouvrir">
         <i class="fa fa-external-link"></i>
-        Ouvrir
+        <template v-if="displayActionStringInButton">Ouvrir</template>
     </a>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, nextTick, onMounted } from "vue";
-import { build_download_info_link, download_and_decrypt_doc } from "./helpers";
+import {reactive, ref, nextTick, onMounted} from "vue";
+import {download_and_decrypt_doc} from "./helpers";
 import mime from "mime";
-import { StoredObject, StoredObjectCreated } from "../../types";
+import {StoredObject, StoredObjectVersion} from "../../types";
 
 interface DownloadButtonConfig {
-    storedObject: StoredObject | StoredObjectCreated;
-    classes: Record<string, boolean>;
-    filename?: string;
+    storedObject: StoredObject,
+    atVersion: StoredObjectVersion,
+    classes: { [k: string]: boolean },
+    filename?: string,
+    /**
+     * if true, display the action string into the button. If false, displays only
+     * the icon
+     */
+    displayActionStringInButton?: boolean,
+    /**
+     * if true, will download directly the file on load
+     */
+    directDownload?: boolean,
 }
 
 interface DownloadButtonState {
-    is_ready: boolean;
-    is_running: boolean;
-    href_url: string;
+    is_ready: boolean,
+    is_running: boolean,
+    href_url: string,
 }
 
-const props = defineProps<DownloadButtonConfig>();
-const state: DownloadButtonState = reactive({
-    is_ready: false,
-    is_running: false,
-    href_url: "#",
-});
+const props = withDefaults(defineProps<DownloadButtonConfig>(), {displayActionStringInButton: true, directDownload: false});
+const state: DownloadButtonState = reactive({is_ready: false, is_running: false, href_url: "#"});
 
 const open_button = ref<HTMLAnchorElement | null>(null);
 
 function buildDocumentName(): string {
-    const document_name = props.filename || "document";
-    const ext = mime.getExtension(props.storedObject.type);
+    let document_name = props.filename ?? props.storedObject.title;
+
+    if ('' === document_name) {
+        document_name = 'document';
+    }
+
+    const ext = mime.getExtension(props.atVersion.type);
 
     if (null !== ext) {
-        return document_name + "." + ext;
+        return document_name + '.' + ext;
     }
 
     return document_name;
 }
 
-async function download_and_open(event: Event): Promise<void> {
-    const button = event.target as HTMLAnchorElement;
-
+async function download_and_open(): Promise<void> {
     if (state.is_running) {
-        console.log("state is running, aborting");
+        console.log('state is running, aborting');
         return;
     }
 
     state.is_running = true;
 
     if (state.is_ready) {
-        console.log("state is ready. This should not happens");
+        console.log('state is ready. This should not happens');
         return;
     }
 
-    const urlInfo = build_download_info_link(props.storedObject.filename);
     let raw;
 
     try {
-        raw = await download_and_decrypt_doc(
-            urlInfo,
-            props.storedObject.keyInfos,
-            new Uint8Array(props.storedObject.iv),
-        );
+        raw = await download_and_decrypt_doc(props.storedObject, props.atVersion);
     } catch (e) {
         console.error("error while downloading and decrypting document");
         console.error(e);
         throw e;
     }
 
-    console.log("document downloading (and decrypting) successfully");
-
-    console.log("creating the url");
     state.href_url = window.URL.createObjectURL(raw);
-    console.log("url created", state.href_url);
     state.is_running = false;
     state.is_ready = true;
-    console.log("new button marked as ready");
-    console.log("will click on button");
 
-    console.log("openbutton is now", open_button.value);
+    if (!props.directDownload) {
+        await nextTick();
+        open_button.value?.click();
 
-    await nextTick();
-    console.log("next tick actions");
-    console.log("openbutton after next tick", open_button.value);
-    open_button.value?.click();
-    console.log("open button should have been clicked");
-
-    const timer = setTimeout(reset_state, 45000);
+        console.log('open button should have been clicked');
+        setTimeout(reset_state, 45000);
+    }
 }
 
 function reset_state(): void {
-    state.href_url = "#";
+    state.href_url = '#';
     state.is_ready = false;
     state.is_running = false;
 }
+
+onMounted(() => {
+    if (props.directDownload) {
+        download_and_open();
+    }
+});
 </script>
 
-<style scoped lang="sass">
+<style scoped lang="scss">
 i.fa::before {
    color: var(--bs-dropdown-link-hover-color);
 }
+i.fa {
+    margin-right: 0.5rem;
+}
 </style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+
+import HistoryButtonModal from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue";
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../types";
+import {computed, reactive, ref, useTemplateRef} from "vue";
+import {get_versions} from "./HistoryButton/api";
+
+interface HistoryButtonConfig {
+    storedObject: StoredObject;
+    canEdit: boolean;
+}
+
+interface HistoryButtonState {
+    versions: StoredObjectVersionWithPointInTime[];
+    loaded: boolean;
+}
+
+const props = defineProps<HistoryButtonConfig>();
+const state = reactive<HistoryButtonState>({versions: [], loaded: false});
+const modal = useTemplateRef<typeof HistoryButtonModal>('modal');
+
+const download_version_and_open_modal = async function (): Promise<void> {
+    if (null !== modal.value) {
+        modal.value.open();
+    } else {
+        console.log("modal is null");
+    }
+
+    if (!state.loaded) {
+        const versions = await get_versions(props.storedObject);
+
+        for (const version of versions) {
+            state.versions.push(version);
+        }
+        state.loaded = true;
+    }
+}
+
+const onRestoreVersion = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    state.versions.unshift(newVersion);
+}
+
+</script>
+
+<template>
+<a @click="download_version_and_open_modal" class="dropdown-item">
+    <history-button-modal ref="modal" :versions="state.versions" :stored-object="storedObject" :can-edit="canEdit" @restore-version="onRestoreVersion"></history-button-modal>
+    <i class="fa fa-history"></i>
+    Historique
+</a>
+</template>
+
+<style scoped lang="scss">
+i.fa::before {
+    color: var(--bs-dropdown-link-hover-color);
+}
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../../types";
+import HistoryButtonListItem from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue";
+import {computed, reactive} from "vue";
+
+interface HistoryButtonListConfig {
+    versions: StoredObjectVersionWithPointInTime[];
+    storedObject: StoredObject;
+    canEdit: boolean;
+}
+
+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+interface HistoryButtonListState {
+    /**
+     * Contains the number of the newly created version when a version is restored.
+     */
+    restored: number;
+}
+
+const props = defineProps<HistoryButtonListConfig>();
+
+const state = reactive<HistoryButtonListState>({restored: -1})
+
+const higher_version = computed<number>(() => props.versions.reduce(
+    (accumulator: number, version: StoredObjectVersionWithPointInTime) => Math.max(accumulator, version.version),
+    -1
+    )
+);
+
+/**
+ * Executed when a version in child component is restored.
+ *
+ * internally, keep track of the newly restored version
+ */
+const onRestored = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    state.restored = newVersion.version;
+    emit('restoreVersion', {newVersion});
+}
+
+</script>
+
+<template>
+    <template v-if="props.versions.length > 0">
+        <div class="container">
+            <template v-for="v in props.versions">
+                <history-button-list-item
+                    :version="v"
+                    :can-edit="canEdit"
+                    :is-current="higher_version === v.version"
+                    :stored-object="storedObject"
+                    @restore-version="onRestored"
+                ></history-button-list-item>
+            </template>
+        </div>
+    </template>
+    <template v-else>
+        <p>Chargement des versions</p>
+    </template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonListItem.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import {StoredObject, StoredObjectPointInTime, StoredObjectVersionWithPointInTime} from "./../../../types";
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import {ISOToDatetime} from "./../../../../../../ChillMainBundle/Resources/public/chill/js/date";
+import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
+import RestoreVersionButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue";
+import DownloadButton from "ChillDocStoreAssets/vuejs/StoredObjectButton/DownloadButton.vue";
+import {computed} from "vue";
+
+interface HistoryButtonListItemConfig {
+    version: StoredObjectVersionWithPointInTime;
+    storedObject: StoredObject;
+    canEdit: boolean;
+    isCurrent: boolean;
+}
+
+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+const props = defineProps<HistoryButtonListItemConfig>();
+
+const onRestore = ({newVersion}: {newVersion: StoredObjectVersionWithPointInTime}) => {
+    emit('restoreVersion', {newVersion});
+}
+
+const isKeptBeforeConversion = computed<boolean>(() => props.version["point-in-times"].reduce(
+    (accumulator: boolean, pit: StoredObjectPointInTime) => accumulator || "keep-before-conversion" === pit.reason,
+    false
+    ),
+);
+
+const isRestored = computed<boolean>(() => props.version.version > 0 && null !== props.version["from-restored"]);
+
+const isDuplicated = computed<boolean>(() => props.version.version === 0 && null !== props.version["from-restored"]);
+
+const classes = computed<{row: true, 'row-hover': true, 'blinking-1': boolean, 'blinking-2': boolean}>(() => ({row: true, 'row-hover': true, 'blinking-1': props.isRestored && 0 === props.version.version % 2, 'blinking-2': props.isRestored && 1 === props.version.version % 2}));
+
+</script>
+
+<template>
+<div :class="classes">
+    <div class="col-12 tags" v-if="isCurrent || isKeptBeforeConversion || isRestored || isDuplicated">
+        <span class="badge bg-success" v-if="isCurrent">Version actuelle</span>
+        <span class="badge bg-info" v-if="isKeptBeforeConversion">Conservée avant conversion dans un autre format</span>
+        <span class="badge bg-info" v-if="isRestored">Restaurée depuis la version {{ version["from-restored"]?.version + 1 }}</span>
+        <span class="badge bg-info" v-if="isDuplicated">Dupliqué depuis un autre document</span>
+    </div>
+    <div class="col-12">
+        <file-icon :type="version.type"></file-icon> <span><strong>#{{ version.version + 1 }}</strong></span> <template v-if="version.createdBy !== null && version.createdAt !== null"><strong v-if="version.version == 0">Créé par</strong><strong v-else>modifié par</strong> <span class="badge-user"><UserRenderBoxBadge :user="version.createdBy"></UserRenderBoxBadge></span> <strong>à</strong> {{ $d(ISOToDatetime(version.createdAt.datetime8601), 'long') }}</template><template v-if="version.createdBy === null && version.createdAt !== null"><strong v-if="version.version == 0">Créé le</strong><strong v-else>modifié le</strong> {{ $d(ISOToDatetime(version.createdAt.datetime8601), 'long') }}</template>
+    </div>
+    <div class="col-12">
+        <ul class="record_actions small slim on-version-actions">
+            <li v-if="canEdit && !isCurrent">
+                <restore-version-button :stored-object-version="props.version" @restore-version="onRestore"></restore-version-button>
+            </li>
+            <li>
+                <download-button :stored-object="storedObject" :at-version="version" :classes="{btn: true, 'btn-outline-primary': true, 'btn-sm': true}" :display-action-string-in-button="false"></download-button>
+            </li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+div.tags {
+    span.badge:not(:last-child) {
+        margin-right: 0.5rem;
+    }
+}
+// to make the animation restart, we have the same animation twice,
+// and alternate between both
+.blinking-1 {
+    animation-name: backgroundColorPalette-1;
+    animation-duration: 8s;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    animation-timing-function: linear;
+}
+@keyframes backgroundColorPalette-1 {
+    0% {
+        background: var(--bs-chill-green-dark);
+    }
+    25% {
+        background: var(--bs-chill-green);
+    }
+    65% {
+        background: var(--bs-chill-beige);
+    }
+    100% {
+        background: unset;
+    }
+}
+.blinking-2 {
+    animation-name: backgroundColorPalette-2;
+    animation-duration: 8s;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    animation-timing-function: linear;
+}
+@keyframes backgroundColorPalette-2 {
+    0% {
+        background: var(--bs-chill-green-dark);
+    }
+    25% {
+        background: var(--bs-chill-green);
+    }
+    65% {
+        background: var(--bs-chill-beige);
+    }
+    100% {
+        background: unset;
+    }
+}
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/HistoryButtonModal.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+import {reactive} from "vue";
+import HistoryButtonList from "ChillDocStoreAssets/vuejs/StoredObjectButton/HistoryButton/HistoryButtonList.vue";
+import {StoredObject, StoredObjectVersionWithPointInTime} from "./../../../types";
+
+interface HistoryButtonListConfig {
+    versions: StoredObjectVersionWithPointInTime[];
+    storedObject: StoredObject;
+    canEdit: boolean;
+}
+
+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+interface HistoryButtonModalState {
+    opened: boolean;
+}
+
+const props = defineProps<HistoryButtonListConfig>();
+const state = reactive<HistoryButtonModalState>({opened: false});
+
+const open = () => {
+    state.opened = true;
+}
+
+defineExpose({open});
+
+</script>
+<template>
+    <Teleport to="body">
+        <modal v-if="state.opened" @close="state.opened = false">
+            <template v-slot:header>
+                <h3>Historique des versions du document</h3>
+            </template>
+            <template v-slot:body>
+                <p>Les versions sont conservées pendant 90 jours.</p>
+                <history-button-list :versions="props.versions" :can-edit="canEdit" :stored-object="storedObject" @restore-version="(payload) => emit('restoreVersion', payload)"></history-button-list>
+            </template>
+        </modal>
+    </Teleport>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/RestoreVersionButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {StoredObjectVersionPersisted, StoredObjectVersionWithPointInTime} from "../../../types";
+import {useToast} from "vue-toast-notification";
+import {restore_version} from "./api";
+
+interface RestoreVersionButtonProps {
+    storedObjectVersion: StoredObjectVersionPersisted,
+}
+
+const emit = defineEmits<{
+    restoreVersion: [newVersion: StoredObjectVersionWithPointInTime]
+}>()
+
+const props = defineProps<RestoreVersionButtonProps>()
+
+const $toast = useToast();
+
+const restore_version_fn = async () => {
+    const newVersion = await restore_version(props.storedObjectVersion);
+
+    $toast.success("Version restaurée");
+    emit('restoreVersion', {newVersion});
+}
+</script>
+
+<template>
+<button class="btn btn-outline-action" @click="restore_version_fn" title="Restaurer"><i class="fa fa-rotate-left"></i> Restaurer</button>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/HistoryButton/api.ts

@@ -0,0 +1,12 @@
+import {StoredObject, StoredObjectVersionPersisted, StoredObjectVersionWithPointInTime} from "../../../types";
+import {fetchResults, makeFetch} from "../../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+export const get_versions = async (storedObject: StoredObject): Promise<StoredObjectVersionWithPointInTime[]> => {
+    const versions = await fetchResults<StoredObjectVersionWithPointInTime>(`/api/1.0/doc-store/stored-object/${storedObject.uuid}/versions`);
+
+    return versions.sort((a: StoredObjectVersionWithPointInTime, b: StoredObjectVersionWithPointInTime) => b.version - a.version);
+}
+
+export const restore_version = async (version: StoredObjectVersionPersisted): Promise<StoredObjectVersionWithPointInTime> => {
+   return await makeFetch<null, StoredObjectVersionWithPointInTime>("POST", `/api/1.0/doc-store/stored-object/restore-from-version/${version.id}`);
+}

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/WopiEditButton.vue

@@ -1,30 +1,20 @@
 <template>
-    <a
-        :class="Object.assign(props.classes, { btn: true })"
-        @click="beforeLeave($event)"
-        :href="
-            build_wopi_editor_link(props.storedObject.uuid, props.returnPath)
-        "
-    >
-        <i class="fa fa-paragraph"></i>
-        Editer en ligne
-    </a>
+  <a :class="Object.assign(props.classes, {'btn': true})" @click="beforeLeave($event)" :href="build_wopi_editor_link(props.storedObject.uuid, props.returnPath)">
+    <i class="fa fa-paragraph"></i>
+    Editer en ligne
+  </a>
 </template>
 
 <script lang="ts" setup>
 import WopiEditButton from "./WopiEditButton.vue";
-import { build_wopi_editor_link } from "./helpers";
-import {
-    StoredObject,
-    StoredObjectCreated,
-    WopiEditButtonExecutableBeforeLeaveFunction,
-} from "../../types";
+import {build_wopi_editor_link} from "./helpers";
+import {StoredObject, WopiEditButtonExecutableBeforeLeaveFunction} from "../../types";
 
 interface WopiEditButtonConfig {
-    storedObject: StoredObject;
-    returnPath?: string;
-    classes: Record<string, boolean>;
-    executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction;
+  storedObject: StoredObject,
+  returnPath?: string,
+  classes: {[k: string] : boolean},
+  executeBeforeLeave?: WopiEditButtonExecutableBeforeLeaveFunction,
 }
 
 const props = defineProps<WopiEditButtonConfig>();
@@ -32,25 +22,25 @@ const props = defineProps<WopiEditButtonConfig>();
 let executed = false;
 
 async function beforeLeave(event: Event): Promise<true> {
-    console.log(executed);
-    if (props.executeBeforeLeave === undefined || executed === true) {
-        return Promise.resolve(true);
-    }
-
-    event.preventDefault();
-
-    await props.executeBeforeLeave();
-    executed = true;
-
-    const link = event.target as HTMLAnchorElement;
-    link.click();
-
+  if (props.executeBeforeLeave === undefined || executed === true) {
     return Promise.resolve(true);
+  }
+
+  event.preventDefault();
+
+  await props.executeBeforeLeave();
+  executed = true;
+
+  const link = event.target as HTMLAnchorElement;
+  link.click();
+
+  return Promise.resolve(true);
 }
 </script>
 
-<style scoped lang="sass">
+<style scoped lang="scss">
 i.fa::before {
    color: var(--bs-dropdown-link-hover-color);
 }
 </style>
+

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts

@@ -1,228 +1,247 @@
-import {
-    StoredObject,
-    StoredObjectStatus,
-    StoredObjectStatusChange,
-} from "../../types";
+import {StoredObject, StoredObjectStatus, StoredObjectStatusChange, StoredObjectVersion} from "../../types";
+import {makeFetch} from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
 
 const MIMES_EDIT = new Set([
-    "application/vnd.ms-powerpoint",
-    "application/vnd.ms-excel",
-    "application/vnd.oasis.opendocument.text",
-    "application/vnd.oasis.opendocument.text-flat-xml",
-    "application/vnd.oasis.opendocument.spreadsheet",
-    "application/vnd.oasis.opendocument.spreadsheet-flat-xml",
-    "application/vnd.oasis.opendocument.presentation",
-    "application/vnd.oasis.opendocument.presentation-flat-xml",
-    "application/vnd.oasis.opendocument.graphics",
-    "application/vnd.oasis.opendocument.graphics-flat-xml",
-    "application/vnd.oasis.opendocument.chart",
-    "application/msword",
-    "application/vnd.ms-excel",
-    "application/vnd.ms-powerpoint",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/vnd.ms-word.document.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
-    "application/vnd.ms-excel.sheet.macroEnabled.12",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
-    "application/x-dif-document",
-    "text/spreadsheet",
-    "text/csv",
-    "application/x-dbase",
-    "text/rtf",
-    "text/plain",
-    "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+  'application/vnd.ms-powerpoint',
+  'application/vnd.ms-excel',
+  'application/vnd.oasis.opendocument.text',
+  'application/vnd.oasis.opendocument.text-flat-xml',
+  'application/vnd.oasis.opendocument.spreadsheet',
+  'application/vnd.oasis.opendocument.spreadsheet-flat-xml',
+  'application/vnd.oasis.opendocument.presentation',
+  'application/vnd.oasis.opendocument.presentation-flat-xml',
+  'application/vnd.oasis.opendocument.graphics',
+  'application/vnd.oasis.opendocument.graphics-flat-xml',
+  'application/vnd.oasis.opendocument.chart',
+  'application/msword',
+  'application/vnd.ms-excel',
+  'application/vnd.ms-powerpoint',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.ms-word.document.macroEnabled.12',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
+  'application/vnd.ms-excel.sheet.macroEnabled.12',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
+  'application/x-dif-document',
+  'text/spreadsheet',
+  'text/csv',
+  'application/x-dbase',
+  'text/rtf',
+  'text/plain',
+  'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
 ]);
 
+
+
 const MIMES_VIEW = new Set([
-    ...MIMES_EDIT,
-    [
-        "image/svg+xml",
-        "application/vnd.sun.xml.writer",
-        "application/vnd.sun.xml.calc",
-        "application/vnd.sun.xml.impress",
-        "application/vnd.sun.xml.draw",
-        "application/vnd.sun.xml.writer.global",
-        "application/vnd.sun.xml.writer.template",
-        "application/vnd.sun.xml.calc.template",
-        "application/vnd.sun.xml.impress.template",
-        "application/vnd.sun.xml.draw.template",
-        "application/vnd.oasis.opendocument.text-master",
-        "application/vnd.oasis.opendocument.text-template",
-        "application/vnd.oasis.opendocument.text-master-template",
-        "application/vnd.oasis.opendocument.spreadsheet-template",
-        "application/vnd.oasis.opendocument.presentation-template",
-        "application/vnd.oasis.opendocument.graphics-template",
-        "application/vnd.ms-word.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
-        "application/vnd.ms-excel.template.macroEnabled.12",
-        "application/vnd.openxmlformats-officedocument.presentationml.template",
-        "application/vnd.ms-powerpoint.template.macroEnabled.12",
-        "application/vnd.wordperfect",
-        "application/x-aportisdoc",
-        "application/x-hwp",
-        "application/vnd.ms-works",
-        "application/x-mswrite",
-        "application/vnd.lotus-1-2-3",
-        "image/cgm",
-        "image/vnd.dxf",
-        "image/x-emf",
-        "image/x-wmf",
-        "application/coreldraw",
-        "application/vnd.visio2013",
-        "application/vnd.visio",
-        "application/vnd.ms-visio.drawing",
-        "application/x-mspublisher",
-        "application/x-sony-bbeb",
-        "application/x-gnumeric",
-        "application/macwriteii",
-        "application/x-iwork-numbers-sffnumbers",
-        "application/vnd.oasis.opendocument.text-web",
-        "application/x-pagemaker",
-        "application/x-fictionbook+xml",
-        "application/clarisworks",
-        "image/x-wpg",
-        "application/x-iwork-pages-sffpages",
-        "application/x-iwork-keynote-sffkey",
-        "application/x-abiword",
-        "image/x-freehand",
-        "application/vnd.sun.xml.chart",
-        "application/x-t602",
-        "image/bmp",
-        "image/png",
-        "image/gif",
-        "image/tiff",
-        "image/jpg",
-        "image/jpeg",
-        "application/pdf",
-    ],
-]);
+  ...MIMES_EDIT,
+  [
+    'image/svg+xml',
+    'application/vnd.sun.xml.writer',
+    'application/vnd.sun.xml.calc',
+    'application/vnd.sun.xml.impress',
+    'application/vnd.sun.xml.draw',
+    'application/vnd.sun.xml.writer.global',
+    'application/vnd.sun.xml.writer.template',
+    'application/vnd.sun.xml.calc.template',
+    'application/vnd.sun.xml.impress.template',
+    'application/vnd.sun.xml.draw.template',
+    'application/vnd.oasis.opendocument.text-master',
+    'application/vnd.oasis.opendocument.text-template',
+    'application/vnd.oasis.opendocument.text-master-template',
+    'application/vnd.oasis.opendocument.spreadsheet-template',
+    'application/vnd.oasis.opendocument.presentation-template',
+    'application/vnd.oasis.opendocument.graphics-template',
+    'application/vnd.ms-word.template.macroEnabled.12',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+    'application/vnd.ms-excel.template.macroEnabled.12',
+    'application/vnd.openxmlformats-officedocument.presentationml.template',
+    'application/vnd.ms-powerpoint.template.macroEnabled.12',
+    'application/vnd.wordperfect',
+    'application/x-aportisdoc',
+    'application/x-hwp',
+    'application/vnd.ms-works',
+    'application/x-mswrite',
+    'application/vnd.lotus-1-2-3',
+    'image/cgm',
+    'image/vnd.dxf',
+    'image/x-emf',
+    'image/x-wmf',
+    'application/coreldraw',
+    'application/vnd.visio2013',
+    'application/vnd.visio',
+    'application/vnd.ms-visio.drawing',
+    'application/x-mspublisher',
+    'application/x-sony-bbeb',
+    'application/x-gnumeric',
+    'application/macwriteii',
+    'application/x-iwork-numbers-sffnumbers',
+    'application/vnd.oasis.opendocument.text-web',
+    'application/x-pagemaker',
+    'application/x-fictionbook+xml',
+    'application/clarisworks',
+    'image/x-wpg',
+    'application/x-iwork-pages-sffpages',
+    'application/x-iwork-keynote-sffkey',
+    'application/x-abiword',
+    'image/x-freehand',
+    'application/vnd.sun.xml.chart',
+    'application/x-t602',
+    'image/bmp',
+    'image/png',
+    'image/gif',
+    'image/tiff',
+    'image/jpg',
+    'image/jpeg',
+    'application/pdf',
+  ]
+])
+
+export interface SignedUrlGet {
+    method: 'GET'|'HEAD',
+    url: string,
+    expires: number,
+    object_name: string,
+}
 
 function is_extension_editable(mimeType: string): boolean {
-    return MIMES_EDIT.has(mimeType);
+  return MIMES_EDIT.has(mimeType);
 }
 
 function is_extension_viewable(mimeType: string): boolean {
-    return MIMES_VIEW.has(mimeType);
+  return MIMES_VIEW.has(mimeType);
 }
 
 function build_convert_link(uuid: string) {
-    return `/chill/wopi/convert/${uuid}`;
+  return `/chill/wopi/convert/${uuid}`;
 }
 
-function build_download_info_link(object_name: string) {
-    return `/asyncupload/temp_url/generate/GET?object_name=${object_name}`;
+function build_download_info_link(storedObject: StoredObject, atVersion: null|StoredObjectVersion): string {
+    const url = `/api/1.0/doc-store/async-upload/temp_url/${storedObject.uuid}/generate/get`;
+
+    if (null !== atVersion) {
+        const params = new URLSearchParams({version: atVersion.filename});
+
+        return url + '?' + params.toString();
+    }
+
+    return url;
+}
+
+async function download_info_link(storedObject: StoredObject, atVersion: null|StoredObjectVersion): Promise<SignedUrlGet> {
+    return makeFetch('GET', build_download_info_link(storedObject, atVersion));
 }
 
 function build_wopi_editor_link(uuid: string, returnPath?: string) {
-    if (returnPath === undefined) {
-        returnPath =
-            window.location.pathname +
-            window.location.search +
-            window.location.hash;
-    }
+  if (returnPath === undefined) {
+    returnPath = window.location.pathname + window.location.search + window.location.hash;
+  }
 
-    return (
-        `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath)
-    );
+  return `/chill/wopi/edit/${uuid}?returnPath=` + encodeURIComponent(returnPath);
 }
 
 function download_doc(url: string): Promise<Blob> {
-    return window.fetch(url).then((r) => {
-        if (r.ok) {
-            return r.blob();
-        }
+  return window.fetch(url).then(r => {
+    if (r.ok) {
+      return r.blob()
+    }
 
-        throw new Error("Could not download document");
-    });
+    throw new Error('Could not download document');
+  });
 }
 
-async function download_and_decrypt_doc(
-    urlGenerator: string,
-    keyData: JsonWebKey,
-    iv: Uint8Array,
-): Promise<Blob> {
-    const algo = "AES-CBC";
-    // get an url to download the object
-    const downloadInfoResponse = await window.fetch(urlGenerator);
+async function download_and_decrypt_doc(storedObject: StoredObject, atVersion: null|StoredObjectVersion): Promise<Blob>
+{
+   const algo = 'AES-CBC';
 
-    if (!downloadInfoResponse.ok) {
-        throw new Error(
-            "error while downloading url " +
-                downloadInfoResponse.status +
-                " " +
-                downloadInfoResponse.statusText,
-        );
+   const atVersionToDownload = atVersion ?? storedObject.currentVersion;
+
+   if (null === atVersionToDownload) {
+       throw new Error("no version associated to stored object");
+   }
+
+   // sometimes, the downloadInfo may be embedded into the storedObject
+    console.log('storedObject', storedObject);
+    let downloadInfo;
+    if (typeof storedObject._links !== 'undefined' && typeof storedObject._links.downloadLink !== 'undefined') {
+       downloadInfo = storedObject._links.downloadLink;
+    } else {
+       downloadInfo = await download_info_link(storedObject, atVersionToDownload);
     }
 
-    const downloadInfo = (await downloadInfoResponse.json()) as { url: string };
-    const rawResponse = await window.fetch(downloadInfo.url);
+   const rawResponse = await window.fetch(downloadInfo.url);
 
-    if (!rawResponse.ok) {
-        throw new Error(
-            "error while downloading raw file " +
-                rawResponse.status +
-                " " +
-                rawResponse.statusText,
-        );
-    }
+   if (!rawResponse.ok) {
+     throw new Error("error while downloading raw file " + rawResponse.status + " " + rawResponse.statusText);
+   }
 
-    if (iv.length === 0) {
-        console.log("returning document immediatly");
-        return rawResponse.blob();
-    }
+   if (atVersionToDownload.iv.length === 0) {
+     return rawResponse.blob();
+   }
 
-    console.log("start decrypting doc");
+   const rawBuffer = await rawResponse.arrayBuffer();
+   try {
+     const key = await window.crypto.subtle
+       .importKey('jwk', atVersionToDownload.keyInfos, { name: algo }, false, ['decrypt']);
+     const iv = Uint8Array.from(atVersionToDownload.iv);
+     const decrypted = await window.crypto.subtle
+       .decrypt({ name: algo, iv: iv }, key, rawBuffer);
 
-    const rawBuffer = await rawResponse.arrayBuffer();
+     return Promise.resolve(new Blob([decrypted]));
+   } catch (e) {
+     console.error('encounter error while keys and decrypt operations');
+     console.error(e);
 
-    try {
-        const key = await window.crypto.subtle.importKey(
-            "jwk",
-            keyData,
-            { name: algo },
-            false,
-            ["decrypt"],
-        );
-        console.log("key created");
-        const decrypted = await window.crypto.subtle.decrypt(
-            { name: algo, iv: iv },
-            key,
-            rawBuffer,
-        );
-        console.log("doc decrypted");
-
-        return Promise.resolve(new Blob([decrypted]));
-    } catch (e) {
-        console.error("get error while keys and decrypt operations");
-        console.error(e);
-
-        throw e;
-    }
+     throw e;
+   }
 }
 
-async function is_object_ready(
-    storedObject: StoredObject,
-): Promise<StoredObjectStatusChange> {
-    const new_status_response = await window.fetch(
-        `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`,
-    );
+/**
+ * Fetch the stored object as a pdf.
+ *
+ * If the document is already in a pdf on the server side, the document is retrieved "as is" from the usual
+ * storage.
+ */
+async function download_doc_as_pdf(storedObject: StoredObject): Promise<Blob>
+{
+    if (null === storedObject.currentVersion) {
+        throw new Error("the stored object does not count any version");
+    }
+
+    if (storedObject.currentVersion?.type === 'application/pdf') {
+        return download_and_decrypt_doc(storedObject, storedObject.currentVersion);
+    }
+
+    const convertLink = build_convert_link(storedObject.uuid);
+    const response = await fetch(convertLink);
+
+    if (!response.ok) {
+        throw new Error("Could not convert the document: " + response.status);
+    }
+
+    return response.blob();
+}
+
+async function is_object_ready(storedObject: StoredObject): Promise<StoredObjectStatusChange>
+{
+    const new_status_response = await window
+      .fetch( `/api/1.0/doc-store/stored-object/${storedObject.uuid}/is-ready`);
 
     if (!new_status_response.ok) {
-        throw new Error("could not fetch the new status");
+      throw new Error("could not fetch the new status");
     }
 
     return await new_status_response.json();
 }
 
 export {
-    build_convert_link,
-    build_download_info_link,
-    build_wopi_editor_link,
-    download_and_decrypt_doc,
-    download_doc,
-    is_extension_editable,
-    is_extension_viewable,
-    is_object_ready,
+  build_convert_link,
+  build_wopi_editor_link,
+  download_and_decrypt_doc,
+  download_doc,
+  download_doc_as_pdf,
+  is_extension_editable,
+  is_extension_viewable,
+  is_object_ready,
 };

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUpload.vue

@@ -1,195 +0,0 @@
-<template>
-    <a :class="btnClasses" :title="$t(buttonTitle)" @click="openModal">
-        <span>{{ $t(buttonTitle) }}</span>
-    </a>
-    <teleport to="body">
-        <div>
-            <modal
-                v-if="modal.showModal"
-                :modal-dialog-class="modal.modalDialogClass"
-                @close="modal.showModal = false"
-            >
-                <template #header>
-                    {{ $t("upload_a_document") }}
-                </template>
-
-                <template #body>
-                    <div id="dropZoneWrapper" ref="dropZoneWrapper">
-                        <div
-                            data-stored-object="data-stored-object"
-                            :data-label-preparing="$t('data_label_preparing')"
-                            :data-label-quiet-button="
-                                $t('data_label_quiet_button')
-                            "
-                            :data-label-ready="$t('data_label_ready')"
-                            :data-dict-file-too-big="
-                                $t('data_dict_file_too_big')
-                            "
-                            :data-dict-default-message="
-                                $t('data_dict_default_message')
-                            "
-                            :data-dict-remove-file="$t('data_dict_remove_file')"
-                            :data-dict-max-files-exceeded="
-                                $t('data_dict_max_files_exceeded')
-                            "
-                            :data-dict-cancel-upload="
-                                $t('data_dict_cancel_upload')
-                            "
-                            :data-dict-cancel-upload-confirm="
-                                $t('data_dict_cancel_upload_confirm')
-                            "
-                            :data-dict-upload-canceled="
-                                $t('data_dict_upload_canceled')
-                            "
-                            :data-dict-remove="$t('data_dict_remove')"
-                            :data-allow-remove="!options.required"
-                            data-temp-url-generator="/asyncupload/temp_url/generate/GET"
-                        >
-                            <input
-                                type="hidden"
-                                data-async-file-upload="data-async-file-upload"
-                                data-generate-temp-url-post="/asyncupload/temp_url/generate/post?expires_delay=180&amp;submit_delay=3600"
-                                data-temp-url-get="/asyncupload/temp_url/generate/GET"
-                                :data-max-files="options.maxFiles"
-                                :data-max-post-size="options.maxPostSize"
-                                :v-model="dataAsyncFileUpload"
-                            />
-                            <input type="hidden" data-stored-object-key="1" />
-                            <input type="hidden" data-stored-object-iv="1" />
-                            <input type="hidden" data-async-file-type="1" />
-                        </div>
-                    </div>
-                </template>
-
-                <template #footer>
-                    <button
-                        class="btn btn-create"
-                        @click.prevent="saveDocument"
-                    >
-                        {{ $t("action.add") }}
-                    </button>
-                </template>
-            </modal>
-        </div>
-    </teleport>
-</template>
-
-<script>
-import Modal from "ChillMainAssets/vuejs/_components/Modal";
-import { searchForZones } from "../../module/async_upload/uploader";
-import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
-
-const i18n = {
-    messages: {
-        fr: {
-            upload_a_document: "Téléversez un document",
-            data_label_preparing: "Chargement...",
-            data_label_quiet_button: "Téléchargez le fichier existant",
-            data_label_ready: "Prêt à montrer",
-            data_dict_file_too_big: "Fichier trop volumineux",
-            data_dict_default_message: "Glissez votre fichier ou cliquez ici",
-            data_dict_remove_file:
-                "Enlevez votre fichier pour en téléversez un autre",
-            data_dict_max_files_exceeded:
-                "Nombre maximum de fichiers atteint. Enlevez les fichiers précédents",
-            data_dict_cancel_upload: "Annulez le téléversement",
-            data_dict_cancel_upload_confirm:
-                "Êtes-vous sûr·e de vouloir annuler ce téléversement?",
-            data_dict_upload_canceled: "Téléversement annulé",
-            data_dict_remove: "Enlevez le fichier existant",
-        },
-    },
-};
-
-export default {
-    name: "AddAsyncUpload",
-    components: {
-        Modal,
-    },
-    i18n,
-    props: {
-        buttonTitle: {
-            type: String,
-            default: "Ajouter un document",
-        },
-        options: {
-            type: Object,
-            default: {
-                maxFiles: 1,
-                maxPostSize: 262144000, // 250MB
-                required: false,
-            },
-        },
-        btnClasses: {
-            type: Object,
-            default: {
-                btn: true,
-                "btn-create": true,
-            },
-        },
-    },
-    emits: ["addDocument"],
-    data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-centered modal-md",
-            },
-        };
-    },
-    updated() {
-        if (this.modal.showModal) {
-            searchForZones(this.$refs.dropZoneWrapper);
-        }
-    },
-    methods: {
-        openModal() {
-            this.modal.showModal = true;
-        },
-        saveDocument() {
-            const dropzone = this.$refs.dropZoneWrapper;
-            if (dropzone) {
-                const inputKey = dropzone.querySelector(
-                    "input[data-stored-object-key]",
-                );
-                const inputIv = dropzone.querySelector(
-                    "input[data-stored-object-iv]",
-                );
-                const inputObject = dropzone.querySelector(
-                    "input[data-async-file-upload]",
-                );
-                const inputType = dropzone.querySelector(
-                    "input[data-async-file-type]",
-                );
-
-                const url = "/api/1.0/docstore/stored-object.json";
-                const body = {
-                    filename: inputObject.value,
-                    keyInfos: JSON.parse(inputKey.value),
-                    iv: JSON.parse(inputIv.value),
-                    type: inputType.value,
-                };
-                makeFetch("POST", url, body)
-                    .then((r) => {
-                        this.$emit("addDocument", r);
-                        this.modal.showModal = false;
-                    })
-                    .catch((error) => {
-                        if (error.name === "ValidationException") {
-                            for (let v of error.violations) {
-                                this.$toast.open({ message: v });
-                            }
-                        } else {
-                            console.error(error);
-                            this.$toast.open({ message: "An error occurred" });
-                        }
-                    });
-            } else {
-                this.$toast.open({
-                    message: "An error occurred - drop zone not found",
-                });
-            }
-        },
-    },
-};
-</script>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/AddAsyncUploadDownloader.vue

@@ -1,42 +0,0 @@
-<template>
-    <a
-        class="btn btn-download"
-        :title="$t(buttonTitle)"
-        :data-key="JSON.stringify(storedObject.keyInfos)"
-        :data-iv="JSON.stringify(storedObject.iv)"
-        :data-mime-type="storedObject.type"
-        :data-label-preparing="$t('dataLabelPreparing')"
-        :data-label-ready="$t('dataLabelReady')"
-        :data-temp-url-get-generator="url"
-        @click.once="downloadDocument"
-    />
-</template>
-
-<script>
-import { download } from "../../module/async_upload/downloader";
-
-const i18n = {
-    messages: {
-        fr: {
-            dataLabelPreparing: "Chargement...",
-            dataLabelReady: "",
-        },
-    },
-};
-
-export default {
-    name: "AddAsyncUploadDownloader",
-    i18n,
-    props: ["buttonTitle", "storedObject"],
-    computed: {
-        url() {
-            return `/asyncupload/temp_url/generate/GET?object_name=${this.storedObject.filename}`;
-        },
-    },
-    methods: {
-        downloadDocument(e) {
-            download(e.target);
-        },
-    },
-};
-</script>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/_components/helper.ts

@@ -1,73 +0,0 @@
-import { makeFetch } from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
-import { PostStoreObjectSignature } from "../../types";
-
-const algo = "AES-CBC";
-
-const URL_POST = "/asyncupload/temp_url/generate/post";
-
-const keyDefinition = {
-    name: algo,
-    length: 256,
-};
-
-const createFilename = (): string => {
-    let text = "";
-    const possible =
-        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-    for (let i = 0; i < 7; i++) {
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
-
-    return text;
-};
-
-export const uploadFile = async (uploadFile: ArrayBuffer): Promise<string> => {
-    const params = new URLSearchParams();
-    params.append("expires_delay", "180");
-    params.append("submit_delay", "180");
-    const asyncData: PostStoreObjectSignature = await makeFetch(
-        "GET",
-        URL_POST + "?" + params.toString(),
-    );
-    const suffix = createFilename();
-    const filename = asyncData.prefix + suffix;
-    const formData = new FormData();
-    formData.append("redirect", asyncData.redirect);
-    formData.append("max_file_size", asyncData.max_file_size.toString());
-    formData.append("max_file_count", asyncData.max_file_count.toString());
-    formData.append("expires", asyncData.expires.toString());
-    formData.append("signature", asyncData.signature);
-    formData.append(filename, new Blob([uploadFile]), suffix);
-
-    const response = await window.fetch(asyncData.url, {
-        method: "POST",
-        body: formData,
-    });
-
-    if (!response.ok) {
-        console.error("Error while sending file to store", response);
-        throw new Error(response.statusText);
-    }
-
-    return Promise.resolve(filename);
-};
-
-export const encryptFile = async (
-    originalFile: ArrayBuffer,
-): Promise<[ArrayBuffer, Uint8Array, JsonWebKey]> => {
-    console.log("encrypt", originalFile);
-    const iv = crypto.getRandomValues(new Uint8Array(16));
-    const key = await window.crypto.subtle.generateKey(keyDefinition, true, [
-        "encrypt",
-        "decrypt",
-    ]);
-    const exportedKey = await window.crypto.subtle.exportKey("jwk", key);
-    const encrypted = await window.crypto.subtle.encrypt(
-        { name: algo, iv: iv },
-        key,
-        originalFile,
-    );
-
-    return Promise.resolve([encrypted, iv, exportedKey]);
-};

src/Bundle/ChillDocStoreBundle/Resources/views/AccompanyingCourseDocument/_workflow.html.twig

@@ -38,6 +38,11 @@
 
     {% if display_action is defined and display_action == true %}
         <ul class="record_actions">
+            {% for dam in display_action_more|default([]) %}
+                <li>
+                    {{ dam|raw }}
+                </li>
+            {% endfor %}
             {% if document.course != null and is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', document.course) %}
                 <li>
                     <a href="{{ path('chill_person_accompanying_course_index', {'accompanying_period_id': document.course.id}) }}" class="btn btn-show change-icon">

src/Bundle/ChillDocStoreBundle/Resources/views/Button/button_download.html.twig

@@ -0,0 +1 @@
+<div data-download-button-single="data-download-button-single" data-stored-object="{{ document_json|json_encode|escape('html_attr') }}" data-title="{{ title|escape('html_attr') }}"></div>

src/Bundle/ChillDocStoreBundle/Resources/views/DocumentCategory/index.html.twig

@@ -8,7 +8,7 @@
     <table class="table table-bordered border-dark align-middle">
         <thead>
             <tr>
-                <th>{{ 'Creator bundle id' | trans }}</th>
+{#                <th>{{ 'Creator bundle id' | trans }}</th>#}
                 <th>{{ 'Internal id inside creator bundle' | trans }}</th>
                 <th>{{ 'Document class' | trans }}</th>
                 <th>{{ 'Name' | trans }}</th>
@@ -18,7 +18,7 @@
         <tbody>
         {% for document_category in document_categories %}
             <tr>
-                <td>{{ document_category.bundleId }}</td>
+{#                <td>{{ document_category.bundleId }}</td>#}
                 <td>{{ document_category.idInsideBundle }}</td>
                 <td>{{ document_category.documentClass }}</td>
                 <td>{{ document_category.name | localize_translatable_string}}</td>

src/Bundle/ChillDocStoreBundle/Resources/views/List/list_item.html.twig

@@ -71,15 +71,7 @@
                 </li>
                 {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_SEE_DETAILS', document) %}
                     <li>
-                        {{ document.object|chill_document_button_group(document.title, is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_UPDATE', document)) }}
-                    </li>
-                    <li>
-                        <a href="{{ chill_path_add_return_path('accompanying_course_document_show', {'course': accompanyingCourse.id, 'id': document.id}) }}" class="btn btn-show"></a>
-                    </li>
-                {% endif %}
-                {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_UPDATE', document) %}
-                    <li>
-                        <a href="{{ path('accompanying_course_document_edit', {'course': accompanyingCourse.id, 'id': document.id }) }}" class="btn btn-update"></a>
+                        {{ document.object|chill_document_button_group(document.title) }}
                     </li>
                 {% endif %}
                 {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_DELETE', document) %}
@@ -87,10 +79,25 @@
                         <a href="{{ chill_return_path_or('chill_docstore_accompanying_course_document_delete', {'course': accompanyingCourse.id, 'id': document.id}) }}" class="btn btn-delete"></a>
                     </li>
                 {% endif %}
+                {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_CREATE', document.course) %}
+                    <li>
+                        <a href="{{ chill_path_add_return_path('chill_doc_store_accompanying_course_document_duplicate', {'id': document.id}) }}" class="btn btn-duplicate" title="{{ 'Duplicate'|trans|e('html_attr') }}"></a>
+                    </li>
+                {% endif %}
+                {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_UPDATE', document) %}
+                    <li>
+                        <a href="{{ path('accompanying_course_document_edit', {'course': accompanyingCourse.id, 'id': document.id }) }}" class="btn btn-update"></a>
+                    </li>
+                {% endif %}
+                {% if is_granted('CHILL_ACCOMPANYING_COURSE_DOCUMENT_SEE_DETAILS', document) %}
+                    <li>
+                        <a href="{{ chill_path_add_return_path('accompanying_course_document_show', {'course': accompanyingCourse.id, 'id': document.id}) }}" class="btn btn-show"></a>
+                    </li>
+                {% endif %}
             {% else %}
                 {% if is_granted('CHILL_PERSON_DOCUMENT_SEE_DETAILS', document) %}
                     <li>
-                        {{ document.object|chill_document_button_group(document.title, is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document)) }}
+                        {{ document.object|chill_document_button_group(document.title) }}
                     </li>
                     <li>
                         <a href="{{ path('person_document_show', {'person': person.id, 'id': document.id}) }}" class="btn btn-show"></a>

src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig

@@ -0,0 +1,38 @@
+<!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">
+                   <h4>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h4>
+                   <div class="row" id="document-signature"></div>
+               </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

src/Bundle/ChillDocStoreBundle/Resources/views/Workflow/public_view_with_document_render.html.twig

@@ -0,0 +1,43 @@
+{% extends '@ChillMain/Workflow/workflow_view_send_public_layout.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_document_download_button') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_document_download_button') }}
+{% endblock %}
+
+{% block title %}{{ 'workflow.public_link.title'|trans }} - {{ title }}{% endblock %}
+
+{% block public_content %}
+    <h1>{{ 'workflow.public_link.shared_doc'|trans }}</h1>
+
+    {% set previous = send.entityWorkflowStepChained.previous %}
+    {% if previous is not null %}
+        {% if previous.transitionBy is not null %}
+            <p>{{ 'workflow.public_link.doc_shared_by_at_explanation'|trans({'byUser': previous.transitionBy|chill_entity_render_string( { 'at_date': previous.transitionAt } ), 'at': previous.transitionAt }) }}</p>
+        {% else %}
+            <p>{{ 'workflow.public_link.doc_shared_automatically_at_explanation'|trans({'at': previous.transitionAt}) }}</p>
+        {% endif %}
+    {% endif %}
+
+    <div class="row">
+        <div class="col-xs-12 col-sm-6 col-md-4">
+            <div class="card"">
+                <div class="card-body">
+                    <h2 class="card-title">{{ title }}</h2>
+                    <h3>{{ 'workflow.public_link.main_document'|trans }}</h3>
+
+                    <ul class="record_actions slim small">
+                        <li>
+                            {{ storedObject|chill_document_download_only_button(storedObject.title(), false) }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}