License system implemented

src/data/models/files/filesApiModel.ts

@@ -0,0 +1,13 @@
+export class FilesApiModel {
+  name: string
+  size: number
+  content: string
+  url: string
+  copyright: CopyRightModel = new CopyRightModel()
+}
+
+class CopyRightModel {
+  license: string = ""
+  creator: string = ""
+  url: string = ""
+}

src/pages/admin/filesAdminPage/index.vue

@@ -19,6 +19,7 @@ filesStore.getStaticFolders()
     :hide-add-button="true" 
   >
     <v-row >
+      <!-- Column folder -->
       <v-col cols="2" class="border">
         <v-list>
           <v-list-item
@@ -27,10 +28,13 @@ filesStore.getStaticFolders()
             :value="folder"
             :title="folder.name + '/'"
             @click="filesStore.selectedFolder = folder; filesStore.getStaticFiles()"
+            prepend-icon="mdi-folder"
           />
         </v-list>
       </v-col>
 
+
+      <!-- Column files in folder -->
       <v-col cols="4" class="border">
         <v-skeleton-loader
           :loading="filesStore.fetchInProgress"
@@ -41,36 +45,68 @@ filesStore.getStaticFolders()
               v-for="file of filesStore.staticFiles"
               :title="file.name"
               :value="file.name"
-              :subtitle="Math.round(file.size / 1024) + ' KB'"
               @click="() => { filesStore.selectedFile = file }"
-            />
+            >
+              <template #prepend>
+                <v-icon
+                  :icon="file.name.endsWith('js') ? 'mdi-file' : 'mdi-image'"
+                  :color="file.copyright != undefined ? 'green' : 'red'"
+                />
+              </template>
+            </v-list-item>
           </v-list>
         </v-skeleton-loader>
       </v-col>
 
+
+      <!-- File detail viewer -->
       <v-col class="border">
         <v-row>
           <v-col v-if="filesStore.selectedFile != undefined">
-            {{ filesStore.selectedFile.url }}
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
             <v-textarea
-              v-if="filesStore.selectedFile != undefined && filesStore.selectedFile.name.endsWith('html')"
+              v-if="filesStore.selectedFile != undefined && filesStore.selectedFile.name.endsWith('js')"
               :model-value="filesStore.selectedFile.content"
               variant="outlined"
               label="Content"
               height="300"
               rows="30"
             />
+
             <v-img
               v-else-if="filesStore.selectedFile != undefined"
               :src="filesStore.selectedFile.url" max-height="400"
             />
           </v-col>
         </v-row>
+
+        <!-- File details -->
+        <v-row>
+          <v-col v-if="filesStore.selectedFile != undefined">
+            <v-list>
+              <v-list-item prepend-icon="mdi-server">
+                {{ filesStore.selectedFile.url }}
+              </v-list-item>
+
+              <v-list-item prepend-icon="mdi-package">
+                {{ Math.round(filesStore.selectedFile.size / 1024) + ' KB' }}
+              </v-list-item>
+
+              <template v-if="filesStore.selectedFile['copyright'] != undefined">
+                <v-list-item prepend-icon="mdi-copyright">
+                  {{ filesStore.selectedFile.copyright.license }}
+                </v-list-item>
+
+                <v-list-item prepend-icon="mdi-account">
+                  {{ filesStore.selectedFile.copyright.creator }}
+                </v-list-item>
+
+                <v-list-item prepend-icon="mdi-web">
+                  <a :href="filesStore.selectedFile.copyright.url" >Quelle</a>
+                </v-list-item>
+              </template>
+            </v-list>
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
   </admin-data-layout>

src/stores/files.store.ts

@@ -1,4 +1,5 @@
 import { fetchFileNames, fetchFolderNames, postFile } from "@/data/api/files.api";
+import { FilesApiModel } from "@/data/models/files/filesApiModel";
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
@@ -7,14 +8,17 @@ export const useFilesStore = defineStore('filesStore', {
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false),
 
+    /** List of all folders on the server */
     staticFolders: ref<Array<{name: string, nrOfItems: number}>>([]),
 
+    /** Current selected folder in file browsre */
     selectedFolder: ref<{name: string, nrOfItems: number}>(),
 
     /** List of files on the server */
-    staticFiles: ref<Array<{name: string, size: number, content: string, url: string}>>([]),
+    staticFiles: ref<Array<FilesApiModel>>([]),
 
-    selectedFile: ref<{name: string, size: number, content: string, url: string}>(),
+    /** Current selected file in file browser */
+    selectedFile: ref<FilesApiModel>(),
 
     showFileUploadDialog: ref(false),
 
@@ -24,6 +28,9 @@ export const useFilesStore = defineStore('filesStore', {
   }),
 
   actions: {
+    /**
+     * Fetch all static folders on the server
+     */
     async getStaticFolders() {
       this.fetchInProgress = true
 
@@ -47,6 +54,7 @@ export const useFilesStore = defineStore('filesStore', {
         })
     },
 
+
     async uploadFile() {
       this.fetchInProgress = true