Browse Source

#1675 revert some extra formattin

pull/1714/head
Naman Anand 3 years ago
parent
commit
0bc9e2de09
  1. 61
      packages/nc-gui/assets/style/style.css
  2. 348
      packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
  3. 2
      packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

61
packages/nc-gui/assets/style/style.css

@ -114,18 +114,23 @@ html {
overflow: hidden; overflow: hidden;
} }
[v-cloak] { [v-cloak] {
display: none !important; display: none !important;
} }
.v-btn { .v-btn {
margin: 0 2px; margin: 0 2px;
} }
html { html {
overflow-y: auto !important; overflow-y: auto !important;
} }
/* nested expansion panel bug */ /* nested expansion panel bug */
.v-expansion-panel-header { .v-expansion-panel-header {
@ -136,6 +141,7 @@ html {
min-height: 64px !important; min-height: 64px !important;
} }
/* Table validation message */ /* Table validation message */
/*table .v-input__control {*/ /*table .v-input__control {*/
/* position: relative;*/ /* position: relative;*/
@ -146,11 +152,13 @@ html {
/* bottom: -4px;*/ /* bottom: -4px;*/
/*}*/ /*}*/
/*table edit dialog buttons*/ /*table edit dialog buttons*/
.v-small-dialog__actions button span { .v-small-dialog__actions button span {
font-weight: bolder; font-weight: bolder;
} }
/*resizer*/ /*resizer*/
.vertical-resizer { .vertical-resizer {
@ -211,25 +219,15 @@ html {
background: linear-gradient(180deg, black, rgb(55, 55, 55)); background: linear-gradient(180deg, black, rgb(55, 55, 55));
} }
.yellow-orange-gradient { .yellow-orange-gradient {
background: -moz-linear-gradient( background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
left, background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
rgba(241, 231, 103, 1) 0%, background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
rgba(254, 182, 69, 1) 100%
);
background: -webkit-linear-gradient(
left,
rgba(241, 231, 103, 1) 0%,
rgba(254, 182, 69, 1) 100%
);
background: linear-gradient(
to right,
rgba(241, 231, 103, 1) 0%,
rgba(254, 182, 69, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1);
} }
.white-gradient { .white-gradient {
background: linear-gradient(45deg, white, lightskyblue); background: linear-gradient(45deg, white, lightskyblue);
} }
@ -250,6 +248,7 @@ html {
background: linear-gradient(70deg, #fcbb07, #fcbb07); background: linear-gradient(70deg, #fcbb07, #fcbb07);
} }
.img-animation { .img-animation {
animation-name: vibrate; animation-name: vibrate;
animation-duration: 1.5s; animation-duration: 1.5s;
@ -263,6 +262,7 @@ html {
@keyframes vibrate { @keyframes vibrate {
0% { 0% {
transform: translateY(10px); transform: translateY(10px);
} }
100% { 100% {
@ -270,21 +270,26 @@ html {
} }
} }
.search-overlay .v-overlay__content { .search-overlay .v-overlay__content {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* Draggable tree hover color */ /* Draggable tree hover color */
.theme--dark .vtl-tree-node:hover { .theme--dark .vtl-tree-node:hover {
background-color: rgb(94, 94, 94) !important; background-color: rgb(94, 94, 94) !important;
} }
.theme--light .vtl-tree-node:hover { .theme--light .vtl-tree-node:hover {
background-color: rgb(240, 240, 240) !important; background-color: rgb(240, 240, 240) !important;
} }
/*vue tree list icon font */ /*vue tree list icon font */
/*.sql-query-treeview .vtl-icon-folder:before {*/ /*.sql-query-treeview .vtl-icon-folder:before {*/
@ -304,15 +309,15 @@ html {
/*}*/ /*}*/
.sql-query-treeview .vtl-tree-node .vtl-caret { .sql-query-treeview .vtl-tree-node .vtl-caret{
width: 1rem; width:1rem;
} }
.sql-query-treeview .vtl-tree-node { .sql-query-treeview .vtl-tree-node{
padding-top: 5px !important; padding-top: 5px !important;
padding-bottom: 5px !important; padding-bottom: 5px !important;
} }
.sql-query-treeview .custom-run-icon { .sql-query-treeview .custom-run-icon{}
}
.sql-editor .v-expansion-panel-header { .sql-editor .v-expansion-panel-header {
min-height: 36px !important; min-height: 36px !important;
@ -322,6 +327,7 @@ html {
min-height: 40px !important; min-height: 40px !important;
} }
.api-client .v-expansion-panel-header { .api-client .v-expansion-panel-header {
min-height: 36px !important; min-height: 36px !important;
padding: 0 0 0 10px; padding: 0 0 0 10px;
@ -329,30 +335,31 @@ html {
.api-client .v-expansion-panel-header--active { .api-client .v-expansion-panel-header--active {
min-height: 40px !important; min-height: 40px !important;
} }
.api-treeview .vtl-node-content { .api-treeview .vtl-node-content{
max-width: calc(100% - 44px); max-width: calc(100% - 44px);
} }
/* for expansion panel content wrapper */ /* for expansion panel content wrapper */
.expansion-wrap-0 .v-expansion-panel-content__wrap { .expansion-wrap-0 .v-expansion-panel-content__wrap{
padding: 0; padding: 0;
} }
.sql-query-treeview .vtl-operation { .sql-query-treeview .vtl-operation{
margin-left: 2px !important; margin-left: 2px !important;;
} }
.sql-query-treeview .vtl-tree-node { .sql-query-treeview .vtl-tree-node{
display: flex; display: flex;
} }
.sql-query-treeview .vtl-node-content { .sql-query-treeview .vtl-node-content{
flex-grow: 1; flex-grow: 1;
} }
.ignore-height-style table .v-input__control { .ignore-height-style table .v-input__control {
height: auto !important; height: auto !important;
} }
.cursor-pointer { .cursor-pointer{
cursor: pointer; cursor: pointer;
} }

348
packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@ -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}`"
> >
@ -124,7 +118,7 @@
: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,
i,
await this.$api.dbTableWebhookFilter.create(
this.hookId || hookId,
{
...filter, ...filter,
fk_parent_id: this.parentId, fk_parent_id: this.parentId
} })))
)
);
} else { } else {
this.$set( this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, {
this.filters,
i,
await this.$api.dbTableFilter.create(this.viewId, {
...filter, ...filter,
fk_parent_id: this.parentId, 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();
if (!nested) {
this.$emit("updated");
} }
this.loadFilter()
if (!nested) { 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,
i,
await this.$api.dbTableFilter.create(this.viewId, {
...filter, ...filter,
fk_parent_id: this.parentId, 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>

2
packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@ -28,7 +28,7 @@
</v-btn> </v-btn>
</v-badge> </v-badge>
</template> </template>
<div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px;"> <div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px">
<div class="sort-grid" @click.stop> <div class="sort-grid" @click.stop>
<template v-for="(sort,i) in sortList||[]" dense> <template v-for="(sort,i) in sortList||[]" dense>
<v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> <v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)">

Loading…
Cancel
Save