Redesign file browser, file upload (server)

software/src/pages/admin/dashboardPage/index.vue

@@ -8,6 +8,7 @@ import { useGenreStore } from '@/stores/genre.store';
 import { usePreferencesStore } from '@/stores/preferences.store';
 import dashboardCard from './dashboardCard.vue';
 import { useOrderStore } from '@/stores/order.store';
+import { useFilesStore } from '@/stores/files.store';
 
 const concertStore = useConcertStore()
 const bandStore = useBandStore()
@@ -17,10 +18,11 @@ const locationStore = useLocationStore()
 const exerciseStore = useExerciseStore()
 const preferencesStore = usePreferencesStore()
 const orderStore = useOrderStore()
+const filesStore = useFilesStore()
 
 exerciseStore.solveExercise(2, 1)
 
-preferencesStore.getStaticFiles()
+filesStore.getStaticFolders()
 bandStore.getBands()
 locationStore.getLocations()
 genreStore.getGenres()
@@ -98,10 +100,10 @@ orderStore.getAllOrders()
       <dashboard-card
         :title="$t('misc.file', 2)"
         icon="mdi-file"
-        :first-line="preferencesStore.staticFiles.reduce((counter, obj) => {
-            return counter += obj.files.length
-          }, 0) + ' ' + $t('misc.file', 2)"
-        :second-line="preferencesStore.staticFiles.length + ' ' + $t('misc.folder', 2)"
+        :first-line="filesStore.staticFolders.reduce((counter, obj) => {
+          return counter + obj.nrOfItems
+        }, 0) + ' ' + $t('misc.file', 2)"
+        :second-line="filesStore.staticFolders.length + ' ' + $t('misc.folder', 2)"
         button-route="/admin/files"
         :loading="preferencesStore.fetchInProgress"
       />

software/src/pages/admin/filesAdminPage/filePreviewDialog.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import actionDialog from '@/components/basics/actionDialog.vue';
-
-const showDialog = defineModel("showDialog")
-
-defineProps({
-  url: String
-})
-</script>
-
-<template>
-  <action-dialog v-model="showDialog" max-width="500">
-    <v-img :src="url" max-height="400" />
-  </action-dialog>
-</template>

software/src/pages/admin/filesAdminPage/fileUploadDialog.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useFilesStore } from '@/stores/files.store';
+import { ref } from 'vue';
+
+const filesStore = useFilesStore()
+
+const test = ref()
+</script>
+
+<template>
+  <action-dialog
+    v-model="filesStore.showFileUploadDialog"
+    :title="$t('misc.uploadFile')"
+    icon="mdi-file"
+    max-width="800"
+  >
+    <v-form :model-value="test">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-file-input
+              v-model="filesStore.fileUpload"
+              clearable
+              :label="$t('misc.chooseFile')"
+              :disabled="filesStore.fetchInProgress"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-radio-group
+              v-model="filesStore.fileUploadDir"
+              :label="$t('misc.chooseDestinationFolder')"
+              :disabled="filesStore.fetchInProgress"
+            >
+              <v-radio
+                v-for="folder of filesStore.staticFolders"
+                :label="folder.name + '/'"
+                :value="folder.name"
+              />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-btn type="submit">Submit</v-btn>
+    </v-form>
+
+    <template #actions>
+      <outlined-button
+        @click="filesStore.uploadFile"
+        prepend-icon="mdi-file-upload"
+        color="green"
+        :disabled="filesStore.fileUploadDir.length == 0 || filesStore.fileUpload == undefined"
+        :loading="filesStore.fetchInProgress"
+      >
+        {{ $t('misc.upload') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

software/src/pages/admin/filesAdminPage/index.vue

@@ -1,44 +1,64 @@
 <script setup lang="ts">
 import adminDataLayout from '@/layouts/adminDataLayout.vue';
-import { usePreferencesStore } from '@/stores/preferences.store';
-import filePreviewDialog from './filePreviewDialog.vue';
 import { ref } from 'vue';
+import FileUploadDialog from './fileUploadDialog.vue';
+import { useFilesStore } from '@/stores/files.store';
 
-const preferencesStore = usePreferencesStore()
-const showDialog = ref(false)
+const filesStore = useFilesStore()
+const showPreviewDialog = ref(false)
 const previewFile = ref("")
 
-preferencesStore.getStaticFiles()
+filesStore.getStaticFolders()
 </script>
 
 <template>
   <admin-data-layout
     :add-button-string="$t('misc.uploadFile')"
-    :fetch-in-progress="preferencesStore.fetchInProgress"
-    :on-add-click="() => { /** todo */ }"
+    :fetch-in-progress="filesStore.fetchInProgress"
+    :on-add-click="() => { filesStore.showFileUploadDialog = true }"
   >
-    <v-row>
-      <v-col
-        v-for="folder of preferencesStore.staticFiles"
-        cols="12"
-        md="3"
-        sm="6"
-      >
+    <v-row >
+      <v-col cols="2" class="border">
         <v-list>
-          <v-list-subheader>{{ folder.folder }}/</v-list-subheader>
-          <v-list-item 
-            v-for="file of folder.files"
-            :title="file.name"
-            :subtitle="Math.round(file.size / 1024) + ' KB'"
-            @click="() => { previewFile = file.url; showDialog = true }"
+          <v-list-item
+            v-for="folder of filesStore.staticFolders"
+            :key="folder.name"
+            :value="folder"
+            :title="folder.name + '/'"
+            @click="filesStore.selectedFolder = folder; filesStore.getStaticFiles()"
           />
         </v-list>
       </v-col>
+
+      <v-col cols="4" class="border">
+        <v-skeleton-loader
+          :loading="filesStore.fetchInProgress"
+          type="list-item-two-line"
+        >
+          <v-list max-height="800" class="w-100">
+            <v-list-item
+              v-for="file of filesStore.staticFiles"
+              :title="file.name"
+              :value="file.name"
+              :subtitle="Math.round(file.size / 1024) + ' KB'"
+              @click="() => { filesStore.selectedFile = file }"
+            />
+          </v-list>
+        </v-skeleton-loader>
+      </v-col>
+
+      <v-col class="border">
+        <v-img
+          v-if="filesStore.selectedFile != undefined"
+          :src="filesStore.selectedFile.url" max-height="400" />
+      </v-col>
     </v-row>
   </admin-data-layout>
 
   <file-preview-dialog
-    v-model:show-dialog="showDialog"
+    v-model:show-dialog="showPreviewDialog"
     :url="previewFile"
   />
+
+  <file-upload-dialog />
 </template>