ayanova/src/components/inventorywidgetlist.vue

@@ -1,56 +1,73 @@
 <template>
-  <v-flex xs12 md12>
-    <div v-if="this.formReady">
-      <v-toolbar flat>
-        <v-toolbar-title>
-          <v-icon large color="primary">fa-splotch</v-icon>
-          <span class="hidden-sm-and-down">{{
-            this.$gzlocale.get("WidgetList")
-          }}</span>
-        </v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-btn icon @click="newItem()">
-          <v-icon>fa-plus-circle</v-icon>
-        </v-btn>
-        <v-btn icon>
-          <v-icon>fa-filter</v-icon>
-        </v-btn>
-        <v-btn icon @click="getDataFromApi()">
-          <v-icon>fa-sync</v-icon>
-        </v-btn>
-        <v-btn icon>
-          <v-icon>fa-ellipsis-v</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-data-table
-        v-model="selected"
-        :headers="headers"
-        :items="Items"
-        item-key="id"
-        :pagination.sync="pagination"
-        :total-items="totalItems"
-        :loading="loading"
-        :rows-per-page-items="rowsPerPageItems"
-        :rows-per-page-text="this.$gzlocale.get('RowsPerPage')"
-        class="elevation-1"
+  <v-layout column wrap class="my-5" align-center v-if="this.formState.ready">
+    <v-flex xs12 mt-1 mb-2>
+      <v-alert
+        ref="errorbox"
+        v-show="formState.errorBoxMessage"
+        color="error"
+        icon="fa-exclamation-circle "
+        value="true"
+        transition="scale-transition"
+        class="multi-line"
+        outline
+        >{{ formState.errorBoxMessage }}</v-alert
       >
-        <template slot="items" slot-scope="props">
-          <td class="text-xs-left">{{ props.item.name | capitalize }}</td>
-          <td class="text-xs-left">{{ props.item.serial }}</td>
-          <td class="text-xs-left">{{ props.item.dollarAmount | currency }}</td>
-          <td class="text-xs-left">{{ props.item.active | boolastext }}</td>
-          <td class="text-xs-left">{{ props.item.roles }}</td>
-          <td class="text-xs-left">{{ props.item.startDate | shortdate }}</td>
-          <td class="text-xs-left">{{ props.item.endDate | shortdate }}</td>
-          <td class="justify-center layout px-0">
-            <v-icon class="mr-3" @click="editItem(props.item)"
-              >fa-pencil-alt</v-icon
-            >
-          </td>
-        </template>
-      </v-data-table>
-    </div>
-  </v-flex>
+    </v-flex>
+    <v-flex xs12 md12>
+      <div v-if="this.formState.ready">
+        <v-toolbar flat>
+          <v-toolbar-title>
+            <v-icon large color="primary">fa-splotch</v-icon>
+            <span class="hidden-sm-and-down">
+              {{ this.$gzlocale.get("WidgetList") }}
+            </span>
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click="newItem()">
+            <v-icon>fa-plus-circle</v-icon>
+          </v-btn>
+          <v-btn icon>
+            <v-icon>fa-filter</v-icon>
+          </v-btn>
+          <v-btn icon @click="getDataFromApi()">
+            <v-icon>fa-sync</v-icon>
+          </v-btn>
+          <v-btn icon>
+            <v-icon>fa-ellipsis-v</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-data-table
+          v-model="selected"
+          :headers="headers"
+          :items="Items"
+          item-key="id"
+          :pagination.sync="pagination"
+          :total-items="totalItems"
+          :loading="loading"
+          :rows-per-page-items="rowsPerPageItems"
+          :rows-per-page-text="this.$gzlocale.get('RowsPerPage')"
+          class="elevation-1"
+        >
+          <template slot="items" slot-scope="props">
+            <td class="text-xs-left">{{ props.item.name | capitalize }}</td>
+            <td class="text-xs-left">{{ props.item.serial }}</td>
+            <td class="text-xs-left">
+              {{ props.item.dollarAmount | currency }}
+            </td>
+            <td class="text-xs-left">{{ props.item.active | boolastext }}</td>
+            <td class="text-xs-left">{{ props.item.roles }}</td>
+            <td class="text-xs-left">{{ props.item.startDate | shortdate }}</td>
+            <td class="text-xs-left">{{ props.item.endDate | shortdate }}</td>
+            <td class="justify-center layout px-0">
+              <v-icon class="mr-3" @click="editItem(props.item)"
+                >fa-pencil-alt</v-icon
+              >
+            </td>
+          </template>
+        </v-data-table>
+      </div>
+    </v-flex>
+  </v-layout>
 </template>
 
 <script>
@@ -77,15 +94,21 @@ export default {
           header.text = that.$gzlocale.get(header.text);
         });
       })
-      .then(() => (this.formReady = true))
+      .then(() => (this.formState.ready = true))
       .catch(err => {
-        this.formReady = true; //show the form anyway so we know what's what
+        this.formState.ready = true; //show the form anyway so we know what's what
         this.$gzHandleFormError(err);
       });
   },
   data() {
     return {
-      formReady: false,
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
       dialogdata: {
         showeditdialog: false,
         recordId: 0