File browser on admin page

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

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  Categories Admin Page
-</template>

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

@@ -9,6 +9,7 @@ import { useLocationStore } from '@/stores/location.store';
 import { ref } from 'vue';
 import { useExerciseStore } from '@/stores/exercise.store';
 import { useGenreStore } from '@/stores/genre.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
 
 const router = useRouter()
 const concertStore = useConcertStore()
@@ -16,21 +17,17 @@ const bandStore = useBandStore()
 const accountStore = useAccountStore()
 const genreStore = useGenreStore()
 const locationStore = useLocationStore()
-const soldOutConcerts = ref(0)
 const exerciseStore = useExerciseStore()
+const preferencesStore = usePreferencesStore()
 
 exerciseStore.solveExercise(2, 1)
 
+preferencesStore.getStaticFiles()
 bandStore.getBands()
 locationStore.getLocations()
 genreStore.getGenres()
 accountStore.getAllAccounts()
 concertStore.getConcerts()
-  .then(result => {
-    for(let concert of concertStore.concerts) {
-      concert.inStock == 0 ? soldOutConcerts.value++ : ""
-    }
-  })
 </script>
 
 <template>
@@ -64,8 +61,14 @@ concertStore.getConcerts()
             {{ concertStore.concerts.length }} {{ $t('concert.concert', 2) }}
           </div>
 
-          <div class="text-disabled text-center">
-            {{ soldOutConcerts }} {{ $t('concert.concertSoldOut') }}
+          <div class="text-h6 text-disabled text-center">
+            {{ concertStore.concerts.reduce((counter, obj) => {
+              if (obj.inStock == 0) {
+                counter += 1
+              }
+
+              return counter
+            }, 0) }} {{ $t('concert.concertSoldOut') }}
           </div>
 
           <template #actions>
@@ -88,6 +91,18 @@ concertStore.getConcerts()
             {{ locationStore.locations.length }} {{ $t('location.location', 2) }}
           </div>
 
+          <div class="text-h6 text-disabled text-center">
+            {{ 
+              locationStore.locations.reduce((city, obj) => {
+                city[obj.city.name] = 
+                  city[obj.city.name] === undefined ? city.push(obj.city.name) : city[obj.city.name] += 1
+
+                return city
+              }, []).length 
+          }}
+            {{ $t('location.city', 2) }}
+          </div>
+
           <template #actions>
             <outlined-button
               @click="router.push('/admin/locations')"
@@ -139,7 +154,34 @@ concertStore.getConcerts()
           </template>
         </card-view>
       </v-col>
+
+      <v-col>
+        <card-view
+          :title="$t('misc.file', 2)"
+          icon="mdi-file"
+        >
+          <div class="text-h4 text-center">
+            {{ preferencesStore.staticFiles.reduce((counter, obj) => {
+              return counter += obj.files.length
+            }, 0) }} {{ $t('misc.file', 2) }}
+          </div>
+
+          <div class="text-h6 text-center text-disabled">
+            {{ preferencesStore.staticFiles.length }} {{ $t('misc.folder', 2) }}
+          </div>
+
+          <template #actions>
+            <outlined-button
+              @click="router.push('/admin/files')"
+            >
+              {{ $t('misc.actions.more') }}
+            </outlined-button>
+          </template>
+        </card-view>
+      </v-col>
     </v-row>
+
+    <!-- todo: Orders -->
       
   </v-container>
 </template>

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

@@ -0,0 +1,15 @@
+<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/index.vue

@@ -0,0 +1,44 @@
+<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';
+
+const preferencesStore = usePreferencesStore()
+const showDialog = ref(false)
+const previewFile = ref("")
+
+preferencesStore.getStaticFiles()
+</script>
+
+<template>
+  <admin-data-layout
+    :add-button-string="$t('misc.uploadFile')"
+    :fetch-in-progress="preferencesStore.fetchInProgress"
+    :on-add-click="() => { /** todo */ }"
+  >
+    <v-row>
+      <v-col
+        v-for="folder of preferencesStore.staticFiles"
+        cols="12"
+        md="3"
+        sm="6"
+      >
+        <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>
+      </v-col>
+    </v-row>
+  </admin-data-layout>
+
+  <file-preview-dialog
+    v-model:show-dialog="showDialog"
+    :url="previewFile"
+  />
+</template>