Refactor Vue components: update DropFile and DropFileWidget templates for clarity; enhance type definitions in FileIcon and types/index.ts; fix event emit structure in DropFileModal.

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

@@ -2,12 +2,11 @@ import { _createI18n } from "ChillMainAssets/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 ToastPlugin from "vue-toast-notification";
 
 const i18n = _createI18n({});
 
-window.addEventListener("DOMContentLoaded", function (e) {
+window.addEventListener("DOMContentLoaded", function () {
   document
     .querySelectorAll<HTMLDivElement>("div[data-download-buttons]")
     .forEach((el) => {

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

@@ -9,6 +9,7 @@ export interface StoredObject {
   uuid: string;
   prefix: string;
   status: StoredObjectStatus;
+  type: string;
   currentVersion:
     | null
     | StoredObjectVersionCreated

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

@@ -1,3 +1,35 @@
+<template>
+  <div class="drop-file">
+    <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">
+        <file-icon :type="props.existingDoc?.type ?? ''"></file-icon>
+      </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>
+    </div>
+    <div v-else class="waiting">
+      <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { StoredObject, StoredObjectVersionCreated } from "../../types";
 import {
@@ -9,24 +41,23 @@ import { computed, ref, Ref } from "vue";
 import FileIcon from "ChillDocStoreAssets/vuejs/FileIcon.vue";
 
 interface DropFileConfig {
-  existingDoc?: StoredObject;
+  existingDoc: StoredObject | null;
 }
 
 const props = withDefaults(defineProps<DropFileConfig>(), {
   existingDoc: null,
 });
 
-const emit =
-  defineEmits<
-    (
-      e: "addDocument",
-      {
-        stored_object_version: StoredObjectVersionCreated,
-        stored_object: StoredObject,
-        file_name: string,
-      },
-    ) => void
-  >();
+const emit = defineEmits<
+  (
+    e: "addDocument",
+    payload: {
+      stored_object_version: StoredObjectVersionCreated;
+      stored_object: StoredObject;
+      file_name: string;
+    },
+  ) => void
+>();
 
 const is_dragging: Ref<boolean> = ref(false);
 const uploading: Ref<boolean> = ref(false);
@@ -134,38 +165,6 @@ const handleFile = async (file: File): Promise<void> => {
 };
 </script>
 
-<template>
-  <div class="drop-file">
-    <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">
-        <file-icon :type="props.existingDoc?.type"></file-icon>
-      </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>
-    </div>
-    <div v-else class="waiting">
-      <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
-      <span class="sr-only">Loading...</span>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="scss">
 .drop-file {
   width: 100%;

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

@@ -18,10 +18,10 @@ const props = withDefaults(defineProps<DropFileConfig>(), {
 const emit = defineEmits<{
   (
     e: "addDocument",
-    {
-      stored_object: StoredObject,
-      stored_object_version: StoredObjectVersion,
-      file_name: string,
+    payload: {
+      stored_object: StoredObject;
+      stored_object_version: StoredObjectVersion;
+      file_name: string;
     },
   ): void;
   (e: "removeDocument"): void;

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

@@ -1,6 +1,34 @@
+<template>
+  <div>
+    <drop-file
+      :existingDoc="props.existingDoc ?? null"
+      @addDocument="onAddDocument"
+    ></drop-file>
+
+    <ul class="record_actions">
+      <li v-if="props?.existingDoc">
+        <document-action-buttons-group
+          :stored-object="props.existingDoc"
+          :can-edit="props.existingDoc?.status === 'ready'"
+          :can-download="true"
+          :dav-link="dav_link_href ?? ''"
+          :dav-link-expiration="dav_link_expiration ?? 0"
+        />
+      </li>
+      <li>
+        <button
+          v-if="allowRemove"
+          class="btn btn-delete"
+          @click="onRemoveDocument($event)"
+        ></button>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { StoredObject, StoredObjectVersion } from "../../types";
-import { computed, ref, Ref } from "vue";
+import { computed } from "vue";
 import DropFile from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFile.vue";
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 
@@ -16,19 +44,15 @@ const props = withDefaults(defineProps<DropFileConfig>(), {
 const emit = defineEmits<{
   (
     e: "addDocument",
-    {
-      stored_object: StoredObject,
-      stored_object_version: StoredObjectVersion,
-      file_name: string,
+    payload: {
+      stored_object: StoredObject;
+      stored_object_version: StoredObjectVersion;
+      file_name: string;
     },
   ): void;
   (e: "removeDocument"): void;
 }>();
 
-const has_existing_doc = computed<boolean>(() => {
-  return props.existingDoc !== undefined && props.existingDoc !== null;
-});
-
 const dav_link_expiration = computed<number | undefined>(() => {
   if (props.existingDoc === undefined || props.existingDoc === null) {
     return undefined;
@@ -69,33 +93,4 @@ const onRemoveDocument = (e: Event): void => {
   emit("removeDocument");
 };
 </script>
-
-<template>
-  <div>
-    <drop-file
-      :existingDoc="props.existingDoc"
-      @addDocument="onAddDocument"
-    ></drop-file>
-
-    <ul class="record_actions">
-      <li v-if="has_existing_doc">
-        <document-action-buttons-group
-          :stored-object="props.existingDoc"
-          :can-edit="props.existingDoc?.status === 'ready'"
-          :can-download="true"
-          :dav-link="dav_link_href"
-          :dav-link-expiration="dav_link_expiration"
-        />
-      </li>
-      <li>
-        <button
-          v-if="allowRemove"
-          class="btn btn-delete"
-          @click="onRemoveDocument($event)"
-        ></button>
-      </li>
-    </ul>
-  </div>
-</template>
-
 <style scoped lang="scss"></style>

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

@@ -1,11 +1,3 @@
-<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
@@ -43,4 +35,12 @@ const props = defineProps<FileIconConfig>();
   <i class="fa fa-file-code-o" v-else></i>
 </template>
 
+<script setup lang="ts">
+interface FileIconConfig {
+  type: string;
+}
+
+const props = defineProps<FileIconConfig>();
+</script>
+
 <style scoped lang="scss"></style>