diff --git a/ayanova/src/api/locale.js b/ayanova/src/api/locale.js index d56546c5..d1745d5b 100644 --- a/ayanova/src/api/locale.js +++ b/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])) { diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue index 3deb2c11..799d897d 100644 --- a/ayanova/src/components/gz-data-table.vue +++ b/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" > @@ -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