|
|
@ -95,32 +95,27 @@ watch( |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="bg-white shadow pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '630px' }"> |
|
|
|
<div |
|
|
|
<div v-if="filters && filters.length" class="grid" @click.stop> |
|
|
|
class=" pa-2 menu-filter-dropdown bg-gray-50" |
|
|
|
|
|
|
|
:class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop> |
|
|
|
<template v-for="(filter, i) in filters" :key="filter.id || i"> |
|
|
|
<template v-for="(filter, i) in filters" :key="filter.id || i"> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<template v-if="filter.status !== 'delete'"> |
|
|
|
<div v-if="filter.is_group" :key="i" style="grid-column: span 5; padding: 6px" class=""> |
|
|
|
<template v-if="filter.is_group" > |
|
|
|
<div class="d-flex" style="gap: 6px; padding: 0 6px"> |
|
|
|
<MdiDeleteIcon |
|
|
|
<!-- <v-icon |
|
|
|
:key="i" |
|
|
|
v-if="!filter.readOnly" |
|
|
|
v-if="!filter.readOnly" |
|
|
|
:key="`${i}_3`" |
|
|
|
small |
|
|
|
small |
|
|
|
class="nc-filter-item-remove-btn text-grey" |
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
/> |
|
|
|
> |
|
|
|
<span v-else :key="i + 'dummy'"/> |
|
|
|
mdi-close-box |
|
|
|
|
|
|
|
</v-icon> --> |
|
|
|
|
|
|
|
<MdiDeleteIcon |
|
|
|
|
|
|
|
v-if="!filter.readOnly" |
|
|
|
|
|
|
|
small |
|
|
|
|
|
|
|
class="nc-filter-item-remove-btn" |
|
|
|
|
|
|
|
@click.stop="deleteFilter(filter, i)" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span v-else :key="`${i}_1`" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="d-flex" :key="i + 'nested'"> |
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
|
|
|
|
size="small" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption" |
|
|
|
class="flex-shrink-1 flex-grow-0 elevation-0 caption" |
|
|
|
:options="logicalOps" |
|
|
|
:options="logicalOps" |
|
|
|
placeholder="Group op" |
|
|
|
placeholder="Group op" |
|
|
@ -129,14 +124,17 @@ watch( |
|
|
|
> |
|
|
|
> |
|
|
|
</a-select> |
|
|
|
</a-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<SmartsheetToolbarColumnFilter |
|
|
|
<span class="col-span-3" /> |
|
|
|
v-if="filter.id || shared" |
|
|
|
<div class="col-span-5"> |
|
|
|
ref="nestedFilter" |
|
|
|
<SmartsheetToolbarColumnFilter |
|
|
|
v-model="filter.children" |
|
|
|
v-if="filter.id || shared" |
|
|
|
:parent-id="filter.id" |
|
|
|
ref="nestedFilter" |
|
|
|
nested |
|
|
|
v-model="filter.children" |
|
|
|
/> |
|
|
|
:parent-id="filter.id" |
|
|
|
</div> |
|
|
|
nested |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<!-- <v-icon |
|
|
|
<!-- <v-icon |
|
|
|
v-if="!filter.readOnly" |
|
|
|
v-if="!filter.readOnly" |
|
|
@ -160,6 +158,7 @@ watch( |
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
v-model:value="filter.logical_op" |
|
|
|
|
|
|
|
size="small" |
|
|
|
class="h-full" |
|
|
|
class="h-full" |
|
|
|
:options="logicalOps" |
|
|
|
:options="logicalOps" |
|
|
|
hide-details |
|
|
|
hide-details |
|
|
@ -171,7 +170,7 @@ watch( |
|
|
|
<FieldListAutoCompleteDropdown |
|
|
|
<FieldListAutoCompleteDropdown |
|
|
|
:key="`${i}_6`" |
|
|
|
:key="`${i}_6`" |
|
|
|
v-model="filter.fk_column_id" |
|
|
|
v-model="filter.fk_column_id" |
|
|
|
class="caption text-sm nc-filter-field-select" |
|
|
|
class="caption nc-filter-field-select" |
|
|
|
:columns="columns" |
|
|
|
:columns="columns" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
@ -180,7 +179,8 @@ watch( |
|
|
|
|
|
|
|
|
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-model:value="filter.comparison_op" |
|
|
|
v-model:value="filter.comparison_op" |
|
|
|
class="caption nc-filter-operation-select text-sm" |
|
|
|
size="small" |
|
|
|
|
|
|
|
class="caption nc-filter-operation-select" |
|
|
|
:options="comparisonOpList" |
|
|
|
:options="comparisonOpList" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
:placeholder="$t('labels.operation')" |
|
|
|
density="compact" |
|
|
|
density="compact" |
|
|
@ -203,6 +203,7 @@ watch( |
|
|
|
<a-checkbox |
|
|
|
<a-checkbox |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
v-else-if="types[filter.field] === 'boolean'" |
|
|
|
v-model:value="filter.value" |
|
|
|
v-model:value="filter.value" |
|
|
|
|
|
|
|
size="small" |
|
|
|
dense |
|
|
|
dense |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
|
@change="saveOrUpdate(filter, i)" |
|
|
@ -211,7 +212,8 @@ watch( |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:key="`${i}_7`" |
|
|
|
:key="`${i}_7`" |
|
|
|
v-model="filter.value" |
|
|
|
v-model="filter.value" |
|
|
|
class="caption text-sm nc-filter-value-select" |
|
|
|
size="small" |
|
|
|
|
|
|
|
class="caption nc-filter-value-select" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
:disabled="filter.readOnly" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@input="saveOrUpdate(filter, i)" |
|
|
|
@input="saveOrUpdate(filter, i)" |
|
|
@ -222,7 +224,7 @@ watch( |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="flex gap-2"> |
|
|
|
<div class="flex gap-2"> |
|
|
|
<a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilter"> |
|
|
|
<a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<MdiAddIcon /> |
|
|
|
<MdiAddIcon /> |
|
|
@ -230,7 +232,7 @@ watch( |
|
|
|
{{ $t('activity.addFilter') }} |
|
|
|
{{ $t('activity.addFilter') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-button> |
|
|
|
</a-button> |
|
|
|
<a-button size="small" class="elevation-0 text-sm text-capitalize text-grey my-3" @click.stop="addFilterGroup"> |
|
|
|
<a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilterGroup"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<div class="flex align-center gap-1"> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<!-- <v-icon small color="grey"> mdi-plus </v-icon> --> |
|
|
|
<MdiAddIcon /> |
|
|
|
<MdiAddIcon /> |
|
|
@ -244,10 +246,15 @@ watch( |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style scoped> |
|
|
|
.grid { |
|
|
|
.nc-filter-grid { |
|
|
|
display: grid; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 30px 130px auto auto auto; |
|
|
|
grid-template-columns: 18px 70px auto auto auto; |
|
|
|
column-gap: 6px; |
|
|
|
column-gap: 6px; |
|
|
|
row-gap: 6px; |
|
|
|
row-gap: 6px; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.ant-btn, .ant-select, .ant-input) { |
|
|
|
|
|
|
|
@apply "!text-xs"; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|