Covnerted views/Files.vue to composition api

frontend/src/stores/file.ts

@@ -36,7 +36,7 @@ export const useFileStore = defineStore("file", {
     toggleMultiple() {
       this.multiple = !this.multiple;
     },
-    updateRequest(value: IFile) {
+    updateRequest(value: IFile | null) {
       this.oldReq = this.req;
       this.req = value;
     },

frontend/src/stores/layout.ts

@@ -25,7 +25,7 @@ export const useLayoutStore = defineStore("layout", {
     toggleShell() {
       this.showShell = !this.showShell;
     },
-    showHover(value: LayoutValue) {
+    showHover(value: LayoutValue | string) {
       if (typeof value !== "object") {
         this.show = value;
         return;

frontend/src/stores/upload.ts

@@ -20,7 +20,8 @@ export const useUploadStore = defineStore("upload", {
     sizes: any[],
     progress: any[],
     queue: any[],
-    uploads: uploads
+    uploads: uploads,
+    error: any
   } => ({
     id: 0,
     sizes: [],

frontend/src/types/file.d.ts

@@ -16,7 +16,7 @@ interface IFile {
 
 
 
-type uploadType = "video" | "audio" | "image" | "pdf" | "text" | "blob"
+type uploadType = "video" | "audio" | "image" | "pdf" | "text" | "blob" | "textImmutable"
 
 type req = {
     path: string

frontend/src/views/Files.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <header-bar v-if="error || req?.type === null" showMenu showLogo />
+    <header-bar v-if="error || fileStore.req?.type === null" showMenu showLogo />
 
     <breadcrumbs base="/files" />
 
-    <errors v-if="error" :errorCode="error.status" />
+    <errors v-if="error" :errorCode="error?.status" />
     <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>
       <h2 class="message delayed">
@@ -19,8 +19,8 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "vue";
 import { files as api } from "@/api";
 import { mapState, mapActions, mapWritableState } from "pinia";
 import { useFileStore } from "@/stores/file";
@@ -32,101 +32,90 @@ import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Errors from "@/views/Errors.vue";
 import Preview from "@/views/files/Preview.vue";
 import FileListing from "@/views/files/FileListing.vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
 
-function clean(path) {
+const layoutStore = useLayoutStore()
+const fileStore = useFileStore()
+const uploadStore = useUploadStore()
+
+const route = useRoute()
+const router = useRouter()
+
+
+const { t } = useI18n({});
+
+const clean = (path: string) => {
   return path.endsWith("/") ? path.slice(0, -1) : path;
 }
 
-export default {
+const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
-  name: "files",
+const error = ref<any | null>(null)
-  components: {
+const width = computed(() => window.innerWidth)
-    HeaderBar,
+
-    Breadcrumbs,
+const currentView = computed(() => {
-    Errors,
+  if (fileStore.req?.type == undefined) {
-    Preview,
-    FileListing,
-    Editor: defineAsyncComponent(() => import("@/views/files/Editor.vue")),
-  },
-  data: function () {
-    return {
-      error: null,
-      width: window.innerWidth,
-    };
-  },
-  inject: ["$showError"],
-  computed: {
-    ...mapWritableState(useFileStore, [
-      "req",
-      "reload",
-      "selected",
-      "multiple",
-      "isFiles",
-    ]),
-    ...mapState(useLayoutStore, ["show", "showShell"]),
-    ...mapWritableState(useLayoutStore, ["loading"]),
-    ...mapState(useUploadStore, {
-      uploadError: "error",
-    }),
-    currentView() {
-      if (this.req?.type == undefined) {
     return null;
   }
 
-      if (this.req.isDir) {
+  if (fileStore.req.isDir) {
     return "file-listing";
   } else if (
-        this.req.type === "text" ||
+    fileStore.req.type === "text" ||
-        this.req.type === "textImmutable"
+    fileStore.req.type === "textImmutable"
   ) {
     return "editor";
   } else {
     return "preview";
   }
-    },
+})
-  },
+
-  created() {
+// Define hooks
-    this.fetchData();
+onMounted(() => {
-  },
+  fetchData();
-  watch: {
+  fileStore.isFiles = true;
-    $route: "fetchData",
+  window.addEventListener("keydown", keyEvent);
-    reload: function (value) {
+})
-      if (value === true) {
+
-        this.fetchData();
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", keyEvent);
+})
+
+onUnmounted(() => {
+  fileStore.isFiles = false;
+  if (layoutStore.showShell) {
+    layoutStore.toggleShell();
   }
-    },
+  fileStore.updateRequest(null);
-    uploadError(newValue, oldValue) {
+})
-      newValue && newValue !== oldValue && this.$showError(this.uploadError);
+
-    },
+watch(route, () => fetchData())
-  },
+// @ts-ignore
-  mounted() {
+watch(fileStore.reload, (val) => {
-    this.isFiles = true;
+  if (val) {
-    window.addEventListener("keydown", this.keyEvent);
+    fetchData();
-  },
-  beforeUnmount() {
-    window.removeEventListener("keydown", this.keyEvent);
-  },
-  unmounted() {
-    this.isFiles = false;
-    if (this.showShell) {
-      this.toggleShell();
   }
-    this.updateRequest({});
+}
-  },
+)
-  methods: {
+watch(uploadStore.error, (newValue, oldValue) => {
-    ...mapActions(useLayoutStore, ["toggleShell", "showHover", "closeHovers"]),
+  newValue && newValue !== oldValue && layoutStore.showError();
-    ...mapActions(useFileStore, ["updateRequest"]),
+})
-    async fetchData() {
+
+
+// Define functions
+
+const fetchData = async () => {
   // Reset view information.
-      this.reload = false;
+  fileStore.reload = false;
-      this.selected = [];
+  fileStore.selected = [];
-      this.multiple = false;
+  fileStore.multiple = false;
-      this.closeHovers();
+  layoutStore.closeHovers();
 
   // Set loading to true and reset the error.
-      this.loading = true;
+  layoutStore.loading = true;
-      this.error = null;
+  error.value = null;
 
-      let url = this.$route.path;
+  let url = route.path;
   if (url === "") url = "/";
   if (url[0] !== "/") url = "/" + url;
   try {
@@ -134,25 +123,23 @@ export default {
 
     if (
       clean(res.path) !==
-          clean(`/${[...this.$route.params.path].join("/")}`)
+      clean(`/${[...route.params.path].join("/")}`)
     ) {
       throw new Error("Data Mismatch!");
     }
 
-        this.updateRequest(res);
+    fileStore.updateRequest(res);
     document.title = `${res.name} - ${document.title}`;
-      } catch (e) {
+  } catch (e: any) {
-        this.error = e;
+    error.value = e;
   } finally {
-        this.loading = false;
+    layoutStore.loading = false;
   }
-    },
+}
-    keyEvent(event) {
+const keyEvent = (event: KeyboardEvent) => {
   if (event.key === "F1") {
     event.preventDefault();
-        this.showHover("help");
+    layoutStore.showHover("help");
+  }
 }
-    },
-  },
-};
 </script>