fix: CustomerFilter

This commit is contained in:
Javier Segarra 2024-09-19 12:51:49 +02:00
parent 8b379faa52
commit 8e96265106
2 changed files with 33 additions and 49 deletions

View File

@ -1,35 +1,20 @@
<script setup> <script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ defineProps({
dataKey: { dataKey: {
type: String, type: String,
required: true, required: true,
}, },
}); });
const provinces = ref();
const workers = ref();
const zones = ref();
</script> </script>
<template> <template>
<FetchData url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load /> <VnFilterPanel :data-key="dataKey" :search-button="true" search-url="table">
<FetchData url="Zones" @on-fetch="(data) => (zones = data)" auto-load />
<FetchData
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong> <strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -65,15 +50,14 @@ const zones = ref();
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="!workers"> <QItemSection>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelect <VnSelect
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
auto-load
:label="t('Salesperson')" :label="t('Salesperson')"
v-model="params.salesPersonFk" v-model="params.salesPersonFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:options="workers"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
@ -88,15 +72,12 @@ const zones = ref();
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection v-if="!provinces"> <QItemSection
<QSkeleton type="QInput" class="full-width" /> ><VnSelect
</QItemSection> url="Provinces"
<QItemSection v-if="provinces">
<VnSelect
:label="t('Province')" :label="t('Province')"
v-model="params.provinceFk" v-model="params.provinceFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:options="provinces"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
@ -105,6 +86,7 @@ const zones = ref();
dense dense
outlined outlined
rounded rounded
auto-load
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
@ -135,15 +117,11 @@ const zones = ref();
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection v-if="!zones">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="zones">
<VnSelect <VnSelect
url="Zones"
:label="t('Zone')" :label="t('Zone')"
v-model="params.zoneFk" v-model="params.zoneFk"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:options="zones"
option-value="id" option-value="id"
option-label="name" option-label="name"
emit-value emit-value
@ -152,8 +130,8 @@ const zones = ref();
dense dense
outlined outlined
rounded rounded
auto-load
/> />
</QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>

View File

@ -8,10 +8,10 @@ import VnLocation from 'src/components/common/VnLocation.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CustomerSummary from './Card/CustomerSummary.vue'; import CustomerSummary from './Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue'; import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
import CustomerFilter from './CustomerFilter.vue';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -397,6 +397,11 @@ function handleLocation(data, location) {
:label="t('Search customer')" :label="t('Search customer')"
data-key="Customer" data-key="Customer"
/> />
<RightMenu>
<template #right-panel>
<CustomerFilter data-key="Customer" />
</template>
</RightMenu>
<VnTable <VnTable
ref="tableRef" ref="tableRef"
data-key="Customer" data-key="Customer"
@ -413,6 +418,7 @@ function handleLocation(data, location) {
order="id DESC" order="id DESC"
:columns="columns" :columns="columns"
redirect="customer" redirect="customer"
:right-search="false"
auto-load auto-load
> >
<template #more-create-dialog="{ data }"> <template #more-create-dialog="{ data }">