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

Browse Source
This commit is contained in:
John Cardinal
2020-02-05 00:47:42 +00:00
parent 07249314c2
commit 7e24102347
2 changed files with 15 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ayanova/devdocs/todo.txt
View File

@@ -48,10 +48,7 @@ CURRENT TODOs
SHELL / NAV / MENUS / LAYOUT
TODO: Mobile view nav on 360px (our smallest supported size) isn't dismissable if you just want to go back to what you were working on
- This is becuase the nav is 350 and 10px isn't enough apparently to click on
- Maybe decrease the nav slightly
TODO: Make sure scroll position is respected and saved when editing a widget and coming back to the list
TODO: toolbar above grid for filters, refresh etc (make it a standard component?)
TODO: main.js filters need to be finished
TODO: SEARCH UI

443
ayanova/src/components/gz-data-table.vue
View File

@@ -90,12 +90,12 @@
>
<template v-slot:header="props">
<!-- Mimic the full width data table select all toggle -->
<div @click="props.toggleSelectAll(!props.everyItem)">
<v-icon v-if="!props.someItems" x-large>far fa-square</v-icon>
<v-icon v-if="props.someItems && !props.everyItem" x-large
<div @click="props.toggleSelectAll(!props.everyItem)" class="pl-2 pt-2">
<v-icon v-if="!props.someItems" large>far fa-square</v-icon>
<v-icon v-if="props.someItems && !props.everyItem" large
>far fa-minus-square</v-icon
>
<v-icon v-if="props.everyItem" x-large>far fa-check-square</v-icon>
<v-icon v-if="props.everyItem" large>far fa-check-square</v-icon>
</div>
</template>
@@ -110,11 +110,6 @@
lg="3"
>
<v-card elevation="4" tile>
<!-- <v-card-title class="subheading font-weight-bold">{{
item.columns.c1.v
}}</v-card-title>
<v-divider></v-divider> -->
<template v-if="showSelect">
<v-card-title class="subheading font-weight-bold">
<v-checkbox
@@ -196,9 +191,7 @@ export default {
records: [],
rowsPerPageItems: [5, 10, 25, 50, 100],
selected: [],
narrowFormat: this.$vuetify.breakpoint.xs,
narrowDataCellColumns: 7,
narrowHeaderCellColumns: 3
narrowFormat: this.$vuetify.breakpoint.xs
};
},
props: {
@@ -232,10 +225,11 @@ export default {
if (newValue.length != oldValue.length) {
this.handleSelectChange();
}
},
"$vuetify.breakpoint.xs": function(value) {
this.narrowFormat = value;
}
// ,
// "$vuetify.breakpoint.xs": function(value) {
// this.narrowFormat = value;
// }
},
methods: {
//Used by narrow view to get the "header" text for a column based on the column key
@@ -256,7 +250,8 @@ export default {
//emit event to parent form of selected rows
//this.$emit("update:selected", this.selected);
//Note that this bubbles up all the columns of all the selected rows
//could be more efficient if it just sends the ID's instead:
//so, to be more efficient for now will just send the ID's until I see a need for other shit
this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
},
@@ -275,20 +270,14 @@ export default {
ltFormat() {
return window.$gz.locale.format();
},
// mini() {
// //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
// return this.$vuetify.breakpoint.xs;
// },
getDataFromApi() {
//debugger;
var that = this;
//DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1&mini=true
getDataFromApi() {
var that = this;
//start with defaults
var listOptions = {
DataListKey: that.dataListKey,
Limit: 100,
Limit: 5,
Offset: 0
};
//calculate paging based on settings
@@ -302,12 +291,6 @@ export default {
if (that.dataFilterId != 0) {
listOptions["DataFilterID"] = that.dataFilterId;
}
//Mini?
//OK, seems as though the datatable has a built in ability to handle small viewports by displaying each record vertically instead so maybe I only need
//mini for picklists
// if (that.$vuetify.breakpoint.xs) {
// listOptions["Mini"] = true;
// }
that.loading = true;
@@ -373,21 +356,7 @@ function buildHeaders(columnData) {
h.value = "columns.c" + i.toString(); //+".v";
ret.push(h);
}
/*
{https://vuetifyjs.com/en/components/data-tables#api see headers property for this info:
text: string
value: string
align?: 'start' | 'center' | 'end'
sortable?: boolean
filterable?: boolean
divider?: boolean
class?: string | string[]
width?: string | number
filter?: (value: any, search: string, item: any) => boolean
sort?: (a: any, b: any) => number
}
*/
return ret;
}
@@ -461,20 +430,6 @@ function buildRecords(listData, columndefinitions, filters) {
return ret;
}
/*UiDataTypes
NoType = 0,
DateTime = 1,
Date = 2,
Time = 3,
Text = 4,
Integer = 5,
Bool = 6,
Decimal = 7,
Currency = 8,
Tags = 9,
Enum = 10,
EmailAddress = 11
*/
//////////////////////////////////////////////////////////
//
// Ensures column names are present in locale table
@@ -499,374 +454,4 @@ async function fetchLocalizedHeaderNames(columnData) {
window.$gz.errorHandler.handleFormError(err);
});
}
//DataTable component
//https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
/*
TODO:
This handles fetching and displaying the data, the parent form handles all other aspects:
- error message display
- opening items
- selecting filters and adding editing templates
What is required to be sent to server:
- example full request: DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1
- example mini request: DataList/list?DataListKey=TestWidgetDataList&Offset=0&Limit=999&DataFilterId=1&mini=true
- Offset
- Limit
- DatafilterId
- mini=true if XS otherwise nothing
What it needs from it's parent form:
- form key for saving / getting persistent grid settings
- api list url (maybe, or if all from datalist then no)
- DataListKey value
- filter id
- refresh command
- rows per page
What it needs to provide TO it's parent form
- Custom event for this: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
- Item click info to trigger opening edit form
- Selected items list for mass ops
- error event and message in case of server error or other error so parent can handle it
- Grid is responsible ONLY for showing data, nothing else
What will be delivered by the server:
Example request: http://localhost:7575/api/v8/DataList/List?Offset=2&Limit=2&DataListKey=TestWidgetDataList
Full response object:
{
"data": [
[
{
"v": 3
},
{
"v": "Handcrafted Fresh Keyboard 27",
"i": 3
},
{
"v": 3
},
{
"v": 697.34
},
{
"v": 128
},
{
"v": "2020-01-28T12:10:46.212435Z"
},
{
"v": true
},
{
"v": "Doug Effertz 17 - OpsAdminFull",
"i": 18
}
],
[
{
"v": 4
},
{
"v": "Unbranded Fresh Shoes 28",
"i": 4
},
{
"v": 4
},
{
"v": 219.09
},
{
"v": 16
},
{
"v": "2020-01-28T12:33:14.347243Z"
},
{
"v": true
},
{
"v": "Samuel Powlowski 14 - CustomerLimited",
"i": 15
}
]
],
"paging": {
"count": 100,
"offset": 2,
"limit": 2,
"first": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=1&pageSize=2",
"previous": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=1&pageSize=2",
"next": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=3&pageSize=2",
"last": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&pageNo=50&pageSize=2"
},
"columns": [
{
"cm": "df",
"dt": 0,
"ay": 2
},
{
"cm": "WidgetName",
"dt": 4,
"ay": 2
},
{
"cm": "WidgetSerial",
"dt": 5
},
{
"cm": "WidgetDollarAmount",
"dt": 8
},
{
"cm": "WidgetRoles",
"dt": 10
},
{
"cm": "WidgetStartDate",
"dt": 1
},
{
"cm": "Active",
"dt": 6
},
{
"cm": "User",
"dt": 4,
"ay": 3
}
]
}
MINI Response object:
{
"data": [
[
{
"v": 3
},
{
"v": "Handmade Soft Towels 27",
"i": 3
},
{
"v": 3
}
],
[
{
"v": 4
},
{
"v": "Handcrafted Cotton Cheese 28",
"i": 4
},
{
"v": 4
}
]
],
"paging": {
"count": 100,
"offset": 2,
"limit": 2,
"first": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=1&pageSize=2",
"previous": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=1&pageSize=2",
"next": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=3&pageSize=2",
"last": "http://localhost:7575/api/v8/DataList/List?DataListKey=TestWidgetDataList&Mini=True&pageNo=50&pageSize=2"
},
"columns": [
{
"cm": "df",
"dt": 0,
"ay": 2
},
{
"cm": "Widget",
"dt": 4,
"ay": 2
}
]
}
What this grid needs to do:
- On created or refresh or change of filter
- set Loading property to true on data object
- send the get request to the server based on filter, viewport etc
- On receipt of successful response
- update the paging values
- update the persistent form settings with the current grid selections for paging etc
- generate the column headers
- They will have locale keys so this grid fetches the keys as necessary at this point as it could change dynamically almost
- Generate the Item slot template (which I've never done in code before but only in the template itself so needs research)
- set the property names in the incoming data to the correct matching headers
- set display filters based on locale settings (i.e. currency, datetime filter which converts to local time offset etc)
- fill the rows
- format?
- On fail
- Do something
- set loading property to false
TODO:
- Start coding grid here with vue component parameters and handlers first and in conjunction with test-widgets.vue
- Once it's parent / component properties are set then get into the details
Headers: [
{
"text": "Name",
"value": "c1" }, {
"text": "Serial #",
"value": "c2" }, { "text": "Price", "value": "c3" }, { "text": "Roles", "value": "c4" }, { "text": "Start", "value": "c5" }, { "text": "Active", "value": "c6" }, { "text": "User", "value": "c7" } ]
Records: [ { "c1": "Awesome Steel Table 25", "c2": 1, "c3": 676.64, "c4": 0, "c5": "2020-01-28T16:50:29.371098Z", "c6": true, "c7": "Cameron Marvin 1 - BizAdminLimited" }, { "c1": "Fantastic Concrete Soap 26", "c2": 2, "c3": 310.6, "c4": 32768, "c5": "2020-01-28T15:56:47.362545Z", "c6": true, "c7": "Becky Parker 9 - TechFull" }, { "c1": "Handmade Soft Towels 27", "c2": 3, "c3": 463.7, "c4": 8, "c5": "2020-01-28T16:55:51.487005Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Handcrafted Cotton Cheese 28", "c2": 4, "c3": 934.95, "c4": 1, "c5": "2020-01-28T16:55:23.324561Z", "c6": true, "c7": "Zachary Renner 14 - CustomerLimited" }, { "c1": "Refined Concrete Salad 29", "c2": 5, "c3": 758.3, "c4": 32, "c5": "2020-01-28T16:00:46.703856Z", "c6": true, "c7": "Terri Paucek 2 - BizAdminFull" }, { "c1": "Licensed Concrete Chips 30", "c2": 6, "c3": 580.73, "c4": 2048, "c5": "2020-01-28T16:44:29.601375Z", "c6": true, "c7": "Virginia Friesen 17 - OpsAdminFull" }, { "c1": "Handmade Cotton Pants 31", "c2": 7, "c3": 880.37, "c4": 1024, "c5": "2020-01-28T16:43:44.380156Z", "c6": true, "c7": "Bernadette Denesik 12 - SubContractorLimited" }, { "c1": "Refined Cotton Sausages 32", "c2": 8, "c3": 615.32, "c4": 1, "c5": "2020-01-28T16:33:10.667606Z", "c6": true, "c7": "Alberta Gleichner 22 - fr" }, { "c1": "Tasty Soft Hat 33", "c2": 9, "c3": 273.68, "c4": 512, "c5": "2020-01-28T16:19:12.318658Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" }, { "c1": "Refined Frozen Bike 35", "c2": 11, "c3": 538.56, "c4": 32, "c5": "2020-01-28T16:46:25.906627Z", "c6": true, "c7": "Sadie Stehr 15 - CustomerFull" } ]
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'c2', value: 'c2' },
{ text: 'c3 (g)', value: 'c3' },
{ text: 'c4 (g)', value: 'c4' },
{ text: 'c5 (g)', value: 'c5' },
{ text: 'Iron (%)', value: 'c6' },
],
[
{
name: 'Frozen Yogurt',
c2: 159,
c3: 6.0,
c4: 24,
c5: 4.0,
c6: '1%',
},
{
name: 'Ice cream sandwich',
c2: 237,
c3: 9.0,
c4: 37,
c5: 4.3,
c6: '1%',
},
{
name: 'Eclair',
c2: 262,
c3: 16.0,
c4: 23,
c5: 6.0,
c6: '7%',
},
{
name: 'Cupcake',
c2: 305,
c3: 3.7,
c4: 67,
c5: 4.3,
c6: '8%',
},
{
name: 'Gingerbread',
c2: 356,
c3: 16.0,
c4: 49,
c5: 3.9,
c6: '16%',
},
{
name: 'Jelly bean',
c2: 375,
c3: 0.0,
c4: 94,
c5: 0.0,
c6: '0%',
},
{
name: 'Lollipop',
c2: 392,
c3: 0.2,
c4: 98,
c5: 0,
c6: '2%',
},
{
name: 'Honeycomb',
c2: 408,
c3: 3.2,
c4: 87,
c5: 6.5,
c6: '45%',
},
{
name: 'Donut',
c2: 452,
c3: 25.0,
c4: 51,
c5: 4.9,
c6: '22%',
},
{
name: 'KitKat',
c2: 518,
c3: 26.0,
c4: 65,
c5: 7,
c6: '6%',
},
]
},
},
}
MOBILE VIEW
https://github.com/vuetifyjs/vuetify/blob/088a5093ea6396d1ff12e0d62143f89572c667d6/packages/vuetify/src/components/VDataTable/MobileRow.ts
<div class="v-data-table__wrapper">
<table><colgroup><col class=""><col class=""><col class=""><col class=""><col class=""><col class=""></colgroup>
<thead class="v-data-table-header v-data-table-header-mobile"><tr><th><div class="v-data-table-header-mobile__wrapper"><div class="v-input v-input--hide-details v-input--is-focused theme--light v-text-field v-text-field--is-booted v-select primary--text"><div class="v-input__control"><div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-6106" class="v-input__slot"><div class="v-select__slot"><label for="input-6106" class="v-label v-label--active theme--light primary--text" style="left: 0px; right: auto; position: absolute;">Sort by</label><div class="v-select__selections"><input id="input-6106" readonly="readonly" type="text" aria-readonly="true" autocomplete="off"></div><div class="v-input__append-inner"><div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light primary--text"></i></div></div><input type="hidden">
</div><div class="v-menu"><div class="v-menu__content theme--light " style="max-height: 304px; min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div></div></div></div></div></div></th></tr></thead>
<tbody>
<tr class="v-data-table__mobile-table-row">
<td class="v-data-table__mobile-row">
<div class="v-data-table__mobile-row__header">Dessert (100g serving)</div>
<div class="v-data-table__mobile-row__cell">Frozen Yogurt</div>
</td>
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">159</div></td>
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">6</div></td>
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">24</div></td>
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4</div></td>
<td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr>
<tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Ice cream sandwich</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">237</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">37</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">1%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Eclair</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">262</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">23</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">6</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">7%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Cupcake</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">305</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">3.7</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">67</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">4.3</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">8%</div></td></tr><tr class="v-data-table__mobile-table-row"><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Dessert (100g serving)</div><div class="v-data-table__mobile-row__cell">Gingerbread</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Calories</div><div class="v-data-table__mobile-row__cell">356</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Fat (g)</div><div class="v-data-table__mobile-row__cell">16</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Carbs (g)</div><div class="v-data-table__mobile-row__cell">49</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Protein (g)</div><div class="v-data-table__mobile-row__cell">3.9</div></td><td class="v-data-table__mobile-row"><div class="v-data-table__mobile-row__header">Iron (%)</div><div class="v-data-table__mobile-row__cell">16%</div></td>
</tr>
</tbody>
</table>
</div>
Mobile Checkbox row
<td class="v-data-table__mobile-row">
<div class="v-data-table__mobile-row__header"></div>
<div class="v-data-table__mobile-row__cell">
<div class="v-data-table__checkbox v-simple-checkbox">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon notranslate mdi mdi-checkbox-blank-outline theme--light">
</i>
</div>
</div>
</td>
*/
</script>