|
|
@ -1,32 +1,27 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div |
|
|
|
<div |
|
|
|
class="backgroundColor pa-2 menu-filter-dropdown" |
|
|
|
class="backgroundColor pa-2 menu-filter-dropdown" |
|
|
|
:style="{ width: nested ? '100%' : '530px' }" |
|
|
|
:style="{width:nested ? '100%' : '530px'}" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="grid" @click.stop> |
|
|
|
<div class="grid" @click.stop> |
|
|
|
<template v-for="(filter, i) in filters" dense> |
|
|
|
<template v-for="(filter,i) in filters" dense> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<div |
|
|
|
<div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding:6px" class="elevation-4 "> |
|
|
|
v-if="filter.is_group" |
|
|
|
<div class="d-flex" style="gap:6px; padding: 0 6px"> |
|
|
|
:key="i" |
|
|
|
|
|
|
|
style="grid-column: span 4; padding: 6px" |
|
|
|
|
|
|
|
class="elevation-4" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div class="d-flex" style="gap: 6px; padding: 0 6px"> |
|
|
|
|
|
|
|
<v-icon |
|
|
|
<v-icon |
|
|
|
v-if="!filter.readOnly" |
|
|
|
v-if="!filter.readOnly" |
|
|
|
:key="i + '_3'" |
|
|
|
:key="i + '_3'" |
|
|
|
small |
|
|
|
small |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
@click.stop="deleteFilter(filter,i)" |
|
|
|
> |
|
|
|
> |
|
|
|
mdi-close-box |
|
|
|
mdi-close-box |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
|
<span v-else :key="i + '_1'" /> |
|
|
|
<span v-else :key="i + '_1'" /> |
|
|
|
<v-select |
|
|
|
<v-select |
|
|
|
v-model="filter.logical_op" |
|
|
|
v-model="filter.logical_op" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption " |
|
|
|
:items="['and', 'or']" |
|
|
|
:items="['and' ,'or']" |
|
|
|
solo |
|
|
|
solo |
|
|
|
flat |
|
|
|
flat |
|
|
|
dense |
|
|
|
dense |
|
|
@ -35,7 +30,7 @@ |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #item="{ item }"> |
|
|
|
<template #item="{item}"> |
|
|
|
<span class="caption font-weight-regular">{{ item }}</span> |
|
|
|
<span class="caption font-weight-regular">{{ item }}</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</v-select> |
|
|
|
</v-select> |
|
|
@ -61,7 +56,7 @@ |
|
|
|
:key="i + '_3'" |
|
|
|
:key="i + '_3'" |
|
|
|
small |
|
|
|
small |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
@click.stop="deleteFilter(filter,i)" |
|
|
|
> |
|
|
|
> |
|
|
|
mdi-close-box |
|
|
|
mdi-close-box |
|
|
|
</v-icon> |
|
|
|
</v-icon> |
|
|
@ -70,15 +65,14 @@ |
|
|
|
v-if="!i" |
|
|
|
v-if="!i" |
|
|
|
:key="i + '_2'" |
|
|
|
:key="i + '_2'" |
|
|
|
class="caption d-flex align-center" |
|
|
|
class="caption d-flex align-center" |
|
|
|
>{{ $t("labels.where") }}</span |
|
|
|
>{{ $t('labels.where') }}</span> |
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-select |
|
|
|
<v-select |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:key="i + '_4'" |
|
|
|
:key="i + '_4'" |
|
|
|
v-model="filter.logical_op" |
|
|
|
v-model="filter.logical_op" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption " |
|
|
|
:items="['and', 'or']" |
|
|
|
:items="['and' ,'or']" |
|
|
|
solo |
|
|
|
solo |
|
|
|
flat |
|
|
|
flat |
|
|
|
dense |
|
|
|
dense |
|
|
@ -87,7 +81,7 @@ |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #item="{ item }"> |
|
|
|
<template #item="{item}"> |
|
|
|
<span class="caption font-weight-regular">{{ item }}</span> |
|
|
|
<span class="caption font-weight-regular">{{ item }}</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</v-select> |
|
|
|
</v-select> |
|
|
@ -108,7 +102,7 @@ |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #item="{ item }"> |
|
|
|
<template #item="{item}"> |
|
|
|
<span |
|
|
|
<span |
|
|
|
:class="`caption font-weight-regular nc-filter-fld-${item.title}`" |
|
|
|
:class="`caption font-weight-regular nc-filter-fld-${item.title}`" |
|
|
|
> |
|
|
|
> |
|
|
@ -119,12 +113,12 @@ |
|
|
|
<v-select |
|
|
|
<v-select |
|
|
|
:key="'k' + i" |
|
|
|
:key="'k' + i" |
|
|
|
v-model="filter.comparison_op" |
|
|
|
v-model="filter.comparison_op" |
|
|
|
class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select" |
|
|
|
class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select" |
|
|
|
:items="filterComparisonOp(filter)" |
|
|
|
:items="filterComparisonOp(filter)" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
solo |
|
|
|
solo |
|
|
|
flat |
|
|
|
flat |
|
|
|
style="max-width: 120px" |
|
|
|
style="max-width:120px" |
|
|
|
dense |
|
|
|
dense |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
@ -132,18 +126,11 @@ |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
@change="filterUpdateCondition(filter, i)" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #item="{ item }"> |
|
|
|
<template #item="{item}"> |
|
|
|
<span class="caption font-weight-regular">{{ item.text }}</span> |
|
|
|
<span class="caption font-weight-regular">{{ item.text }}</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</v-select> |
|
|
|
</v-select> |
|
|
|
<span |
|
|
|
<span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="'span' + i" /> |
|
|
|
v-if=" |
|
|
|
|
|
|
|
['null', 'notnull', 'empty', 'notempty'].includes( |
|
|
|
|
|
|
|
filter.comparison_op |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
:key="'span' + i" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<v-checkbox |
|
|
|
<v-checkbox |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
:key="i + '_7'" |
|
|
|
:key="i + '_7'" |
|
|
@ -170,20 +157,26 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<v-btn small class="elevation-0 grey--text my-3" @click.stop="addFilter"> |
|
|
|
<v-btn |
|
|
|
<v-icon small color="grey"> mdi-plus </v-icon> |
|
|
|
small |
|
|
|
|
|
|
|
class="elevation-0 grey--text my-3" |
|
|
|
|
|
|
|
@click.stop="addFilter" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<v-icon small color="grey"> |
|
|
|
|
|
|
|
mdi-plus |
|
|
|
|
|
|
|
</v-icon> |
|
|
|
<!-- Add Filter --> |
|
|
|
<!-- Add Filter --> |
|
|
|
{{ $t("activity.addFilter") }} |
|
|
|
{{ $t('activity.addFilter') }} |
|
|
|
</v-btn> |
|
|
|
</v-btn> |
|
|
|
<slot /> |
|
|
|
<slot /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes"; |
|
|
|
import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "ColumnFilter", |
|
|
|
name: 'ColumnFilter', |
|
|
|
props: { |
|
|
|
props: { |
|
|
|
fieldList: [Array], |
|
|
|
fieldList: [Array], |
|
|
|
meta: Object, |
|
|
|
meta: Object, |
|
|
@ -192,298 +185,269 @@ export default { |
|
|
|
viewId: String, |
|
|
|
viewId: String, |
|
|
|
shared: Boolean, |
|
|
|
shared: Boolean, |
|
|
|
webHook: Boolean, |
|
|
|
webHook: Boolean, |
|
|
|
hookId: String, |
|
|
|
hookId: String |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: () => ({ |
|
|
|
data: () => ({ |
|
|
|
filters: [], |
|
|
|
filters: [], |
|
|
|
opList: [ |
|
|
|
opList: [ |
|
|
|
"is equal", |
|
|
|
'is equal', 'is not equal', 'is like', 'is not like', |
|
|
|
"is not equal", |
|
|
|
|
|
|
|
"is like", |
|
|
|
|
|
|
|
"is not like", |
|
|
|
|
|
|
|
// 'is empty', 'is not empty', |
|
|
|
// 'is empty', 'is not empty', |
|
|
|
"is null", |
|
|
|
'is null', 'is not null', |
|
|
|
"is not null", |
|
|
|
'>', |
|
|
|
">", |
|
|
|
'<', |
|
|
|
"<", |
|
|
|
'>=', |
|
|
|
">=", |
|
|
|
'<=' |
|
|
|
"<=", |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
comparisonOp: [ |
|
|
|
comparisonOp: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is equal", |
|
|
|
text: 'is equal', |
|
|
|
value: "eq", |
|
|
|
value: 'eq' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is not equal", |
|
|
|
text: 'is not equal', |
|
|
|
value: "neq", |
|
|
|
value: 'neq' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is like", |
|
|
|
text: 'is like', |
|
|
|
value: "like", |
|
|
|
value: 'like' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is not like", |
|
|
|
text: 'is not like', |
|
|
|
value: "nlike", |
|
|
|
value: 'nlike' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is empty", |
|
|
|
text: 'is empty', |
|
|
|
value: "empty", |
|
|
|
value: 'empty', |
|
|
|
ignoreVal: true, |
|
|
|
ignoreVal: true |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is not empty", |
|
|
|
text: 'is not empty', |
|
|
|
value: "notempty", |
|
|
|
value: 'notempty', |
|
|
|
ignoreVal: true, |
|
|
|
ignoreVal: true |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is null", |
|
|
|
text: 'is null', |
|
|
|
value: "null", |
|
|
|
value: 'null', |
|
|
|
ignoreVal: true, |
|
|
|
ignoreVal: true |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "is not null", |
|
|
|
text: 'is not null', |
|
|
|
value: "notnull", |
|
|
|
value: 'notnull', |
|
|
|
ignoreVal: true, |
|
|
|
ignoreVal: true |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: ">", |
|
|
|
text: '>', |
|
|
|
value: "gt", |
|
|
|
value: 'gt' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "<", |
|
|
|
text: '<', |
|
|
|
value: "lt", |
|
|
|
value: 'lt' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: ">=", |
|
|
|
text: '>=', |
|
|
|
value: "gte", |
|
|
|
value: 'gte' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
text: "<=", |
|
|
|
text: '<=', |
|
|
|
value: "lte", |
|
|
|
value: 'lte' |
|
|
|
}, |
|
|
|
} |
|
|
|
], |
|
|
|
] |
|
|
|
}), |
|
|
|
}), |
|
|
|
computed: { |
|
|
|
computed: { |
|
|
|
columnsById() { |
|
|
|
columnsById() { |
|
|
|
return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {}); |
|
|
|
return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
autoApply() { |
|
|
|
autoApply() { |
|
|
|
return this.$store.state.windows.autoApplyFilter && !this.webHook; |
|
|
|
return this.$store.state.windows.autoApplyFilter && !this.webHook |
|
|
|
}, |
|
|
|
}, |
|
|
|
columns() { |
|
|
|
columns() { |
|
|
|
return ( |
|
|
|
return (this.meta && this.meta.columns.filter(c => c && (!c.colOptions || !c.system))) |
|
|
|
this.meta && |
|
|
|
|
|
|
|
this.meta.columns.filter((c) => c && (!c.colOptions || !c.system)) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
types() { |
|
|
|
types() { |
|
|
|
if (!this.meta || !this.meta.columns || !this.meta.columns.length) { |
|
|
|
if (!this.meta || !this.meta.columns || !this.meta.columns.length) { |
|
|
|
return {}; |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return this.meta.columns.reduce((obj, col) => { |
|
|
|
return this.meta.columns.reduce((obj, col) => { |
|
|
|
switch (col.uidt) { |
|
|
|
switch (col.uidt) { |
|
|
|
case UITypes.Number: |
|
|
|
case UITypes.Number: |
|
|
|
case UITypes.Decimal: |
|
|
|
case UITypes.Decimal: |
|
|
|
obj[col.title] = obj[col.column_name] = "number"; |
|
|
|
obj[col.title] = obj[col.column_name] = 'number' |
|
|
|
break; |
|
|
|
break |
|
|
|
case UITypes.Checkbox: |
|
|
|
case UITypes.Checkbox: |
|
|
|
obj[col.title] = obj[col.column_name] = "boolean"; |
|
|
|
obj[col.title] = obj[col.column_name] = 'boolean' |
|
|
|
break; |
|
|
|
break |
|
|
|
default: |
|
|
|
default: |
|
|
|
break; |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
return obj; |
|
|
|
return obj |
|
|
|
}, {}); |
|
|
|
}, {}) |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
async viewId(v) { |
|
|
|
async viewId(v) { |
|
|
|
if (v) { |
|
|
|
if (v) { |
|
|
|
await this.loadFilter(); |
|
|
|
await this.loadFilter() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
filters: { |
|
|
|
handler(v) { |
|
|
|
handler(v) { |
|
|
|
this.$emit( |
|
|
|
this.$emit('input', v && v.filter(f => (f.fk_column_id && f.comparison_op) || f.is_group)) |
|
|
|
"input", |
|
|
|
|
|
|
|
v && |
|
|
|
|
|
|
|
v.filter((f) => (f.fk_column_id && f.comparison_op) || f.is_group) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
deep: true |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
created() { |
|
|
|
this.loadFilter(); |
|
|
|
this.loadFilter() |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
filterComparisonOp(f) { |
|
|
|
filterComparisonOp(f) { |
|
|
|
return this.comparisonOp.filter((op) => { |
|
|
|
return this.comparisonOp.filter((op) => { |
|
|
|
if ( |
|
|
|
if (f && f.fk_column_id && this.columnsById[f.fk_column_id] && |
|
|
|
f && |
|
|
|
this.columnsById[f.fk_column_id].uidt === UITypes.LinkToAnotherRecord && |
|
|
|
f.fk_column_id && |
|
|
|
|
|
|
|
this.columnsById[f.fk_column_id] && |
|
|
|
|
|
|
|
this.columnsById[f.fk_column_id].uidt === |
|
|
|
|
|
|
|
UITypes.LinkToAnotherRecord && |
|
|
|
|
|
|
|
this.columnsById[f.fk_column_id].uidt === UITypes.Lookup |
|
|
|
this.columnsById[f.fk_column_id].uidt === UITypes.Lookup |
|
|
|
) { |
|
|
|
) { |
|
|
|
return !["notempty", "empty", "notnull", "null"].includes(op.value); |
|
|
|
return ![ |
|
|
|
|
|
|
|
'notempty', |
|
|
|
|
|
|
|
'empty', |
|
|
|
|
|
|
|
'notnull', |
|
|
|
|
|
|
|
'null' |
|
|
|
|
|
|
|
].includes(op.value) |
|
|
|
} |
|
|
|
} |
|
|
|
return true; |
|
|
|
return true |
|
|
|
}); |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
async applyChanges(nested = false, { hookId } = {}) { |
|
|
|
async applyChanges(nested = false, { hookId } = {}) { |
|
|
|
for (const [i, filter] of Object.entries(this.filters)) { |
|
|
|
for (const [i, filter] of Object.entries(this.filters)) { |
|
|
|
if (filter.status === "delete") { |
|
|
|
if (filter.status === 'delete') { |
|
|
|
if (this.hookId || hookId) { |
|
|
|
if (this.hookId || hookId) { |
|
|
|
await this.$api.dbTableFilter.delete(filter.id); |
|
|
|
await this.$api.dbTableFilter.delete(filter.id) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
await this.$api.dbTableFilter.delete(filter.id); |
|
|
|
await this.$api.dbTableFilter.delete(filter.id) |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (filter.status === "update") { |
|
|
|
} else if (filter.status === 'update') { |
|
|
|
if (filter.id) { |
|
|
|
if (filter.id) { |
|
|
|
if (this.hookId || hookId) { |
|
|
|
if (this.hookId || hookId) { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
...filter, |
|
|
|
...filter, |
|
|
|
fk_parent_id: this.parentId, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
}); |
|
|
|
}) |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
...filter, |
|
|
|
...filter, |
|
|
|
fk_parent_id: this.parentId, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
}); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (this.hookId || hookId) { |
|
|
|
} else if (this.hookId || hookId) { |
|
|
|
this.$set( |
|
|
|
this.$set(this.filters, i, (await this.$api.dbTableWebhookFilter.create(this.hookId || hookId, { |
|
|
|
this.filters, |
|
|
|
...filter, |
|
|
|
i, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
await this.$api.dbTableWebhookFilter.create( |
|
|
|
}))) |
|
|
|
this.hookId || hookId, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
...filter, |
|
|
|
|
|
|
|
fk_parent_id: this.parentId, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.$set( |
|
|
|
this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, { |
|
|
|
this.filters, |
|
|
|
...filter, |
|
|
|
i, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
await this.$api.dbTableFilter.create(this.viewId, { |
|
|
|
}))) |
|
|
|
...filter, |
|
|
|
|
|
|
|
fk_parent_id: this.parentId, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.$refs.nestedFilter) { |
|
|
|
if (this.$refs.nestedFilter) { |
|
|
|
for (const nestedFilter of this.$refs.nestedFilter) { |
|
|
|
for (const nestedFilter of this.$refs.nestedFilter) { |
|
|
|
await nestedFilter.applyChanges(true); |
|
|
|
await nestedFilter.applyChanges(true) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.loadFilter(); |
|
|
|
this.loadFilter() |
|
|
|
if (!nested) { |
|
|
|
if (!nested) { this.$emit('updated') } |
|
|
|
this.$emit("updated"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
async loadFilter() { |
|
|
|
async loadFilter() { |
|
|
|
let filters = []; |
|
|
|
let filters = [] |
|
|
|
if (this.viewId && this._isUIAllowed("filterSync")) { |
|
|
|
if (this.viewId && this._isUIAllowed('filterSync')) { |
|
|
|
filters = this.parentId |
|
|
|
filters = this.parentId |
|
|
|
? await this.$api.dbTableFilter.childrenRead(this.parentId) |
|
|
|
? (await this.$api.dbTableFilter.childrenRead(this.parentId)) |
|
|
|
: await this.$api.dbTableFilter.read(this.viewId); |
|
|
|
: (await this.$api.dbTableFilter.read(this.viewId)) |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.hookId && this._isUIAllowed("filterSync")) { |
|
|
|
if (this.hookId && this._isUIAllowed('filterSync')) { |
|
|
|
filters = this.parentId |
|
|
|
filters = this.parentId |
|
|
|
? await this.$api.dbTableFilter.childrenRead(this.parentId) |
|
|
|
? (await this.$api.dbTableFilter.childrenRead(this.parentId)) |
|
|
|
: await this.$api.dbTableWebhookFilter.read(this.hookId); |
|
|
|
: (await this.$api.dbTableWebhookFilter.read(this.hookId)) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.filters = filters; |
|
|
|
this.filters = filters |
|
|
|
}, |
|
|
|
}, |
|
|
|
addFilter() { |
|
|
|
addFilter() { |
|
|
|
this.filters.push({ |
|
|
|
this.filters.push({ |
|
|
|
fk_column_id: null, |
|
|
|
fk_column_id: null, |
|
|
|
comparison_op: "eq", |
|
|
|
comparison_op: 'eq', |
|
|
|
value: "", |
|
|
|
value: '', |
|
|
|
status: "update", |
|
|
|
status: 'update', |
|
|
|
logical_op: "and", |
|
|
|
logical_op: 'and' |
|
|
|
}); |
|
|
|
}) |
|
|
|
this.filters = this.filters.slice(); |
|
|
|
this.filters = this.filters.slice() |
|
|
|
this.$tele.emit(`filter:add:trigger:${this.filters.length}`); |
|
|
|
this.$tele.emit(`filter:add:trigger:${this.filters.length}`) |
|
|
|
}, |
|
|
|
}, |
|
|
|
addFilterGroup() { |
|
|
|
addFilterGroup() { |
|
|
|
this.filters.push({ |
|
|
|
this.filters.push({ |
|
|
|
parentId: this.parentId, |
|
|
|
parentId: this.parentId, |
|
|
|
is_group: true, |
|
|
|
is_group: true, |
|
|
|
status: "update", |
|
|
|
status: 'update' |
|
|
|
}); |
|
|
|
}) |
|
|
|
this.filters = this.filters.slice(); |
|
|
|
this.filters = this.filters.slice() |
|
|
|
const index = this.filters.length - 1; |
|
|
|
const index = this.filters.length - 1 |
|
|
|
this.saveOrUpdate(this.filters[index], index); |
|
|
|
this.saveOrUpdate(this.filters[index], index) |
|
|
|
}, |
|
|
|
}, |
|
|
|
filterUpdateCondition(filter, i) { |
|
|
|
filterUpdateCondition(filter, i) { |
|
|
|
this.saveOrUpdate(filter, i); |
|
|
|
this.saveOrUpdate(filter, i) |
|
|
|
this.$tele.emit( |
|
|
|
this.$tele.emit(`filter:condition:${filter.logical_op}:${filter.comparison_op}`) |
|
|
|
`filter:condition:${filter.logical_op}:${filter.comparison_op}` |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
async saveOrUpdate(filter, i) { |
|
|
|
async saveOrUpdate(filter, i) { |
|
|
|
if (this.shared || !this._isUIAllowed("filterSync")) { |
|
|
|
if (this.shared || !this._isUIAllowed('filterSync')) { |
|
|
|
// this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op)) |
|
|
|
// this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op)) |
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} else if (!this.autoApply) { |
|
|
|
} else if (!this.autoApply) { |
|
|
|
filter.status = "update"; |
|
|
|
filter.status = 'update' |
|
|
|
} else if (filter.id) { |
|
|
|
} else if (filter.id) { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
await this.$api.dbTableFilter.update(filter.id, { |
|
|
|
...filter, |
|
|
|
...filter, |
|
|
|
fk_parent_id: this.parentId, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.$set( |
|
|
|
this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, { |
|
|
|
this.filters, |
|
|
|
...filter, |
|
|
|
i, |
|
|
|
fk_parent_id: this.parentId |
|
|
|
await this.$api.dbTableFilter.create(this.viewId, { |
|
|
|
}))) |
|
|
|
...filter, |
|
|
|
|
|
|
|
fk_parent_id: this.parentId, |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
async deleteFilter(filter, i) { |
|
|
|
async deleteFilter(filter, i) { |
|
|
|
if (this.shared || !this._isUIAllowed("filterSync")) { |
|
|
|
if (this.shared || !this._isUIAllowed('filterSync')) { |
|
|
|
this.filters.splice(i, 1); |
|
|
|
this.filters.splice(i, 1) |
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} else if (filter.id) { |
|
|
|
} else if (filter.id) { |
|
|
|
if (!this.autoApply) { |
|
|
|
if (!this.autoApply) { |
|
|
|
this.$set(filter, "status", "delete"); |
|
|
|
this.$set(filter, 'status', 'delete') |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
await this.$api.dbTableFilter.delete(filter.id); |
|
|
|
await this.$api.dbTableFilter.delete(filter.id) |
|
|
|
await this.loadFilter(); |
|
|
|
await this.loadFilter() |
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.filters.splice(i, 1); |
|
|
|
this.filters.splice(i, 1) |
|
|
|
this.$emit("updated"); |
|
|
|
this.$emit('updated') |
|
|
|
} |
|
|
|
} |
|
|
|
this.$tele.emit("filter:delete"); |
|
|
|
this.$tele.emit('filter:delete') |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.grid { |
|
|
|
.grid { |
|
|
|
display: grid; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 22px 80px auto auto auto; |
|
|
|
grid-template-columns:22px 80px auto auto auto; |
|
|
|
column-gap: 6px; |
|
|
|
column-gap: 6px; |
|
|
|
row-gap: 6px; |
|
|
|
row-gap: 6px |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|