From c6a23a02e2d86ea68a5d99c51b1b29107898a96c Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Tue, 20 Nov 2018 00:42:03 +0000
Subject: [PATCH]

---
 app/ayanova/src/components/HelloWorld.vue | 132 +----------
 app/ayanova/src/components/desertlist.vue | 203 +++++++++++++++++
 app/ayanova/src/components/widgetlist.vue | 257 ++++++++++++++++++++++
 devdocs/specs/core-ui-design.txt          |   4 +-
 devdocs/todo.txt                          |  31 ++-
 5 files changed, 486 insertions(+), 141 deletions(-)
 create mode 100644 app/ayanova/src/components/desertlist.vue
 create mode 100644 app/ayanova/src/components/widgetlist.vue

diff --git a/app/ayanova/src/components/HelloWorld.vue b/app/ayanova/src/components/HelloWorld.vue
index e109c449..fb1018ad 100644
--- a/app/ayanova/src/components/HelloWorld.vue
+++ b/app/ayanova/src/components/HelloWorld.vue
@@ -1,84 +1,11 @@
 <template>
   <v-container>
-    <v-layout
-      text-xs-center
-      wrap
-    >
+    <v-layout text-xs-center wrap="">
       <v-flex xs12>
-        <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 mb-4>
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to AyaNova
-        </h1>
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
-        </p>
-      </v-flex>
-
-      <v-flex
-        mb-5
-        xs12
-      >
-        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-layout>
+        <h1 class="display-2 font-weight-bold mb-3">Welcome to AyaNova</h1>
       </v-flex>
     </v-layout>
   </v-container>
@@ -86,58 +13,7 @@
 
 <script>
 export default {
-  data: () => ({
-    ecosystem: [
-      {
-        text: "vuetify-loader",
-        href: "https://github.com/vuetifyjs/vuetify-loader"
-      },
-      {
-        text: "github",
-        href: "https://github.com/vuetifyjs/vuetify"
-      },
-      {
-        text: "awesome-vuetify",
-        href: "https://github.com/vuetifyjs/awesome-vuetify"
-      }
-    ],
-    importantLinks: [
-      {
-        text: "Documentation",
-        href: "https://vuetifyjs.com"
-      },
-      {
-        text: "Chat",
-        href: "https://community.vuetifyjs.com"
-      },
-      {
-        text: "Made with Vuetify",
-        href: "https://madewithvuetifyjs.com"
-      },
-      {
-        text: "Twitter",
-        href: "https://twitter.com/vuetifyjs"
-      },
-      {
-        text: "Articles",
-        href: "https://medium.com/vuetify"
-      }
-    ],
-    whatsNext: [
-      {
-        text: "Explore components",
-        href: "https://vuetifyjs.com/components/api-explorer"
-      },
-      {
-        text: "Select a layout",
-        href: "https://vuetifyjs.com/layout/pre-defined"
-      },
-      {
-        text: "Frequently Asked Questions",
-        href: "https://vuetifyjs.com/getting-started/frequently-asked-questions"
-      }
-    ]
-  })
+  data: () => ({})
 };
 </script>
 
diff --git a/app/ayanova/src/components/desertlist.vue b/app/ayanova/src/components/desertlist.vue
new file mode 100644
index 00000000..fad9ad14
--- /dev/null
+++ b/app/ayanova/src/components/desertlist.vue
@@ -0,0 +1,203 @@
+<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>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      totalDesserts: 0,
+      desserts: [],
+      loading: true,
+      pagination: {},
+      headers: [
+        {
+          text: "Dessert (100g serving)",
+          align: "left",
+          sortable: false,
+          value: "name"
+        },
+        { text: "Calories", value: "calories" },
+        { text: "Fat (g)", value: "fat" },
+        { text: "Carbs (g)", value: "carbs" },
+        { text: "Protein (g)", value: "protein" },
+        { text: "Iron (%)", value: "iron" }
+      ]
+    };
+  },
+  watch: {
+    pagination: {
+      handler() {
+        this.getDataFromApi().then(data => {
+          this.desserts = data.items;
+          this.totalDesserts = data.total;
+        });
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getDataFromApi().then(data => {
+      this.desserts = data.items;
+      this.totalDesserts = data.total;
+    });
+  },
+  methods: {
+    getDataFromApi() {
+      this.loading = true;
+      return new Promise((resolve, reject) => {
+        const { sortBy, descending, page, rowsPerPage } = this.pagination;
+
+        let items = this.getDesserts();
+        const total = items.length;
+
+        if (this.pagination.sortBy) {
+          items = items.sort((a, b) => {
+            const sortA = a[sortBy];
+            const sortB = b[sortBy];
+
+            if (descending) {
+              if (sortA < sortB) return 1;
+              if (sortA > sortB) return -1;
+              return 0;
+            } else {
+              if (sortA < sortB) return -1;
+              if (sortA > sortB) return 1;
+              return 0;
+            }
+          });
+        }
+
+        if (rowsPerPage > 0) {
+          items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+        }
+
+        setTimeout(() => {
+          this.loading = false;
+          resolve({
+            items,
+            total
+          });
+        }, 1000);
+      });
+    },
+    getDesserts() {
+      return [
+        {
+          value: false,
+          name: "Frozen Yogurt",
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: "1%"
+        },
+        {
+          value: false,
+          name: "Ice cream sandwich",
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: "1%"
+        },
+        {
+          value: false,
+          name: "Eclair",
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: "7%"
+        },
+        {
+          value: false,
+          name: "Cupcake",
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: "8%"
+        },
+        {
+          value: false,
+          name: "Gingerbread",
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: "16%"
+        },
+        {
+          value: false,
+          name: "Jelly bean",
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: "0%"
+        },
+        {
+          value: false,
+          name: "Lollipop",
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: "2%"
+        },
+        {
+          value: false,
+          name: "Honeycomb",
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: "45%"
+        },
+        {
+          value: false,
+          name: "Donut",
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: "22%"
+        },
+        {
+          value: false,
+          name: "KitKat",
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: "6%"
+        }
+      ];
+    }
+  }
+};
+</script>
+
+
+<style>
+</style>
diff --git a/app/ayanova/src/components/widgetlist.vue b/app/ayanova/src/components/widgetlist.vue
new file mode 100644
index 00000000..866878b6
--- /dev/null
+++ b/app/ayanova/src/components/widgetlist.vue
@@ -0,0 +1,257 @@
+<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>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      totalDesserts: 0,
+      desserts: [],
+      loading: true,
+      pagination: {},
+      headers: [
+        {
+          text: "Dessert (100g serving)",
+          align: "left",
+          sortable: false,
+          value: "name"
+        },
+        { text: "Calories", value: "calories" },
+        { text: "Fat (g)", value: "fat" },
+        { text: "Carbs (g)", value: "carbs" },
+        { text: "Protein (g)", value: "protein" },
+        { text: "Iron (%)", value: "iron" }
+      ]
+    };
+  },
+  watch: {
+    pagination: {
+      handler() {
+        this.getDataFromApi().then(data => {
+          this.desserts = data.items;
+          this.totalDesserts = data.total;
+        });
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getDataFromApi().then(data => {
+      this.desserts = data.items;
+      this.totalDesserts = data.total;
+    });
+  },
+  methods: {
+    getDataFromApi() {
+      this.loading = true;
+      return new Promise((resolve, reject) => {
+        const { sortBy, descending, page, rowsPerPage } = this.pagination;
+
+        let items = this.getDesserts();
+        const total = items.length;
+
+        if (this.pagination.sortBy) {
+          items = items.sort((a, b) => {
+            const sortA = a[sortBy];
+            const sortB = b[sortBy];
+
+            if (descending) {
+              if (sortA < sortB) return 1;
+              if (sortA > sortB) return -1;
+              return 0;
+            } else {
+              if (sortA < sortB) return -1;
+              if (sortA > sortB) return 1;
+              return 0;
+            }
+          });
+        }
+
+        if (rowsPerPage > 0) {
+          items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+        }
+
+        setTimeout(() => {
+          this.loading = false;
+          resolve({
+            items,
+            total
+          });
+        }, 1000);
+      });
+    },
+    getDesserts() {
+      return [
+        {
+          value: false,
+          name: "Frozen Yogurt",
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: "1%"
+        },
+        {
+          value: false,
+          name: "Ice cream sandwich",
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: "1%"
+        },
+        {
+          value: false,
+          name: "Eclair",
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: "7%"
+        },
+        {
+          value: false,
+          name: "Cupcake",
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: "8%"
+        },
+        {
+          value: false,
+          name: "Gingerbread",
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: "16%"
+        },
+        {
+          value: false,
+          name: "Jelly bean",
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: "0%"
+        },
+        {
+          value: false,
+          name: "Lollipop",
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: "2%"
+        },
+        {
+          value: false,
+          name: "Honeycomb",
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: "45%"
+        },
+        {
+          value: false,
+          name: "Donut",
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: "22%"
+        },
+        {
+          value: false,
+          name: "KitKat",
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: "6%"
+        }
+      ];
+    }
+  }
+};
+</script>
+
+
+<style>
+</style>
+
+//Example api response
+// {
+//   "data": [
+//     {
+//       "id": 1,
+//       "concurrencyToken": 2262471,
+//       "ownerId": 1,
+//       "name": "Handcrafted Wooden Bacon 23",
+//       "serial": 1,
+//       "dollarAmount": 25.42,
+//       "active": true,
+//       "roles": 8212,
+//       "startDate": "2018-11-19T12:20:42.920058",
+//       "endDate": "2018-11-19T15:37:47.053849",
+//       "notes": "Voluptas assumenda laudantium nemo cupiditate. Quia voluptatem reiciendis et. Sit non error est. Tenetur provident nostrum. Voluptatem voluptatem et."
+//     },
+//     {
+//       "id": 2,
+//       "concurrencyToken": 2262494,
+//       "ownerId": 1,
+//       "name": "Ergonomic Soft Gloves 24",
+//       "serial": 2,
+//       "dollarAmount": 530.39,
+//       "active": true,
+//       "roles": 8212,
+//       "startDate": "2018-11-19T12:17:32.488013",
+//       "endDate": "2018-11-19T17:01:18.425666",
+//       "notes": "Sed rerum minima blanditiis est. Praesentium consequatur numquam nostrum voluptatem libero dolores voluptatem et. Aut et nobis consectetur voluptatem minus. Ipsa nemo non in iste adipisci voluptatem. Minus consequatur in accusantium."
+//     },
+//     {
+//       "id": 3,
+//       "concurrencyToken": 2262518,
+//       "ownerId": 1,
+//       "name": "Fantastic Metal Computer 25",
+//       "serial": 3,
+//       "dollarAmount": 494.3,
+//       "active": true,
+//       "roles": 8212,
+//       "startDate": "2018-11-19T13:06:47.437006",
+//       "endDate": "2018-11-19T14:41:44.665721",
+//       "notes": "Facere et ex. Ipsa aspernatur itaque maiores sint nulla esse incidunt. Architecto labore voluptatem dolore iusto ut."
+//     }
+//   ],
+//   "paging": {
+//     "count": 100,
+//     "offset": 0,
+//     "limit": 3,
+//     "first": "http://localhost:7575/api/v8.0/Widget/ListWidgets?pageNo=1&pageSize=3",
+//     "previous": null,
+//     "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/devdocs/specs/core-ui-design.txt b/devdocs/specs/core-ui-design.txt
index 79a847d9..94d90063 100644
--- a/devdocs/specs/core-ui-design.txt
+++ b/devdocs/specs/core-ui-design.txt
@@ -117,8 +117,8 @@ LOGO
 COLOURS
     - Canucks colours of course, Blue primary and green secondary. RI already uses them, get the hex codes there.
     - No indigo or pastels 
-
-
+  - https://material.io/design/color/#color-usage-palettes
+  - https://www.materialpalette.com/
 
 =-=-=-=-=-
 Ref material kept for new icons possibly:
diff --git a/devdocs/todo.txt b/devdocs/todo.txt
index 4a9051b1..9f5b8c96 100644
--- a/devdocs/todo.txt
+++ b/devdocs/todo.txt
@@ -1,20 +1,29 @@
 # TODO (J.F.C. - Just fucking code it already)
 
-Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQxNTE5NTA5IiwiZXhwIjoiMTU0NDExMTUwOSIsImlzcyI6ImF5YW5vdmEuY29tIiwiaWQiOiIxIiwiYXlhbm92YS9yb2xlcyI6IjE2NDI2In0.aGI1su24D5zWkMDiYPlBx3xfCuQ8qkLdO7b5YPeOPoE
+Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoiMTU0NTI2MTY3NyIsImlzcyI6ImF5YW5vdmEuY29tIiwiaWQiOiIxIiwiYXlhbm92YS9yb2xlcyI6IjE2NDI2In0.93IjHRXQA9c8Z0U9qcsS73KcbG3HzYWkRzF3LwCB_rY
 
 
 ## IMMEDIATE ITEMS
 
-
-	- Loading indicator for xhr stuff
-		- The thin line one I saw is pretty skookum
-	- Dummy form with all RAVEN required input controls on it for testing
-		- As if a widget but not actual widget api calls yet so can expand this form later and save time
-	- Dirty form check and prevent route leave: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards
-	- Document a release procedure while doing the next step:
-	- Post a dist version up to the dev server so can test with all our devices and note what works and what doesn't
-	- Test initial shell and dummy input form on all devices including a simple e2e test of some kind to get a start on that aspect
-		- Test as PWA on all devices
+	- Colors
+		- what are the application colors going to be and start using them now.
+	- Widget list component that works with real data
+		- Displays as a smaller item with maybe a count of widgets only that is expandable into a list of widgets
+		- paging, sorting, filtering (by tag), items per page
+			- Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
+		- Each item can be edited if they have the rights or viewed etc by opening into crud component
+			- List should remember where the user was when they go to edit and back again
+			- What to do if they edit?  Refresh the list but keep the same page location?
+	- Widget crud component that works with real data
+		- Dirty form check and prevent route leave: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards
+		- broken rule display 
+	
+	- Release an internal test version to the DEVOPS server
+		- Scrap running it in Docker and go bare metal copying config for running .net apps from ayanova.com server?  
+		- Document the release procedure while doing the next step:
+		- Test with all our devices and note what works and what doesn't and adjust accordingly
+		- Test initial shell and dummy input form on all devices including a simple e2e test of some kind to get a start on that aspect
+			- Test as PWA on all devices
 
 
 - Stage 2 AFTER POSTED TEST ROUND COMPLETED