forked from verdnatura/salix-front
feat: refs #6825 right filter panel
This commit is contained in:
parent
b76b2fd8a0
commit
6a6a47bc82
|
|
@ -16,11 +16,11 @@ const $props = defineProps({
|
|||
},
|
||||
optionLabel: {
|
||||
type: [String],
|
||||
default: '',
|
||||
default: 'name',
|
||||
},
|
||||
optionValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: 'id',
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
|
|
@ -108,11 +108,18 @@ async function fetchFilter(val) {
|
|||
|
||||
const { fields, sortBy, limit } = $props;
|
||||
let key = optionLabel.value;
|
||||
console.log('key: ', key);
|
||||
|
||||
if (new RegExp(/\d/g).test(val)) key = optionValue.value;
|
||||
console.log('key: ', key);
|
||||
|
||||
const where = { [key]: { like: `%${val}%` } };
|
||||
return dataRef.value.fetch({ fields, where, order: sortBy, limit });
|
||||
const fetchOptions = { where, order: sortBy, limit };
|
||||
console.log('where: ', where);
|
||||
console.log('fields: ', fields);
|
||||
if (fields) fetchOptions.fields = fields;
|
||||
console.log('fetchOptions: ', fetchOptions);
|
||||
return dataRef.value.fetch(fetchOptions);
|
||||
}
|
||||
|
||||
async function filterHandler(val, update) {
|
||||
|
|
|
|||
|
|
@ -168,9 +168,9 @@ function columnsCard(cols) {
|
|||
<template #item="{ row, colsMap }">
|
||||
<!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
|
||||
<QCard bordered flat class="row no-wrap justify-between">
|
||||
<QCardSection vertical class="no-margin no-padding w-80">
|
||||
<QCardSection vertical class="no-margin no-padding full-width">
|
||||
<!-- Chips -->
|
||||
<QCardSection horizontal class="w-80">
|
||||
<QCardSection horizontal>
|
||||
<span v-for="col of colsMap" :key="col.field">
|
||||
<QChip
|
||||
:class="
|
||||
|
|
@ -191,28 +191,31 @@ function columnsCard(cols) {
|
|||
</QCardSection>
|
||||
<!-- Fields -->
|
||||
<QCardSection
|
||||
class="q-pa-sm w-80"
|
||||
class="q-pa-sm q-pr-lg"
|
||||
:class="
|
||||
mode == 'list' || $q.screen.lt.md
|
||||
? 'grid-three'
|
||||
: 'grid-one'
|
||||
$q.screen.lt.md || mode == 'card'
|
||||
? 'flex-one'
|
||||
: 'flex-three'
|
||||
"
|
||||
>
|
||||
<div v-for="col of columnsCard(colsMap)" :key="col.field">
|
||||
<div
|
||||
v-for="col of columnsCard(colsMap)"
|
||||
:key="col.field"
|
||||
class="fields"
|
||||
>
|
||||
<VnLv
|
||||
v-if="
|
||||
col.cardVisible &&
|
||||
!col.isId &&
|
||||
col.field != 'tableActions'
|
||||
"
|
||||
:label="`${col.label}:`"
|
||||
>
|
||||
<VnLv :label="`${col.label}:`">
|
||||
<template #value>
|
||||
<VnTableColumn :column="col" :row />
|
||||
</template>
|
||||
</VnLv>
|
||||
</div>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</QCardSection>
|
||||
<!-- Actions -->
|
||||
|
|
@ -304,8 +307,51 @@ function columnsCard(cols) {
|
|||
|
||||
.grid-three {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
|
||||
max-width: 100%;
|
||||
grid-gap: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.flex-three {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
div.fields {
|
||||
width: 50%;
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 2%;
|
||||
width: 100%;
|
||||
.label {
|
||||
width: 25%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.value {
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-one {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
div.fields {
|
||||
width: 100%;
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
gap: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// WIP TRANSITIONS
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
v-if="columnFilter?.component"
|
||||
:is="isBasicComponent?.component ?? columnFilter.component"
|
||||
v-model="model"
|
||||
v-bind="columnFilter.attrs"
|
||||
v-bind="{ ...columnFilter.attrs, ...isBasicComponent?.attrs }"
|
||||
v-on="isBasicComponent?.event ?? columnFilter.event"
|
||||
dense
|
||||
/>
|
||||
|
|
@ -90,19 +90,35 @@ const components = {
|
|||
select: {
|
||||
component: markRaw(VnSelect),
|
||||
event: updateEvent,
|
||||
attrs: {
|
||||
class: 'full-width q-px-sm',
|
||||
label: $props.showTitle ? '' : $props.column.label,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
async function addFilter() {
|
||||
const value = model.value == '' ? null : model.value;
|
||||
const prefix = columnFilter.value?.inWhere?.prefix;
|
||||
let field = columnFilter.value?.field ?? $props.column.field;
|
||||
field = prefix ? prefix + '.' + field : field;
|
||||
const toFilter = { [field]: value };
|
||||
const filter = columnFilter.value?.inWhere
|
||||
? { filter: { where: toFilter } }
|
||||
: { params: toFilter };
|
||||
// async function addFilter() {
|
||||
// const value = model.value == '' ? null : model.value;
|
||||
// const prefix = columnFilter.value?.inWhere?.prefix;
|
||||
// let field = columnFilter.value?.field ?? $props.column.field;
|
||||
// field = prefix ? prefix + '.' + field : field;
|
||||
// const toFilter = { [field]: value };
|
||||
// const filter = columnFilter.value?.inWhere
|
||||
// ? { filter: { where: toFilter } }
|
||||
// : { params: toFilter };
|
||||
|
||||
await arrayData.addFilter(filter);
|
||||
// console.log('filter: ', filter);
|
||||
// await arrayData.addFilter(filter);
|
||||
// }
|
||||
|
||||
async function addFilter(event) {
|
||||
let value = model.value == '' ? null : model.value;
|
||||
if (event && typeof event !== 'object') {
|
||||
value = event;
|
||||
}
|
||||
let field = columnFilter.value?.field ?? $props.column.field;
|
||||
const toFilter = { [field]: value };
|
||||
|
||||
await arrayData.addFilter({ params: toFilter });
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -67,18 +67,36 @@ onMounted(() => {
|
|||
emit('init', { params: userParams.value });
|
||||
});
|
||||
|
||||
function setUserParams(params) {
|
||||
if (!params) {
|
||||
userParams.value = {};
|
||||
} else {
|
||||
userParams.value = params;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.params,
|
||||
(val) => {
|
||||
if (!val) {
|
||||
userParams.value = {};
|
||||
} else {
|
||||
const parsedParams = JSON.parse(val);
|
||||
userParams.value = { ...parsedParams };
|
||||
setUserParams(val);
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => arrayData.store.userParams,
|
||||
(val) => {
|
||||
setUserParams(val);
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => arrayData.store.filter,
|
||||
(val) => {
|
||||
console.log('watch filter: ', val);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const isLoading = ref(false);
|
||||
async function search() {
|
||||
store.filter.where = {};
|
||||
|
|
@ -131,14 +149,15 @@ async function clearFilters() {
|
|||
emit('clear');
|
||||
}
|
||||
|
||||
const tagsList = computed(() =>
|
||||
Object.entries(userParams.value)
|
||||
const tagsList = computed(() => {
|
||||
console.log('userParams.value: ', userParams.value);
|
||||
return Object.entries(userParams.value)
|
||||
.filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
|
||||
.map(([key, value]) => ({
|
||||
label: key,
|
||||
value: value,
|
||||
}))
|
||||
);
|
||||
}));
|
||||
});
|
||||
|
||||
const tags = computed(() =>
|
||||
tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
|
||||
|
|
|
|||
|
|
@ -275,6 +275,11 @@ const columns = computed(() => [
|
|||
isId: 1,
|
||||
columnFilter: {
|
||||
field: 'search',
|
||||
component: 'select',
|
||||
attrs: {
|
||||
url: 'Clients',
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -283,11 +288,6 @@ const columns = computed(() => [
|
|||
label: t('customer.extendedList.tableVisibleColumns.name'),
|
||||
name: 'name',
|
||||
isId: 2,
|
||||
columnFilter: {
|
||||
inWhere: {
|
||||
prefix: 'c',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
|
|
|
|||
Loading…
Reference in New Issue