upload modal as setup

frontend/src/components/prompts/UploadFiles.vue

@@ -58,63 +58,60 @@
   </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 () {
-    return {
-      open: false,
-    };
-  },
-  computed: {
-    ...mapState(useUploadStore, [
-      "filesInUpload",
-      "filesInUploadCount",
-      "uploadSpeed",
-      "getETA",
-      "getProgress",
-      "getProgressDecimal",
-      "getTotalProgressBytes",
-      "getTotalSize",
-    ]),
-    ...mapWritableState(useFileStore, ["reload"]),
-    formattedETA() {
-      if (!this.getETA || this.getETA === Infinity) {
-        return "--:--:--";
-      }
 
-      let totalSeconds = this.getETA;
+const open = ref<boolean>(false);
-      const hours = Math.floor(totalSeconds / 3600);
-      totalSeconds %= 3600;
-      const minutes = Math.floor(totalSeconds / 60);
-      const seconds = Math.round(totalSeconds % 60);
 
-      return `${hours.toString().padStart(2, "0")}:${minutes
+const fileStore = useFileStore();
-        .toString()
+const uploadStore = useUploadStore();
-        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+
-    },
+const {
-  },
+  filesInUpload,
-  methods: {
+  filesInUploadCount,
-    ...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
+  uploadSpeed,
-    toggle: function () {
+  getETA,
-      this.open = !this.open;
+  getProgressDecimal,
-    },
+  getTotalProgressBytes,
-    abortAll() {
+  getTotalSize,
-      if (confirm(this.$t("upload.abortUpload"))) {
+} = storeToRefs(uploadStore);
-        abortAllUploads();
+
-        buttons.done("upload");
+const formattedETA = computed(() => {
-        this.open = false;
+  if (!getETA.value || getETA.value === Infinity) {
-        this.reset(); // Resetting the upload store state
+    return "--:--:--";
-        this.reload = true; // Trigger reload in the file store
+  }
-      }
+
-    },
+  let totalSeconds = getETA.value;
-  },
+  const hours = Math.floor(totalSeconds / 3600);
+  totalSeconds %= 3600;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = Math.round(totalSeconds % 60);
+
+  return `${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+});
+
+const toggle = () => {
+  open.value = !open.value;
+};
+
+const abortAll = () => {
+  if (confirm(t("upload.abortUpload"))) {
+    abortAllUploads();
+    buttons.done("upload");
+    open.value = false;
+    uploadStore.reset(); // Resetting the upload store state
+    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"
   ]
 }