ayanova/src/views/ops-backup.vue

@@ -61,35 +61,26 @@
           <v-col cols="12" class="mt-6">
             <v-col cols="12" lg="4">
               <span class="title">{{ $ay.t("BackupFiles") }}</span>
-              <v-btn @click="getBackupStatus" class="ml-3">
+              <v-btn @click="getBackupStatus" class="mb-6">
                 <v-icon>fa-sync</v-icon>
               </v-btn>
 
-              <v-simple-table>
-                <template v-slot:default>
-                  <thead>
-                    <tr>
-                      <th class="text-left">{{ $ay.t("FileName") }}</th>
-                      <th class="text-left">{{ $ay.t("FileDate") }}</th>
-                      <th class="text-left">{{ $ay.t("FileSize") }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="item in backupFileList" :key="item.id">
-                      <td>
-                        <template v-if="!formState.readOnly">
-                          <a :href="item.url">{{ item.name }}</a>
-                        </template>
-                        <template v-else>
-                          {{ item.name }}
-                        </template>
-                      </td>
-                      <td>{{ item.created }}</td>
-                      <td>{{ item.length }}</td>
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
+              <v-data-table
+                :headers="headers"
+                :items="backupFileList"
+                class="elevation-1"
+                :disable-pagination="true"
+                :disable-filtering="true"
+                hide-default-footer
+              >
+                <template v-slot:item.actions="{ item }">
+                  <v-btn icon :href="item.url" >
+                    <v-icon small class="mr-2">
+                      fa-file-download
+                    </v-icon>
+                  </v-btn>
+                </template></v-data-table
+              >
               <div class="mt-6">
                 ({{ $ay.t("AvailableSpace") }}&nbsp;{{ backupAvailableSpace }})
               </div>
@@ -145,6 +136,7 @@ export default {
       formCustomTemplateKey: null,
       backupFileList: [],
       backupAvailableSpace: null,
+      headers: [],
       obj: {
         id: 1,
         concurrency: 0,
@@ -412,6 +404,7 @@ function generateMenu(vm) {
 //
 async function initForm(vm) {
   await fetchTranslatedText(vm);
+  await createTableHeaders(vm);
 }
 
 //////////////////////////////////////////////////////////
@@ -433,4 +426,20 @@ async function fetchTranslatedText(vm) {
     "AvailableSpace"
   ]);
 }
+
+//////////////////////
+//
+//
+async function createTableHeaders(vm) {
+  vm.headers = [
+    {
+      text: vm.$ay.t("FileName"),
+      align: "start",
+      value: "name"
+    },
+    { text: vm.$ay.t("FileDate"), value: "created" },
+    { text: vm.$ay.t("FileSize"), value: "length" },
+    { text: "", value: "actions", sortable: false }
+  ];
+}
 </script>