This commit is contained in:
@@ -6,11 +6,298 @@
|
|||||||
data-cy="dataTableFilterControl"
|
data-cy="dataTableFilterControl"
|
||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>{{ columnItem.text }}</v-card-title>
|
<v-card-title>{{ tableColumnData.text }}</v-card-title>
|
||||||
<!-- <v-card-subtitle class="mt-1">sub title text</v-card-subtitle> -->
|
<!-- <v-card-subtitle class="mt-1">sub title text</v-card-subtitle> -->
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
{{ columnItem }}
|
<!-- FILTER CONTROL -->
|
||||||
{{ fieldDefinitions }}
|
<template v-if="editItem.isFilterable">
|
||||||
|
<div class="pt-6">
|
||||||
|
<!-- ******** BUILDER FOR EACH TYPE Tag, decimal,currency, bool, integer, string, datetime ******** -->
|
||||||
|
<!-- NOTE: currently not implemented: TimeSpan=15, seems unsupportable for a filter -->
|
||||||
|
<!-- DATETIME BUILDER -->
|
||||||
|
<!-- Note: date time is a bit unusual in that it presents the date tokens first as it would be the most common choice whereas the other types would do something
|
||||||
|
like that later -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 1">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterToken"
|
||||||
|
:items="selectLists.dateFilterTokens"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<div v-if="editItem.tempFilterToken == '*select*'">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.dateFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
></v-select>
|
||||||
|
<gz-date-time-picker
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
></gz-date-time-picker>
|
||||||
|
</div>
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterToken != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- STRING(text-4, emailaddress-11, http-12, phone-16) BUILDER -->
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
editItem.uiFieldDataType === 4 ||
|
||||||
|
editItem.uiFieldDataType === 11 ||
|
||||||
|
editItem.uiFieldDataType === 12 ||
|
||||||
|
editItem.uiFieldDataType === 16
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.stringFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<v-text-field
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
:clearable="!formState.readOnly"
|
||||||
|
></v-text-field>
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- INTEGER BUILDER -->
|
||||||
|
<!-- Also MemorySize type 14 are integers -->
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
editItem.uiFieldDataType === 5 ||
|
||||||
|
editItem.uiFieldDataType === 14
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.integerFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<v-text-field
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
:clearable="!formState.readOnly"
|
||||||
|
type="number"
|
||||||
|
></v-text-field>
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- BOOL BUILDER -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 6">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.boolFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<v-radio-group
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
row
|
||||||
|
>
|
||||||
|
<v-radio :label="$ay.t('False')" :value="false"></v-radio>
|
||||||
|
<v-radio :label="$ay.t('True')" :value="true"></v-radio>
|
||||||
|
</v-radio-group>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- DECIMAL BUILDER -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 7">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.decimalFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<gz-decimal
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
:clearable="!formState.readOnly"
|
||||||
|
></gz-decimal>
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- CURRENCY BUILDER -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 8">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.decimalFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
<gz-currency
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
:clearable="!formState.readOnly"
|
||||||
|
></gz-currency>
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- TAG BUILDER -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 9">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.tagFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
|
||||||
|
<gz-tag-picker
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
></gz-tag-picker>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- ENUM BUILDER -->
|
||||||
|
<div v-if="editItem.uiFieldDataType === 10">
|
||||||
|
<v-select
|
||||||
|
v-model="editItem.tempFilterOperator"
|
||||||
|
:items="selectLists.enumFilterOperators"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
:label="$ay.t('Filter')"
|
||||||
|
prepend-icon="$ayiFilter"
|
||||||
|
></v-select>
|
||||||
|
|
||||||
|
<v-select
|
||||||
|
v-if="
|
||||||
|
editItem.tempFilterOperator != null &&
|
||||||
|
editItem.tempFilterOperator != '*NOVALUE*' &&
|
||||||
|
editItem.tempFilterOperator != '*HASVALUE*'
|
||||||
|
"
|
||||||
|
v-model="editItem.tempFilterValue"
|
||||||
|
:items="enumSelectionList(editItem.enumType)"
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
></v-select>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
large
|
||||||
|
block
|
||||||
|
v-if="editItem.tempFilterOperator != null"
|
||||||
|
@click="addFilterCondition(item)"
|
||||||
|
><v-icon large>$ayiPlus</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-6">
|
||||||
|
<!-- FILTER LIST -->
|
||||||
|
<template v-if="editItem.filter.items.length > 0">
|
||||||
|
<v-list elevation="2">
|
||||||
|
<v-subheader v-if="editItem.filter.items.length > 1">
|
||||||
|
<!-- AND / OR FILTER CONDITIONS -->
|
||||||
|
<v-radio-group v-model="editItem.filter.any" row>
|
||||||
|
<v-radio
|
||||||
|
:label="$ay.t('GridFilterDialogAndRadioText')"
|
||||||
|
:value="false"
|
||||||
|
></v-radio>
|
||||||
|
<v-radio
|
||||||
|
:label="$ay.t('GridFilterDialogOrRadioText')"
|
||||||
|
:value="true"
|
||||||
|
></v-radio> </v-radio-group
|
||||||
|
></v-subheader>
|
||||||
|
<v-list-item
|
||||||
|
v-for="(filterItem, index) in editItem.filter.items"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title v-text="filtereditItem.display">
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-btn icon @click="removeFilterCondition(item, index)">
|
||||||
|
<v-icon>$ayiTrashAlt</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-list-item-action>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</template>
|
||||||
|
<!-- <v-divider></v-divider>
|
||||||
|
{{ item }} -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-btn text @click="close()" color="primary">{{
|
<v-btn text @click="close()" color="primary">{{
|
||||||
@@ -30,8 +317,9 @@ export default {
|
|||||||
isVisible: false,
|
isVisible: false,
|
||||||
resolve: null,
|
resolve: null,
|
||||||
reject: null,
|
reject: null,
|
||||||
columnItem: {},
|
tableColumnData: {},
|
||||||
fieldDefinitions: [],
|
fieldDefinitions: [],
|
||||||
|
editItem: {},
|
||||||
selectLists: {
|
selectLists: {
|
||||||
dateFilterOperators: [],
|
dateFilterOperators: [],
|
||||||
dateFilterTokens: [],
|
dateFilterTokens: [],
|
||||||
@@ -47,8 +335,8 @@ export default {
|
|||||||
dataListKey: String
|
dataListKey: String
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
open(columnItem) {
|
open(tableColumnData) {
|
||||||
this.columnItem = columnItem;
|
this.tableColumnData = tableColumnData;
|
||||||
this.isVisible = true;
|
this.isVisible = true;
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
this.resolve = resolve;
|
this.resolve = resolve;
|
||||||
@@ -71,7 +359,7 @@ async function initForm(vm) {
|
|||||||
await populateFieldDefinitions(vm);
|
await populateFieldDefinitions(vm);
|
||||||
// await fetchTranslatedFieldNames(vm);
|
// await fetchTranslatedFieldNames(vm);
|
||||||
// await setEffectiveListView(vm);
|
// await setEffectiveListView(vm);
|
||||||
// await initDataObject(vm);
|
await initEditItem(vm);
|
||||||
// await fetchEnums(vm);
|
// await fetchEnums(vm);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -344,4 +632,48 @@ function populateSelectionLists(vm) {
|
|||||||
]
|
]
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
////////////////////
|
||||||
|
//
|
||||||
|
function initEditItem(vm) {
|
||||||
|
if (vm.fieldDefinitions == null) {
|
||||||
|
throw new Error(
|
||||||
|
"ay-data-list::initEditItem - fieldDefinitions are not set"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let fld = vm.fieldDefinitions.find(z => z.fieldKey == tableColumnData.fk);
|
||||||
|
let o = {
|
||||||
|
key: fld.fieldKey,
|
||||||
|
isFilterable: fld.isFilterable,
|
||||||
|
enumType: fld.enumType,
|
||||||
|
uiFieldDataType: fld.uiFieldDataType,
|
||||||
|
isCustomField: fld.isCustomField,
|
||||||
|
filter: lveditItem.filter || { any: false, items: [] },
|
||||||
|
tempFilterOperator: null,
|
||||||
|
tempFilterToken: null,
|
||||||
|
tempFilterValue: null
|
||||||
|
};
|
||||||
|
|
||||||
|
//If it's a tag and it's not been set yet it needs to have an empty array to stat with for the picker
|
||||||
|
if (o.uiFieldDataType == 9 && o.tempFilterValue == null) {
|
||||||
|
o.tempFilterValue = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
//Add display text for filter item (same as in addFilterCondition)
|
||||||
|
for (let j = 0; j < o.filter.items.length; j++) {
|
||||||
|
let fi = o.filter.items[j];
|
||||||
|
fi.display = getDisplayForFilter(
|
||||||
|
vm,
|
||||||
|
o.uiFieldDataType,
|
||||||
|
fi.op,
|
||||||
|
fi.value,
|
||||||
|
o.enumType
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
vm.editItem = o;
|
||||||
|
|
||||||
|
//eoc
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user