forked from verdnatura/salix-front
ref #6104 vnSelectFilter added
This commit is contained in:
parent
84960b8a5b
commit
b29d326797
|
|
@ -13,6 +13,7 @@ import VnAvatar from '../ui/VnAvatar.vue';
|
|||
import VnJsonValue from '../common/VnJsonValue.vue';
|
||||
import FetchData from '../FetchData.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import VnSelectFilter from './VnSelectFilter.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const validationsStore = useValidator();
|
||||
|
|
@ -120,7 +121,6 @@ const validDate = new RegExp(
|
|||
/T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/.source
|
||||
);
|
||||
|
||||
const filteredActions = ref([]);
|
||||
const filteredWorkers = ref([]);
|
||||
|
||||
function castJsonValue(value) {
|
||||
|
|
@ -361,40 +361,13 @@ async function clearFilter() {
|
|||
changeInput.value = undefined;
|
||||
dateFrom.value = undefined;
|
||||
dateTo.value = undefined;
|
||||
userRadio.value = undefined;
|
||||
Object.keys(checkboxOptions.value).forEach(
|
||||
(opt) => (checkboxOptions.value[opt].selected = false)
|
||||
);
|
||||
await applyFilter();
|
||||
}
|
||||
|
||||
function filterFn(val, update, abortFn, type) {
|
||||
if (!val) {
|
||||
update(() => {
|
||||
if (type === 'actions') filteredActions.value = actions.value;
|
||||
if (type === 'workers') filteredWorkers.value = workers.value;
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
update(() => {
|
||||
const needle = val.toLowerCase();
|
||||
if (type === 'actions')
|
||||
filteredActions.value = actions.value.filter((item) =>
|
||||
validations[item].locale.name.includes(needle)
|
||||
);
|
||||
if (type === 'workers') {
|
||||
if (isNaN(needle))
|
||||
filteredWorkers.value = workers.value.filter(
|
||||
(item) =>
|
||||
item.name.toLowerCase().includes(needle) ||
|
||||
item.nickname.toLowerCase().includes(needle)
|
||||
);
|
||||
else
|
||||
filteredWorkers.value = workers.value.filter((item) => item.id == needle);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setLogTree();
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -411,7 +384,15 @@ setLogTree();
|
|||
<FetchData
|
||||
:url="`${props.model}Logs/${route.params.id}/models`"
|
||||
:filter="{ order: ['changedModel'] }"
|
||||
@on-fetch="(data) => (actions = data.map((item) => item.changedModel))"
|
||||
@on-fetch="
|
||||
(data) =>
|
||||
(actions = data.map((item) => {
|
||||
return {
|
||||
locale: useFirstUpper(validations[item.changedModel].locale.name),
|
||||
value: item.changedModel,
|
||||
};
|
||||
}))
|
||||
"
|
||||
auto-load
|
||||
/>
|
||||
<div
|
||||
|
|
@ -669,31 +650,16 @@ setLogTree();
|
|||
</template>
|
||||
</QInput>
|
||||
</QItem>
|
||||
<QItem class="q-mt-sm">
|
||||
<QSelect
|
||||
<QItem>
|
||||
<VnSelectFilter
|
||||
class="full-width"
|
||||
v-model="selectedFilters.changedModel"
|
||||
@update:model-value="selectFilter('action')"
|
||||
:options="filteredActions"
|
||||
:label="t('globals.entity')"
|
||||
use-input
|
||||
clearable
|
||||
clear-icon="close"
|
||||
@filter="
|
||||
(val, update, abortFn) =>
|
||||
filterFn(val, update, abortFn, 'actions')
|
||||
"
|
||||
v-model="selectedFilters.changedModel"
|
||||
option-label="locale"
|
||||
:options="actions"
|
||||
@update:model-value="selectFilter('action')"
|
||||
@clear="() => selectFilter('action')"
|
||||
>
|
||||
<template #option="{ opt, index, itemProps }">
|
||||
<QItem :index="index" v-bind="itemProps">
|
||||
{{ useFirstUpper(validations[opt].locale.name) }}
|
||||
</QItem>
|
||||
</template>
|
||||
<template #selected-item="{ opt }">
|
||||
{{ useFirstUpper(validations[opt].locale.name) }}
|
||||
</template>
|
||||
</QSelect>
|
||||
/>
|
||||
</QItem>
|
||||
<QItem class="q-mt-sm">
|
||||
<QOptionGroup
|
||||
|
|
@ -713,23 +679,15 @@ setLogTree();
|
|||
<QItemSection v-if="!workers">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="workers">
|
||||
<QSelect
|
||||
<QItemSection v-if="workers && userRadio !== null">
|
||||
<VnSelectFilter
|
||||
class="full-width"
|
||||
:label="t('globals.user')"
|
||||
v-model="userSelect"
|
||||
@update:model-value="selectFilter('userSelect')"
|
||||
:options="filteredWorkers"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
clearable
|
||||
clear-icon="close"
|
||||
@filter="
|
||||
(val, update, abortFn) =>
|
||||
filterFn(val, update, abortFn, 'workers')
|
||||
"
|
||||
option-value="id"
|
||||
:options="workers"
|
||||
@update:model-value="selectFilter('userSelect')"
|
||||
>
|
||||
<template #option="{ opt, itemProps }">
|
||||
<QItem
|
||||
|
|
@ -745,7 +703,7 @@ setLogTree();
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</QSelect>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mt-sm">
|
||||
|
|
|
|||
|
|
@ -83,11 +83,10 @@ const value = computed({
|
|||
@filter="filterHandler"
|
||||
hide-selected
|
||||
fill-input
|
||||
clearable
|
||||
clear-icon="close"
|
||||
ref="vnSelectRef"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="close" @click.stop="value = null" class="cursor-pointer" />
|
||||
</template>
|
||||
<template v-for="(_, slotName) in $slots" #[slotName]="slotData">
|
||||
<slot :name="slotName" v-bind="slotData" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ describe('VnLog', () => {
|
|||
it('should filter by entity', () => {
|
||||
cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).click();
|
||||
cy.get('.q-scrollarea .q-list .q-item .q-select').eq(0).type('cla');
|
||||
cy.get('[role="listbox"] .q-item').should('have.text', 'Claim');
|
||||
cy.get('.q-virtual-scroll__content .q-item').eq(0).click();
|
||||
cy.get('.q-page').click();
|
||||
cy.get('.model-info .q-chip__content').eq(0).should('have.text', 'Claim');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue