From 82214374408b1c7d5393882d919fd69ab1df5084 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Wed, 29 Jan 2020 00:48:56 +0000 Subject: [PATCH] --- ayanova/devdocs/todo.txt | 8 +- ayanova/src/components/gz-data-table.vue | 187 ++++++++++++++++++++--- 2 files changed, 169 insertions(+), 26 deletions(-) diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt index efcb2b8f..8a499208 100644 --- a/ayanova/devdocs/todo.txt +++ b/ayanova/devdocs/todo.txt @@ -48,16 +48,12 @@ CURRENT TODOs SHELL / NAV / MENUS / LAYOUT -CLIENT PROJECT CUSTOM FIELDS CHANGE - - Must use numeric instead of text values now for field types - - Additional NUMBER is split now between integer and decimal types update control STEP value for inputs to include decimal places or none depending on type - - TODO: GRIDS - MAKE GRID AS GENERIC VUE COMPONENT - See gz-data-table.vue notes in component comments for it's own todo's + - See test-widgets.vue for parent container that hosts control and get devving!! - MUST HANDLE HIDDEN FIELDS AND NOT DISPLAY (this is also a server issue) - Grid does *NOT* have sort indicators or controls, that's behind the grid in the filter UI, this is necessary for reasons I forget @@ -85,6 +81,8 @@ TODO: GRIDS - Modify the grid to no longer use mock values but real ones instead and test + + TODO: MAKE COMPONENT Select lists and filtering by tag "select-search-filter-control" - Implement it as a component with built in searching and tag selection that is sticky by individual form item - this is an important crucial item and needs to be easy and clean diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue index d8f6ec77..b3040fc7 100644 --- a/ayanova/src/components/gz-data-table.vue +++ b/ayanova/src/components/gz-data-table.vue @@ -22,18 +22,19 @@ This handles fetching and displaying the data, the parent form handles all other - selecting filters and adding editing templates What is required to be sent to server: - - example full request http://localhost:7575/api/v8/Widget/ListWidgets?Offset=1&Limit=12&DataFilterId=122&vp=xs - - api list url - - "Widget/ListWidgets" + - 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 - - Viewport if XS otherwise nothing + - mini=true if XS otherwise nothing - What it needs from it's parent form: + +What it needs from it's parent form: - form key for saving / getting persistent grid settings - - api list url + - api list url (maybe, or if all from datalist then no) + - DataListKey value - filter id - refresh command - rows per page @@ -46,11 +47,164 @@ What it needs to provide TO it's parent form What will be delivered by the server: - - a response object like this: +Example request: http://localhost:7575/api/v8/DataList/List?Offset=2&Limit=2&DataListKey=TestWidgetDataList +Full response object: { - "data": [ ...all rows here ... ] , - "paging": { ...paging data... }, - "columns":{ ...column definitions .... } + "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: @@ -74,18 +228,9 @@ What this grid needs to do: TODO: - - Modify server widgetlist route: - + - 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 - - Modify route to accept mini paramenter for small viewport (OR maybe something less tied to physical screen size, i.e. it's a single column so maybe that like format=compact) - - Add mock column data and include it in the response for grid queries - - modify server to return alternate list of just names and id's if vp paramenter is present and xs (may be other values in future so check for xs specifically) - - this route could actually be just a defined c# object since it's always going to be one column and one id like namevalue list - - full width all columns though would be different kettle of fish entirely so this is a good time to experiment and figure it out - - not sure if right time but also need to modify server return to hide hidden columns which we have working code for already for widgets to hide them so yay? - - Also custom fields, or is that a template issue? - - - Start coding grid here with vue component parameters and handlers first and work down into detailed items once they are all in place between parent and here */ export default {