License system implemented

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>