From bec388f60b37ba510278ad518e736108f79c5f14 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Tue, 26 Jan 2021 19:03:39 +0000 Subject: [PATCH] CHECKPOINT - about to completely re-do much of the datatable object and underlying system, this is the final commit before doing that --- ayanova/devdocs/todo.txt | 111 ++++++++++++++++-- ayanova/src/components/gz-data-table.vue | 14 ++- .../views/inv-part-inventory-transactions.vue | 9 +- 3 files changed, 115 insertions(+), 19 deletions(-) diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt index 9975df69..5e7f4135 100644 --- a/ayanova/devdocs/todo.txt +++ b/ayanova/devdocs/todo.txt @@ -5,9 +5,109 @@ MISC ITEMS THAT CAME UP -todo: DataList if there is a meta filter it should default to no filter first then apply teh meta filter as a temporary filter like if the user had hand selected it - The current filter if any applied fights with the meta filter and in many cases would block it completely - This way they can save it as a common filter if they want and +todo: DataList view and filter are combined and this is wrong + View should be something changed rarely and static as how people like it + or is it? Maybe we need a separate view and filter system from each other but both + Filter should be dynamic and saveable and have multiple variations supported + a forced filter (metaView) should only affect the filter portion, not the view portion + This is why I'm running into issues with the metaview stuff conflicting, it's not done correctly + + What is dynamic and user changes a lot? + Filter, sort order + + PLAN: + SORT + surface in front + use existing multisort UI by enabling "multi-sort" and removing the sort false setting + sort will automatically set the :options.sync="dataTablePagingOptions" and provides the sorted columns and direction (sortBy and sortDesc in arrays) + e.g.: { "page": 1, "itemsPerPage": 10, "sortBy": [ "columns.c0", "columns.c1" ], "sortDesc": [ false, true ], "groupBy": [], "groupDesc": [], "mustSort": false, "multiSort": true } + + FILTER + surface right up front in grid + requires custom functionality + don't take up any UI space more than necessary so one click to open a dialog maybe that can work in any device format + Filter icon beside column name + icon is brighter / highlighted if in effect else grayed / subdued + click on icon opens dialog filter UI for that column with similar UI to current listview filter + maybe a filter type control for each type of field? Or maybe more efficient to just have one with various templates per type + https://github.com/vuetifyjs/vuetify/issues/3102#issuecomment-529046589 + https://www.front.id/en/articles/vuetify-achieve-multiple-filtering-data-table-component + + COLUMN ORDER AND VISIBLITY + set column order and visibility in back + Saves as a personal default at the server but easily reverted to server default + Removed columns don't filter or sort! + make sure non visible columns are removed from any saved filter or sort + + PROGRAMATTIC FILTER + DataTable accepts external filter on the fly and replaces internal filter with provided filter but *does not* change the view or sort settings + View doesn't change when on the fly filter applied from another form only the filter changes + + DATA / OBJECTS + # ListView FORMAT SERVER and CLIENT + Current listview is a monolithic object combining filter and sort and column choice + todo: Change the listview object format and separate the items so go from this: + { + offset: 0, + limit: 10, + dataListKey: "PartInventoryTransactionsDataList", + listView: [ + { + fld: "PartInventoryTransactionEntryDate", + sort: "-" + }, + { + fld: "PartPartNumber", + filter: { + items: [ + { + op: "=", + value: "400735" + } + ] + } + }, + { + fld: "PartWarehouseName" + }, + { + fld: "PartInventoryTransactionQuantity" + }, + { + fld: "PartInventoryTransactionDescription" + }, + { + fld: "PartInventoryTransactionSource" + }, + { + fld: "PartInventoryBalance" + } + ] + } + + TO THIS: + { + offset: 0, + limit: 10, + dataListKey: "PartInventoryTransactionsDataList", + columns:["PartInventoryTransactionEntryDate","PartPartNumber","PartWarehouseName","PartInventoryTransactionQuantity","PartInventoryTransactionDescription","PartInventoryTransactionSource","PartInventoryBalance"] + sortBy:["PartInventoryTransactionEntryDate"],//same as grid natively does all columns here + sortDesc:[true]//same as grid natively does, all columns here true or false each + filter:[{column:"PartPartNumber",items:[{op: "=",value: "400735"}]}] + } + + # METAVIEW + This is intended to override the filter at client but it was in conjunction with existing filter which is problematic + todo: remove metaview entirely at both ends + new system above has one filter and it's replaced by the old metaview so will this be ok or will it be an issue because something already written needs both? + probably not but check + + + + + + + todo: DataList - there are a bunch of props being set that don't exist, for example currentListViewId, dataListFilter, dataListSort remove them with impunity @@ -37,11 +137,6 @@ todo: select list templates in admin global settings doesn't show the list of ob todo: foreign keys are not indexed by default in the referencing table (the one who references) take a look and see if any should be indexed when doing above -todo: It's a bit of a pain to filter a grid when trying to just find something quickly - consider some kind of quick filter method for when you want to quickly filter a datalist column - Maybe a v.next feature but it would be spiffy if the grid filter was something very quick to set for quickly finding stuff - i.e. a single conditoin filter box above a column for that type to filter by that type (datetimepicker or text input) that goes into the regular filter - or a way to pick an item out of a list to "drill down" on it so a little UI widget beside a text field for example that you click on to only include that text field todo: PickList controller route, how can I document the params into the api explorer? do I need a reference link to the class? diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue index f9ea2fcc..29a5026f 100644 --- a/ayanova/src/components/gz-data-table.vue +++ b/ayanova/src/components/gz-data-table.vue @@ -2,6 +2,7 @@
+ {{ dataTablePagingOptions }}