upload modal as setup

frontend/src/components/prompts/UploadFiles.vue

@@ -58,38 +58,38 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapWritableState, mapActions } from "pinia";
-import { useUploadStore } from "@/stores/upload";
 import { useFileStore } from "@/stores/file";
+import { useUploadStore } from "@/stores/upload";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
 import { abortAllUploads } from "@/api/tus";
 import buttons from "@/utils/buttons";
+import { useI18n } from "vue-i18n";
 
-export default {
+const { t } = useI18n({});
-  name: "uploadFiles",
+
-  data: function () {
+const open = ref<boolean>(false);
-    return {
+
-      open: false,
+const fileStore = useFileStore();
-    };
+const uploadStore = useUploadStore();
-  },
+
-  computed: {
+const {
-    ...mapState(useUploadStore, [
+  filesInUpload,
-      "filesInUpload",
+  filesInUploadCount,
-      "filesInUploadCount",
+  uploadSpeed,
-      "uploadSpeed",
+  getETA,
-      "getETA",
+  getProgressDecimal,
-      "getProgress",
+  getTotalProgressBytes,
-      "getProgressDecimal",
+  getTotalSize,
-      "getTotalProgressBytes",
+} = storeToRefs(uploadStore);
-      "getTotalSize",
+
-    ]),
+const formattedETA = computed(() => {
-    ...mapWritableState(useFileStore, ["reload"]),
+  if (!getETA.value || getETA.value === Infinity) {
-    formattedETA() {
-      if (!this.getETA || this.getETA === Infinity) {
     return "--:--:--";
   }
 
-      let totalSeconds = this.getETA;
+  let totalSeconds = getETA.value;
   const hours = Math.floor(totalSeconds / 3600);
   totalSeconds %= 3600;
   const minutes = Math.floor(totalSeconds / 60);
@@ -98,23 +98,20 @@ export default {
   return `${hours.toString().padStart(2, "0")}:${minutes
     .toString()
     .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-    },
+});
-  },
+
-  methods: {
+const toggle = () => {
-    ...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
+  open.value = !open.value;
-    toggle: function () {
+};
-      this.open = !this.open;
+
-    },
+const abortAll = () => {
-    abortAll() {
+  if (confirm(t("upload.abortUpload"))) {
-      if (confirm(this.$t("upload.abortUpload"))) {
     abortAllUploads();
     buttons.done("upload");
-        this.open = false;
+    open.value = false;
-        this.reset(); // Resetting the upload store state
+    uploadStore.reset(); // Resetting the upload store state
-        this.reload = true; // Trigger reload in the file store
+    fileStore.reload = true; // Trigger reload in the file store
   }
-    },
-  },
 };
 </script>
 

frontend/tsconfig.tsc.json

@@ -9,7 +9,6 @@
     "src/components/prompts/Delete.vue",
     "src/components/prompts/FileList.vue",
     "src/components/prompts/Rename.vue",
-    "src/components/prompts/Share.vue",
+    "src/components/prompts/Share.vue"
-    "src/components/prompts/UploadFiles.vue"
   ]
 }