admin/raven
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2018-11-20 00:42:03 +00:00
parent 645333c910
commit c6a23a02e2
5 changed files with 486 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
app/ayanova/src/components/HelloWorld.vue
View File

@@ -1,84 +1,11 @@
<template> <template>
<v-container> <v-container>
<v-layout <v-layout text-xs-center wrap="">
text-xs-center
wrap
>
<v-flex xs12> <v-flex xs12>
<v-img <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
></v-img>
</v-flex> </v-flex>
<v-flex mb-4> <v-flex mb-4>
<h1 class="display-2 font-weight-bold mb-3"> <h1 class="display-2 font-weight-bold mb-3">Welcome to AyaNova</h1>
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>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </v-container>
@@ -86,58 +13,7 @@
<script> <script>
export default { export default {
data: () => ({ 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"
}
]
})
}; };
</script> </script>

203
app/ayanova/src/components/desertlist.vue Normal file
View File

@@ -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>

257
app/ayanova/src/components/widgetlist.vue Normal file
View File

@@ -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"
// }
// }

4
devdocs/specs/core-ui-design.txt
View File

@@ -117,8 +117,8 @@ LOGO
COLOURS COLOURS
- Canucks colours of course, Blue primary and green secondary. RI already uses them, get the hex codes there. - Canucks colours of course, Blue primary and green secondary. RI already uses them, get the hex codes there.
- No indigo or pastels - No indigo or pastels
- https://material.io/design/color/#color-usage-palettes
- https://www.materialpalette.com/
=-=-=-=-=- =-=-=-=-=-
Ref material kept for new icons possibly: Ref material kept for new icons possibly:

31
devdocs/todo.txt
View File

@@ -1,20 +1,29 @@
# TODO (J.F.C. - Just fucking code it already) # TODO (J.F.C. - Just fucking code it already)
Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQxNTE5NTA5IiwiZXhwIjoiMTU0NDExMTUwOSIsImlzcyI6ImF5YW5vdmEuY29tIiwiaWQiOiIxIiwiYXlhbm92YS9yb2xlcyI6IjE2NDI2In0.aGI1su24D5zWkMDiYPlBx3xfCuQ8qkLdO7b5YPeOPoE Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoiMTU0NTI2MTY3NyIsImlzcyI6ImF5YW5vdmEuY29tIiwiaWQiOiIxIiwiYXlhbm92YS9yb2xlcyI6IjE2NDI2In0.93IjHRXQA9c8Z0U9qcsS73KcbG3HzYWkRzF3LwCB_rY
## IMMEDIATE ITEMS ## IMMEDIATE ITEMS
- Colors
- Loading indicator for xhr stuff - what are the application colors going to be and start using them now.
- The thin line one I saw is pretty skookum - Widget list component that works with real data
- Dummy form with all RAVEN required input controls on it for testing - Displays as a smaller item with maybe a count of widgets only that is expandable into a list of widgets
- As if a widget but not actual widget api calls yet so can expand this form later and save time - paging, sorting, filtering (by tag), items per page
- Dirty form check and prevent route leave: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards - Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
- Document a release procedure while doing the next step: - Each item can be edited if they have the rights or viewed etc by opening into crud component
- Post a dist version up to the dev server so can test with all our devices and note what works and what doesn't - List should remember where the user was when they go to edit and back again
- 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 - What to do if they edit? Refresh the list but keep the same page location?
- Test as PWA on all devices - 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 - Stage 2 AFTER POSTED TEST ROUND COMPLETED