Redesign file browser, file upload (server)

software/src/stores/files.store.ts

@@ -0,0 +1,61 @@
+import { fetchFileNames, fetchFolderNames, postFile } from "@/data/api/files.api";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useFilesStore = defineStore('filesStore', {
+  state: () => ({
+    /** Request to server sent, waiting for data response */
+    fetchInProgress: ref(false),
+
+    staticFolders: ref<Array<{name: string, nrOfItems: number}>>([]),
+
+    selectedFolder: ref<{name: string, nrOfItems: number}>(),
+
+    /** List of files on the server */
+    staticFiles: ref<Array<{name: string, size: number, url: string}>>([]),
+
+    selectedFile: ref<{name: string, size: number, url: string}>(),
+
+    showFileUploadDialog: ref(false),
+
+    fileUpload: ref(),
+
+    fileUploadDir: ref(""),
+  }),
+
+  actions: {
+    async getStaticFolders() {
+      this.fetchInProgress = true
+
+      fetchFolderNames()
+        .then(res => {
+          this.staticFolders = res.data
+          this.fetchInProgress = false
+        })
+    },
+
+    /**
+     * Request all available static files on server
+     */
+    async getStaticFiles() {
+      this.fetchInProgress = true
+
+      fetchFileNames(this.selectedFolder.name)
+        .then(res => {
+          this.staticFiles = res.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async uploadFile() {
+      this.fetchInProgress = true
+
+      postFile(this.uploadFile, this.fileUploadDir)
+        .then(response => {
+          console.log(response)
+          this.showFileUploadDialog = false
+          this.fetchInProgress = false
+        })
+    },
+  }
+})