From 387210126258c13ddda177078da2209d3a348d13 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 21 Nov 2018 18:54:58 +0000
Subject: [PATCH]

---
 app/ayanova/src/components/widgetlist.vue | 41 +++++------
 app/ayanova/src/views/inventory.vue       | 84 ++---------------------
 devdocs/specs/core-ui-design.txt          |  6 +-
 devdocs/todo.txt                          |  8 +--
 4 files changed, 32 insertions(+), 107 deletions(-)

diff --git a/app/ayanova/src/components/widgetlist.vue b/app/ayanova/src/components/widgetlist.vue
index 866878b6..a380866c 100644
--- a/app/ayanova/src/components/widgetlist.vue
+++ b/app/ayanova/src/components/widgetlist.vue
@@ -1,23 +1,23 @@
 <template>
-    <div>
-        <v-data-table
-            :headers="headers"
-            :items="desserts"
-            :pagination.sync="pagination"
-            :total-items="totalDesserts"
-            :loading="loading"
-            class="elevation-1"
-        >
-            <template slot="items" slot-scope="props">
-                <td>{{ props.item.name }}</td>
-                <td class="text-xs-right">{{ props.item.calories }}</td>
-                <td class="text-xs-right">{{ props.item.fat }}</td>
-                <td class="text-xs-right">{{ props.item.carbs }}</td>
-                <td class="text-xs-right">{{ props.item.protein }}</td>
-                <td class="text-xs-right">{{ props.item.iron }}</td>
-            </template>
-        </v-data-table>
-    </div>
+  <v-flex xs12 md4>
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      :pagination.sync="pagination"
+      :total-items="totalDesserts"
+      :loading="loading"
+      class="elevation-1"
+    >
+      <template slot="items" slot-scope="props">
+        <td>{{ props.item.name }}</td>
+        <td class="text-xs-right">{{ props.item.calories }}</td>
+        <td class="text-xs-right">{{ props.item.fat }}</td>
+        <td class="text-xs-right">{{ props.item.carbs }}</td>
+        <td class="text-xs-right">{{ props.item.protein }}</td>
+        <td class="text-xs-right">{{ props.item.iron }}</td>
+      </template>
+    </v-data-table>
+  </v-flex>
 </template>
 
 
@@ -64,6 +64,7 @@ export default {
   methods: {
     getDataFromApi() {
       this.loading = true;
+      // eslint-disable-next-line
       return new Promise((resolve, reject) => {
         const { sortBy, descending, page, rowsPerPage } = this.pagination;
 
@@ -254,4 +255,4 @@ export default {
 //     "next": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
 //     "last": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=34&pageSize=3"
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/app/ayanova/src/views/inventory.vue b/app/ayanova/src/views/inventory.vue
index 4c6b87aa..8b55f037 100644
--- a/app/ayanova/src/views/inventory.vue
+++ b/app/ayanova/src/views/inventory.vue
@@ -4,6 +4,11 @@
             <v-container grid-list-xl>
                 <v-layout row wrap="" align-center>
                     <WidgetTop/>
+                    <WidgetList/>
+                    <WarehouseTop/>
+                    <POTop/>
+                    <PartTop/>
+                    <PartAssemblyTop/>
                     <v-flex xs12 md4>
                         <v-card class="elevation-0 transparent">
                             <v-card-text class="text-xs-center">
@@ -19,83 +24,6 @@
                             </v-card-text>
                         </v-card>
                     </v-flex>
-                    <v-flex xs12 md4>
-                        <v-card class="elevation-0 transparent">
-                            <v-card-text class="text-xs-center">
-                                <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
-                            </v-card-text>
-                            <v-card-title primary-title class="layout justify-center">
-                                <div class="headline">Fast development</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-flex xs12 md4>
-                        <v-card class="elevation-0 transparent">
-                            <v-card-text class="text-xs-center">
-                                <v-icon x-large class="blue--text text--lighten-2">build</v-icon>
-                            </v-card-text>
-                            <v-card-title primary-title class="layout justify-center">
-                                <div class="headline text-xs-center">Completely Open Sourced</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-flex xs12 md4>
-                        <v-card class="elevation-0 transparent">
-                            <v-card-text class="text-xs-center">
-                                <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
-                            </v-card-text>
-                            <v-card-title primary-title class="layout justify-center">
-                                <div class="headline">Fast development</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-flex xs12 md4>
-                        <v-card class="elevation-0 transparent">
-                            <v-card-text class="text-xs-center">
-                                <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
-                            </v-card-text>
-                            <v-card-title primary-title class="layout justify-center">
-                                <div class="headline">Fast development</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-flex xs12 md4>
-                        <v-card class="elevation-0 transparent">
-                            <v-card-text class="text-xs-center">
-                                <v-icon x-large class="blue--text text--lighten-2">flash_on</v-icon>
-                            </v-card-text>
-                            <v-card-title primary-title class="layout justify-center">
-                                <div class="headline">Fast development</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>
@@ -112,6 +40,7 @@
 <script>
 /*  xeslint-disable */
 import WidgetTop from "../components/inventorywidgettop";
+import WidgetList from "../components/widgetlist";
 import WarehouseTop from "../components/inventorywarehousetop";
 import POTop from "../components/inventorypotop";
 import PartTop from "../components/inventoryparttop";
@@ -134,6 +63,7 @@ import lt from "../api/locale";
 export default {
   components: {
     WidgetTop,
+    WidgetList,
     WarehouseTop,
     POTop,
     PartTop,
diff --git a/devdocs/specs/core-ui-design.txt b/devdocs/specs/core-ui-design.txt
index b54c44c8..7beac0d7 100644
--- a/devdocs/specs/core-ui-design.txt
+++ b/devdocs/specs/core-ui-design.txt
@@ -276,6 +276,8 @@ Plan: Layout and design each component for the smallest screen size first, then
     - It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks. 
     If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably? 
     When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS.
+        - So design with the tiny ones and minimalist, then drag out and see where can add more value with more stuff.
+        - Ideally at this point I'd like to see small and large only, medium specific design not necessary but testing obviously is (TIME TO MARKET!)
     - NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller
     - Functionality: figure out what the minimum most important things to show at small size then add more "optional" stuff as it increases
         - Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy
@@ -286,7 +288,3 @@ Plan: Layout and design each component for the smallest screen size first, then
 
 Can I make one component for each type that is responsive or do I need to make a separate component for each breakpoint I will support?
     - One component pros: less code to maintain theoretically, cons: maybe less well designed for that size
-
-todo: need to determine what breakpoints I'm going to support specifically
-    - todo: What are the most common device sizes I'll be dealing with?
-    - todo: once I have decided common device sizes then can figure out breakpoint plan
diff --git a/devdocs/todo.txt b/devdocs/todo.txt
index d5861557..41c11f7e 100644
--- a/devdocs/todo.txt
+++ b/devdocs/todo.txt
@@ -4,12 +4,8 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
 
 
 ## IMMEDIATE ITEMS
-	- Figure out layout that works at different sizes with ui "widget" components so that they are larger on big screen, smaller on smaller screen and flow properly
-		- Going to have to do that while making actual real widgets for testing and trying out...
-	
-todo: need to determine what breakpoints I'm going to support specifically
-    - todo: What are the most common device sizes I'll be dealing with?
-    - todo: once I have decided common device sizes then can figure out breakpoint plan
+
+	- Make the following widgets for small screen, drag out size and see what can be done to benefit medium+ sizes, so two sizes for now
 
 	- Widget list component that works with real data
 		- https://vuetifyjs.com/en/components/data-tables#example-server