Update DropFile to handle object versioning

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 
-import {StoredObject, StoredObjectCreated} from "../../types";
-import {encryptFile, uploadFile} from "../_components/helper";
+import {StoredObject, StoredObjectVersionCreated} from "../../types";
+import {encryptFile, fetchNewStoredObject, uploadVersion} from "../../js/async-upload/uploader";
 import {computed, ref, Ref} from "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,
+    (e: 'addDocument', {stored_object_version: StoredObjectVersionCreated, stored_object: StoredObject}): void,
 }>();
 
 const is_dragging: Ref<boolean> = ref(false);
@@ -34,7 +34,6 @@ const onDragLeave = (e: Event) => {
 }
 
 const onDrop = (e: DragEvent) => {
-    console.log('on drop', e);
     e.preventDefault();
 
     const files = e.dataTransfer?.files;
@@ -64,7 +63,6 @@ const onZoneClick = (e: Event) => {
 
 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]);
@@ -80,21 +78,28 @@ const onFileChange = async (event: Event): Promise<void> => {
 const handleFile = async (file: File): Promise<void> => {
     uploading.value = true;
     const type = file.type;
-    const buffer = await file.arrayBuffer();
-    const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
-    const filename = await uploadFile(encrypted);
 
-    console.log(iv, jsonWebKey);
-
-    const storedObject: StoredObjectCreated = {
-        filename: filename,
-        iv,
-        keyInfos: jsonWebKey,
-        type: type,
-        status: "stored_object_created",
+    // create a stored_object if not exists
+    let stored_object;
+    if (null === props.existingDoc) {
+        stored_object = await fetchNewStoredObject();
+    } else {
+        stored_object = props.existingDoc;
     }
 
-    emit('addDocument', storedObject);
+    const buffer = await file.arrayBuffer();
+    const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
+    const filename = await uploadVersion(encrypted, stored_object);
+
+    const stored_object_version: StoredObjectVersionCreated = {
+        filename: filename,
+        iv: Array.from(iv),
+        keyInfos: jsonWebKey,
+        type: type,
+        persisted: false,
+    }
+
+    emit('addDocument', {stored_object, stored_object_version});
     uploading.value = false;
 }
 
@@ -138,6 +143,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 {
@@ -148,8 +158,4 @@ const handleFile = async (file: File): Promise<void> => {
         }
     }
 }
-
-div.chill-collection ul.list-entry li.entry:nth-child(2n) {
-
-}
 </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,13 +1,13 @@
 <script setup lang="ts">
 
-import {StoredObject, StoredObjectCreated} from "../../types";
+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,
+    existingDoc?: StoredObject,
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
@@ -15,8 +15,8 @@ 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>(() => {
@@ -45,14 +45,14 @@ const dav_link_href = computed<string|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>