This commit is contained in:
@@ -6,11 +6,298 @@
|
||||
data-cy="dataTableFilterControl"
|
||||
>
|
||||
<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-text>
|
||||
{{ columnItem }}
|
||||
{{ fieldDefinitions }}
|
||||
<!-- FILTER CONTROL -->
|
||||
<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-actions>
|
||||
<v-btn text @click="close()" color="primary">{{
|
||||
@@ -30,8 +317,9 @@ export default {
|
||||
isVisible: false,
|
||||
resolve: null,
|
||||
reject: null,
|
||||
columnItem: {},
|
||||
tableColumnData: {},
|
||||
fieldDefinitions: [],
|
||||
editItem: {},
|
||||
selectLists: {
|
||||
dateFilterOperators: [],
|
||||
dateFilterTokens: [],
|
||||
@@ -47,8 +335,8 @@ export default {
|
||||
dataListKey: String
|
||||
},
|
||||
methods: {
|
||||
open(columnItem) {
|
||||
this.columnItem = columnItem;
|
||||
open(tableColumnData) {
|
||||
this.tableColumnData = tableColumnData;
|
||||
this.isVisible = true;
|
||||
return new Promise((resolve, reject) => {
|
||||
this.resolve = resolve;
|
||||
@@ -71,7 +359,7 @@ async function initForm(vm) {
|
||||
await populateFieldDefinitions(vm);
|
||||
// await fetchTranslatedFieldNames(vm);
|
||||
// await setEffectiveListView(vm);
|
||||
// await initDataObject(vm);
|
||||
await initEditItem(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>
|
||||
|
||||
Reference in New Issue
Block a user