Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Merge branch '98-rewrite-download-button' into 'master'

Browse Source 
Fixed: vue downloadButton: add more log and various improvements

See merge request Chill-Projet/chill-bundles!547
This commit is contained in:
Julien Fastré 2023-05-25 10:42:10 +00:00
commit 6bdd1f31d3
2 changed files with 71 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/DownloadButton.vue
View File

@ -1,52 +1,90 @@
<template> <template>
<a :class="props.classes" @click="download_and_open($event)"> <a v-if="!state.is_ready" :class="props.classes" @click="download_and_open($event)">
<i class="fa fa-download"></i> <i class="fa fa-download"></i>
Télécharger Télécharger
</a> </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> </template>
<script lang="ts" setup> <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 {build_download_info_link, download_and_decrypt_doc} from "./helpers";
import mime from "mime"; import mime from "mime";
import {StoredObject} from "../../types"; import {StoredObject} from "../../types";
interface DownloadButtonConfig { interface DownloadButtonConfig {
storedObject: StoredObject, storedObject: StoredObject,
classes: {[k: string]: boolean}, classes: { [k: string]: boolean },
filename?: string, filename?: string,
} }
interface DownloadButtonState { interface DownloadButtonState {
is_ready: boolean is_ready: boolean,
is_running: boolean,
href_url: string,
} }
const props = defineProps<DownloadButtonConfig>(); 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 open_button = ref<HTMLAnchorElement | null>(null);
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';
function buildDocumentName(): string {
const document_name = props.filename || 'document';
const ext = mime.getExtension(props.storedObject.type); const ext = mime.getExtension(props.storedObject.type);
if (null !== ext) { 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> </script>

5
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/StoredObjectButton/helpers.ts
View File

@ -149,16 +149,21 @@ async function download_and_decrypt_doc(urlGenerator: string, keyData: JsonWebKe
} }
if (iv.length === 0) { if (iv.length === 0) {
console.log('returning document immediatly');
return rawResponse.blob(); return rawResponse.blob();
} }
console.log('start decrypting doc');
const rawBuffer = await rawResponse.arrayBuffer(); const rawBuffer = await rawResponse.arrayBuffer();
try { try {
const key = await window.crypto.subtle const key = await window.crypto.subtle
.importKey('jwk', keyData, { name: algo }, false, ['decrypt']); .importKey('jwk', keyData, { name: algo }, false, ['decrypt']);
console.log('key created');
const decrypted = await window.crypto.subtle const decrypted = await window.crypto.subtle
.decrypt({ name: algo, iv: iv }, key, rawBuffer); .decrypt({ name: algo, iv: iv }, key, rawBuffer);
console.log('doc decrypted');
return Promise.resolve(new Blob([decrypted])); return Promise.resolve(new Blob([decrypted]));
} catch (e) { } catch (e) {