Merge branch 'dev' into feature/order

src/components/FormModel.vue

@@ -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');
     }

src/components/common/VnSelectCreate.vue

@@ -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>

src/components/common/VnSelectFilter.vue

@@ -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) {
+const { optionLabel } = toRefs($props);
-    myOptions.value = JSON.parse(JSON.stringify(data));
+const myOptions = ref([]);
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+const myOptionsOriginal = computed(() => $props.options);
-}
+const vnSelectRef = ref(null);
-setOptions(options.value);
 
 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">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData ?? {}" />
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>

src/components/ui/VnFilterPanel.vue

@@ -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"
                     >

src/composables/useArrayData.js

@@ -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;
                     }

src/i18n/en/index.js

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

src/i18n/es/index.js

@@ -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',

src/pages/Customer/CustomerCreate.vue

@@ -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>

src/pages/Customer/CustomerCreateNewPostcode.vue

@@ -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>

src/pages/Customer/CustomerList.vue

@@ -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>

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -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
-    <FetchData url="Printers" @on-fetch="(data) => onFetchPrinters(data)" auto-load />
+        url="Companies"
-    <FetchData url="Clients" @on-fetch="(data) => onFetchClients(data)" auto-load />
+        @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"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -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 stateStore = useStateStore();
-const rows = ref([]);
 const { t } = useI18n();
 
-const dateRange = reactive({
+const arrayData = ref(null);
-    from: Date.vnFirstDayOfMonth().toISOString(),
+
-    to: Date.vnLastDayOfMonth().toISOString(),
+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);
+    await invoiceOutGlobalStore.getNegativeBasesCsv(
-};
+        arrayData.value.store.userParams.from,
-
+        arrayData.value.store.userParams.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();
 };
 
 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
+                        <CustomerDescriptorProxy :id="selectedCustomerId" />
-                            v-if="props.col.name === 'clientId'"
+                        <WorkerDescriptorProxy :id="selectedWorkerId" />
-                            :id="selectedCustomerId"
-                        />
-                        <WorkerDescriptorProxy
-                            v-if="props.col.name === 'comercial'"
-                            :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>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -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>

src/pages/Travel/Card/TravelCard.vue

@@ -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>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -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({
+const warehousesOptions = ref([]);
-    warehouses: [],
+const continentsOptions = ref([]);
-    continents: [],
+const agenciesOptions = ref([]);
-    agencies: [],
+const suppliersOptions = ref([]);
-    suppliers: [],
-});
-
-const updateFilterOptions = (data, optionKey) => {
-    filtersOptions[optionKey] = [...data];
-};
 
 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

src/pages/Travel/TravelCreate.vue

@@ -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
-    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+        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>

src/pages/Travel/TravelFilter.vue

@@ -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({
+const warehousesOptions = ref([]);
-    warehouses: [],
+const continentsOptions = ref([]);
-    continents: [],
+const agenciesOptions = ref([]);
-    agencies: [],
-});
-
-const updateFilterOptions = (data, optionKey) => {
-    filtersOptions[optionKey] = [...data];
-};
 
 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

src/pages/Travel/TravelList.vue

@@ -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();

src/router/modules/customer.js

@@ -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',

src/router/modules/travel.js

@@ -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(),
+                },
             ],
         },
     ],

src/services/invoiceOut.service.js

@@ -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);
     },