forked from verdnatura/salix-front
Merge pull request 'Adapt invoices out global form to new design and some improvements' (#18) from feature/ms-33-AdaptGlobalInvoicesForm into dev
Reviewed-on: hyervoni/salix-front-mindshore#18
This commit is contained in:
commit
b2edb89118
|
|
@ -1,8 +1,11 @@
|
|||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { onMounted, ref, computed, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toDate } from 'src/filters';
|
||||
import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
|
||||
|
|
@ -11,9 +14,7 @@ const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
|
|||
const {
|
||||
initialDataLoading,
|
||||
formInitialData,
|
||||
clientsOptions,
|
||||
companiesOptions,
|
||||
printersOptions,
|
||||
|
||||
invoicing,
|
||||
printer,
|
||||
status,
|
||||
|
|
@ -22,20 +23,37 @@ const {
|
|||
// invoiceOutGlobalStore actions
|
||||
const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
|
||||
|
||||
const clientsToInvoice = ref('all');
|
||||
|
||||
const companiesOptions = reactive({
|
||||
original: [],
|
||||
filtered: [],
|
||||
});
|
||||
|
||||
const printersOptions = reactive({
|
||||
original: [],
|
||||
filtered: [],
|
||||
});
|
||||
|
||||
const clientsOptions = reactive({
|
||||
original: [],
|
||||
filtered: [],
|
||||
});
|
||||
|
||||
const formData = ref({
|
||||
companyFk: null,
|
||||
invoiceDate: null,
|
||||
maxShipped: null,
|
||||
clientId: null,
|
||||
printer: null,
|
||||
});
|
||||
|
||||
const getPrinter = computed({
|
||||
get() {
|
||||
return printer.value;
|
||||
},
|
||||
set(value) {
|
||||
setPrinterValue(value.value);
|
||||
},
|
||||
const optionsInitialData = computed(() => {
|
||||
return (
|
||||
companiesOptions.original.length > 0 &&
|
||||
printersOptions.original.length > 0 &&
|
||||
clientsOptions.original.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
const getStatus = computed({
|
||||
|
|
@ -47,36 +65,39 @@ const getStatus = computed({
|
|||
},
|
||||
});
|
||||
|
||||
const clientsToInvoice = ref('all');
|
||||
const filteredClientsOptions = ref([]);
|
||||
const onFetchCompanies = (companies) => {
|
||||
companiesOptions.original = companies.map((company) => {
|
||||
return { value: company.id, label: company.code };
|
||||
});
|
||||
// Cuando necesitamos que el select muestre valores inicialmente le damos un valor inicial a los filters
|
||||
companiesOptions.filtered = [...companiesOptions.original];
|
||||
};
|
||||
|
||||
const onFetchPrinters = (printers) => {
|
||||
printersOptions.original = printers.map((printer) => {
|
||||
return { value: printer.id, label: printer.name };
|
||||
});
|
||||
};
|
||||
|
||||
const onFetchClients = (clients) => {
|
||||
clientsOptions.original = clients.map((client) => {
|
||||
return { value: client.id, label: client.name };
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await invoiceOutGlobalStore.init();
|
||||
formData.value = { ...formInitialData.value };
|
||||
});
|
||||
|
||||
const inputSelectfilter = (val, update) => {
|
||||
if (val === '') {
|
||||
update(() => {
|
||||
filteredClientsOptions.value = JSON.parse(
|
||||
JSON.stringify(clientsOptions.value)
|
||||
);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
update(() => {
|
||||
const searchQuery = val.toLowerCase();
|
||||
filteredClientsOptions.value = clientsOptions.value.filter(
|
||||
(option) => option.label.toLowerCase().indexOf(searchQuery) > -1
|
||||
);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="Companies" @on-fetch="(data) => onFetchCompanies(data)" auto-load />
|
||||
<FetchData url="Printers" @on-fetch="(data) => onFetchPrinters(data)" auto-load />
|
||||
<FetchData url="Clients" @on-fetch="(data) => onFetchClients(data)" auto-load />
|
||||
|
||||
<QForm
|
||||
v-if="!initialDataLoading"
|
||||
v-if="!initialDataLoading && optionsInitialData"
|
||||
@submit="makeInvoice(formData, clientsToInvoice)"
|
||||
class="q-pa-md text-white"
|
||||
>
|
||||
|
|
@ -97,44 +118,122 @@ const inputSelectfilter = (val, update) => {
|
|||
/>
|
||||
<QSelect
|
||||
v-if="clientsToInvoice === 'one'"
|
||||
:options="filteredClientsOptions"
|
||||
v-model="formData.clientId"
|
||||
filled
|
||||
use-input
|
||||
:label="t('client')"
|
||||
@filter="inputSelectfilter"
|
||||
:options="clientsOptions.filtered"
|
||||
use-input
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
transition-show="jump-up"
|
||||
transition-hide="jump-up"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
@filter="
|
||||
(val, update, abort) =>
|
||||
inputSelectFilter(val, update, abort, clientsOptions)
|
||||
"
|
||||
v-model="formData.clientId"
|
||||
/>
|
||||
<QInput
|
||||
v-model="formData.invoiceDate"
|
||||
type="date"
|
||||
filled
|
||||
mask="date"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('invoiceDate')"
|
||||
:model-value="toDate(formData.invoiceDate)"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<QDate v-model="formData.invoiceDate">
|
||||
<div class="row items-center justify-end">
|
||||
<QBtn
|
||||
v-close-popup
|
||||
label="Close"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
<QInput
|
||||
v-model="formData.maxShipped"
|
||||
type="date"
|
||||
filled
|
||||
mask="date"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
placeholder="dd-mm-aaa"
|
||||
:label="t('maxShipped')"
|
||||
:model-value="toDate(formData.maxShipped)"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<QDate v-model="formData.maxShipped">
|
||||
<div class="row items-center justify-end">
|
||||
<QBtn
|
||||
v-close-popup
|
||||
label="Close"
|
||||
color="primary"
|
||||
flat
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
<QSelect
|
||||
filled
|
||||
:options="companiesOptions"
|
||||
v-model="formData.companyFk"
|
||||
v-if="optionsInitialData"
|
||||
:label="t('company')"
|
||||
:options="companiesOptions.filtered"
|
||||
use-input
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
transition-show="jump-up"
|
||||
transition-hide="jump-up"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
lazy-rules
|
||||
@filter="
|
||||
(val, update, abort) =>
|
||||
inputSelectFilter(val, update, abort, companiesOptions)
|
||||
"
|
||||
v-model="formData.companyFk"
|
||||
/>
|
||||
<QSelect
|
||||
filled
|
||||
:options="printersOptions"
|
||||
v-model="getPrinter"
|
||||
:label="t('printer')"
|
||||
:options="printersOptions.filtered"
|
||||
use-input
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
emit-value
|
||||
map-options
|
||||
transition-show="jump-up"
|
||||
transition-hide="jump-up"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
lazy-rules
|
||||
@filter="
|
||||
(val, update, abort) =>
|
||||
inputSelectFilter(val, update, abort, printersOptions)
|
||||
"
|
||||
v-model="formData.printer"
|
||||
/>
|
||||
</div>
|
||||
<QBtn
|
||||
|
|
|
|||
|
|
@ -33,18 +33,6 @@ const invoiceOutService = {
|
|||
return await request('GET', 'InvoiceOutConfigs/findOne', params);
|
||||
},
|
||||
|
||||
getCompanies: async (filter) => {
|
||||
return await request('GET', 'Companies', { filter });
|
||||
},
|
||||
|
||||
getPrinters: async (filter) => {
|
||||
return await request('GET', 'Printers', { filter });
|
||||
},
|
||||
|
||||
getClients: async (filter) => {
|
||||
return await request('GET', 'Clients', { filter });
|
||||
},
|
||||
|
||||
getClientsToInvoice: async (params) => {
|
||||
return await request('POST', 'InvoiceOuts/clientsToInvoice', params);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
invoiceDate: null,
|
||||
maxShipped: null,
|
||||
clientId: null,
|
||||
printer: null,
|
||||
},
|
||||
clientsOptions: [],
|
||||
companiesOptions: [],
|
||||
printersOptions: [],
|
||||
addresses: [],
|
||||
minInvoicingDate: null,
|
||||
parallelism: null,
|
||||
|
|
@ -27,8 +25,8 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
isInvoicing: false,
|
||||
status: null,
|
||||
addressIndex: 0,
|
||||
printer: null,
|
||||
errors: [],
|
||||
printer: null,
|
||||
nRequests: 0,
|
||||
nPdfs: 0,
|
||||
totalPdfs: 0,
|
||||
|
|
@ -51,10 +49,7 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
.substring(0, 10);
|
||||
|
||||
await Promise.all([
|
||||
this.fetchClients(),
|
||||
this.fetchParallelism(),
|
||||
this.fetchCompanies(userInfo.companyFk),
|
||||
this.fetchPrinters(),
|
||||
this.fetchInvoiceOutConfig(userInfo.companyFk),
|
||||
]);
|
||||
|
||||
|
|
@ -64,45 +59,10 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
}
|
||||
},
|
||||
|
||||
async fetchClients() {
|
||||
const clientsFilter = { fields: ['id', 'name'], order: 'id', limit: 30 };
|
||||
const clientsResponse = await invoiceOutService.getClients(clientsFilter);
|
||||
this.clientsOptions = clientsResponse.map((client) => {
|
||||
return { value: client.id, label: client.name };
|
||||
});
|
||||
},
|
||||
|
||||
async fetchCompanies(companyFk) {
|
||||
const companiesFilters = { order: ['code'] };
|
||||
const companiesResponse = await invoiceOutService.getCompanies(
|
||||
companiesFilters
|
||||
);
|
||||
this.companiesOptions = companiesResponse.map((company) => {
|
||||
return { value: company.id, label: company.code };
|
||||
});
|
||||
|
||||
this.formInitialData.companyFk = this.companiesOptions.find(
|
||||
(company) => companyFk === company.value
|
||||
);
|
||||
},
|
||||
|
||||
async fetchPrinters() {
|
||||
const printersFilters = {
|
||||
fields: ['id', 'name'],
|
||||
where: { isLabeler: false },
|
||||
order: 'name ASC',
|
||||
limit: 30,
|
||||
};
|
||||
const printersResponse = await invoiceOutService.getPrinters(printersFilters);
|
||||
this.printersOptions = printersResponse.map((printer) => {
|
||||
return { value: printer.id, label: printer.name };
|
||||
});
|
||||
},
|
||||
|
||||
async fetchInvoiceOutConfig(companyFk) {
|
||||
this.formInitialData.companyFk = companyFk;
|
||||
const params = { companyFk: companyFk };
|
||||
const { issued } = await invoiceOutService.getInvoiceDate(params);
|
||||
|
||||
const stringDate = issued.substring(0, 10);
|
||||
this.minInvoicingDate = stringDate;
|
||||
this.formInitialData.invoiceDate = stringDate;
|
||||
|
|
@ -118,11 +78,12 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
this.invoicing = true;
|
||||
this.status = 'packageInvoicing';
|
||||
try {
|
||||
this.printer = formData.printer;
|
||||
const params = {
|
||||
invoiceDate: new Date(formData.invoiceDate),
|
||||
maxShipped: new Date(formData.maxShipped),
|
||||
clientId: formData.clientId ? formData.clientId.value : null,
|
||||
companyFk: formData.companyFk.value,
|
||||
clientId: formData.clientId ? formData.clientId : null,
|
||||
companyFk: formData.companyFk,
|
||||
};
|
||||
|
||||
this.validateMakeInvoceParams(params, clientsToInvoice);
|
||||
|
|
@ -204,7 +165,7 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
addressId: address.id,
|
||||
invoiceDate: new Date(formData.invoiceDate),
|
||||
maxShipped: new Date(formData.maxShipped),
|
||||
companyFk: formData.companyFk.value,
|
||||
companyFk: formData.companyFk,
|
||||
};
|
||||
|
||||
this.status = 'invoicing';
|
||||
|
|
@ -238,7 +199,7 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
try {
|
||||
this.nRequests++;
|
||||
this.totalPdfs++;
|
||||
const params = { printerFk: this.printer.value };
|
||||
const params = { printerFk: this.printer };
|
||||
await invoiceOutService.makePdfAndNotify(invoiceId, params);
|
||||
this.nPdfs++;
|
||||
this.nRequests--;
|
||||
|
|
@ -280,10 +241,6 @@ export const useInvoiceOutGlobalStore = defineStore({
|
|||
|
||||
// State mutations actions
|
||||
|
||||
setPrinterValue(printer) {
|
||||
this.printer = printer;
|
||||
},
|
||||
|
||||
setStatusValue(status) {
|
||||
this.status = status;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue