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: {}
+      }
     };
   }
 };