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

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <v-alert
+      ref="errorbox"
+      v-show="formState.errorBoxMessage"
+      color="error"
+      icon="fa-exclamation-circle "
+      transition="scale-transition"
+      class="multi-line"
+      outlined
+      >{{ formState.errorBoxMessage }}</v-alert
+    >
     <v-card>
       <v-card-title>
         <v-select
@@ -326,7 +336,17 @@ export default {
       totalRecords: 0,
       records: [],
       rowsPerPageItems: [5, 10, 25, 50, 100],
-      selected: []
+      selected: [],
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: undefined,
+        appError: undefined,
+        serverError: {}
+      }
     };
   },
   props: {
@@ -502,27 +522,35 @@ export default {
           listView: vm.listView
         })
         .then(res => {
-          //NOTE: This is how to call an async function and await it from sync code
-          (async function() {
-            //Save a copy of the server columns data for handling button clicks etc later
-            vm.serverColumns = res.columns;
-            //Make sure the locale keys are fetched
-            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
-            await fetchEnums(res.columns);
+          if (res.error != undefined) {
+            throw res.error;
+          } else {
+            //NOTE: This is how to call an async function and await it from sync code
+            (async function() {
+              //Save a copy of the server columns data for handling button clicks etc later
+              vm.serverColumns = res.columns;
+              //Make sure the locale keys are fetched
+              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
+              await fetchEnums(res.columns);
 
-            //build vm.headers here
-            vm.headers = buildHeaders(res.columns);
-            //Post process data here and then set vm.records
-            vm.records = buildRecords(res.data, res.columns);
-            vm.loading = false;
-            vm.totalRecords = res.totalRecordCount;
-            //Put back selected items
-            vm.selected = [...preSelected];
+              //build vm.headers here
+              vm.headers = buildHeaders(res.columns);
+              //Post process data here and then set vm.records
+              vm.records = buildRecords(res.data, res.columns);
+              vm.loading = false;
+              vm.totalRecords = res.totalRecordCount;
+              //Put back selected items
+              vm.selected = [...preSelected];
 
-            //persist the paging options and listview stuff so user sees same page and list on refresh or leave and return scenario
-            saveFormSettings(vm);
-            //////////
-          })();
+              //persist the paging options and listview stuff so user sees same page and list on refresh or leave and return scenario
+              saveFormSettings(vm);
+              //////////
+            })();
+          }
+        })
+        .catch(err => {
+          vm.formState.ready = true;
+          window.$gz.errorHandler.handleFormError(err, vm);
         });
     }
   },
@@ -696,15 +724,9 @@ async function fetchLocalizedHeaderNames(columnData) {
     headerKeys.push(cm.cm);
   }
   //Now fetch all the keys and await the response before returning
-  await window.$gz.locale
-    .fetch(headerKeys)
-    .then(() => {
-      return;
-    })
-    .catch(err => {
-      vm.formState.ready = true; //show the form anyway so we know what's what
-      window.$gz.errorHandler.handleFormError(err);
-    });
+  await window.$gz.locale.fetch(headerKeys).then(() => {
+    return;
+  });
 }
 
 //////////////////////////////////////////////////////////