ayanova/devdocs/todo.txt

@@ -44,7 +44,7 @@ todo: Localize this message or get rid of it, it's annoying and possibly useless
 
 ##########################
 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
 	for example, should always log when notification delivery fails, but when it succeeds that might be a debug level , not a trace level

ayanova/src/App.vue

@@ -348,7 +348,7 @@ export default {
     } else {
       //this can be safely called any time, it checks if there is an open object in store and
       //opens it or if not just returns
-     // window.$gz.eventBus.$emit("openobject", null);
+      // window.$gz.eventBus.$emit("openobject", null);
     }
 
     //RELOAD / REFRESH HANDLING

ayanova/src/views/ops-notify-queue.vue

@@ -5,33 +5,21 @@
       <v-btn @click="getDataFromApi">
         <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("DeliverAfter") }}</th>
-              <th class="text-left">{{ $ay.t("NotifyEventType") }}</th>
-              <th class="text-left">{{ $ay.t("AyaType") }}</th>
-              <th class="text-left">{{ $ay.t("Name") }}</th>
-              <th class="text-left">{{ $ay.t("User") }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in obj" :key="item.id">
-              <td>{{ item.created }}</td>
-              <td>{{ item.deliverAfter }}</td>
-              <td>{{ item.eventType }}</td>
-              <td>{{ item.ayaType }}</td>
-              <td>{{ item.name }}</td>
-              <td>{{ item.user }}</td>
-              <td>
-                <v-btn icon><v-icon>fa-trash</v-icon></v-btn>
-              </td>
-            </tr>
-          </tbody>
-        </template>
-      </v-simple-table>
+
+      <v-data-table
+        :headers="headers"
+        :items="obj"
+        class="elevation-1"
+        :disable-pagination="true"
+        :disable-filtering="true"
+        hide-default-footer
+      >
+        <template v-slot:item.actions="{ item }">
+          <v-icon small class="mr-2" @click="deleteItem(item)">
+            fa-trash
+          </v-icon>
+        </template></v-data-table
+      >
       <!-- </v-col> -->
     </v-col>
   </v-row>
@@ -67,6 +55,19 @@ export default {
     return {
       obj: [],
       rawObj: [],
+      headers: [
+        {
+          text: this.$ay.t("TimeStamp"),
+          align: "start",
+          value: "created"
+        },
+        { text: this.$ay.t("DeliverAfter"), value: "deliverAfter" },
+        { text: this.$ay.t("NotifyEventType"), value: "eventType" },
+        { text: this.$ay.t("AyaType"), value: "ayaType" },
+        { text: this.$ay.t("Name"), value: "name" },
+        { text: this.$ay.t("User"), value: "user" },
+        { text: "", value: "actions", sortable: false }
+      ],
       formState: {
         ready: false,
         loading: true,
@@ -86,6 +87,7 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
+    deleteItem(item) {},
     async getDataFromApi() {
       let vm = this;
       vm.formState.loading = true;