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

@@ -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
+todo: DataList view and filter are combined and this is wrong
-	The current filter if any applied fights with the meta filter and in many cases would block it completely
+	View should be something changed rarely and static as how people like it
-	This way they can save it as a common filter if they want and 
+		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?

ayanova/src/components/gz-data-table.vue

@@ -2,6 +2,7 @@
   <div>
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
     <v-card>
+      {{ dataTablePagingOptions }}
       <v-card-title>
         <v-select
           v-model="listViewId"
@@ -39,7 +40,7 @@
           :options.sync="dataTablePagingOptions"
           :server-items-length="totalRecords"
           :loading="loading"
-          :disable-sort="true"
+          multi-sort
           :show-select="showSelect"
           :single-select="singleSelect"
           :footer-props="{
@@ -531,9 +532,12 @@ export default {
       });
     },
     resetListView: function() {
-      console.log("RESET LISTVIEW CALLED");
       let vm = this;
       vm.listViewId = 0;
+      vm.listView = undefined;
+      vm.dataTablePagingOptions.page = 1;
+      saveFormSettings(vm);
+      //needs to show as temp unsaved filter or overridden or something
     },
 
     listViewChanged: async function() {
@@ -610,7 +614,6 @@ export default {
       if (vm.loading) {
         return;
       }
-
       //start with defaults
       let listOptions = {
         DataListKey: vm.dataListKey,
@@ -690,6 +693,11 @@ export default {
     //loadFormSettings(vm);
     vm.loading = false;
     vm.getDataFromApi();
+  },
+  beforeUpdate() {
+    if (this.metaView != null && this.listViewId != 0) {
+      this.resetListView();
+    }
   }
 };
 

ayanova/src/views/inv-part-inventory-transactions.vue

@@ -51,14 +51,7 @@ export default {
         });
       }
       vm.metaView = JSON.stringify(metaFilter);
-      debugger;
-      this.$refs.gzdatatable.resetListView();
-      let refs = vm.$refs;
-      console.log(refs);
-      console.log(refs.gzdatatable);
-      // console.log("FLIPPING resetlistview", vm.$refs.gzdatatable);
      
-      //vm.$refs.gzdatatable.resetListView();
     }
 
     generateMenu(vm);