From e0ba70eb1d3c574fd53b7a2ca560cc9f5c4a5414 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 29 Jul 2020 19:35:37 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt         |  1 -
 ayanova/src/views/ops-backup.vue |  2 ++
 ayanova/src/views/ops-jobs.vue   | 51 +++++++++++++++++++-------------
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 540c788e..3446b5be 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -15,7 +15,6 @@ ____________
 ##########################
 
 
-todo: ops backup file list not in order by date, seems to be random or something, I want newest at top oldest at bottom
 todo: any use of simple-table sb turned into data-table see how it's done in ops-notify-queue, pretty straightforward and you get responsiveness and sorting built in
 todo: go over server logging and rethink it a bit, levels maybe need adjusting, more debug and less trace
 	need an intermediate mode where users can set it for diagnosing issues
diff --git a/ayanova/src/views/ops-backup.vue b/ayanova/src/views/ops-backup.vue
index b282cbf4..874efc95 100644
--- a/ayanova/src/views/ops-backup.vue
+++ b/ayanova/src/views/ops-backup.vue
@@ -72,6 +72,8 @@
                 :disable-pagination="true"
                 :disable-filtering="true"
                 hide-default-footer
+                :sort-by="['created']"
+                :sort-desc="[true]"
               >
                 <template v-slot:item.actions="{ item }">
                   <v-btn icon :href="item.url">
diff --git a/ayanova/src/views/ops-jobs.vue b/ayanova/src/views/ops-jobs.vue
index 13552ba1..081fb2b7 100644
--- a/ayanova/src/views/ops-jobs.vue
+++ b/ayanova/src/views/ops-jobs.vue
@@ -2,28 +2,27 @@
   <v-row v-if="this.formState.ready">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-col cols="12">
-      <v-btn @click="getDataFromApi">
+      <v-btn @click="getDataFromApi" 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("TimeStamp") }}</th>
-              <th class="text-left">{{ $ay.t("ID") }}</th>
-              <th class="text-left">{{ $ay.t("Status") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in obj" :key="item.id">
-              <td>{{ item.created }}</td>
-              <td>{{ item.jobId }}</td>
-              <td>{{ item.status }}</td>
-            </tr>
-          </tbody>
-        </template>
-      </v-simple-table>
-      <!-- </v-col> -->
+      <v-data-table
+        :headers="headers"
+        :items="obj"
+        class="elevation-1"
+        :disable-pagination="true"
+        :disable-filtering="true"
+        hide-default-footer
+        :sort-by="['created']"
+        :sort-desc="[true]"
+      >
+        <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
+      >
     </v-col>
   </v-row>
 </template>
@@ -237,6 +236,7 @@ function clickHandler(menuItem) {
 //
 async function initForm(vm) {
   await fetchTranslatedText(vm);
+  await createTableHeaders(vm);
 }
 
 //////////////////////////////////////////////////////////
@@ -251,4 +251,15 @@ async function fetchTranslatedText(vm) {
     "Status"
   ]);
 }
+
+//////////////////////
+//
+//
+async function createTableHeaders(vm) {
+  vm.headers = [
+    { text: vm.$ay.t("TimeStamp"), value: "created" },
+    { text: vm.$ay.t("Status"), value: "status" },
+    { text: vm.$ay.t("ID"), value: "jobId" }
+  ];
+}
 </script>