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

@@ -1,11 +1,5 @@
 <template>
   <div>
-    <!-- <div>caption: {{ caption }}</div>
-    <div>apiBaseUrl: {{ apiBaseUrl }}</div>
-    <div>formKey: {{ formKey }}</div>
-    <div>dataListKey: {{ dataListKey }}</div>
-    <div>dataFilterId: {{ dataFilterId }}</div>
-    <div>viewPort is XS: {{ mini }}</div> -->
     <v-data-table
       :caption="caption"
       :headers="headers"
@@ -16,56 +10,16 @@
       :disable-sort="true"
       class="elevation-1"
     ></v-data-table>
-    <!--
+    <!--  <hr />
- <v-data-table
+    <div>Headers: {{ headers }}</div>
-            v-model="selected"
+    <div>Records: {{ records }}</div>
-            :headers="headers"
+    <div>TotalRecords: {{ totalRecords }}</div>
-            :items="Items"
+     <div>caption: {{ caption }}</div>
-            item-key="id"
+    <div>apiBaseUrl: {{ apiBaseUrl }}</div>
-            :options.sync="localFormSettings.pagination"
+    <div>formKey: {{ formKey }}</div>
-            :server-items-length="totalItems"
+    <div>dataListKey: {{ dataListKey }}</div>
-            :loading="loading"
+    <div>dataFilterId: {{ dataFilterId }}</div>
-            show-select
+    <div>viewPort is XS: {{ mini }}</div> -->
-            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>
 
@@ -172,8 +126,6 @@ export default {
       var listUrl =
         that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
       window.$gz.api.get(listUrl).then(res => {
-        that.loading = false;
-        that.totalItems = res.paging.count;
         //NOTE: This is how to call an async function and await it from sync code
         (async function() {
           //Make sure the locale keys are fetched
@@ -182,6 +134,8 @@ export default {
           that.headers = buildHeaders(res.columns);
           //Post process data here and then set that.records
           that.records = buildRecords(res.data);
+          that.loading = false;
+          that.totalRecords = res.paging.count;
         })();
       });
     }
@@ -200,8 +154,8 @@ function buildHeaders(columnData) {
   for (var i = 1; i < columnData.length; i++) {
     var cm = columnData[i];
     var h = {};
-    h["text"] = window.$gz.locale.get(cm.cm);
+    h.text = window.$gz.locale.get(cm.cm);
-    h["value"] = i;
+    h.value = "c" + i.toString();
     ret.push(h);
   }
   /*
@@ -222,6 +176,30 @@ function buildHeaders(columnData) {
   return ret;
 }
 
+//Called by getDataFromApi on retrieval of list with columnData
+function buildRecords(listData) {
+  //iterate data, build each object keyed with index name and display set to correct locale filter and then return
+  if (!listData) {
+    return;
+  }
+  var ret = [];
+
+  //comes as an array of arrays, needs to leave as an array of objects representing each row
+  for (var iRow = 0; iRow < listData.length; iRow++) {
+    var row = listData[iRow];
+    //iterate row and build object representing row data keyed to index
+    //first column is the default column so skip over it for now
+    var o = {};
+    for (var iColumn = 1; iColumn < row.length; iColumn++) {
+      var column = row[iColumn];
+
+      o["c" + iColumn.toString()] = column.v;
+    }
+    ret.push(o);
+  }
+  return ret;
+}
+
 //////////////////////////////////////////////////////////
 //
 // Ensures column names are present in locale table
@@ -247,30 +225,6 @@ async function fetchLocalizedHeaderNames(columnData) {
     });
 }
 
-//Called by getDataFromApi on retrieval of list with columnData
-function buildRecords(listData) {
-  //iterate data, build each object keyed with index name and display set to correct locale filter and then return
-  if (!listData) {
-    return;
-  }
-  var ret = [];
-
-  //comes as an array of arrays, needs to leave as an array of objects representing each row
-  for (var iRow = 0; iRow < listData.length; iRow++) {
-    var row = listData[iRow];
-    //iterate row and build object representing row data keyed to index
-    //first column is the default column so skip over it for now
-    var o = {};
-    for (var iColumn = 1; iColumn < row.length; iColumn++) {
-      var column = row[iColumn];
-
-      o[iColumn] = column.v;
-    }
-    ret.push(o);
-  }
-  return ret;
-}
-
 //DataTable component
 //https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
 /*
@@ -492,5 +446,115 @@ TODO:
      - Once it's parent / component properties are set then get into the details
 
 
+
+
+Headers: [ 
+  { 
+    "text": "Name", 
+"value": "c1" }, { 
+  "text": "Serial #", 
+  "value": "c2" }, { "text": "Price", "value": "c3" }, { "text": "Roles", "value": "c4" }, { "text": "Start", "value": "c5" }, { "text": "Active", "value": "c6" }, { "text": "User", "value": "c7" } ]
+Records: [ { "c1": "Awesome Steel Table 25", "c2": 1, "c3": 676.64, "c4": 0, "c5": "2020-01-28T16:50:29.371098Z", "c6": true, "c7": "Cameron Marvin 1 - BizAdminLimited" }, { "c1": "Fantastic Concrete Soap 26", "c2": 2, "c3": 310.6, "c4": 32768, "c5": "2020-01-28T15:56:47.362545Z", "c6": true, "c7": "Becky Parker 9 - TechFull" }, { "c1": "Handmade Soft Towels 27", "c2": 3, "c3": 463.7, "c4": 8, "c5": "2020-01-28T16:55:51.487005Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Handcrafted Cotton Cheese 28", "c2": 4, "c3": 934.95, "c4": 1, "c5": "2020-01-28T16:55:23.324561Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Refined Concrete Salad 29", "c2": 5, "c3": 758.3, "c4": 32, "c5": "2020-01-28T16:00:46.703856Z", "c6": true, "c7": "Terri Paucek 2 - BizAdminFull" }, { "c1": "Licensed Concrete Chips 30", "c2": 6, "c3": 580.73, "c4": 2048, "c5": "2020-01-28T16:44:29.601375Z", "c6": true, "c7": "Virginia Friesen 17 - OpsAdminFull" }, { "c1": "Handmade Cotton Pants 31", "c2": 7, "c3": 880.37, "c4": 1024, "c5": "2020-01-28T16:43:44.380156Z", "c6": true, "c7": "Bernadette Denesik 12 - SubContractorLimited" }, { "c1": "Refined Cotton Sausages 32", "c2": 8, "c3": 615.32, "c4": 1, "c5": "2020-01-28T16:33:10.667606Z", "c6": true, "c7": "Alberta Gleichner 22 - fr" }, { "c1": "Tasty Soft Hat 33", "c2": 9, "c3": 273.68, "c4": 512, "c5": "2020-01-28T16:19:12.318658Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" }, { "c1": "Refined Frozen Bike 35", "c2": 11, "c3": 538.56, "c4": 32, "c5": "2020-01-28T16:46:25.906627Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" } ]
+
+ headers: [
+          {
+            text: 'Dessert (100g serving)',
+            align: 'left',
+            sortable: false,
+            value: 'name',
+          },
+          { text: 'c2', value: 'c2' },
+          { text: 'c3 (g)', value: 'c3' },
+          { text: 'c4 (g)', value: 'c4' },
+          { text: 'c5 (g)', value: 'c5' },
+          { text: 'Iron (%)', value: 'c6' },
+        ],
+
+        [
+          {
+            name: 'Frozen Yogurt',
+            c2: 159,
+            c3: 6.0,
+            c4: 24,
+            c5: 4.0,
+            c6: '1%',
+          },
+          {
+            name: 'Ice cream sandwich',
+            c2: 237,
+            c3: 9.0,
+            c4: 37,
+            c5: 4.3,
+            c6: '1%',
+          },
+          {
+            name: 'Eclair',
+            c2: 262,
+            c3: 16.0,
+            c4: 23,
+            c5: 6.0,
+            c6: '7%',
+          },
+          {
+            name: 'Cupcake',
+            c2: 305,
+            c3: 3.7,
+            c4: 67,
+            c5: 4.3,
+            c6: '8%',
+          },
+          {
+            name: 'Gingerbread',
+            c2: 356,
+            c3: 16.0,
+            c4: 49,
+            c5: 3.9,
+            c6: '16%',
+          },
+          {
+            name: 'Jelly bean',
+            c2: 375,
+            c3: 0.0,
+            c4: 94,
+            c5: 0.0,
+            c6: '0%',
+          },
+          {
+            name: 'Lollipop',
+            c2: 392,
+            c3: 0.2,
+            c4: 98,
+            c5: 0,
+            c6: '2%',
+          },
+          {
+            name: 'Honeycomb',
+            c2: 408,
+            c3: 3.2,
+            c4: 87,
+            c5: 6.5,
+            c6: '45%',
+          },
+          {
+            name: 'Donut',
+            c2: 452,
+            c3: 25.0,
+            c4: 51,
+            c5: 4.9,
+            c6: '22%',
+          },
+          {
+            name: 'KitKat',
+            c2: 518,
+            c3: 26.0,
+            c4: 65,
+            c5: 7,
+            c6: '6%',
+          },
+        ]
+      },
+    },
+  }
+
 */
 </script>