Merge branch 'dev' into feature/order

This commit is contained in:
Kevin Martinez 2023-12-19 00:59:53 -04:00
commit 42c8e8c80f
21 changed files with 814 additions and 263 deletions

View File

@ -61,7 +61,7 @@ const $props = defineProps({
}
});
const emit = defineEmits(['onFetch']);
const emit = defineEmits(['onFetch', 'onDataSaved']);
defineExpose({
save,
@ -89,7 +89,7 @@ const isLoading = ref(false);
// Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
const isResetting = ref(false);
const hasChanges = ref(!$props.observeFormChanges);
const originalData = ref({...$props.formInitialData});
const originalData = ref({ ...$props.formInitialData });
const formData = computed(() => state.get($props.model));
const formUrl = computed(() => $props.url);
@ -122,7 +122,7 @@ async function fetch() {
}
async function save() {
if (!hasChanges.value) {
if ($props.observeFormChanges && !hasChanges.value) {
notify('globals.noChanges', 'negative');
return;
}
@ -136,6 +136,7 @@ async function save() {
} else {
await axios.patch($props.urlUpdate || $props.url, body);
}
emit('onDataSaved', formData.value);
} catch (err) {
notify('errors.create', 'negative');
}

View File

@ -0,0 +1,71 @@
<script setup>
import { ref, computed } from 'vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import { useRole } from 'src/composables/useRole';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({
modelValue: {
type: [String, Number, Object],
default: null,
},
options: {
type: Array,
default: () => [],
},
rolesAllowedToCreate: {
type: Array,
default: () => ['developer'],
},
});
const role = useRole();
const showForm = ref(false);
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
const isAllowedToCreate = computed(() => {
return role.hasAny($props.rolesAllowedToCreate);
});
const toggleForm = () => {
showForm.value = !showForm.value;
};
</script>
<template>
<VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
<template v-if="isAllowedToCreate" #append>
<QIcon
@click.stop.prevent="toggleForm()"
name="add"
size="19px"
class="add-icon"
/>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
<slot name="form" />
</QDialog>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData" :key="slotName" />
</template>
</VnSelectFilter>
</template>
<style lang="scss" scoped>
.add-icon {
cursor: pointer;
background-color: $primary;
border-radius: 50px;
}
</style>

View File

@ -1,5 +1,5 @@
<script setup>
import { ref, toRefs, watch, computed } from 'vue';
import { ref, toRefs, computed } from 'vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
const $props = defineProps({
@ -24,16 +24,11 @@ const $props = defineProps({
default: true,
},
});
const { optionLabel, options } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref(null);
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
const { optionLabel } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = computed(() => $props.options);
const vnSelectRef = ref(null);
const filter = (val, options) => {
const search = val.toString().toLowerCase();
@ -69,10 +64,6 @@ const filterHandler = (val, update) => {
);
};
watch(options, (newValue) => {
setOptions(newValue);
});
const value = computed({
get() {
return $props.modelValue;
@ -105,8 +96,8 @@ const value = computed({
size="18px"
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData">
<slot :name="slotName" v-bind="slotData ?? {}" />
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
</QSelect>
</template>

View File

@ -24,6 +24,13 @@ const props = defineProps({
type: Boolean,
default: true,
},
unremovableParams: {
type: Array,
required: false,
default: () => [],
description:
'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no',
},
});
const emit = defineEmits(['refresh', 'clear', 'search']);
@ -63,12 +70,25 @@ async function reload() {
}
async function clearFilters() {
userParams.value = {};
isLoading.value = true;
await arrayData.applyFilter({ params: {} });
if (!props.showAll) store.data = [];
isLoading.value = false;
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
props.unremovableParams.includes(param)
);
const newParams = {};
// Conservar solo los params que no son removibles
for (const key of removableFilters) {
newParams[key] = userParams.value[key];
}
userParams.value = { ...newParams }; // Actualizar los params con los removibles
await arrayData.applyFilter({ params: userParams.value });
if (!props.showAll) {
store.data = [];
}
isLoading.value = false;
emit('clear');
}
@ -156,7 +176,7 @@ function formatValue(value) {
class="text-dark"
color="primary"
icon="label"
removable
:removable="!unremovableParams.includes(chip.label)"
size="sm"
v-for="chip of tags"
>

View File

@ -132,6 +132,7 @@ export function useArrayData(key, userOptions) {
async function applyFilter({ filter, params }) {
if (filter) store.userFilter = filter;
store.filter = {};
if (params) store.userParams = Object.assign({}, params);
await fetch({ append: false });
@ -155,7 +156,9 @@ export function useArrayData(key, userOptions) {
delete store.userParams[param];
delete params[param];
if (store.filter?.where) {
delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
delete store.filter.where[
Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
];
if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where;
}

View File

@ -763,6 +763,9 @@ export default {
create: 'Create',
summary: 'Summary',
extraCommunity: 'Extra community',
basicData: 'Basic data',
history: 'History',
thermographs: 'Termographs',
},
summary: {
confirmed: 'Confirmed',

View File

@ -714,6 +714,9 @@ export default {
create: 'Crear',
summary: 'Resumen',
extraCommunity: 'Extra comunitarios',
basicData: 'Datos básicos',
history: 'Historial',
thermographs: 'Termógrafos',
},
summary: {
confirmed: 'Confirmado',

View File

@ -0,0 +1,244 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerCreateNewPostcode from './CustomerCreateNewPostcode.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
const { t } = useI18n();
const newClientForm = reactive({
active: true,
name: null,
salesPersonFk: null,
businessTypeFk: null,
fi: null,
socialName: null,
street: null,
postcode: null,
city: null,
provinceFk: null,
countryFk: null,
userName: null,
email: null,
isEqualizated: false,
});
const workersOptions = ref([]);
const businessTypesOptions = ref([]);
const citiesLocationOptions = ref([]);
const provincesLocationOptions = ref([]);
const countriesOptions = ref([]);
</script>
<template>
<FetchData
@on-fetch="(data) => (workersOptions = data)"
auto-load
url="Workers/search?departmentCodes"
/>
<FetchData
@on-fetch="(data) => (businessTypesOptions = data)"
auto-load
url="BusinessTypes"
/>
<FetchData
@on-fetch="(data) => (citiesLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
@on-fetch="(data) => (provincesLocationOptions = data)"
auto-load
url="Provinces/location"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
auto-load
url="Countries"
/>
<QPage>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<FormModel
:form-initial-data="newClientForm"
:observe-form-changes="false"
model="client"
url-create="Clients/createWithUser"
>
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput :label="t('Comercial name')" v-model="data.name" />
</div>
<div class="col">
<VnSelectFilter
:label="t('Salesperson')"
:options="workersOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.salesPersonFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Business type')"
:options="businessTypesOptions"
hide-selected
option-label="description"
option-value="code"
v-model="data.businessTypeFk"
/>
</div>
<div class="col">
<QInput v-model="data.fi" :label="t('Tax number')" />
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('Business name')"
:rules="validate('Client.socialName')"
v-model="data.socialName"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput
:label="t('Street')"
:rules="validate('Client.street')"
v-model="data.street"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput v-model="data.postcode" :label="t('Postcode')">
<template #append>
<QBtn
class="cursor-pointer"
color="primary"
dense
icon="add"
round
size="xs"
>
<QPopupProxy
cover
transition-hide="scale"
transition-show="scale"
>
<CustomerCreateNewPostcode />
</QPopupProxy>
</QBtn>
</template>
</QInput>
</div>
<div class="col">
<!-- ciudades -->
<VnSelectFilter
:label="t('City')"
:options="citiesLocationOptions"
hide-selected
option-label="name"
option-value="name"
v-model="data.city"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItemLabel caption>
{{
`${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Province')"
:options="provincesLocationOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt.name} (${scope.opt.country.country})`
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('Country')"
:options="countriesOptions"
hide-selected
option-label="country"
option-value="id"
v-model="data.countryFk"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput v-model="data.userName" :label="t('Web user')" />
</div>
<div class="col">
<QInput v-model="data.email" :label="t('Email')" />
</div>
</VnRow>
<QCheckbox
:label="t('Is equalizated')"
v-model="newClientForm.isEqualizated"
/>
</template>
</FormModel>
</QPage>
</template>
<style lang="scss" scoped>
.card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
</style>
<i18n>
es:
Comercial name: Nombre comercial
Salesperson: Comercial
Business type: Tipo de negocio
Tax number: NIF / CIF
Business name: Razón social
Street: Dirección fiscal
Postcode: Código postal
City: Población
Province: Provincia
Country: País
Web user: Usuario web
Email: Email
Is equalizated: Recargo de equivalencia
</i18n>

View File

@ -0,0 +1,143 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import FetchData from 'components/FetchData.vue';
import useNotify from 'src/composables/useNotify';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
const { notify } = useNotify();
const { t } = useI18n();
const data = reactive({
city: null,
code: null,
countryFk: null,
provinceFk: null,
townFk: null,
});
const countriesOptions = ref([]);
const isLoading = ref(false);
const provincesOptions = ref([]);
const townsLocationOptions = ref([]);
async function save() {
isLoading.value = true;
try {
const { city, code, countryFk, provinceFk } = data;
const payload = {
city: city.name,
code,
countryFk,
provinceFk,
townFk: city.id,
};
await axios.patch('/postcodes', payload);
} catch (err) {
notify('errors.create', 'negative');
}
isLoading.value = false;
}
</script>
<template>
<FetchData
@on-fetch="(data) => (townsLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
auto-load
url="Countries"
/>
<div class="q-pa-lg">
<h6 class="q-my-xs">{{ t('New postcode') }}</h6>
<p>{{ t('Please, ensure you put the correct data!') }}</p>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput label="Postcode" v-model="data.code" />
</div>
<div class="col">
<VnSelectFilter
:label="t('City')"
:options="townsLocationOptions"
hide-selected
option-label="name"
option-value="city"
v-model="data.city"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-xl">
<div class="col">
<VnSelectFilter
:label="t('Province')"
:options="provincesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
/>
</div>
<div class="col">
<VnSelectFilter
:label="t('Country')"
:options="countriesOptions"
hide-selected
option-label="country"
option-value="id"
v-model="data.countryFk"
/>
</div>
</VnRow>
<div class="flex justify-end">
<QBtn
:label="t('globals.cancel')"
class="q-mr-lg"
color="primary"
outline
v-close-popup
/>
<QBtn
:label="t('globals.save')"
@click="save"
color="primary"
v-close-popup
/>
</div>
</div>
<QInnerLoading
:showing="isLoading"
:label="t('globals.pleaseWait')"
color="primary"
/>
</template>
<style lang="scss" scoped>
.card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
</style>
<i18n>
es:
New postcode: Nuevo código postal
Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
City: Ciudad
Province: Provincia
Country: País
</i18n>

View File

@ -28,25 +28,29 @@ function viewSummary(id) {
},
});
}
const redirectToCreateView = () => {
router.push({ name: 'CustomerCreate' });
};
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="CustomerList"
:label="t('Search customer')"
:info="t('You can search by customer id or name')"
:label="t('Search customer')"
data-key="CustomerList"
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
flat
icon="menu"
round
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
@ -55,7 +59,7 @@ function viewSummary(id) {
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
<QScrollArea class="fit text-grey-8">
<CustomerFilter data-key="CustomerList" />
</QScrollArea>
@ -63,18 +67,18 @@ function viewSummary(id) {
<QPage class="column items-center q-pa-md">
<div class="card-list">
<VnPaginate
data-key="CustomerList"
url="/Clients/filter"
order="id DESC"
auto-load
data-key="CustomerList"
order="id DESC"
url="/Clients/filter"
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:id="row.id"
:key="row.id"
:title="row.name"
:id="row.id"
@click="navigate(row.id)"
v-for="row of rows"
>
<template #list-items>
<VnLv :label="t('customer.list.email')" :value="row.email" />
@ -103,6 +107,12 @@ function viewSummary(id) {
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
<QTooltip>
{{ t('New client') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
@ -117,4 +127,5 @@ function viewSummary(id) {
es:
Search customer: Buscar cliente
You can search by customer id or name: Puedes buscar por id o nombre del cliente
New client: Nuevo cliente
</i18n>

View File

@ -57,18 +57,6 @@ const getStatus = computed({
},
});
const onFetchCompanies = (companies) => {
companiesOptions.value = [...companies];
};
const onFetchPrinters = (printers) => {
printersOptions.value = [...printers];
};
const onFetchClients = (clients) => {
clientsOptions.value = [...clients];
};
onMounted(async () => {
await invoiceOutGlobalStore.init();
formData.value = { ...formInitialData.value };
@ -76,9 +64,13 @@ onMounted(async () => {
</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 />
<FetchData
url="Companies"
@on-fetch="(data) => (companiesOptions = data)"
auto-load
/>
<FetchData url="Printers" @on-fetch="(data) => (printersOptions = data)" auto-load />
<FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
<QForm
v-if="!initialDataLoading && optionsInitialData"

View File

@ -1,44 +1,54 @@
<script setup>
import { onMounted, ref, reactive } from 'vue';
import { ref, computed, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n';
import { QCheckbox, QBtn } from 'quasar';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import VnInput from 'src/components/common/VnInput.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import invoiceOutService from 'src/services/invoiceOut.service';
import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import VnInputDate from 'components/common/VnInputDate.vue';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const rows = ref([]);
const stateStore = useStateStore();
const { t } = useI18n();
const dateRange = reactive({
from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(),
const arrayData = ref(null);
function exprBuilder(param, value) {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
}
onBeforeMount(async () => {
const defaultParams = {
from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth().toISOString(),
};
arrayData.value = useArrayData('InvoiceOutNegative', {
url: 'InvoiceOuts/negativeBases',
limit: 0,
userParams: defaultParams,
exprBuilder: exprBuilder,
});
await arrayData.value.fetch({ append: false });
stateStore.rightDrawer = true;
});
const rows = computed(() => arrayData.value.store.data);
const selectedCustomerId = ref(0);
const selectedWorkerId = ref(0);
const filter = ref({
company: null,
country: null,
clientId: null,
client: null,
amount: null,
base: null,
ticketId: null,
active: null,
hasToInvoice: null,
verifiedData: null,
comercial: null,
});
const tableColumnComponents = {
company: {
component: 'span',
@ -106,70 +116,70 @@ const tableColumnComponents = {
},
};
const columns = ref([
const columns = computed(() => [
{
label: 'company',
label: t('invoiceOut.negativeBases.company'),
field: 'company',
name: 'company',
align: 'left',
},
{
label: 'country',
label: t('invoiceOut.negativeBases.country'),
field: 'country',
name: 'country',
align: 'left',
},
{
label: 'clientId',
label: t('invoiceOut.negativeBases.clientId'),
field: 'clientId',
name: 'clientId',
align: 'left',
},
{
label: 'client',
label: t('invoiceOut.negativeBases.client'),
field: 'clientSocialName',
name: 'client',
align: 'left',
},
{
label: 'amount',
label: t('invoiceOut.negativeBases.amount'),
field: 'amount',
name: 'amount',
align: 'left',
format: (value) => toCurrency(value),
},
{
label: 'base',
label: t('invoiceOut.negativeBases.base'),
field: 'taxableBase',
name: 'base',
align: 'left',
},
{
label: 'ticketId',
label: t('invoiceOut.negativeBases.ticketId'),
field: 'ticketFk',
name: 'ticketId',
align: 'left',
},
{
label: 'active',
label: t('invoiceOut.negativeBases.active'),
field: 'isActive',
name: 'active',
align: 'left',
},
{
label: 'hasToInvoice',
label: t('invoiceOut.negativeBases.hasToInvoice'),
field: 'hasToInvoice',
name: 'hasToInvoice',
align: 'left',
},
{
label: 'verifiedData',
label: t('invoiceOut.negativeBases.verifiedData'),
field: 'isTaxDataChecked',
name: 'verifiedData',
align: 'left',
},
{
label: 'comercial',
label: t('invoiceOut.negativeBases.comercial'),
field: 'comercialName',
name: 'comercial',
align: 'left',
@ -177,52 +187,10 @@ const columns = ref([
]);
const downloadCSV = async () => {
await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
};
const search = async () => {
const and = [];
Object.keys(filter.value).forEach((key) => {
if (filter.value[key]) {
and.push({
[key]: filter.value[key],
});
}
});
const searchFilter = {
limit: 20,
};
if (and.length) {
searchFilter.where = {
and,
};
}
const params = {
...dateRange,
filter: JSON.stringify(searchFilter),
};
rows.value = await invoiceOutService.getNegativeBases(params);
};
const refresh = () => {
dateRange.from = Date.vnFirstDayOfMonth().toISOString();
dateRange.to = Date.vnLastDayOfMonth().toISOString();
filter.value = {
company: null,
country: null,
clientId: null,
client: null,
amount: null,
base: null,
ticketId: null,
active: null,
hasToInvoice: null,
verifiedData: null,
comercial: null,
};
search();
await invoiceOutGlobalStore.getNegativeBasesCsv(
arrayData.value.store.userParams.from,
arrayData.value.store.userParams.to
);
};
const selectCustomerId = (id) => {
@ -232,82 +200,33 @@ const selectCustomerId = (id) => {
const selectWorkerId = (id) => {
selectedWorkerId.value = id;
};
onMounted(async () => {
refresh();
});
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" />
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
</QScrollArea>
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<QPage class="column items-center q-pa-md">
<QTable
:rows="rows"
:columns="columns"
:rows="rows"
hide-bottom
row-key="clientId"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
>
<template #top-left>
<div class="row justify-start items-end">
<VnInputDate
v-model="dateRange.from"
:label="t('invoiceOut.negativeBases.from')"
class="q-mr-md"
lazy-rules
is-outlined
/>
<VnInputDate
v-model="dateRange.to"
:label="t('invoiceOut.negativeBases.to')"
class="q-mr-md"
lazy-rules
is-outlined
/>
<QBtn
color="primary"
icon-right="archive"
no-caps
@click="downloadCSV()"
/>
</div>
</template>
<template #top-right>
<div class="row justify-start items-center">
<span class="q-mr-md text-results">
{{ rows.length }} {{ t('results') }}
</span>
<QBtn
color="primary"
icon-right="search"
no-caps
class="q-mr-sm"
@click="search()"
/>
<QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
</div>
</template>
<template #header="props">
<QTr :props="props" class="full-height">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<div class="column justify-start items-start full-height">
{{ t(`invoiceOut.negativeBases.${col.label}`) }}
<VnInput
:class="{
invisible:
col.field === 'isActive' ||
col.field === 'hasToInvoice' ||
col.field === 'isTaxDataChecked',
}"
v-model="filter[col.field]"
type="text"
@keyup.enter="search()"
is-outlined
/>
</div>
</QTh>
</QTr>
</template>
<template #body-cell="props">
<QTd :props="props">
<component
@ -324,14 +243,8 @@ onMounted(async () => {
"
>{{ props.value }}
</template>
<CustomerDescriptorProxy
v-if="props.col.name === 'clientId'"
:id="selectedCustomerId"
/>
<WorkerDescriptorProxy
v-if="props.col.name === 'comercial'"
:id="selectedWorkerId"
/>
<CustomerDescriptorProxy :id="selectedCustomerId" />
<WorkerDescriptorProxy :id="selectedWorkerId" />
</component>
</QTd>
</template>
@ -344,10 +257,6 @@ onMounted(async () => {
border-radius: 4px;
padding: 6px 6px 6px 6px;
}
.text-results {
color: var(--vn-label);
}
</style>
<i18n></i18n>

View File

@ -0,0 +1,134 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
type: String,
required: true,
},
});
</script>
<template>
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:unremovable-params="['from', 'to']"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong>
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense class="q-gutter-y-sm q-mt-sm">
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('invoiceOut.negativeBases.from')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.to"
:label="t('invoiceOut.negativeBases.to')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.company"
:label="t('invoiceOut.negativeBases.company')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.country"
:label="t('invoiceOut.negativeBases.country')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.clientId"
:label="t('invoiceOut.negativeBases.clientId')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.clientSocialName"
:label="t('invoiceOut.negativeBases.client')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.amount"
:label="t('invoiceOut.negativeBases.amount')"
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
v-model="params.comercialName"
:label="t('invoiceOut.negativeBases.comercial')"
is-outlined
/>
</QItemSection>
</QItem>
</QList>
</template>
</VnFilterPanel>
</template>
<style scoped></style>
<i18n>
en:
params:
from: From
to: To
company: Company
country: Country
clientId: Client Id
clientSocialName: Client
amount: Amount
comercialName: Comercial
es:
params:
from: Desde
to: Hasta
company: Empresa
country: País
clientId: Id cliente
clientSocialName: Cliente
amount: Importe
comercialName: Comercial
Date is required: La fecha es requerida
</i18n>

View File

@ -1,12 +1,16 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import TravelDescriptor from './TravelDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const stateStore = useStateStore();
</script>
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit">
<!-- Aca iría left menu y descriptor -->
<TravelDescriptor />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<QPageContainer>

View File

@ -1,5 +1,5 @@
<script setup>
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
@ -16,16 +16,10 @@ const props = defineProps({
},
});
const filtersOptions = reactive({
warehouses: [],
continents: [],
agencies: [],
suppliers: [],
});
const updateFilterOptions = (data, optionKey) => {
filtersOptions[optionKey] = [...data];
};
const warehousesOptions = ref([]);
const continentsOptions = ref([]);
const agenciesOptions = ref([]);
const suppliersOptions = ref([]);
const add = (paramsObj, key) => {
if (paramsObj[key] === undefined) {
@ -45,22 +39,22 @@ const decrement = (paramsObj, key) => {
<template>
<FetchData
url="Warehouses"
@on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<FetchData
url="Continents"
@on-fetch="(data) => updateFilterOptions(data, 'continents')"
@on-fetch="(data) => (continentsOptions = data)"
auto-load
/>
<FetchData
url="AgencyModes"
@on-fetch="(data) => updateFilterOptions(data, 'agencies')"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<FetchData
url="Suppliers"
@on-fetch="(data) => updateFilterOptions(data, 'suppliers')"
@on-fetch="(data) => (suppliersOptions = data)"
auto-load
/>
@ -123,7 +117,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.agencyModeFk')"
v-model="params.agencyModeFk"
:options="filtersOptions.agencies"
:options="agenciesOptions"
option-value="agencyFk"
option-label="name"
hide-selected
@ -156,7 +150,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.warehouseOutFk')"
v-model="params.warehouseOutFk"
:options="filtersOptions.warehouses"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
@ -171,7 +165,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.warehouseInFk')"
v-model="params.warehouseInFk"
:options="filtersOptions.warehouses"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
@ -186,7 +180,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('supplier.pageTitles.supplier')"
v-model="params.cargoSupplierFk"
:options="filtersOptions.suppliers"
:options="suppliersOptions"
option-value="id"
option-label="name"
hide-selected
@ -201,7 +195,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.continent')"
v-model="params.continent"
:options="filtersOptions.continents"
:options="continentsOptions"
option-value="code"
option-label="name"
hide-selected

View File

@ -24,8 +24,8 @@ const newTravelForm = reactive({
});
const agenciesOptions = ref([]);
const viewAction = ref();
const warehousesOptions = ref([]);
const viewAction = ref();
onBeforeMount(() => {
// Esto nos permite decirle a FormModel si queremos observar los cambios o no
@ -43,19 +43,19 @@ onBeforeMount(() => {
}
}
});
const onFetchAgencies = (agencies) => {
agenciesOptions.value = [...agencies];
};
const onFetchWarehouses = (warehouses) => {
warehousesOptions.value = [...warehouses];
};
</script>
<template>
<FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
<FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
<FetchData
url="AgencyModes"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
<FetchData
url="Warehouses"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<QPage>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>

View File

@ -1,5 +1,5 @@
<script setup>
import { reactive } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
@ -17,15 +17,9 @@ const props = defineProps({
},
});
const filtersOptions = reactive({
warehouses: [],
continents: [],
agencies: [],
});
const updateFilterOptions = (data, optionKey) => {
filtersOptions[optionKey] = [...data];
};
const warehousesOptions = ref([]);
const continentsOptions = ref([]);
const agenciesOptions = ref([]);
const add = (paramsObj, key) => {
if (paramsObj[key] === undefined) {
@ -45,17 +39,17 @@ const decrement = (paramsObj, key) => {
<template>
<FetchData
url="Warehouses"
@on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
<FetchData
url="Continents"
@on-fetch="(data) => updateFilterOptions(data, 'continents')"
@on-fetch="(data) => (continentsOptions = data)"
auto-load
/>
<FetchData
url="AgencyModes"
@on-fetch="(data) => updateFilterOptions(data, 'agencies')"
@on-fetch="(data) => (agenciesOptions = data)"
auto-load
/>
@ -82,7 +76,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.agencyModeFk')"
v-model="params.agencyModeFk"
:options="filtersOptions.agencies"
:options="agenciesOptions"
option-value="agencyFk"
option-label="name"
hide-selected
@ -97,7 +91,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.warehouseOutFk')"
v-model="params.warehouseOutFk"
:options="filtersOptions.warehouses"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
@ -112,7 +106,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.warehouseInFk')"
v-model="params.warehouseInFk"
:options="filtersOptions.warehouses"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
@ -223,7 +217,7 @@ const decrement = (paramsObj, key) => {
<VnSelectFilter
:label="t('params.continent')"
v-model="params.continent"
:options="filtersOptions.continents"
:options="continentsOptions"
option-value="code"
option-label="name"
hide-selected

View File

@ -8,9 +8,9 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
import TravelFilter from './TravelFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import TravelFilter from './TravelFilter.vue';
import { toDate } from 'src/filters/index';
const router = useRouter();

View File

@ -29,6 +29,14 @@ export default {
},
component: () => import('src/pages/Customer/CustomerList.vue'),
},
{
path: 'create',
name: 'CustomerCreate',
meta: {
title: 'create',
},
component: () => import('src/pages/Customer/CustomerCreate.vue'),
},
{
path: 'payments',
name: 'CustomerPayments',

View File

@ -11,7 +11,7 @@ export default {
redirect: { name: 'TravelMain' },
menus: {
main: ['TravelList', 'ExtraCommunity'],
card: [],
card: ['TravelBasicData', 'TravelHistory', 'TravelThermographs'],
},
children: [
{
@ -63,6 +63,36 @@ export default {
},
component: () => import('src/pages/Travel/Card/TravelSummary.vue'),
},
{
name: 'TravelBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
// roles: [],
},
// component: () => import(),
},
{
name: 'TravelHistory',
path: 'history',
meta: {
title: 'history',
icon: 'history',
// roles: [],
},
// component: () => import(),
},
{
name: 'TravelThermographs',
path: 'thermographs',
meta: {
title: 'thermographs',
icon: 'vn:thermometer',
// roles: [],
},
// component: () => import(),
},
],
},
],

View File

@ -17,10 +17,6 @@ const request = async (method, url, params = {}) => {
};
const invoiceOutService = {
getNegativeBases: async (params) => {
return await request('GET', 'InvoiceOuts/negativeBases', params);
},
getNegativeBasesCsv: async (params) => {
return await request('GET', 'InvoiceOuts/negativeBasesCsv', params);
},