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

Cambios solicitados

This commit is contained in:
William Buezas 2023-11-29 14:21:26 -03:00
parent b2edb89118
commit db81ab8acf
9 changed files with 135 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/composables/inputSelectFilterFn.js
View File

@ -1,33 +0,0 @@
/**
* Filtra las opciones basadas en un valor de entrada y actualiza las opciones filtradas.
*
* @param {string} val - El valor de entrada para filtrar las opciones. (la emite el evento @filter del componente QSelect)
* @param {Function} update - Función de actualización que debe ser llamada para actualizar las opciones filtradas.(la provee el evento @filter del componente QSelect)
* @param {Function} abort - Función que puede ser llamada para abortar o cancelar el filtrado actual. (la provee el evento @filter del componente QSelect)
* @param {Object} optionsToFilter - Objeto que contiene las opciones originales y filtradas.
*/
function normalizeString(text) {
return text
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '');
}
export function inputSelectFilter(val, update, abort, optionsToFilter) {
if (val === '') {
update(() => {
optionsToFilter.filtered = JSON.parse(
JSON.stringify(optionsToFilter.original)
);
});
return;
}
update(() => {
const searchQuery = val.toLowerCase();
optionsToFilter.filtered = optionsToFilter.original.filter((option) =>
normalizeString(option.label).includes(normalizeString(searchQuery))
);
});
}

3
src/composables/useUserConfig.js
View File

@ -1,8 +1,10 @@
import axios from 'axios';
import { useState } from './useState';
import useNotify from './useNotify';
export function useUserConfig() {
const state = useState();
const { notify } = useNotify();
async function fetch() {
try {
@ -14,6 +16,7 @@ export function useUserConfig() {
return data;
} catch (error) {
notify('globals.errors.userConfig', 'negative');
console.error('Error fetching user config:', error);
}
}

5
src/i18n/en/index.js
View File

@ -44,6 +44,7 @@ export default {
statusInternalServerError: 'An internal server error has ocurred',
statusBadGateway: 'It seems that the server has fall down',
statusGatewayTimeout: 'Could not contact the server',
userConfig: 'Error fetching user config',
},
login: {
title: 'Login',
@ -399,9 +400,9 @@ export default {
chooseValidCompany: 'Choose a valid company',
chooseValidPrinter: 'Choose a valid printer',
fillDates: 'Invoice date and the max date should be filled',
invoiceDateLessThanMaxDate: "Invoice date can't be less than max date",
invoiceDateLessThanMaxDate: 'Invoice date can not be less than max date',
invoiceWithFutureDate: 'Exists an invoice with a future date',
noTicketsToInvoice: "There aren't clients to invoice",
noTicketsToInvoice: 'There are not clients to invoice',
criticalInvoiceError: 'Critical invoicing error, process stopped',
},
table: {

1
src/i18n/es/index.js
View File

@ -44,6 +44,7 @@ export default {
statusInternalServerError: 'Ha ocurrido un error interno del servidor',
statusBadGateway: 'Parece ser que el servidor ha caído',
statusGatewayTimeout: 'No se ha podido contactar con el servidor',
userConfig: 'Error al obtener configuración de usuario',
},
login: {
title: 'Inicio de sesión',

24
src/pages/InvoiceOut/InvoiceOutGlobal.vue
View File

@ -74,20 +74,6 @@ const columns = computed(() => {
];
});
const cardStatusText = computed(() => {
return t(`status.${status.value}`);
});
const percentageStatusText = computed(() => {
return `${getPercentage.value}% (${getAddressNumber.value} ${t('of')} ${
getNAddresses.value
})`;
});
const pdfStatusText = computed(() => {
return `${nPdfs.value} ${t('of')} ${totalPdfs.value} PDFs`;
});
const rows = computed(() => {
if (!errors && !errors.length > 0) return [];
return errors.value.map((row) => {
@ -110,7 +96,7 @@ onUnmounted(() => {
</script>
<template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
<QScrollArea class="fit text-grey-8">
<InvoiceOutGlobalForm />
</QScrollArea>
@ -119,9 +105,11 @@ onUnmounted(() => {
<QPage class="column items-center q-pa-md">
<QCard v-if="status" class="card">
<QCardSection class="card-section">
<span class="status-text">{{ cardStatusText }}</span>
<span class="text">{{ percentageStatusText }}</span>
<span class="text">{{ pdfStatusText }}</span>
<span class="status-text">{{ t(`status.${status}`) }}</span>
<span class="text">{{
`${getPercentage}% (${getAddressNumber} ${t('of')} ${getNAddresses})`
}}</span>
<span class="text">{{ `${nPdfs} ${t('of')} ${totalPdfs} PDFs` }}</span>
</QCardSection>
</QCard>

127
src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
View File

@ -1,10 +1,10 @@
<script setup>
import { onMounted, ref, computed, reactive } from 'vue';
import { onMounted, ref, computed } 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
const { t } = useI18n();
@ -16,29 +16,19 @@ const {
formInitialData,
invoicing,
printer,
status,
} = storeToRefs(invoiceOutGlobalStore);
// invoiceOutGlobalStore actions
const { makeInvoice, setPrinterValue, setStatusValue } = invoiceOutGlobalStore;
const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
const clientsToInvoice = ref('all');
const companiesOptions = reactive({
original: [],
filtered: [],
});
const companiesOptions = ref([]);
const printersOptions = reactive({
original: [],
filtered: [],
});
const printersOptions = ref([]);
const clientsOptions = reactive({
original: [],
filtered: [],
});
const clientsOptions = ref([]);
const formData = ref({
companyFk: null,
@ -50,9 +40,9 @@ const formData = ref({
const optionsInitialData = computed(() => {
return (
companiesOptions.original.length > 0 &&
printersOptions.original.length > 0 &&
clientsOptions.original.length > 0
companiesOptions.value.length > 0 &&
printersOptions.value.length > 0 &&
clientsOptions.value.length > 0
);
});
@ -66,23 +56,15 @@ const getStatus = computed({
});
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];
companiesOptions.value = [...companies];
};
const onFetchPrinters = (printers) => {
printersOptions.original = printers.map((printer) => {
return { value: printer.id, label: printer.name };
});
printersOptions.value = [...printers];
};
const onFetchClients = (clients) => {
clientsOptions.original = clients.map((client) => {
return { value: client.id, label: client.name };
});
clientsOptions.value = [...clients];
};
onMounted(async () => {
@ -99,9 +81,10 @@ onMounted(async () => {
<QForm
v-if="!initialDataLoading && optionsInitialData"
@submit="makeInvoice(formData, clientsToInvoice)"
class="q-pa-md text-white"
class="form-container q-pa-md"
style="max-width: 256px"
>
<div class="q-gutter-md">
<div class="column q-gutter-y-md">
<QRadio
v-model="clientsToInvoice"
dense
@ -116,25 +99,17 @@ onMounted(async () => {
:label="t('oneClient')"
:dark="true"
/>
<QSelect
<VnSelectFilter
v-if="clientsToInvoice === 'one'"
:label="t('client')"
:options="clientsOptions.filtered"
use-input
option-value="value"
option-label="label"
emit-value
map-options
transition-show="jump-up"
transition-hide="jump-up"
v-model="formData.clientId"
:options="clientsOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, clientsOptions)
"
v-model="formData.clientId"
/>
<QInput
dense
@ -194,54 +169,36 @@ onMounted(async () => {
</QIcon>
</template>
</QInput>
<QSelect
v-if="optionsInitialData"
<VnSelectFilter
: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
: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"
:options="companiesOptions"
option-value="id"
option-label="code"
hide-selected
dense
outlined
rounded
lazy-rules
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, printersOptions)
"
/>
<VnSelectFilter
:label="t('printer')"
v-model="formData.printer"
:options="printersOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</div>
<QBtn
v-if="!invoicing"
:label="t('invoiceOut')"
type="submit"
color="primary"
class="full-width q-mt-md"
class="q-mt-md full-width"
unelevated
rounded
dense
@ -250,7 +207,7 @@ onMounted(async () => {
v-if="invoicing"
:label="t('stop')"
color="primary"
class="full-width q-mt-md"
class="q-mt-md full-width"
unelevated
rounded
dense
@ -259,6 +216,12 @@ onMounted(async () => {
</QForm>
</template>
<style scoped>
.form-container > * {
max-width: 100%;
}
</style>
<i18n>
{
"en": {

79
src/pages/Travel/TravelCreate.vue
View File

@ -1,11 +1,10 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { reactive, computed } from 'vue';
import { reactive, computed, ref } from 'vue';
import FetchData from 'components/FetchData.vue';
import { useTravelStore } from 'src/stores/travel';
import { useRouter, useRoute } from 'vue-router';
import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
import { toDate } from 'src/filters';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import { onBeforeMount } from 'vue';
const { t } = useI18n();
@ -22,15 +21,9 @@ const newTravelDataForm = reactive({
warehouseInFk: null,
});
const agenciesOptions = reactive({
original: [],
filtered: [],
});
const agenciesOptions = ref([]);
const warehousesOptions = reactive({
original: [],
filtered: [],
});
const warehousesOptions = ref([]);
onBeforeMount(() => {
if (route.query.travelData) {
@ -51,15 +44,11 @@ const createTravel = async () => {
};
const onFetchAgencies = (agencies) => {
agenciesOptions.original = agencies.map((agency) => {
return { value: agency.agencyFk, label: agency.name };
});
agenciesOptions.value = [...agencies];
};
const onFetchWarehouses = (warehouses) => {
warehousesOptions.original = warehouses.map((warehouse) => {
return { value: warehouse.id, label: warehouse.name };
});
warehousesOptions.value = [...warehouses];
};
const canSubmit = computed(() => {
@ -88,21 +77,15 @@ const redirectToTravelList = () => {
v-model="newTravelDataForm.ref"
:label="t('travel.shared.reference')"
filled
style="max-width: 100%"
/>
<QSelect
:options="agenciesOptions.filtered"
v-model="newTravelDataForm.agencyModeFk"
filled
use-input
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, agenciesOptions)
"
<VnSelectFilter
:label="t('travel.shared.agency')"
transition-show="jump-up"
transition-hide="jump-up"
style="max-width: 100%"
v-model="newTravelDataForm.agencyModeFk"
:options="agenciesOptions"
option-value="agencyFk"
option-label="name"
hide-selected
filled
/>
<QInput
v-model="newTravelDataForm.shipped"
@ -118,31 +101,23 @@ const redirectToTravelList = () => {
mask="date"
:label="t('travel.shared.landed')"
/>
<QSelect
:options="warehousesOptions.filtered"
v-model="newTravelDataForm.warehouseOutFk"
filled
use-input
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, warehousesOptions)
"
<VnSelectFilter
:label="t('travel.shared.wareHouseOut')"
transition-show="jump-up"
transition-hide="jump-up"
/>
<QSelect
:options="warehousesOptions.filtered"
v-model="newTravelDataForm.warehouseInFk"
v-model="newTravelDataForm.warehouseOutFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
filled
use-input
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, warehousesOptions)
"
/>
<VnSelectFilter
:label="t('travel.shared.wareHouseIn')"
transition-show="jump-up"
transition-hide="jump-up"
v-model="newTravelDataForm.warehouseInFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
filled
/>
</QCard>
<div class="row">

156
src/pages/Travel/TravelFilter.vue
View File

@ -1,8 +1,8 @@
<script setup>
import { reactive } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue';
import { toDate } from 'src/filters';
@ -14,37 +14,22 @@ const props = defineProps({
},
});
const warehousesOptions = reactive({
original: [],
filtered: [],
});
const warehousesOptions = ref([]);
const continentsOptions = reactive({
original: [],
filtered: [],
});
const continentsOptions = ref([]);
const agenciesOptions = reactive({
original: [],
filtered: [],
});
const agenciesOptions = ref([]);
const onFetchWarehouses = (warehouses) => {
warehousesOptions.original = warehouses.map((warehouse) => {
return { value: warehouse.id, label: warehouse.name };
});
warehousesOptions.value = [...warehouses];
};
const onFetchContinents = (continents) => {
continentsOptions.original = continents.map((continent) => {
return { value: continent.code, label: continent.name };
});
continentsOptions.value = [...continents];
};
const onFetchAgencies = (agencies) => {
agenciesOptions.original = agencies.map((agency) => {
return { value: agency.agencyFk, label: agency.name };
});
agenciesOptions.value = [...agencies];
};
const add = (paramsObj, key) => {
@ -75,7 +60,7 @@ const decrement = (paramsObj, key) => {
</div>
</template>
<template #body="{ params }">
<QList dense>
<QList dense style="max-width: 256px" class="list">
<QItem class="q-my-sm">
<QItemSection>
<QInput
@ -90,83 +75,46 @@ const decrement = (paramsObj, key) => {
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<QSelect
<VnSelectFilter
:label="t('params.agencyModeFk')"
:options="agenciesOptions.filtered"
use-input
option-value="value"
option-label="label"
emit-value
map-options
transition-show="jump-up"
transition-hide="jump-up"
dense
lazy-rules
outlined
rounded
@filter="
(val, update, abort) =>
inputSelectFilter(val, update, abort, agenciesOptions)
"
v-model="params.agencyModeFk"
:options="agenciesOptions"
option-value="agencyFk"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<QSelect
:label="t('travel.shared.wareHouseOut')"
:options="warehousesOptions.filtered"
use-input
option-value="value"
option-label="label"
emit-value
map-options
transition-show="jump-up"
transition-hide="jump-up"
dense
lazy-rules
outlined
rounded
@filter="
(val, update, abort) =>
inputSelectFilter(
val,
update,
abort,
warehousesOptions
)
"
<VnSelectFilter
:label="t('params.warehouseOutFk')"
v-model="params.warehouseOutFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<QSelect
:label="t('params.wareHouseIn')"
:options="warehousesOptions.filtered"
use-input
option-value="value"
option-label="label"
emit-value
map-options
transition-show="jump-up"
transition-hide="jump-up"
<VnSelectFilter
:label="t('params.warehouseInFk')"
v-model="params.warehouseInFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
dense
lazy-rules
outlined
rounded
@filter="
(val, update, abort) =>
inputSelectFilter(
val,
update,
abort,
warehousesOptions
)
"
v-model="params.warehouseInFk"
/>
</QItemSection>
</QItem>
@ -271,30 +219,16 @@ const decrement = (paramsObj, key) => {
</QItem>
<QItem class="q-mb-sm">
<QItemSection>
<QSelect
<VnSelectFilter
:label="t('params.continent')"
:options="continentsOptions.filtered"
use-input
option-value="value"
option-label="label"
emit-value
map-options
transition-show="jump-up"
transition-hide="jump-up"
v-model="params.continent"
:options="continentsOptions"
option-value="code"
option-label="name"
hide-selected
dense
lazy-rules
outlined
rounded
@filter="
(val, update, abort) =>
inputSelectFilter(
val,
update,
abort,
continentsOptions
)
"
v-model="params.continent"
/>
</QItemSection>
</QItem>
@ -336,6 +270,10 @@ const decrement = (paramsObj, key) => {
</template>
<style scoped>
.list * {
max-width: 100%;
}
.input-number >>> input[type='number'] {
-moz-appearance: textfield;
}
@ -353,8 +291,8 @@ const decrement = (paramsObj, key) => {
"params": {
"search": "Id/Reference",
"agencyModeFk": "Agency",
"wareHouseIn": "Warehouse In",
"wareHouseOut": "Warehouse Out",
"warehouseInFk": "Warehouse In",
"warehouseOutFk": "Warehouse Out",
"scopeDays": "Days onward",
"landedFrom": "Landed from",
"landedTo": "Landed to",
@ -366,8 +304,8 @@ const decrement = (paramsObj, key) => {
"params":{
"search": "Id/Referencia",
"agencyModeFk": "Agencia",
"wareHouseIn": "Alm. entrada",
"wareHouseOut": "Alm. salida",
"warehouseInFk": "Alm. entrada",
"warehouseOutFk": "Alm. salida",
"scopeDays": "Días adelante",
"landedFrom": "Llegada desde",
"landedTo": "Llegada hasta",

6
src/stores/travel.js
View File

@ -21,9 +21,9 @@ export const useTravelStore = defineStore({
async createTravel(travelData) {
const params = {
ref: travelData.ref,
agencyModeFk: travelData.agencyModeFk.value,
warehouseOutFk: travelData.warehouseOutFk.value,
warehouseInFk: travelData.warehouseInFk.value,
agencyModeFk: travelData.agencyModeFk,
warehouseOutFk: travelData.warehouseOutFk,
warehouseInFk: travelData.warehouseInFk,
landed: new Date(travelData.landed),
shipped: new Date(travelData.shipped),
};