From b380174709affb7d5a833234a1308cd92272b3ca Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Thu, 2 May 2019 22:02:41 +0000
Subject: [PATCH]

---
 ayanova/src/App.vue                           |  30 ++--
 .../src/components/inventorywidgetlist.vue    | 131 +++++++++-------
 ayanova/src/views/About.vue                   | 143 +++++++-----------
 ayanova/src/views/inventory-widget-edit.vue   |  13 +-
 ayanova/src/views/inventory.vue               |  78 ++++++----
 ayanova/src/views/log.vue                     |  30 +++-
 ayanova/src/views/login.vue                   |   7 +-
 7 files changed, 238 insertions(+), 194 deletions(-)

diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue
index 1864d4a9..00336cba 100644
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -2,7 +2,11 @@
   <v-app>
     <v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
       <v-list dense>
-        <v-list-tile v-for="item in navItems" :key="item.route" :to="item.route">
+        <v-list-tile
+          v-for="item in navItems"
+          :key="item.route"
+          :to="item.route"
+        >
           <v-list-tile-action>
             <v-icon>{{ "fa-" + item.icon }}</v-icon>
           </v-list-tile-action>
@@ -21,7 +25,8 @@
     >
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
-        <v-icon>{{ appBar.icon }}</v-icon>&nbsp;
+        <v-icon>{{ appBar.icon }}</v-icon
+        >&nbsp;
         <span>{{ appBar.title }}</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
@@ -36,9 +41,7 @@
             @click="$gzevent.$emit('menu-click', item)"
           >
             <v-icon :color="item.color ? item.color : ''">
-              {{
-              "fa-" + item.icon
-              }}
+              {{ "fa-" + item.icon }}
             </v-icon>
           </v-btn>
         </template>
@@ -52,11 +55,13 @@
           <v-list>
             <template v-for="(item, index) in appBar.menuItems">
               <v-subheader v-if="item.header" :key="index">
-                {{
-                item.header
-                }}
+                {{ item.header }}
               </v-subheader>
-              <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
+              <v-divider
+                v-else-if="item.divider"
+                :key="index"
+                :inset="item.inset"
+              ></v-divider>
               <v-list-tile
                 v-else
                 :key="item.key"
@@ -68,7 +73,8 @@
                   <v-icon
                     v-if="item.icon"
                     :color="item.color ? item.color : ''"
-                  >{{ "fa-" + item.icon }}</v-icon>
+                    >{{ "fa-" + item.icon }}</v-icon
+                  >
                 </v-list-tile-action>
                 <v-list-tile-content>
                   <v-list-tile-title>
@@ -93,7 +99,9 @@
         <v-flex primary py-2 text-xs-center white--text xs12>
           <div>
             <a href="https://ayanova.com" target="_blank">
-              <span class="white--text caption">AyaNova ({{ version }}) {{ copyright }}</span>
+              <span class="white--text caption"
+                >AyaNova ({{ version }}) {{ copyright }}</span
+              >
             </a>
           </div>
         </v-flex>
diff --git a/ayanova/src/components/inventorywidgetlist.vue b/ayanova/src/components/inventorywidgetlist.vue
index 6f91e9a7..62193d59 100644
--- a/ayanova/src/components/inventorywidgetlist.vue
+++ b/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
diff --git a/ayanova/src/views/About.vue b/ayanova/src/views/About.vue
index b53f7def..8ff860f0 100644
--- a/ayanova/src/views/About.vue
+++ b/ayanova/src/views/About.vue
@@ -1,5 +1,18 @@
 <template>
   <v-layout row 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
+      >
+    </v-flex>
     <v-flex>
       <v-card>
         <!-- <v-toolbar>
@@ -17,14 +30,10 @@
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("Version")
-                }}
+                {{ this.$gzlocale.get("Version") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                clientInfo.version
-                }}
+                {{ clientInfo.version }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -35,70 +44,50 @@
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("ServerAddress")
-                }}
+                {{ this.$gzlocale.get("ServerAddress") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                this.$store.state.apiUrl
-                }}
+                {{ this.$store.state.apiUrl }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("Version")
-                }}
+                {{ this.$gzlocale.get("Version") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.serverVersion
-                }}
+                {{ serverInfo.serverVersion }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("SchemaVersion")
-                }}
+                {{ this.$gzlocale.get("SchemaVersion") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.dbSchemaVersion
-                }}
+                {{ serverInfo.dbSchemaVersion }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("ServerTime")
-                }}
+                {{ this.$gzlocale.get("ServerTime") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.serverLocalTime
-                }}
+                {{ serverInfo.serverLocalTime }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("TimeZone")
-                }}
+                {{ this.$gzlocale.get("TimeZone") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.serverTimeZone
-                }}
+                {{ serverInfo.serverTimeZone }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -109,79 +98,57 @@
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("RegisteredUser")
-                }}
+                {{ this.$gzlocale.get("RegisteredUser") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.license.license.licensedTo
-                }}
+                {{ serverInfo.license.license.licensedTo }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("DatabaseID")
-                }}
+                {{ this.$gzlocale.get("DatabaseID") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.license.license.dbId
-                }}
+                {{ serverInfo.license.license.dbId }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("LicenseSerial")
-                }}
+                {{ this.$gzlocale.get("LicenseSerial") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.license.license.keySerial
-                }}
+                {{ serverInfo.license.license.keySerial }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("LicenseExpiration")
-                }}
+                {{ this.$gzlocale.get("LicenseExpiration") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.license.license.licenseExpiration
-                }}
+                {{ serverInfo.license.license.licenseExpiration }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("SupportedUntil")
-                }}
+                {{ this.$gzlocale.get("SupportedUntil") }}
               </v-list-tile-title>
               <v-list-tile-sub-title>
-                {{
-                serverInfo.license.license.maintenanceExpiration
-                }}
+                {{ serverInfo.license.license.maintenanceExpiration }}
               </v-list-tile-sub-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile avatar>
             <v-list-tile-content>
               <v-list-tile-title>
-                {{
-                this.$gzlocale.get("LicensedOptions")
-                }}
+                {{ this.$gzlocale.get("LicensedOptions") }}
               </v-list-tile-title>
               <v-list-tile-sub-title
                 v-for="item in serverInfo.license.license.features"
@@ -205,24 +172,26 @@ import aboutInfo from "../api/aboutinfo";
 export default {
   beforeCreate() {
     var vm = this;
-    this.$gzlocale.fetch([
-      "HelpAboutAyaNova",
-      "ClientApp",
-      "Server",
-      "Version",
-      "SchemaVersion",
-      "ServerTime",
-      "ServerAddress",
-      "TimeZone",
-      "HelpLicense",
-      "RegisteredUser",
-      "DatabaseID",
-      "LicenseSerial",
-      "LicenseExpiration",
-      "SupportedUntil",
-      "LicensedOptions",
-      "Log"
-    ]).then(() => (vm.formState.ready = true))
+    this.$gzlocale
+      .fetch([
+        "HelpAboutAyaNova",
+        "ClientApp",
+        "Server",
+        "Version",
+        "SchemaVersion",
+        "ServerTime",
+        "ServerAddress",
+        "TimeZone",
+        "HelpLicense",
+        "RegisteredUser",
+        "DatabaseID",
+        "LicenseSerial",
+        "LicenseExpiration",
+        "SupportedUntil",
+        "LicensedOptions",
+        "Log"
+      ])
+      .then(() => (vm.formState.ready = true))
       .catch(err => {
         vm.formState.ready = true;
         vm.$gzHandleFormError(err);
diff --git a/ayanova/src/views/inventory-widget-edit.vue b/ayanova/src/views/inventory-widget-edit.vue
index ccc2a7ac..df88034b 100644
--- a/ayanova/src/views/inventory-widget-edit.vue
+++ b/ayanova/src/views/inventory-widget-edit.vue
@@ -13,7 +13,8 @@
               transition="scale-transition"
               class="multi-line"
               outline
-            >{{ formState.errorBoxMessage }}</v-alert>
+              >{{ formState.errorBoxMessage }}</v-alert
+            >
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
@@ -140,15 +141,15 @@
         <v-layout align-left justify-center row wrap mt-5>
           <v-flex xs6 sm4>
             READY: {{ formState.ready }}
-            <br>
+            <br />
             LOADING: {{ formState.loading }}
-            <br>
+            <br />
             DIRTY: {{ formState.dirty }}
-            <br>
+            <br />
             VALID: {{ formState.valid }}
-            <br>
+            <br />
             READONLY: {{ formState.readOnly }}
-            <br>
+            <br />
           </v-flex>
         </v-layout>
       </v-form>
diff --git a/ayanova/src/views/inventory.vue b/ayanova/src/views/inventory.vue
index 3d0d0745..e2cdb79d 100644
--- a/ayanova/src/views/inventory.vue
+++ b/ayanova/src/views/inventory.vue
@@ -1,34 +1,44 @@
 <template>
-  <v-layout column wrap class="my-5" align-center v-if="this.formReady">
-    <v-flex xs12>
-      <v-container grid-list-xl>
-        <v-layout row wrap align-top>
-          <WidgetList />
-          <WarehouseTop />
-          <POTop />
-          <PartTop />
-          <PartAssemblyTop />
-          <v-flex xs12 md4>
-            <v-card class="elevation-0 transparent">
-              <v-card-text class="text-xs-center">
-                <v-icon x-large color="accent">fa-lightbulb</v-icon>
-              </v-card-text>
-              <v-card-title primary-title class="layout justify-center">
-                <div class="headline text-xs-center">Material Design</div>
-              </v-card-title>
-              <v-card-text>
-                Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat
-                tincidunt ornare. Pellentesque habitant morbi tristique senectus
-                et netus et malesuada fames ac turpis egestas. Nullam in aliquet
-                odio. Aliquam eu est vitae tellus bibendum tincidunt.
-                Suspendisse potenti.
-              </v-card-text>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-container>
+  <!-- <v-flex xs12>
+  <v-container grid-list-xl>-->
+  <v-layout row wrap align-top 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>
+    </v-flex>
+    <WidgetList/>
+    <WarehouseTop/>
+    <POTop/>
+    <PartTop/>
+    <PartAssemblyTop/>
+    <v-flex xs12 md4>
+      <v-card class="elevation-0 transparent">
+        <v-card-text class="text-xs-center">
+          <v-icon x-large color="accent">fa-lightbulb</v-icon>
+        </v-card-text>
+        <v-card-title primary-title class="layout justify-center">
+          <div class="headline text-xs-center">Material Design</div>
+        </v-card-title>
+        <v-card-text>
+          Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat
+          tincidunt ornare. Pellentesque habitant morbi tristique senectus
+          et netus et malesuada fames ac turpis egestas. Nullam in aliquet
+          odio. Aliquam eu est vitae tellus bibendum tincidunt.
+          Suspendisse potenti.
+        </v-card-text>
+      </v-card>
     </v-flex>
   </v-layout>
+  <!-- </v-container>
+  </v-flex>-->
 </template>
 
 <script>
@@ -43,9 +53,9 @@ export default {
   beforeCreate() {
     this.$gzlocale
       .fetch(["Inventory"])
-      .then(() => (this.formReady = true))
+      .then(() => (this.formState.ready = true))
       .catch(err => {
-        this.formReady = true;
+        this.formState.ready = true;
         this.$gzHandleFormError(err);
       });
   },
@@ -65,7 +75,13 @@ export default {
   },
   data() {
     return {
-      formReady: false
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
     };
   }
 };
diff --git a/ayanova/src/views/log.vue b/ayanova/src/views/log.vue
index c3e80ce4..fc1dd8b1 100644
--- a/ayanova/src/views/log.vue
+++ b/ayanova/src/views/log.vue
@@ -1,5 +1,18 @@
 <template>
-  <v-layout row v-if="this.formReady">
+  <v-layout row 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
+      >
+    </v-flex>
     <v-flex>
       <h1>{{ this.$gzlocale.get("Log") }}</h1>
       <v-textarea v-model="logText" full-width readonly auto-grow></v-textarea>
@@ -18,14 +31,23 @@ export default {
     this.logText = outText;
     this.$gzlocale
       .fetch(["Log"])
-      .then(() => (this.formReady = true))
+      .then(() => (this.formState.ready = true))
       .catch(err => {
-        this.formReady = true;
+        this.formState.ready = true;
         this.$gzHandleFormError(err);
       });
   },
   data() {
-    return { logText: "", formReady: false };
+    return {
+      logText: "",
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
+    };
   }
 };
 </script>
diff --git a/ayanova/src/views/login.vue b/ayanova/src/views/login.vue
index 0b723a03..bb10f25e 100644
--- a/ayanova/src/views/login.vue
+++ b/ayanova/src/views/login.vue
@@ -2,7 +2,12 @@
   <v-container fluid>
     <v-layout row wrap>
       <v-flex xs12 class="hidden-sm-and-down text-xs-center" mt-5 ml-5 pl-5>
-        <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
+        <v-img
+          :src="require('../assets/logo.svg')"
+          class="my-3"
+          contain
+          height="200"
+        ></v-img>
       </v-flex>
       <v-flex xs12 class="hidden-md-and-up text-xs-center">
         <v-img :src="require('../assets/logo.svg')" contain height="64"></v-img>