From ff3dab0934f30fe75311ced3c0d635ce954d4e6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Thu, 25 May 2023 12:36:47 +0200
Subject: [PATCH] Fixed: vue downloadButton: add more log and various
 improvements

- create a dedicated button for opening
- use nextTick before clicking on the "opening" button
---
 .../StoredObjectButton/DownloadButton.vue     | 94 +++++++++++++------
 .../vuejs/StoredObjectButton/helpers.ts       |  5 +
 2 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
index b22035bee..10985fdff 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
@@ -1,52 +1,90 @@
 <template>
-  <a :class="props.classes" @click="download_and_open($event)">
-    <i class="fa fa-download"></i>
-    Télécharger
-  </a>
+    <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open($event)">
+        <i class="fa fa-download"></i>
+        Télécharger
+    </a>
+    <a v-else :class="props.classes" target="_blank" :type="props.storedObject.type" :download="buildDocumentName()" :href="state.href_url" ref="open_button">
+        <i class="fa fa-external-link"></i>
+        Ouvrir
+    </a>
 </template>
 
 <script lang="ts" setup>
-import {reactive} from "vue";
+import {reactive, ref, nextTick, onMounted} from "vue";
 import {build_download_info_link, download_and_decrypt_doc} from "./helpers";
 import mime from "mime";
 import {StoredObject} from "../../types";
 
 interface DownloadButtonConfig {
-  storedObject: StoredObject,
-  classes: {[k: string]: boolean},
-  filename?: string,
+    storedObject: StoredObject,
+    classes: { [k: string]: boolean },
+    filename?: string,
 }
 
 interface DownloadButtonState {
-  is_ready: boolean
+    is_ready: boolean,
+    is_running: boolean,
+    href_url: string,
 }
 
 const props = defineProps<DownloadButtonConfig>();
-const state: DownloadButtonState = reactive({is_ready: false});
+const state: DownloadButtonState = reactive({is_ready: false, is_running: false, href_url: "#"});
 
-async function download_and_open(event: Event): Promise<void> {
-  const button = event.target as HTMLAnchorElement;
-
-  if (!state.is_ready) {
-    event.preventDefault();
-    const urlInfo = build_download_info_link(props.storedObject.filename);
-
-    const raw = await download_and_decrypt_doc(urlInfo, props.storedObject.keyInfos, new Uint8Array(props.storedObject.iv));
-
-    button.href = window.URL.createObjectURL(raw);
-    button.target = '_blank';
-    button.type = props.storedObject.type;
-
-    button.download = props.filename || 'document';
+const open_button = ref<HTMLAnchorElement | null>(null);
 
+function buildDocumentName(): string {
+    const document_name = props.filename || 'document';
     const ext = mime.getExtension(props.storedObject.type);
+
     if (null !== ext) {
-      button.download = button.download + '.' + ext;
+        return document_name + '.' + ext;
     }
 
-    state.is_ready = true;
+    return document_name;
+}
 
-    button.click();
-  }
+async function download_and_open(event: Event): Promise<void> {
+    const button = event.target as HTMLAnchorElement;
+
+    if (state.is_running) {
+        console.log('state is running, aborting');
+        return;
+    }
+
+    state.is_running = true;
+
+    if (state.is_ready) {
+        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));
+    } 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);
+
+    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');
 }
 </script>
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
index 5b61a108d..c0b0fa940 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
@@ -149,16 +149,21 @@ async function download_and_decrypt_doc(urlGenerator: string, keyData: JsonWebKe
    }
 
    if (iv.length === 0) {
+     console.log('returning document immediatly');
      return rawResponse.blob();
    }
 
+   console.log('start decrypting doc');
+
    const rawBuffer = await rawResponse.arrayBuffer();
 
    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) {