ayanova/src/api/locale.js

@@ -13,6 +13,7 @@ export default {
       //
       //step 1: build an array of keys that we don't have already
       //Note: this will ensure only unique keys go into the store so it's safe to call this with dupes as can happen
+      //for example datatables have dynamic column names so they need to fetch on demand
       var needIt = [];
       for (var i = 0; i < keys.length; i++) {
         if (!window.$gz._.has(window.$gz.store.state.localeText, keys[i])) {

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

@@ -13,6 +13,7 @@
       :options.sync="options"
       :server-items-length="totalRecords"
       :loading="loading"
+      :disable-sort="true"
       class="elevation-1"
     ></v-data-table>
   </div>
@@ -111,9 +112,11 @@ export default {
         listOptions["DataFilterID"] = that.dataFilterId;
       }
       //Mini?
-      if (that.$vuetify.breakpoint.xs) {
-        listOptions["Mini"] = true;
-      }
+      //OK, seems as though the datatable has a built in ability to handle small viewports by displaying each record vertically instead so maybe I only need
+      //mini for picklists
+      // if (that.$vuetify.breakpoint.xs) {
+      //   listOptions["Mini"] = true;
+      // }
 
       that.loading = true;
       var listUrl =
@@ -121,10 +124,18 @@ export default {
       window.$gz.api.get(listUrl).then(res => {
         that.loading = false;
         that.totalItems = res.paging.count;
-        //build that.headers here
-        that.headers = buildHeaders(res.columns);
-        //Post process data here and then set that.records
-        that.records = buildRecords(res.data);
+        console.log("About to call fetchlocalizedheadernames");
+        (async function() {
+          //Make sure the locale keys are fetched
+          await fetchLocalizedHeaderNames(res.columns);
+          console.log(
+            "Back from fetch localized header names, now can bjuild headers"
+          );
+          //build that.headers here
+          that.headers = buildHeaders(res.columns);
+          //Post process data here and then set that.records
+          that.records = buildRecords(res.data);
+        })();
       });
     }
   }
@@ -132,6 +143,7 @@ export default {
 
 //Called by getDataFromApi on retrieval of list with columnData
 function buildHeaders(columnData) {
+  //debugger;
   //iterate columns, build headers and return
   if (!columnData) {
     return [];
@@ -143,10 +155,41 @@ 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);
   return ret;
 }
+
+//////////////////////////////////////////////////////////
+//
+// Ensures column names are present in locale table
+//
+async function fetchLocalizedHeaderNames(columnData) {
+  if (!columnData) {
+    return;
+  }
+  var headerKeys = [];
+  for (var i = 1; i < columnData.length; i++) {
+    var cm = columnData[i];
+    headerKeys.push(cm.cm);
+  }
+  //Now fetch all the keys and await the response before returning
+  await window.$gz.locale
+    .fetch(headerKeys)
+    .then(() => {
+      console.log("fetchLocalizedHeaderNames completed, returning now");
+      return;
+    })
+    .catch(err => {
+      that.formState.ready = true; //show the form anyway so we know what's what
+      window.$gz.errorHandler.handleFormError(err);
+    });
+}
+
 /*
 {
   text: string