ayanova/src/components/gz-data-table.vue

@@ -16,6 +16,56 @@
       :disable-sort="true"
       class="elevation-1"
     ></v-data-table>
+    <!--
+ <v-data-table
+            v-model="selected"
+            :headers="headers"
+            :items="Items"
+            item-key="id"
+            :options.sync="localFormSettings.pagination"
+            :server-items-length="totalItems"
+            :loading="loading"
+            show-select
+            class="elevation-1"
+            :footer-props="{
+              itemsPerPageOptions: rowsPerPageItems,
+              itemsPerPageText: lt('RowsPerPage')
+            }"
+          >
+            <template slot="item" slot-scope="props">
+              <tr>
+                <td>
+                  <v-checkbox
+                    v-model="props.selected"
+                    primary
+                    hide-details
+                  ></v-checkbox>
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.name }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.serial }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.dollarAmount | currency }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.active | boolastext }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.roles }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.startDate | shortdatelocalized }}
+                </td>
+                <td class="text-xs-left" @click="editItem(props.item)">
+                  {{ props.item.endDate | shortdatelocalized }}
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
+      -->
   </div>
 </template>
 
@@ -124,10 +174,10 @@ export default {
       window.$gz.api.get(listUrl).then(res => {
         that.loading = false;
         that.totalItems = res.paging.count;
-        //This is how to call an async function and await it from sync code
+        //NOTE: This is how to call an async function and await it from sync code
         (async function() {
           //Make sure the locale keys are fetched
-          await fetchLocalizedHeaderNames(res.columns);
+          await fetchLocalizedHeaderNames(res.columns); //Note can use await here because it's wrapped inside an async function call, it will wait then resume next stuff below
           //build that.headers here
           that.headers = buildHeaders(res.columns);
           //Post process data here and then set that.records
@@ -152,12 +202,23 @@ function buildHeaders(columnData) {
     var h = {};
     h["text"] = window.$gz.locale.get(cm.cm);
     h["value"] = i;
-    // console.log("Adding column:");
-    // console.log(h);
     ret.push(h);
   }
-  // console.log("Returning header array:");
+  /*
-  // console.log(ret);
+{https://vuetifyjs.com/en/components/data-tables#api  see headers property for this info:
+  text: string
+  value: string
+  align?: 'start' | 'center' | 'end'
+  sortable?: boolean
+  filterable?: boolean
+  divider?: boolean
+  class?: string | string[]
+  width?: string | number
+  filter?: (value: any, search: string, item: any) => boolean
+  sort?: (a: any, b: any) => number
+}
+
+*/
   return ret;
 }
 
@@ -187,24 +248,9 @@ async function fetchLocalizedHeaderNames(columnData) {
     });
 }
 
-/*
-{
-  text: string
-  value: string
-  align?: 'start' | 'center' | 'end'
-  sortable?: boolean
-  filterable?: boolean
-  divider?: boolean
-  class?: string | string[]
-  width?: string | number
-  filter?: (value: any, search: string, item: any) => boolean
-  sort?: (a: any, b: any) => number
-}
-
-*/
 //Called by getDataFromApi on retrieval of list with columnData
 function buildRecords(listData) {
-  //iterate columns, build headers and return
+  //iterate data, build each object keyed with index name and then return
 }
 
 //DataTable component