verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Create order filter

This commit is contained in:
Kevin Martinez 2023-12-14 21:53:47 -04:00
parent c0f6906119
commit 17dd42dd5c
3 changed files with 165 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/FetchData.vue
View File

@ -27,6 +27,10 @@ const $props = defineProps({
type: String, type: String,
default: '', default: '',
}, },
params: {
type: Object,
default: null,
}
}); });
const emit = defineEmits(['onFetch']); const emit = defineEmits(['onFetch']);
@ -46,7 +50,7 @@ async function fetch() {
if ($props.limit) filter.limit = $props.limit; if ($props.limit) filter.limit = $props.limit;
const { data } = await axios.get($props.url, { const { data } = await axios.get($props.url, {
params: { filter: JSON.stringify(filter) }, params: { filter: JSON.stringify(filter), ...$props.params },
}); });
emit('onFetch', data); emit('onFetch', data);

275
src/pages/Order/Card/OrderFilter.vue
View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from "components/common/VnInputDate.vue";
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -13,10 +14,6 @@ const props = defineProps({
}, },
}); });
const workers = ref();
const states = ref();
// New
const agencyFilter = { fields: ['id', 'name'] }; const agencyFilter = { fields: ['id', 'name'] };
const agencyList = ref(null); const agencyList = ref(null);
const salesPersonFilter = { const salesPersonFilter = {
@ -24,12 +21,12 @@ const salesPersonFilter = {
}; };
const salesPersonList = ref(null); const salesPersonList = ref(null);
const sourceFilter = { fields: ['value'] }; const sourceFilter = { fields: ['value'] };
const sourceList = ref(null) const sourceList = ref(null);
</script> </script>
<template> <template>
<FetchData <FetchData
url="AgencyMode/isActive" url="AgencyModes/isActive"
:filter="agencyFilter" :filter="agencyFilter"
limit="30" limit="30"
sort-by="name ASC" sort-by="name ASC"
@ -42,6 +39,7 @@ const sourceList = ref(null)
limit="30" limit="30"
sort-by="nickname ASC" sort-by="nickname ASC"
@on-fetch="(data) => (salesPersonList = data)" @on-fetch="(data) => (salesPersonList = data)"
:params="{ departmentCodes: ['VT'] }"
auto-load auto-load
/> />
<FetchData <FetchData
@ -59,12 +57,12 @@ const sourceList = ref(null)
<span>{{ formatFn(tag.value) }}</span> <span>{{ formatFn(tag.value) }}</span>
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params }">
<QList dense> <QList dense>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Customer ID')" :label="t('customerId')"
v-model="params.clientFk" v-model="params.clientFk"
lazy-rules lazy-rules
> >
@ -74,139 +72,119 @@ const sourceList = ref(null)
</QInput> </QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem>
<QItemSection v-if="agencyList">
<VnSelectFilter
:label="t('agency')"
v-model="params.agencyModeFk"
:options="agencyList"
option-value="id"
option-label="name"
emit-value
map-options
use-input
:input-debounce="0"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="salesPersonList">
<VnSelectFilter
:label="t('salesPerson')"
v-model="params.workerFk"
:options="salesPersonList"
option-value="id"
option-label="name"
emit-value
map-options
use-input
:input-debounce="0"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.nickname }},{{ opt.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('fromLanded')" />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.to"
:label="t('toLanded')" />
</QItemSection>
</QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <QInput
:label="t('Client Name')" :label="t('orderId')"
v-model="params.clientName" v-model="params.orderFk"
lazy-rules lazy-rules
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection v-if="!workers"> <QItemSection v-if="sourceList">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="workers">
<VnSelectFilter <VnSelectFilter
:label="t('Salesperson')" :label="t('application')"
v-model="params.salesPersonFk" v-model="params.sourceApp"
@update:model-value="searchFn()" :options="sourceList"
:options="workers" option-label="value"
option-value="id"
option-label="name"
emit-value emit-value
map-options map-options
use-input use-input
:input-debounce="0" :input-debounce="0"
/> />
</QItemSection> </QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection v-if="!workers"> <QItemSection>
<QSkeleton type="QInput" class="full-width" /> <QCheckbox
</QItemSection> v-model="params.isConfirmed"
<QItemSection v-if="workers"> :label="t('isConfirmed')"
<VnSelectFilter toggle-indeterminate
:label="t('Attender')"
v-model="params.attenderFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
:input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection v-if="!workers"> <QItemSection>
<QSkeleton type="QInput" class="full-width" /> <QCheckbox
</QItemSection> v-model="params.showEmpty"
<QItemSection v-if="workers"> :label="t('showEmpty')"
<VnSelectFilter
:label="t('Responsible')"
v-model="params.claimResponsibleFk"
@update:model-value="searchFn()"
:options="workers"
option-value="id"
option-label="name"
emit-value
map-options
use-input
:input-debounce="0"
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-md">
<QItemSection v-if="!states">
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
<QItemSection v-if="states">
<VnSelectFilter
:label="t('State')"
v-model="params.claimStateFk"
@update:model-value="searchFn()"
:options="states"
option-value="id"
option-label="description"
emit-value
map-options
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<!-- <QItem>
<QItemSection>
<qSelect
:label="t('Item')"
v-model="params.itemFk"
:options="items"
:loading="loading"
@filter="filterFn"
@virtual-scroll="onScroll"
option-value="id"
option-label="name"
emit-value
map-options
/>
</QItemSection>
</QItem> -->
<QItem>
<QItemSection>
<QInput
v-model="params.created"
:label="t('Created')"
autofocus
readonly
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.created">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection>
</QItem>
</QExpansionItem>
</QList> </QList>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
@ -215,31 +193,48 @@ const sourceList = ref(null)
<i18n> <i18n>
en: en:
params: params:
search: Contains search: Includes
clientFk: Customer clientFk: Client
clientName: Customer agencyModeFk: Agency
salesPersonFk: Salesperson salesPersonFk: Sales Person
attenderFk: Attender from: From
claimResponsibleFk: Responsible to: To
claimStateFk: State orderFk: Order
created: Created sourceApp: Application
myTeam: My Team
isConfirmed: Is Confirmed
showEmpty: Show Empty
customerId: Customer ID
agency: Agency
salesPerson: Sales Person
fromLanded: From Landed
toLanded: To Landed
orderId: Order ID
application: Application
myTeam: My Team
isConfirmed: Order Confirmed
showEmpty: Show Empty
es: es:
params: params:
search: Contiene search: Búsqueda
clientFk: Cliente clientFk: Cliente
clientName: Cliente agencyModeFk: Agencia
salesPersonFk: Comercial salesPersonFk: Comercial
attenderFk: Asistente from: Desde
claimResponsibleFk: Responsable to: Hasta
claimStateFk: Estado orderFk: Cesta
created: Creada sourceApp: Aplicación
Customer ID: ID cliente myTeam: Mi Equipo
Client Name: Nombre del cliente isConfirmed: Confirmado
Salesperson: Comercial showEmpty: Mostrar vacías
Attender: Asistente customerId: ID Cliente
Responsible: Responsable agency: Agencia
State: Estado salesPerson: Comercial
Item: Artículo fromLanded: Desde F. entrega
Created: Creada toLanded: Hasta F. entrega
More options: Más opciones orderId: ID Cesta
application: Aplicación
myTeam: Mi Equipo
isConfirmed: Confirmado
showEmpty: Mostrar vacías
</i18n> </i18n>

50
src/pages/Order/OrderList.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate } from 'src/filters'; import { toCurrency, toDate } from 'src/filters';
@ -10,14 +10,14 @@ import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue'; import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import OrderFilter from "pages/Order/Card/OrderFilter.vue";
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
onMounted(() => (stateStore.rightDrawer = false)); onMounted(() => (stateStore.rightDrawer = true));
// onMounted(() => (stateStore.rightDrawer = true)); onUnmounted(() => (stateStore.rightDrawer = false));
// onUnmounted(() => (stateStore.rightDrawer = false));
function navigate(id) { function navigate(id) {
router.push({ path: `/order/${id}` }); router.push({ path: `/order/${id}` });
@ -29,27 +29,27 @@ function navigate(id) {
<Teleport to="#searchbar"> <Teleport to="#searchbar">
<OrderSearchbar /> <OrderSearchbar />
</Teleport> </Teleport>
<!-- <Teleport to="#actions-append">--> <Teleport to="#actions-append">
<!-- <div class="row q-gutter-x-sm">--> <div class="row q-gutter-x-sm">
<!-- <QBtn--> <QBtn
<!-- flat--> flat
<!-- @click="stateStore.toggleRightDrawer()"--> @click="stateStore.toggleRightDrawer()"
<!-- round--> round
<!-- dense--> dense
<!-- icon="menu"--> icon="menu"
<!-- >--> >
<!-- <QTooltip bottom anchor="bottom right">--> <QTooltip bottom anchor="bottom right">
<!-- {{ t('globals.collapseMenu') }}--> {{ t('globals.collapseMenu') }}
<!-- </QTooltip>--> </QTooltip>
<!-- </QBtn>--> </QBtn>
<!-- </div>--> </div>
<!-- </Teleport>--> </Teleport>
</template> </template>
<!-- <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>--> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<!-- <QScrollArea class="fit text-grey-8">--> <QScrollArea class="fit text-grey-8">
<!-- <ShelvingFilter data-key="OrderList" />--> <OrderFilter data-key="OrderList" />
<!-- </QScrollArea>--> </QScrollArea>
<!-- </QDrawer>--> </QDrawer>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="card-list"> <div class="card-list">
<VnPaginate <VnPaginate
@ -65,7 +65,7 @@ function navigate(id) {
v-for="row of rows" v-for="row of rows"
:key="row.id" :key="row.id"
:id="row.id" :id="row.id"
:title="row.code" :title="`${row?.clientName} (${row?.clientFk})`"
@click="navigate(row.id)" @click="navigate(row.id)"
> >
<template #list-items> <template #list-items>