This commit is contained in:
@@ -11,11 +11,31 @@ LISTVIEW REPLACE CURRENT <----HERE not THERE ---v
|
|||||||
(below this is all past for reference)
|
(below this is all past for reference)
|
||||||
FILTER
|
FILTER
|
||||||
Very similar to columnview in that it's saved at the server then triggers a refresh and server handles from local copy
|
Very similar to columnview in that it's saved at the server then triggers a refresh and server handles from local copy
|
||||||
Client needs to send current local time and date to server with list request so it can apply relative date filters
|
/*
|
||||||
Server accepts request clientnow,listview,filterid and applies any relative filter calcs in sqlWhere generator at server
|
OLD EXAMPLE:
|
||||||
|
{"offset":0,"limit":10,"dataListKey":"CustomerDataList",
|
||||||
|
"listView":"[
|
||||||
|
{\"fld\":\"customername\",\"sort\":\"+\",\"filter\":{\"items\":[{\"op\":\"=\",\"value\":\"dfdfdf\"},{\"op\":\"=\",\"value\":\"3333\"}],\"any\":true}},
|
||||||
|
{\"fld\":\"customerphone1\",\"filter\":{\"items\":[{\"op\":\">\",\"value\":\"44444\"},
|
||||||
|
{\"op\":\"<\",\"value\":\"7777\"}]}},
|
||||||
|
{\"fld\":\"customeremail\"}
|
||||||
|
{\"fld\":\"customerheadoffice\"},
|
||||||
|
{\"fld\":\"customertags\",\"sort\":\"+\"}]"}
|
||||||
|
|
||||||
|
NEW:
|
||||||
|
columns:["PartInventoryTransactionEntryDate","PartPartNumber","PartWarehouseName","PartInventoryTransactionQuantity","PartInventoryTransactionDescription","PartInventoryTransactionSource","PartInventoryBalance"]
|
||||||
|
sortBy:[{"PartInventoryTransactionEntryDate":"-"}],//All sorted columns here as keyvalue pairs value is a string of "+" for ascending "-" for descending and are IN ORDER of how to be sorted
|
||||||
|
filter:[{column:"PartPartNumber",any:true/false,items:[{op: "=",value: "400735"}]}],
|
||||||
|
clientCriteria:"2" //could be anything here that makes sense to the list, in this case an example customer id for customernotedatalist
|
||||||
|
|
||||||
|
columns are represented in a higher level object DataListTableOptions
|
||||||
|
sort and filter are in here
|
||||||
|
|
||||||
|
columns and sort are a singleton per datalistkey,userid persisted automatically (no alternative "views" just one of these). User can set them or reset them to default.
|
||||||
|
filter is different: user can persist a filter by name for future selection, sharing with others (public). The default filter is no filter.
|
||||||
|
*/
|
||||||
TODO (round 1):
|
TODO (round 1):
|
||||||
SERVER
|
|
||||||
DataListSqlFilterCriteriaBuilder - modify to handle date tokens using client timestamp (old filter code already put back in comment form)
|
|
||||||
CLIENT
|
CLIENT
|
||||||
Implement filter UI to construct local filter object that is temporary and stored in session state
|
Implement filter UI to construct local filter object that is temporary and stored in session state
|
||||||
doesn't have to do anything specific yet, just handles the filtering into an object for the next stage
|
doesn't have to do anything specific yet, just handles the filtering into an object for the next stage
|
||||||
@@ -26,6 +46,9 @@ LISTVIEW REPLACE CURRENT <----HERE not THERE ---v
|
|||||||
Needs also to show a filter beside "headings" which are filtered so it's known
|
Needs also to show a filter beside "headings" which are filtered so it's known
|
||||||
Or maybe if it's not too ugly filter on each one, nahh theres no room I think
|
Or maybe if it's not too ugly filter on each one, nahh theres no room I think
|
||||||
|
|
||||||
|
SERVER
|
||||||
|
DataListSqlFilterCriteriaBuilder - modify to handle date tokens using client timestamp (old filter code already put back in comment form)
|
||||||
|
|
||||||
TODO (round 2):
|
TODO (round 2):
|
||||||
Send to server (as unsaved filter, not dealing with saving just yet) with datalist request and get back filtered data
|
Send to server (as unsaved filter, not dealing with saving just yet) with datalist request and get back filtered data
|
||||||
|
|
||||||
|
|||||||
52
ayanova/src/components/data-table-filter-control.vue
Normal file
52
ayanova/src/components/data-table-filter-control.vue
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<v-dialog
|
||||||
|
v-model="isVisible"
|
||||||
|
@keydown.esc="close()"
|
||||||
|
data-cy="dataTableFilterControl"
|
||||||
|
>
|
||||||
|
{{ headerItem }}
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
async created() {
|
||||||
|
await initForm(this);
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
isVisible: false,
|
||||||
|
resolve: null,
|
||||||
|
reject: null,
|
||||||
|
headerItem: {}
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
open(headerItem) {
|
||||||
|
this.headerItem = headerItem;
|
||||||
|
this.isVisible = true;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.resolve = resolve;
|
||||||
|
this.reject = reject;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
close(ret) {
|
||||||
|
this.isVisible = false;
|
||||||
|
|
||||||
|
this.resolve(ret);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/////////////////////////////////
|
||||||
|
//
|
||||||
|
//
|
||||||
|
async function initForm(vm) {
|
||||||
|
//await fetchTranslatedText(vm);
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////
|
||||||
|
//
|
||||||
|
// Ensures UI translated text is available
|
||||||
|
//
|
||||||
|
async function fetchTranslatedText(vm) {
|
||||||
|
await window.$gz.translation.cacheTranslations(["TimeStamp", "ID", "Status"]);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
|
<gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
|
||||||
|
<gz-data-table-filter :dataListKey="dataListKey" ref="dataTableFilter">
|
||||||
|
</gz-data-table-filter>
|
||||||
<v-card>
|
<v-card>
|
||||||
<!-- {{ dataTablePagingOptions }}
|
<!-- {{ dataTablePagingOptions }}
|
||||||
{{ headers }} -->
|
{{ headers }} -->
|
||||||
@@ -511,8 +513,12 @@ export default {
|
|||||||
}
|
}
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
filter(item) {
|
async filter(item) {
|
||||||
console.log("filter:", item);
|
// console.log("filter:", item);
|
||||||
|
let res = await this.$refs.dataTableFilter.open(item);
|
||||||
|
if (res && res.refresh == true) {
|
||||||
|
this.getDataFromApi();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
filterColor(item) {
|
filterColor(item) {
|
||||||
let clr = "disabled";
|
let clr = "disabled";
|
||||||
|
|||||||
@@ -39,6 +39,7 @@ import timeControl from "./components/time-control.vue";
|
|||||||
import tagPicker from "./components/tag-picker.vue";
|
import tagPicker from "./components/tag-picker.vue";
|
||||||
import pickList from "./components/pick-list.vue";
|
import pickList from "./components/pick-list.vue";
|
||||||
import dataTable from "./components/data-table.vue";
|
import dataTable from "./components/data-table.vue";
|
||||||
|
import dataTableFilterControl from "./components/data-table-filter-control.vue";
|
||||||
import customFieldsControl from "./components/custom-fields-control.vue";
|
import customFieldsControl from "./components/custom-fields-control.vue";
|
||||||
import currencyControl from "./components/currency-control.vue";
|
import currencyControl from "./components/currency-control.vue";
|
||||||
import decimalControl from "./components/decimal-control.vue";
|
import decimalControl from "./components/decimal-control.vue";
|
||||||
@@ -186,6 +187,7 @@ Vue.component("gz-time-picker", timeControl);
|
|||||||
Vue.component("gz-tag-picker", tagPicker);
|
Vue.component("gz-tag-picker", tagPicker);
|
||||||
Vue.component("gz-pick-list", pickList);
|
Vue.component("gz-pick-list", pickList);
|
||||||
Vue.component("gz-data-table", dataTable);
|
Vue.component("gz-data-table", dataTable);
|
||||||
|
Vue.component("gz-data-table-filter", dataTableFilterControl);
|
||||||
Vue.component("gz-custom-fields", customFieldsControl);
|
Vue.component("gz-custom-fields", customFieldsControl);
|
||||||
Vue.component("gz-currency", currencyControl);
|
Vue.component("gz-currency", currencyControl);
|
||||||
Vue.component("gz-decimal", decimalControl);
|
Vue.component("gz-decimal", decimalControl);
|
||||||
|
|||||||
Reference in New Issue
Block a user