Correccion de conflictos

Dockerfile

@@ -1,5 +1,6 @@
 FROM node:stretch-slim
-RUN npm install -g @quasar/cli
+RUN curl -fsSL https://bun.sh/install | bash
+RUN bun install -g @quasar/cli
 WORKDIR /app
 COPY dist/spa ./
 CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]

Jenkinsfile

@@ -1,83 +1,109 @@
 #!/usr/bin/env groovy
+
+def PROTECTED_BRANCH
+
+def BRANCH_ENV = [
+    test: 'test',
+    master: 'production'
+]
+
+node {
+    stage('Setup') {
+        env.BACK_REPLICAS = 1
+        env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
+
+        PROTECTED_BRANCH = [
+            'dev',
+            'test',
+            'master'
+        ].contains(env.BRANCH_NAME)
+
+        // https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
+        echo "NODE_NAME: ${env.NODE_NAME}"
+        echo "WORKSPACE: ${env.WORKSPACE}"
+
+        configFileProvider([
+            configFile(fileId: 'salix-front.properties',
+            variable: 'PROPS_FILE')
+        ]) {
+            def props = readProperties file: PROPS_FILE
+            props.each {key, value -> env."${key}" = value }
+            props.each {key, value -> echo "${key}: ${value}" }
+        }
+
+        if (PROTECTED_BRANCH) {
+            configFileProvider([
+                configFile(fileId: "salix-front.branch.${env.BRANCH_NAME}",
+                variable: 'BRANCH_PROPS_FILE')
+            ]) {
+                def props = readProperties file: BRANCH_PROPS_FILE
+                props.each {key, value -> env."${key}" = value }
+                props.each {key, value -> echo "${key}: ${value}" }
+            }
+        }
+    }
+}
+
 pipeline {
     agent any
     options {
         disableConcurrentBuilds()
     }
+    tools {
+        nodejs 'node-v18'
+    }
     environment {
         PROJECT_NAME = 'lilium'
         STACK_NAME   = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
     }
     stages {
-        stage('Checkout') {
-            steps {
-                script {
-                    switch (env.BRANCH_NAME) {
-                        case 'master':
-                            env.NODE_ENV = 'production'
-                            env.FRONT_REPLICAS = 2
-                            break
-                        case 'test':
-                            env.NODE_ENV = 'test'
-                            env.FRONT_REPLICAS = 1
-                            break
-                    }
-                }
-                setEnv()
-            }
-        }
         stage('Install') {
             environment {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'npm install --no-audit --prefer-offline'
-                }
+                sh 'bun install --no-audit --prefer-offline'
             }
         }
         stage('Test') {
-            when { not { anyOf {
-                branch 'test'
-                branch 'master'
-            }}}
+            when {
+                expression { !PROTECTED_BRANCH }
+            }
             environment {
                 NODE_ENV = ""
             }
             parallel {
                 stage('Frontend') {
                     steps {
-                        nodejs('node-v18') {
-                            sh 'npm run test:unit:ci'
-                        }
+                        sh 'bun run test:unit:ci'
                     }
                 }
             }
         }
         stage('Build') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'quasar build'
-                }
-                dockerBuild()
+                sh 'quasar build'
+                // dockerBuild()
             }
         }
         stage('Deploy') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 DOCKER_HOST = "${env.SWARM_HOST}"
             }
             steps {
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
+                }
                 sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
             }
         }
@@ -85,7 +111,7 @@ pipeline {
     post {
         always {
             script {
-                if (!['master', 'test'].contains(env.BRANCH_NAME)) {
+                if (!PROTECTED_BRANCH) {
                     try {
                         junit 'junitresults.xml'
                         junit 'junit.xml'

README.md

@@ -5,13 +5,13 @@ Lilium frontend
 ## Install the dependencies
 
 ```bash
-npm install
+bun install
 ```
 
 ### Install quasar cli
 
 ```bash
-sudo npm install -g @quasar/cli
+sudo bun install -g @quasar/cli
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
@@ -23,7 +23,7 @@ quasar dev
 ### Run unit tests
 
 ```bash
-npm run test:unit
+bun run test:unit
 ```
 
 ### Run e2e tests

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.8.0",
+    "version": "24.10.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -46,7 +46,8 @@
     "engines": {
         "node": "^20 || ^18 || ^16",
         "npm": ">= 8.1.2",
-        "yarn": ">= 1.21.1"
+        "yarn": ">= 1.21.1",
+        "bun": ">= 1.0.25"
     },
     "overrides": {
         "@vitejs/plugin-vue": "^4.0.0",

src/components/CreateNewPostcodeForm.vue

@@ -8,7 +8,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
-import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -85,7 +85,7 @@ const onProvinceCreated = async ({ name }, formData) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('City')"
                         :options="townsLocationOptions"
                         v-model="data.townFk"
@@ -100,12 +100,12 @@ const onProvinceCreated = async ({ name }, formData) => {
                                 @on-data-saved="onCityCreated($event, data)"
                             />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Province')"
                         :options="provincesOptions"
                         hide-selected
@@ -120,7 +120,7 @@ const onProvinceCreated = async ({ name }, formData) => {
                                 @on-data-saved="onProvinceCreated($event, data)"
                             />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
                 <div class="col">
                     <VnSelectFilter

src/components/CreateThermographForm.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const thermographFormData = reactive({
+    thermographId: null,
+    model: 'DISPOSABLE',
+    warehouseId: null,
+    temperatureFk: 'cool',
+});
+
+const thermographsModels = ref(null);
+const warehousesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (thermographsModels = data)"
+        auto-load
+        url="Thermographs/getThermographModels"
+    />
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
+    <FetchData
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        auto-load
+        url="Temperatures"
+    />
+    <FormModelPopup
+        url-create="Thermographs/createThermograph"
+        model="thermograph"
+        :title="t('New thermograph')"
+        :form-initial-data="thermographFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Identifier')"
+                        v-model="data.thermographId"
+                        :required="true"
+                        :rules="validate('thermograph.id')"
+                    />
+                </div>
+
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Model')"
+                        :options="thermographsModels"
+                        hide-selected
+                        option-label="value"
+                        option-value="value"
+                        v-model="data.model"
+                        :required="true"
+                        :rules="validate('thermograph.model')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseId"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Temperature')"
+                        :options="temperaturesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.temperatureFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Model: Modelo
+    Warehouse: Almacén
+    Temperature: Temperatura
+    New thermograph: Nuevo termógrafo
+</i18n>

src/components/CrudModel.vue

@@ -196,7 +196,6 @@ function getChanges() {
     const creates = [];
 
     const pk = $props.primaryKey;
-
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
             creates.push(row);

src/components/EditPictureForm.vue

@@ -276,13 +276,9 @@ const makeRequest = async () => {
                                     </QIcon>
                                     <QIcon name="info" class="cursor-pointer">
                                         <QTooltip>{{
-                                            t(
-                                                'components.editPictureForm.allowedFilesText',
-                                                {
-                                                    allowedContentTypes:
-                                                        allowedContentTypes,
-                                                }
-                                            )
+                                            t('globals.allowedFilesText', {
+                                                allowedContentTypes: allowedContentTypes,
+                                            })
                                         }}</QTooltip>
                                     </QIcon>
                                 </template>

src/components/EditTableCellValueForm.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    rows: {
+        type: Array,
+        default: () => [],
+    },
+    fieldsOptions: {
+        type: Array,
+        default: () => [],
+    },
+    editUrl: {
+        type: String,
+        default: '',
+    },
+});
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const formData = reactive({
+    field: null,
+    newValue: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = () => {
+    notify('globals.dataSaved', 'positive');
+    emit('onDataSaved');
+    closeForm();
+};
+
+const submitData = async () => {
+    try {
+        isLoading.value = true;
+        const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
+        const payload = {
+            field: formData.field,
+            newValue: formData.newValue,
+            lines: rowsToEdit,
+        };
+
+        await axios.post($props.editUrl, payload);
+        onDataSaved();
+        isLoading.value = false;
+    } catch (err) {
+        console.error('Error submitting table cell edit');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <QForm @submit="submitData()" class="all-pointer-events">
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">
+                {{
+                    t('editBuyTitle', {
+                        buysAmount: rows.length,
+                    })
+                }}
+            </h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Field to edit')"
+                        :options="fieldsOptions"
+                        hide-selected
+                        option-label="label"
+                        option-value="field"
+                        v-model="formData.field"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Value')" v-model="formData.newValue" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>
+
+<i18n>
+    en:
+        editBuyTitle: Edit {buysAmount} buy(s)
+    es:
+        editBuyTitle: Editar {buysAmount} compra(s)
+        Field to edit: Campo a editar
+        Value: Valor
+    </i18n>

src/components/FilterItemForm.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+import axios from 'axios';
+import { dashIfEmpty } from 'src/filters';
+
+const emit = defineEmits(['itemSelected']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const itemFilter = {
+    include: [
+        {
+            relation: 'producer',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'ink',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const itemFilterParams = reactive({});
+const closeButton = ref(null);
+const isLoading = ref(false);
+const producersOptions = ref([]);
+const ItemTypesOptions = ref([]);
+const InksOptions = ref([]);
+const tableRows = ref([]);
+const loading = ref(false);
+
+const tableColumns = computed(() => [
+    {
+        label: t('entry.buys.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.name'),
+        name: 'name',
+        field: 'name',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.size'),
+        name: 'size',
+        field: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.producer'),
+        name: 'producerName',
+        field: 'producer',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+
+    {
+        label: t('entry.buys.color'),
+        name: 'ink',
+        field: 'inkName',
+        align: 'left',
+    },
+]);
+
+const fetchResults = async () => {
+    try {
+        let filter = itemFilter;
+        const params = itemFilterParams;
+        const where = {};
+        for (let key in params) {
+            const value = params[key];
+            if (!value) continue;
+
+            switch (key) {
+                case 'name':
+                    where[key] = { like: `%${value}%` };
+                    break;
+                case 'producerFk':
+                case 'typeFk':
+                case 'size':
+                case 'inkFk':
+                    where[key] = value;
+            }
+        }
+        filter.where = where;
+
+        const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, {
+            params: { filter: JSON.stringify(filter) },
+        });
+        tableRows.value = data;
+    } catch (err) {
+        console.error('Error fetching entries items');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const selectItem = ({ id }) => {
+    emit('itemSelected', id);
+    closeForm();
+};
+</script>
+
+<template>
+    <FetchData
+        url="Producers"
+        @on-fetch="(data) => (producersOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        auto-load
+    />
+    <FetchData
+        url="ItemTypes"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        order="name"
+        @on-fetch="(data) => (ItemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Inks"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        order="name"
+        @on-fetch="(data) => (InksOptions = data)"
+        auto-load
+    />
+    <QForm @submit="fetchResults()" class="all-pointer-events">
+        <QCard class="column" style="padding: 32px; z-index: 100">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('Filter item') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('entry.buys.name')"
+                        v-model="itemFilterParams.name"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('entry.buys.size')"
+                        v-model="itemFilterParams.size"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.producer')"
+                        :options="producersOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.producerFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.type')"
+                        :options="ItemTypesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.typeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.color')"
+                        :options="InksOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.inkFk"
+                    />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.search')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+            <QTable
+                :columns="tableColumns"
+                :rows="tableRows"
+                :pagination="{ rowsPerPage: 0 }"
+                :loading="loading"
+                :hide-header="!tableRows || !tableRows.length > 0"
+                :no-data-label="t('Enter a new search')"
+                class="q-mt-lg"
+                @row-click="(_, row) => selectItem(row)"
+            >
+                <template #body-cell-id="{ row }">
+                    <QTd auto-width @click.stop>
+                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <ItemDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+            </QTable>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Filter item: Filtrar artículo
+    Enter a new search: Introduce una nueva búsqueda
+</i18n>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/FilterTravelForm.vue

@@ -0,0 +1,240 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+
+import axios from 'axios';
+import { toDate } from 'src/filters';
+
+const emit = defineEmits(['travelSelected']);
+
+const { t } = useI18n();
+
+const travelFilter = {
+    include: [
+        {
+            relation: 'agency',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const travelFilterParams = reactive({});
+const closeButton = ref(null);
+const isLoading = ref(false);
+const agenciesOptions = ref([]);
+const warehousesOptions = ref([]);
+const tableRows = ref([]);
+const loading = ref(false);
+
+const tableColumns = computed(() => [
+    {
+        label: t('entry.basicData.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+    },
+    {
+        label: t('entry.basicData.warehouseOut'),
+        name: 'warehouseOutFk',
+        field: 'warehouseOutFk',
+        align: 'left',
+        format: (val) =>
+            warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
+    },
+    {
+        label: t('entry.basicData.warehouseIn'),
+        name: 'warehouseInFk',
+        field: 'warehouseInFk',
+        align: 'left',
+        format: (val) =>
+            warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
+    },
+    {
+        label: t('entry.basicData.shipped'),
+        name: 'shipped',
+        field: 'shipped',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+    {
+        label: t('entry.basicData.landed'),
+        name: 'landed',
+        field: 'landed',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+]);
+
+const fetchResults = async () => {
+    try {
+        let filter = travelFilter;
+        const params = travelFilterParams;
+        const where = {};
+        for (let key in params) {
+            const value = params[key];
+            if (!value) continue;
+
+            switch (key) {
+                case 'agencyModeFk':
+                case 'warehouseInFk':
+                case 'warehouseOutFk':
+                case 'shipped':
+                case 'landed':
+                    where[key] = value;
+            }
+        }
+
+        filter.where = where;
+        const { data } = await axios.get('Travels', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        tableRows.value = data;
+    } catch (err) {
+        console.error('Error fetching travels');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const selectTravel = ({ id }) => {
+    emit('travelSelected', id);
+    closeForm();
+};
+</script>
+
+<template>
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <QForm @submit="fetchResults()" class="all-pointer-events">
+        <QCard class="column" style="padding: 32px; z-index: 100">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('Filter travels') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.agency')"
+                        :options="agenciesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.agencyModeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.warehouseOut')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.warehouseOutFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.warehouseIn')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.warehouseInFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        :label="t('entry.basicData.shipped')"
+                        v-model="travelFilterParams.shipped"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        :label="t('entry.basicData.landed')"
+                        v-model="travelFilterParams.landed"
+                    />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.search')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+            <QTable
+                :columns="tableColumns"
+                :rows="tableRows"
+                :pagination="{ rowsPerPage: 0 }"
+                :loading="loading"
+                :hide-header="!tableRows || !tableRows.length > 0"
+                :no-data-label="t('Enter a new search')"
+                class="q-mt-lg"
+                @row-click="(_, row) => selectTravel(row)"
+            >
+                <template #body-cell-id="{ row }">
+                    <QTd auto-width @click.stop>
+                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <TravelDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+            </QTable>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Filter travels: Filtro envíos
+    Enter a new search: Introduce una nueva búsqueda
+</i18n>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/FormModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -67,7 +67,13 @@ defineExpose({
     save,
 });
 
+const componentIsRendered = ref(false);
+
 onMounted(async () => {
+    nextTick(() => {
+        componentIsRendered.value = true;
+    });
+
     // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
     if ($props.formInitialData && !$props.autoLoad) {
         state.set($props.model, $props.formInitialData);
@@ -202,7 +208,10 @@ watch(formUrl, async () => {
             </QCard>
         </QForm>
     </div>
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <Teleport
+        to="#st-actions"
+        v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+    >
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />

src/components/common/TableVisibleColumns.vue

@@ -41,7 +41,7 @@ const setUserConfigViewData = (data) => {
     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
     formattedCols.value = $props.allColumns.map((col) => ({
         name: col,
-        active: data[col],
+        active: data[col] == undefined ? true : data[col],
     }));
     emitSavedConfig();
 };

src/components/common/VnInput.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
@@ -14,6 +15,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -46,6 +50,7 @@ const onEnterPress = () => {
         type="text"
         :class="{ required: $attrs.required }"
         @keyup.enter="onEnterPress()"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />

src/components/common/VnLocation.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 import { useI18n } from 'vue-i18n';
@@ -50,12 +50,15 @@ const value = computed({
         return $props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value);
+        emit(
+            'update:modelValue',
+            postcodesOptions.value.find((p) => p.code === value)
+        );
     },
 });
 
 onMounted(() => {
-    locationFilter()
+    locationFilter($props.modelValue);
 });
 
 function setOptions(data) {
@@ -69,48 +72,48 @@ watch(options, (newValue) => {
 });
 
 function showLabel(data) {
-       return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-function locationFilter(search) {
+function locationFilter(search = '') {
+    if (
+        search &&
+        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
+    )
+        return;
     let where = { search };
-    postcodesRef.value.fetch({filter:{ where}, limit: 30});
+    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
 }
 
-function handleFetch( data) {
+function handleFetch(data) {
     postcodesOptions.value = data;
 }
-
 </script>
 <template>
     <FetchData
         ref="postcodesRef"
         url="Postcodes/filter"
-        @on-fetch="(data) =>handleFetch(data)"
+        @on-fetch="(data) => handleFetch(data)"
     />
-    <VnSelectCreate
+    <VnSelectDialog
         v-if="postcodesRef"
+        :option-label="(opt) => showLabel(opt) ?? 'code'"
+        :option-value="(opt) => opt.code"
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        :option-label="showLabel"
         :placeholder="t('search_by_postalcode')"
         @input-value="locationFilter"
         :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         clearable
-        hide-selected
-        fill-input
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="locationFilter()" />
         </template>
-        <template #option="{itemProps, opt}">
+        <template #option="{ itemProps, opt }">
             <QItem v-bind="itemProps">
                 <QItemSection v-if="opt">
                     <QItemLabel>{{ opt.code }}</QItemLabel>
@@ -118,7 +121,7 @@ function handleFetch( data) {
                 </QItemSection>
             </QItem>
         </template>
-    </VnSelectCreate>
+    </VnSelectDialog>
 </template>
 <style lang="scss" scoped>
 .add-icon {

src/components/common/VnLog.vue

@@ -7,7 +7,7 @@ import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
-import { useFirstUpper } from 'src/composables/useFirstUpper';
+import { useCapitalize } from 'src/composables/useCapitalize';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -140,7 +140,7 @@ function parseProps(propNames, locale, vals, olds) {
         if (prop.endsWith('$')) continue;
         props.push({
             name: prop,
-            nameI18n: useFirstUpper(locale.columns?.[prop]) || prop,
+            nameI18n: useCapitalize(locale.columns?.[prop]) || prop,
             val: getVal(vals, prop),
             old: olds && getVal(olds, prop),
         });
@@ -202,7 +202,7 @@ function getLogTree(data) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
-                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    modelI18n: useCapitalize(locale.name) || log.changedModel,
                     id: log.changedModelId,
                     showValue: log.changedModelValue,
                     logs: [],
@@ -395,7 +395,7 @@ setLogTree();
             (data) =>
                 (actions = data.map((item) => {
                     return {
-                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        locale: useCapitalize(validations[item.changedModel].locale.name),
                         value: item.changedModel,
                     };
                 }))
@@ -409,7 +409,7 @@ setLogTree();
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
             <h6 class="origin-id text-grey">
-                {{ useFirstUpper(validations[props.model].locale.name) }}
+                {{ useCapitalize(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
             <div class="line bg-grey"></div>

src/components/common/VnSelectDialog.vue

@@ -20,6 +20,14 @@ const $props = defineProps({
         type: Array,
         default: () => ['developer'],
     },
+    actionIcon: {
+        type: String,
+        default: 'add',
+    },
+    tooltip: {
+        type: String,
+        default: '',
+    },
 });
 
 const role = useRole();
@@ -48,10 +56,12 @@ const toggleForm = () => {
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
-                name="add"
-                size="xs"
-                class="add-icon"
-            />
+                :name="actionIcon"
+                :size="actionIcon === 'add' ? 'xs' : 'sm'"
+                :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
+            >
+                <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
+            </QIcon>
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
                 <slot name="form" />
             </QDialog>
@@ -63,9 +73,14 @@ const toggleForm = () => {
 </template>
 
 <style lang="scss" scoped>
-.add-icon {
+.default-icon {
     cursor: pointer;
-    background-color: $primary;
+    color: $primary;
     border-radius: 50px;
+
+    &.--add-icon {
+        color: var(--vn-text);
+        background-color: $primary;
+    }
 }
 </style>

src/components/common/VnSelectFilter.vue

@@ -1,7 +1,8 @@
 <script setup>
-import FetchData from 'src/components/FetchData.vue';
-import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -55,6 +56,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
@@ -79,7 +83,7 @@ onMounted(() => {
     if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
 });
 
-async function filter(val, options) {
+function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -112,14 +116,14 @@ async function fetchFilter(val) {
 }
 
 async function filterHandler(val, update) {
+    if (!$props.defaultFilter) return update();
+    let newOptions;
+    if ($props.url) {
+        newOptions = await fetchFilter(val);
+    } else newOptions = filter(val, myOptionsOriginal.value);
     update(
-        async () => {
-            if (!$props.defaultFilter) return;
-            if ($props.url) {
-                myOptions.value = await fetchFilter(val);
-                return;
-            }
-            myOptions.value = await filter(val, myOptionsOriginal.value);
+        () => {
+            myOptions.value = newOptions;
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -164,6 +168,7 @@ watch(modelValue, (newValue) => {
         fill-input
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="isClearable" #append>
             <QIcon

src/components/common/VnSummaryDialog.vue

@@ -1,21 +1,23 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import WorkerSummary from './WorkerSummary.vue';
 
-const $props = defineProps({
+defineProps({
     id: {
         type: Number,
         required: true,
     },
+    summary: {
+        type: Object,
+        required: true,
+    },
 });
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
-
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <WorkerSummary v-if="$props.id" :id="$props.id" />
+    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
+        <component :is="summary" :id="id" />
     </QDialog>
 </template>

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { onMounted, useSlots, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const $props = defineProps({
     url: {
@@ -35,10 +35,11 @@ const $props = defineProps({
         default: null,
     },
 });
-const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
+const isLoading = ref(false);
 
 defineExpose({
     getData,
@@ -60,28 +61,24 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    isLoading.value = true;
+    try {
+        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        emit('onFetch', data);
+    } finally {
+        isLoading.value = false;
+    }
 }
 const emit = defineEmits(['onFetch']);
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: $props.summary,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="entity && !isLoading">
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
-                    @click.stop="viewSummary(entity.id)"
+                    @click.stop="viewSummary(entity.id, $props.summary)"
                     round
                     flat
                     dense
@@ -163,8 +160,13 @@ function viewSummary(id) {
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!entity || isLoading" />
     </div>
+    <QInnerLoading
+        :label="t('globals.pleaseWait')"
+        :showing="isLoading"
+        color="primary"
+    />
 </template>
 
 <style lang="scss">
@@ -219,11 +221,8 @@ function viewSummary(id) {
     margin-bottom: 15px;
 }
 .list-box {
-    width: 90%;
     background-color: var(--vn-gray);
-    margin: 10px auto;
-    padding: 10px 5px 10px 0px;
-    border-radius: 8px;
+
     .q-item__label {
         color: var(--vn-label);
     }

src/components/ui/CardSummary.vue

@@ -90,17 +90,16 @@ watch(props, async () => {
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
-            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
-            flex: 2;
+            flex: 40%;
         }
         > .q-card.vn-three {
-            flex: 4;
+            flex: 75%;
         }
         > .q-card.vn-max {
-            width: 100%;
+            flex: 100%;
         }
 
         > .q-card {

src/components/ui/SkeletonDescriptor.vue

@@ -1,10 +1,39 @@
 <template>
     <div id="descriptor-skeleton">
-        <div class="col q-pl-sm q-pa-sm">
-            <QSkeleton type="text" square height="45px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
+        <div class="row justify-between q-pa-sm">
+            <QSkeleton square size="40px" />
+            <QSkeleton square size="40px" />
+            <QSkeleton square height="40px" width="20px" />
+        </div>
+        <div class="col justify-between q-pa-sm q-gutter-y-xs">
+            <QSkeleton square height="40px" width="150px" />
+            <QSkeleton square height="30px" width="70px" />
+        </div>
+        <div class="col q-pl-sm q-pa-sm q-mb-md">
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
         </div>
 
         <QCardActions>

src/components/ui/VnFilterPanel.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
 
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
@@ -52,6 +53,7 @@ const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
 });
+const route = useRoute();
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -63,6 +65,18 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+watch(
+    () => route.query.params,
+    (val) => {
+        if (!val) {
+            userParams.value = {};
+        } else {
+            const parsedParams = JSON.parse(val);
+            userParams.value = { ...parsedParams };
+        }
+    }
+);
+
 const isLoading = ref(false);
 async function search() {
     isLoading.value = true;

src/components/ui/VnNotes.vue

@@ -39,14 +39,14 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
+                <QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
                             <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                         </slot>
                         <QItem class="full-width justify-between items-start">
                             <VnUserLink
-                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
+                                :name="`${note.worker.user.nickname}`"
                                 :worker-id="note.worker.id"
                             />
 
@@ -55,7 +55,7 @@ async function insert() {
                             </slot>
                         </QItem>
                     </QCardSection>
-                    <QCardSection>
+                    <QCardSection class="q-pa-sm">
                         <slot name="text">
                             {{ note.text }}
                         </slot>
@@ -63,15 +63,8 @@ async function insert() {
                 </QCard>
             </template>
         </VnPaginate>
-        <QPageSticky position="bottom-right" :offset="[25, 25]">
-            <QBtn
-                v-if="addNote"
-                color="primary"
-                icon="add"
-                size="lg"
-                round
-                @click="noteModal = true"
-            />
+        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
+            <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
         </QPageSticky>
         <QDialog v-model="noteModal" @hide="newNote = ''">
             <QCard>

src/components/ui/VnSearchbar.vue

@@ -61,6 +61,10 @@ const props = defineProps({
         type: Function,
         default: null,
     },
+    customRouteRedirectName: {
+        type: String,
+        default: '',
+    },
 });
 
 const router = useRouter();
@@ -87,8 +91,16 @@ async function search() {
     });
     if (!props.redirect) return;
 
+    if (props.customRouteRedirectName) {
+        router.push({
+            name: props.customRouteRedirectName,
+            params: { id: searchText.value },
+        });
+        return;
+    }
+
     const { matched: matches } = route;
-    const { path } = matches[matches.length-1];
+    const { path } = matches[matches.length - 1];
     const newRoute = path.replace(':id', searchText.value);
     await router.push(newRoute);
 }

src/composables/useArrayData.js

@@ -105,7 +105,8 @@ export function useArrayData(key, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            updateRouter && updateStateParams();
+            if (!document.querySelectorAll('[role="dialog"]'))
+                updateRouter && updateStateParams();
         }
 
         store.isLoading = false;

src/composables/useCapitalize.js

@@ -1,3 +1,3 @@
-export function useFirstUpper(str) {
+export function useCapitalize(str) {
     return str && str.charAt(0).toUpperCase() + str.substr(1);
 }

src/composables/useSummaryDialog.js

@@ -0,0 +1,15 @@
+import VnSummaryDialog from 'src/components/common/VnSummaryDialog.vue';
+import { useQuasar } from 'quasar';
+
+export function useSummaryDialog() {
+    const quasar = useQuasar();
+
+    function viewSummary(id, summary) {
+        quasar.dialog({
+            component: VnSummaryDialog,
+            componentProps: { id, summary },
+        });
+    }
+
+    return { viewSummary };
+}

src/composables/useValidator.js

@@ -30,6 +30,15 @@ export function useValidator() {
     const { t } = useI18n();
     const validations = function (validation) {
         return {
+            format: (value) => {
+                const { allowNull, with: format, allowBlank } = validation;
+                const message = t(validation.message) || validation.message;
+                if (!allowBlank && value === '') return message;
+                if (!allowNull && value === null) return message;
+
+                const isValid = new RegExp(format).test(value);
+                if (!isValid) return message;
+            },
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)

src/css/app.scss

@@ -71,7 +71,25 @@ body.body--dark {
     max-width: 60em;
 }
 
+.bg-vn-primary-row {
+    background-color: var(--vn-dark);
+}
+
+.bg-vn-secondary-row {
+    background-color: var(--vn-light-gray);
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
 }
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}

src/css/icons.scss

@@ -1,412 +1,387 @@
 @font-face {
-    font-family: 'icomoon';
-    src: url('fonts/icomoon.eot?g6kvgn');
-    src: url('fonts/icomoon.eot?g6kvgn#iefix') format('embedded-opentype'),
-        url('fonts/icomoon.ttf?g6kvgn') format('truetype'),
-        url('fonts/icomoon.woff?g6kvgn') format('woff'),
-        url('fonts/icomoon.svg?g6kvgn#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
+  font-family: 'icon';
+  src:  url('fonts/icon.eot?7zbcv0');
+  src:  url('fonts/icon.eot?7zbcv0#iefix') format('embedded-opentype'),
+    url('fonts/icon.ttf?7zbcv0') format('truetype'),
+    url('fonts/icon.woff?7zbcv0') format('woff'),
+    url('fonts/icon.svg?7zbcv0#icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
 }
 
-[class^='icon-'],
-[class*=' icon-'] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'icomoon' !important;
-    speak: never;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-frozen:before {
-    content: '\e900';
-}
-.icon-Person:before {
-    content: '\e901';
-}
-.icon-handmadeArtificial:before {
-    content: '\e902';
-}
-.icon-fruit:before {
-    content: '\e903';
-}
-.icon-funeral:before {
-    content: '\e904';
-}
-.icon-noPayMethod:before {
-    content: '\e905';
-}
-.icon-preserved:before {
-    content: '\e906';
-}
-.icon-greenery:before {
-    content: '\e907';
-}
-.icon-plant:before {
-    content: '\e908';
-}
-.icon-handmade:before {
-    content: '\e909';
-}
-.icon-accessory:before {
-    content: '\e90a';
-}
-.icon-artificial:before {
-    content: '\e90b';
-}
-.icon-flower:before {
-    content: '\e90c';
-}
-.icon-fixedPrice:before {
-    content: '\e90d';
-}
-.icon-addperson:before {
-    content: '\e90e';
-}
-.icon-supplierfalse:before {
-    content: '\e90f';
-}
-.icon-invoice-out:before {
-    content: '\e910';
-}
-.icon-invoice-in:before {
-    content: '\e911';
-}
-.icon-invoice-in-create:before {
-    content: '\e912';
-}
-.icon-basketadd:before {
-    content: '\e913';
-}
-.icon-basket:before {
-    content: '\e914';
-}
-.icon-uniE915:before {
-    content: '\e915';
-}
-.icon-uniE916:before {
-    content: '\e916';
-}
-.icon-uniE917:before {
-    content: '\e917';
-}
-.icon-uniE918:before {
-    content: '\e918';
-}
-.icon-uniE919:before {
-    content: '\e919';
-}
-.icon-uniE91A:before {
-    content: '\e91a';
-}
-.icon-isTooLittle:before {
-    content: '\e91b';
-}
-.icon-deliveryprices:before {
-    content: '\e91c';
-}
-.icon-onlinepayment:before {
-    content: '\e91d';
-}
-.icon-risk:before {
-    content: '\e91e';
-}
-.icon-noweb:before {
-    content: '\e91f';
-}
-.icon-no036:before {
-    content: '\e920';
-}
-.icon-disabled:before {
-    content: '\e921';
-}
-.icon-treatments:before {
-    content: '\e922';
-}
-.icon-invoice:before {
-    content: '\e923';
-}
-.icon-photo:before {
-    content: '\e924';
-}
-.icon-supplier:before {
-    content: '\e925';
-}
-.icon-languaje:before {
-    content: '\e926';
-}
-.icon-credit:before {
-    content: '\e927';
-}
-.icon-client:before {
-    content: '\e928';
-}
-.icon-shipment-01:before {
-    content: '\e929';
-}
-.icon-account:before {
-    content: '\e92a';
-}
-.icon-inventory:before {
-    content: '\e92b';
-}
-.icon-unavailable:before {
-    content: '\e92c';
-}
-.icon-wiki:before {
-    content: '\e92d';
-}
-.icon-attach:before {
-    content: '\e92e';
-}
-.icon-exit:before {
-    content: '\e92f';
-}
-.icon-anonymous:before {
-    content: '\e930';
-}
-.icon-net:before {
-    content: '\e931';
-}
-.icon-buyrequest:before {
-    content: '\e932';
-}
-.icon-thermometer:before {
-    content: '\e933';
-}
-.icon-entry:before {
-    content: '\e934';
-}
-.icon-deletedTicket:before {
-    content: '\e935';
-}
-.icon-logout:before {
-    content: '\e936';
-}
-.icon-catalog:before {
-    content: '\e937';
-}
-.icon-agency:before {
-    content: '\e938';
-}
-.icon-delivery:before {
-    content: '\e939';
-}
-.icon-wand:before {
-    content: '\e93a';
-}
-.icon-buscaman:before {
-    content: '\e93b';
-}
-.icon-pbx:before {
-    content: '\e93c';
-}
-.icon-calendar:before {
-    content: '\e93d';
-}
-.icon-splitline:before {
-    content: '\e93e';
-}
-.icon-consignatarios:before {
-    content: '\e93f';
-}
-.icon-tax:before {
-    content: '\e940';
-}
-.icon-notes:before {
-    content: '\e941';
-}
-.icon-lines:before {
-    content: '\e942';
-}
-.icon-zone:before {
-    content: '\e943';
-}
-.icon-greuge:before {
-    content: '\e944';
-}
-.icon-ticketAdd:before {
-    content: '\e945';
-}
-.icon-components:before {
-    content: '\e946';
-}
-.icon-pets:before {
-    content: '\e947';
-}
-.icon-linesprepaired:before {
-    content: '\e948';
-}
-.icon-control:before {
-    content: '\e949';
-}
-.icon-revision:before {
-    content: '\e94a';
-}
-.icon-deaulter:before {
-    content: '\e94b';
-}
-.icon-services:before {
-    content: '\e94c';
-}
-.icon-albaran:before {
-    content: '\e94d';
-}
-.icon-solunion:before {
-    content: '\e94e';
-}
-.icon-stowaway:before {
-    content: '\e94f';
-}
-.icon-apps:before {
-    content: '\e951';
-}
-.icon-info:before {
-    content: '\e952';
-}
-.icon-columndelete:before {
-    content: '\e953';
-}
-.icon-columnadd:before {
-    content: '\e954';
-}
-.icon-deleteline:before {
-    content: '\e955';
-}
-.icon-item:before {
-    content: '\e956';
-}
-.icon-worker:before {
-    content: '\e957';
-}
-.icon-headercol:before {
-    content: '\e958';
-}
-.icon-reserva:before {
-    content: '\e959';
-}
 .icon-100:before {
-    content: '\e95a';
-}
-.icon-sign:before {
-    content: '\e95d';
-}
-.icon-polizon:before {
-    content: '\e95e';
-}
-.icon-solclaim:before {
-    content: '\e95f';
-}
-.icon-actions:before {
-    content: '\e960';
-}
-.icon-details:before {
-    content: '\e961';
-}
-.icon-traceability:before {
-    content: '\e962';
-}
-.icon-claims:before {
-    content: '\e963';
-}
-.icon-regentry:before {
-    content: '\e964';
-}
-.icon-transaction:before {
-    content: '\e966';
+  content: "\e926";
 }
 .icon-History:before {
-    content: '\e968';
+  content: "\e964";
 }
-.icon-mana:before {
-    content: '\e96a';
+.icon-Person:before {
+  content: "\e984";
 }
-.icon-ticket:before {
-    content: '\e96b';
+.icon-accessory:before {
+  content: "\e948";
 }
-.icon-niche:before {
-    content: '\e96c';
+.icon-account:before {
+  content: "\e927";
 }
-.icon-tags:before {
-    content: '\e96d';
+.icon-actions:before {
+  content: "\e928";
 }
-.icon-volume:before {
-    content: '\e96e';
-}
-.icon-bin:before {
-    content: '\e96f';
-}
-.icon-splur:before {
-    content: '\e970';
-}
-.icon-barcode:before {
-    content: '\e971';
-}
-.icon-botanical:before {
-    content: '\e972';
-}
-.icon-clone:before {
-    content: '\e973';
-}
-.icon-sms:before {
-    content: '\e975';
-}
-.icon-eye:before {
-    content: '\e976';
-}
-.icon-doc:before {
-    content: '\e977';
-}
-.icon-package:before {
-    content: '\e978';
-}
-.icon-settings:before {
-    content: '\e979';
-}
-.icon-bucket:before {
-    content: '\e97a';
-}
-.icon-mandatory:before {
-    content: '\e97b';
-}
-.icon-recovery:before {
-    content: '\e97c';
-}
-.icon-payment:before {
-    content: '\e97e';
-}
-.icon-grid:before {
-    content: '\e980';
-}
-.icon-web:before {
-    content: '\e982';
-}
-.icon-dfiscales:before {
-    content: '\e984';
-}
-.icon-trolley:before {
-    content: '\e95c';
+.icon-addperson:before {
+  content: "\e929";
 }
 .icon-agency-term:before {
-    content: '\e950';
+  content: "\e92b";
 }
-.icon-client-unpaid:before {
-    content: '\e95b';
+.icon-anonymous:before {
+  content: "\e92d";
+}
+.icon-apps:before {
+  content: "\e92e";
+}
+.icon-artificial:before {
+  content: "\e92f";
+}
+.icon-attach:before {
+  content: "\e930";
+}
+.icon-barcode:before {
+  content: "\e932";
+}
+.icon-basket:before {
+  content: "\e933";
+}
+.icon-basketadd:before {
+  content: "\e934";
+}
+.icon-bin:before {
+  content: "\e935";
+}
+.icon-botanical:before {
+  content: "\e936";
+}
+.icon-bucket:before {
+  content: "\e937";
+}
+.icon-buscaman:before {
+  content: "\e938";
+}
+.icon-buyrequest:before {
+  content: "\e939";
+}
+.icon-calc_volum:before {
+  content: "\e93a";
+}
+.icon-calendar:before {
+  content: "\e940";
+}
+.icon-catalog:before {
+  content: "\e941";
+}
+.icon-claims:before {
+  content: "\e942";
+}
+.icon-client:before {
+  content: "\e943";
+}
+.icon-clone:before {
+  content: "\e945";
+}
+.icon-columnadd:before {
+  content: "\e946";
+}
+.icon-columndelete:before {
+  content: "\e947";
+}
+.icon-components:before {
+  content: "\e949";
+}
+.icon-consignatarios:before {
+  content: "\e94b";
+}
+.icon-control:before {
+  content: "\e94c";
+}
+.icon-credit:before {
+  content: "\e94d";
+}
+.icon-deaulter:before {
+  content: "\e94e";
+}
+.icon-deletedTicket:before {
+  content: "\e94f";
+}
+.icon-deleteline:before {
+  content: "\e950";
+}
+.icon-delivery:before {
+  content: "\e951";
+}
+.icon-deliveryprices:before {
+  content: "\e952";
+}
+.icon-details:before {
+  content: "\e954";
+}
+.icon-dfiscales:before {
+  content: "\e955";
+}
+.icon-disabled:before {
+  content: "\e965";
+}
+.icon-doc:before {
+  content: "\e956";
+}
+.icon-entry:before {
+  content: "\e958";
+}
+.icon-exit:before {
+  content: "\e959";
+}
+.icon-eye:before {
+  content: "\e95a";
+}
+.icon-fixedPrice:before {
+  content: "\e95b";
+}
+.icon-flower:before {
+  content: "\e95c";
+}
+.icon-frozen:before {
+  content: "\e95d";
+}
+.icon-fruit:before {
+  content: "\e95e";
+}
+.icon-funeral:before {
+  content: "\e95f";
+}
+.icon-greenery:before {
+  content: "\e91e";
+}
+.icon-greuge:before {
+  content: "\e960";
+}
+.icon-grid:before {
+  content: "\e961";
+}
+.icon-handmade:before {
+  content: "\e94a";
+}
+.icon-handmadeArtificial:before {
+  content: "\e962";
+}
+.icon-headercol:before {
+  content: "\e963";
+}
+.icon-info:before {
+  content: "\e966";
+}
+.icon-inventory:before {
+  content: "\e967";
+}
+.icon-invoice:before {
+  content: "\e969";
+}
+.icon-invoice-in:before {
+  content: "\e96a";
+}
+.icon-invoice-in-create:before {
+  content: "\e96b";
+}
+.icon-invoice-out:before {
+  content: "\e96c";
+}
+.icon-isTooLittle:before {
+  content: "\e96e";
+}
+.icon-item:before {
+  content: "\e96f";
+}
+.icon-languaje:before {
+  content: "\e912";
+}
+.icon-lines:before {
+  content: "\e971";
+}
+.icon-linesprepaired:before {
+  content: "\e972";
+}
+.icon-link-to-corrected:before {
+  content: "\e900";
+}
+.icon-link-to-correcting:before {
+  content: "\e906";
+}
+.icon-logout:before {
+  content: "\e90a";
+}
+.icon-mana:before {
+  content: "\e974";
+}
+.icon-mandatory:before {
+  content: "\e975";
+}
+.icon-net:before {
+  content: "\e976";
+}
+.icon-newalbaran:before {
+  content: "\e977";
+}
+.icon-niche:before {
+  content: "\e979";
+}
+.icon-no036:before {
+  content: "\e97a";
+}
+.icon-noPayMethod:before {
+  content: "\e97b";
+}
+.icon-notes:before {
+  content: "\e97c";
+}
+.icon-noweb:before {
+  content: "\e97e";
+}
+.icon-onlinepayment:before {
+  content: "\e97f";
+}
+.icon-package:before {
+  content: "\e980";
+}
+.icon-payment:before {
+  content: "\e982";
+}
+.icon-pbx:before {
+  content: "\e983";
+}
+.icon-pets:before {
+  content: "\e985";
+}
+.icon-photo:before {
+  content: "\e986";
+}
+.icon-plant:before {
+  content: "\e987";
+}
+.icon-polizon:before {
+  content: "\e989";
+}
+.icon-preserved:before {
+  content: "\e98a";
+}
+.icon-recovery:before {
+  content: "\e98b";
+}
+.icon-regentry:before {
+  content: "\e901";
+}
+.icon-reserva:before {
+  content: "\e902";
+}
+.icon-revision:before {
+  content: "\e903";
+}
+.icon-risk:before {
+  content: "\e904";
+}
+.icon-services:before {
+  content: "\e905";
+}
+.icon-settings:before {
+  content: "\e907";
+}
+.icon-shipment:before {
+  content: "\e908";
+}
+.icon-sign:before {
+  content: "\e909";
+}
+.icon-sms:before {
+  content: "\e90b";
+}
+.icon-solclaim:before {
+  content: "\e90c";
+}
+.icon-solunion:before {
+  content: "\e90d";
+}
+.icon-splitline:before {
+  content: "\e90e";
+}
+.icon-splur:before {
+  content: "\e90f";
+}
+.icon-stowaway:before {
+  content: "\e910";
+}
+.icon-supplier:before {
+  content: "\e911";
+}
+.icon-supplierfalse:before {
+  content: "\e913";
+}
+.icon-tags:before {
+  content: "\e914";
+}
+.icon-tax:before {
+  content: "\e915";
+}
+.icon-thermometer:before {
+  content: "\e916";
+}
+.icon-ticket:before {
+  content: "\e917";
+}
+.icon-ticketAdd:before {
+  content: "\e918";
+}
+.icon-traceability:before {
+  content: "\e919";
+}
+.icon-treatments:before {
+  content: "\e91c";
 }
 .icon-trolley:before {
-    content: '\e95c';
-}
-.icon-grafana:before {
-    content: '\e965';
+  content: "\e91a";
 }
 .icon-troncales:before {
-    content: '\e967';
+  content: "\e91b";
+}
+.icon-unavailable:before {
+  content: "\e91d";
+}
+.icon-volume:before {
+  content: "\e91f";
+}
+.icon-wand:before {
+  content: "\e920";
+}
+.icon-web:before {
+  content: "\e921";
+}
+.icon-wiki:before {
+  content: "\e922";
+}
+.icon-worker:before {
+  content: "\e923";
+}
+.icon-zone:before {
+  content: "\e924";
 }

src/css/quasar.variables.scss

@@ -13,6 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #ec8916;
+$primary-light: lighten($primary, 35%);
 $secondary: #26a69a;
 $accent: #9c27b0;
 $white: #fff;

src/i18n/en/index.js

@@ -62,9 +62,15 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        requiredField: 'Required field',
+        class: 'clase',
+        type: 'type',
+        reason: 'reason',
         noResults: 'No results',
         system: 'System',
         notificationSent: 'Notification sent',
+        fieldRequired: 'Field required',
+        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -283,6 +289,8 @@ export default {
             buys: 'Buys',
             notes: 'Notes',
             log: 'Log',
+            create: 'Create',
+            latestBuys: 'Latest buys',
         },
         list: {
             newEntry: 'New entry',
@@ -338,6 +346,12 @@ export default {
             booked: 'Booked',
             raid: 'Raid',
             excludedFromAvailable: 'Inventory',
+            agency: 'Agency',
+            warehouseOut: 'Warehouse Out',
+            warehouseIn: 'Warehouse In',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            id: 'ID',
         },
         buys: {
             groupingPrice: 'Grouping price',
@@ -352,6 +366,11 @@ export default {
             buyingValue: 'Buying value',
             packagingFk: 'Box',
             file: 'File',
+            name: 'Name',
+            producer: 'Producer',
+            type: 'Type',
+            color: 'Color',
+            id: 'ID',
         },
         notes: {
             observationType: 'Observation type',
@@ -362,6 +381,36 @@ export default {
             landed: 'Landed',
             warehouseOut: 'Warehouse Out',
         },
+        latestBuys: {
+            picture: 'Picture',
+            itemFk: 'Item ID',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Quantity',
+            description: 'Description',
+            size: 'Size',
+            tags: 'Tags',
+            type: 'Type',
+            intrastat: 'Intrastat',
+            origin: 'Origin',
+            weightByPiece: 'Weight/Piece',
+            isActive: 'Active',
+            family: 'Family',
+            entryFk: 'Entry',
+            buyingValue: 'Buying value',
+            freightValue: 'Freight value',
+            comissionValue: 'Commission value',
+            packageValue: 'Package value',
+            isIgnored: 'Is ignored',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Weight',
+            packagingFk: 'Package',
+            packingOut: 'Package out',
+            landing: 'Landing',
+        },
     },
     ticket: {
         pageTitles: {
@@ -513,6 +562,7 @@ export default {
             responsible: 'Responsible',
             worker: 'Worker',
             redelivery: 'Redelivery',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Customer',
@@ -651,6 +701,7 @@ export default {
             vat: 'VAT',
             dueDay: 'Due day',
             intrastat: 'Intrastat',
+            corrective: 'Corrective',
             log: 'Logs',
         },
         list: {
@@ -1067,6 +1118,7 @@ export default {
             deleteTravel: 'Delete travel',
             AddEntry: 'Add entry',
             thermographs: 'Thermographs',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Reference',
@@ -1146,9 +1198,6 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
-        editPictureForm: {
-            allowedFilesText: 'Allowed file types: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} has been copied to the clipboard',
         },

src/i18n/es/index.js

@@ -62,9 +62,15 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        requiredField: 'Campo obligatorio',
+        class: 'clase',
+        type: 'tipo',
+        reason: 'motivo',
         noResults: 'Sin resultados',
         system: 'Sistema',
         notificationSent: 'Notificación enviada',
+        fieldRequired: 'Campo requerido',
+        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -283,6 +289,8 @@ export default {
             buys: 'Compras',
             notes: 'Notas',
             log: 'Historial',
+            create: 'Crear',
+            latestBuys: 'Últimas compras',
         },
         list: {
             newEntry: 'Nueva entrada',
@@ -338,6 +346,12 @@ export default {
             booked: 'Asentado',
             raid: 'Redada',
             excludedFromAvailable: 'Inventario',
+            agency: 'Agencia',
+            warehouseOut: 'Alm. salida',
+            warehouseIn: 'Alm. entrada',
+            shipped: 'F. envío',
+            landed: 'F. entrega',
+            id: 'ID',
         },
         buys: {
             groupingPrice: 'Precio grouping',
@@ -352,6 +366,11 @@ export default {
             buyingValue: 'Coste',
             packagingFk: 'Embalaje',
             file: 'Fichero',
+            name: 'Nombre',
+            producer: 'Productor',
+            type: 'Tipo',
+            color: 'Color',
+            id: 'ID',
         },
         notes: {
             observationType: 'Tipo de observación',
@@ -362,6 +381,36 @@ export default {
             landed: 'F. entrega',
             warehouseOut: 'Alm. salida',
         },
+        latestBuys: {
+            picture: 'Foto',
+            itemFk: 'ID Artículo',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Cantidad',
+            description: 'Descripción',
+            size: 'Medida',
+            tags: 'Etiquetas',
+            type: 'Tipo',
+            intrastat: 'Intrastat',
+            origin: 'Origen',
+            weightByPiece: 'Peso (gramos)/tallo',
+            isActive: 'Activo',
+            family: 'Familia',
+            entryFk: 'Entrada',
+            buyingValue: 'Coste',
+            freightValue: 'Porte',
+            comissionValue: 'Comisión',
+            packageValue: 'Embalaje',
+            isIgnored: 'Ignorado',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Peso',
+            packagingFk: 'Embalaje',
+            packingOut: 'Embalaje envíos',
+            landing: 'Llegada',
+        },
     },
     ticket: {
         pageTitles: {
@@ -513,6 +562,7 @@ export default {
             responsible: 'Responsable',
             worker: 'Trabajador',
             redelivery: 'Devolución',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Cliente',
@@ -711,6 +761,7 @@ export default {
             vat: 'IVA',
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
+            corrective: 'Rectificativa',
             log: 'Registros de auditoría',
         },
         list: {
@@ -1068,6 +1119,7 @@ export default {
             deleteTravel: 'Eliminar envío',
             AddEntry: 'Añadir entrada',
             thermographs: 'Termógrafos',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Referencia',
@@ -1147,9 +1199,6 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
-        editPictureForm: {
-            allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
-        },
         VnLv: {
             copyText: '{copyValue} se ha copiado al portapepeles',
         },

src/pages/Claim/Card/ClaimAction.vue

@@ -135,7 +135,7 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    await onUpdateGreugeAccept();
+    if (multiplicatorValue.value) await onUpdateGreugeAccept();
 }
 
 async function onUpdateGreugeAccept() {

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
@@ -10,6 +10,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
 
 const $props = defineProps({
     id: {
@@ -22,7 +23,7 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
+const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -71,11 +72,10 @@ const filter = {
 };
 
 const STATE_COLOR = {
-    pending: 'positive',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
-
 function stateColor(code) {
     return STATE_COLOR[code];
 }
@@ -85,6 +85,9 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
 };
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
 </script>
 
 <template>
@@ -167,6 +170,20 @@ const setData = (entity) => {
                 >
                     <QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    size="md"
+                    icon="assignment"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
+                >
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="visibility"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
+                >
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>

src/pages/Claim/Card/ClaimLines.vue

@@ -11,6 +11,7 @@ import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -229,7 +230,14 @@ function showImportDialog() {
                                 </QPopupEdit>
                             </QTd>
                         </template>
-
+                        <template #body-cell-description="{ row, value }">
+                            <QTd auto-width align="right" class="text-primary">
+                                {{ value }}
+                                <ItemDescriptorProxy
+                                    :id="row.sale.itemFk"
+                                ></ItemDescriptorProxy>
+                            </QTd>
+                        </template>
                         <template #body-cell-discount="{ row, value, rowIndex }">
                             <QTd auto-width align="right" class="text-primary">
                                 {{ value }}

src/pages/Claim/Card/ClaimNotes.vue

@@ -19,6 +19,12 @@ const claimFilter = {
         relation: 'worker',
         scope: {
             fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname'],
+                },
+            },
         },
     },
 };
@@ -30,7 +36,8 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes style="overflow-y: scroll;"
+        <VnNotes
+            style="overflow-y: scroll"
             :add-note="$props.addNote"
             :id="id"
             url="claimObservations"

src/pages/Claim/Card/ClaimSummary.vue

@@ -10,6 +10,7 @@ import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
 import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -42,11 +43,6 @@ onMounted(async () => {
     claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
 });
 
-watch(entityId, async (id) => {
-    claimDmsFilter.value.where = { claimFk: id };
-    await claimDmsRef.value.fetch();
-});
-
 const detailsColumns = ref([
     {
         name: 'item',
@@ -101,11 +97,9 @@ const detailsColumns = ref([
 ]);
 
 const STATE_COLOR = {
-    pending: 'positive',
-
-    managed: 'warning',
-
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -170,7 +164,6 @@ function openDialog(dmsId) {
         :filter="claimDmsFilter"
         @on-fetch="(data) => setClaimDms(data)"
         limit="20"
-        auto-load
         ref="claimDmsRef"
     />
     <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
@@ -210,15 +203,29 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
+                <VnLv :label="t('claim.summary.customer')">
+                    <template #value>
+                        <VnUserLink
+                            :name="claim.client?.name"
+                            :worker-id="claim.client?.id"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
+                <QCheckbox
+                    :align-items="right"
+                    :label="t('claim.basicData.picked')"
+                    v-model="claim.hasToPickUp"
+                />
             </QCard>
-            <QCard class="vn-max claimVnNotes">
+            <QCard class="vn-three claimVnNotes full-height">
                 <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
-            <QCard class="vn-max" v-if="salesClaimed.length > 0">
+            <QCard class="vn-two" v-if="salesClaimed.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
@@ -231,8 +238,43 @@ function openDialog(dmsId) {
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+                                <ItemDescriptorProxy
+                                    v-if="col.name == 'description'"
+                                    :id="2"
+                                ></ItemDescriptorProxy>
+                            </QTh>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <a class="header" :href="claimUrl + 'development'">
+                    {{ t('claim.summary.development') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable :columns="developmentColumns" :rows="developments" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+
             <QCard class="vn-max" v-if="claimDms.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/photos`">
                     {{ t('claim.summary.photos') }}
@@ -275,22 +317,8 @@ function openDialog(dmsId) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header" :href="claimUrl + 'development'">
-                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" color="primary" />
-                </a>
-                <QTable :columns="developmentColumns" :rows="developments" flat>
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max" v-if="developments.length > 0">
+
+            <QCard class="vn-max">
                 <a class="header" :href="claimUrl + 'action'">
                     {{ t('claim.summary.actions') }}
                     <QIcon name="open_in_new" color="primary" />

src/pages/Claim/Card/ClaimSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ClaimSummary from './ClaimSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ClaimSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Claim/ClaimList.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -9,35 +8,33 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ClaimSummary from './Card/ClaimSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 const STATE_COLOR = {
-    pending: 'positive',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
 function stateColor(code) {
     return STATE_COLOR[code];
 }
-function navigate(id) {
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
     router.push({ path: `/claim/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: ClaimSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -75,7 +72,7 @@ function viewSummary(id) {
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
-                order="claimStateFk"
+                :order="['priority ASC', 'created DESC']"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -83,7 +80,7 @@ function viewSummary(id) {
                         :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
-                        @click="navigate(row.id)"
+                        @click="navigate($event, row.id)"
                         v-for="row of rows"
                     >
                         <template #list-items>
@@ -118,12 +115,6 @@ function viewSummary(id) {
                             </VnLv>
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
-                                outline
-                            />
                             <QBtn
                                 :label="t('components.smartCard.viewDescription')"
                                 @click.stop
@@ -135,7 +126,7 @@ function viewSummary(id) {
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ClaimSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/Card/CustomerBillingData.vue

@@ -8,7 +8,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 
 const { t } = useI18n();
@@ -78,7 +78,7 @@ const getBankEntities = () => {
                     </VnInput>
                 </div>
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Swift / BIC')"
                         :options="bankEntitiesOptions"
                         :roles-allowed-to-create="['salesAssistant', 'hr']"
@@ -101,7 +101,7 @@ const getBankEntities = () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
 

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -23,10 +23,8 @@ const $props = defineProps({
         default: null,
     },
 });
-
 const route = useRoute();
 const { t } = useI18n();
-
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });

src/pages/Customer/Card/CustomerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
+import CustomerSummary from './CustomerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <CustomerDescriptor
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="CustomerSummaryDialog"
-        />
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
     </QPopupProxy>
 </template>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -8,60 +8,31 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const typesTaxes = ref([]);
 const typesTransactions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postcode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
-    formData.countryFk = countryFk;
-};
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <fetch-data auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
-    <fetch-data
+    <FetchData auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
+    <FetchData
         auto-load
         @on-fetch="(data) => (typesTransactions = data)"
         url="SageTransactionTypes"
     />
-    <FetchData
-        ref="townsFetchDataRef"
-        @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"
-    />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <FormModel
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         :url="`Clients/${route.params.id}/getCard`"
@@ -132,97 +103,14 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                    <VnLocation
                         :rules="validate('Worker.postcode')"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
                         v-model="data.postcode"
+                        @update:model-value="(location) => handleLocation(data, location)"
                     >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }} ({{
-                                            scope.opt.town.province.name
-                                        }},
-                                        {{
-                                            scope.opt.town.province.country.country
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectCreate>
-                </div>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        :rules="validate('postcode.city')"
-                        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"
-                        :rules="validate('city.provinceFk')"
-                        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"
-                        :rules="validate('bankEntity.countryFk')"
-                        hide-selected
-                        option-label="country"
-                        option-value="id"
-                        v-model="data.countryFk"
-                    />
+                    </VnLocation>
                 </div>
             </VnRow>
 

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import CustomerSummary from './CustomerSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <CustomerSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Customer/CustomerList.vue

@@ -1,34 +1,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import CustomerSummary from './Card/CustomerSummary.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const redirectToCreateView = () => {
     router.push({ name: 'CustomerCreate' });
 };
@@ -98,7 +89,7 @@ const redirectToCreateView = () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, CustomerSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue

@@ -1,14 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
-import { useQuasar } from 'quasar';
-
-import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
+import CustomerSummary from '../Card/CustomerSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const { t } = useI18n();
-const quasar = useQuasar();
 const router = useRouter();
+const { viewSummary } = useSummaryDialog();
 
 const $props = defineProps({
     id: {
@@ -27,15 +25,6 @@ const redirectToCreateView = () => {
         },
     });
 };
-
-const viewSummary = () => {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id: $props.id,
-        },
-    });
-};
 </script>
 
 <template>
@@ -51,7 +40,7 @@ const viewSummary = () => {
             </QTooltip>
         </QIcon>
         <QIcon
-            @click.stop="viewSummary"
+            @click.stop="viewSummary($props.id, CustomerSummary)"
             class="q-ml-md"
             color="primary"
             name="preview"

src/pages/Customer/components/CustomerAddressCreate.vue

@@ -10,7 +10,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
@@ -127,7 +127,7 @@ const toCustomerAddress = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Postcode')"
                         :options="postcodesOptions"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -155,7 +155,7 @@ const toCustomerAddress = () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
                 <div class="col">
                     <!-- ciudades -->
@@ -240,7 +240,7 @@ const toCustomerAddress = () => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Customs agent')"
                         :options="customsAgents"
                         hide-selected
@@ -251,7 +251,7 @@ const toCustomerAddress = () => {
                         <template #form>
                             <CustomerNewCustomsAgent @on-data-saved="refreshData()" />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
         </template>

src/pages/Customer/components/CustomerAddressEdit.vue

@@ -10,7 +10,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
@@ -193,7 +193,7 @@ const toCustomerAddress = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Postcode')"
                         :options="postcodesOptions"
                         :roles-allowed-to-create="['deliveryAssistant']"
@@ -221,7 +221,7 @@ const toCustomerAddress = () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
                 <div class="col">
                     <!-- ciudades -->
@@ -306,7 +306,7 @@ const toCustomerAddress = () => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Customs agent')"
                         :options="customsAgents"
                         hide-selected
@@ -317,7 +317,7 @@ const toCustomerAddress = () => {
                         <template #form>
                             <CustomsNewCustomsAgent />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
 

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -44,7 +44,6 @@ const setData = (entity) => {
 };
 
 const removeDepartment = () => {
-    console.log('entityId: ', entityId.value);
     quasar
         .dialog({
             title: 'Are you sure you want to delete it?',

src/pages/Entry/Card/EntryBasicData.vue

@@ -8,6 +8,8 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FilterTravelForm from 'src/components/FilterTravelForm.vue';
 
 import { toDate } from 'src/filters';
 
@@ -18,6 +20,10 @@ const suppliersOptions = ref([]);
 const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 const currenciesOptions = ref([]);
+
+const onFilterTravelSelected = (formData, id) => {
+    formData.travelFk = id;
+};
 </script>
 <template>
     <FetchData
@@ -82,7 +88,7 @@ const currenciesOptions = ref([]);
                     </VnSelectFilter>
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelectDialog
                         :label="t('entry.basicData.travel')"
                         v-model="data.travelFk"
                         :options="travelsOptions"
@@ -91,7 +97,13 @@ const currenciesOptions = ref([]);
                         map-options
                         hide-selected
                         :required="true"
+                        action-icon="filter_alt"
                     >
+                        <template #form>
+                            <FilterTravelForm
+                                @travel-selected="onFilterTravelSelected(data, $event)"
+                            />
+                        </template>
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
                                 <QItemSection>
@@ -106,7 +118,7 @@ const currenciesOptions = ref([]);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -163,8 +175,9 @@ const currenciesOptions = ref([]);
                         :label="t('entry.basicData.observation')"
                         type="textarea"
                         v-model="data.observation"
+                        :maxlength="45"
+                        counter
                         fill-input
-                        autogrow
                     />
                 </div>
             </VnRow>

src/pages/Entry/Card/EntryBuys.vue

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { QBtn } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'src/components/FetchData.vue';
@@ -9,6 +10,7 @@ import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
@@ -26,28 +28,38 @@ const { notify } = useNotify();
 const rowsSelected = ref([]);
 const entryBuysPaginateRef = ref(null);
 const packagingsOptions = ref(null);
+const originalRowDataCopy = ref(null);
+
+const getInputEvents = (colField, props) => {
+    return colField === 'packagingFk'
+        ? { 'update:modelValue': () => saveChange(colField, props) }
+        : {
+              'keyup.enter': () => saveChange(colField, props),
+              blur: () => saveChange(colField, props),
+          };
+};
 
 const tableColumnComponents = computed(() => ({
     item: {
-        component: () => 'span',
-        props: () => {},
+        component: QBtn,
+        props: {
+            color: 'blue',
+            flat: true,
+        },
         event: () => ({}),
     },
     quantity: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
             class: 'input-number',
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     packagingFk: {
-        component: () => VnSelectFilter,
-        props: () => ({
+        component: VnSelectFilter,
+        props: {
             'option-value': 'id',
             'option-label': 'id',
             'emit-value': true,
@@ -55,92 +67,69 @@ const tableColumnComponents = computed(() => ({
             'use-input': true,
             'hide-selected': true,
             options: packagingsOptions.value,
-        }),
-        event: (props) => ({
-            'update:modelValue': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     stickers: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
             class: 'input-number',
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     weight: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     packing: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     grouping: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     buyingValue: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     price2: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     price3: {
-        component: () => VnInput,
-        props: (col) => ({
+        component: VnInput,
+        props: {
             type: 'number',
             min: 0,
-            label: col.label,
-        }),
-        event: (props) => ({
-            'keyup.enter': () => saveChange(props.row),
-        }),
+        },
+        event: getInputEvents,
     },
     import: {
-        component: () => 'span',
-        props: () => {},
+        component: 'span',
+        props: {},
         event: () => ({}),
     },
 }));
@@ -217,8 +206,19 @@ const entriesTableColumns = computed(() => {
     ];
 });
 
-const saveChange = async (rowData) => {
-    await axios.patch(`Buys/${rowData.id}`, rowData);
+const copyOriginalRowsData = (rows) => {
+    // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
+};
+
+const saveChange = async (field, { rowIndex, row }) => {
+    try {
+        if (originalRowDataCopy.value[rowIndex][field] == row[field]) return;
+        await axios.patch(`Buys/${row.id}`, row);
+        originalRowDataCopy.value[rowIndex][field] = row[field];
+    } catch (err) {
+        console.error('Error saving changes', err);
+    }
 };
 
 const openRemoveDialog = async () => {
@@ -256,6 +256,33 @@ const deleteBuys = async () => {
 const importBuys = () => {
     router.push({ name: 'EntryBuysImport' });
 };
+
+const toggleGroupingMode = async (buy, mode) => {
+    try {
+        const grouping = 1;
+        const packing = 2;
+        const groupingMode = mode === 'grouping' ? grouping : packing;
+
+        const newGroupingMode = buy.groupingMode === groupingMode ? 0 : groupingMode;
+
+        const params = {
+            groupingMode: newGroupingMode,
+        };
+
+        await axios.patch(`Buys/${buy.id}`, params);
+        buy.groupingMode = newGroupingMode;
+    } catch (err) {
+        console.error('Error toggling grouping mode');
+    }
+};
+
+const showLockIcon = (groupingMode, mode) => {
+    if (mode === 'packing') {
+        return groupingMode === 2 ? 'lock' : 'lock_open';
+    } else {
+        return groupingMode === 1 ? 'lock' : 'lock_open';
+    }
+};
 </script>
 
 <template>
@@ -284,6 +311,7 @@ const importBuys = () => {
         ref="entryBuysPaginateRef"
         data-key="EntryBuys"
         :url="`Entries/${route.params.id}/getBuys`"
+        @on-fetch="copyOriginalRowsData($event)"
         auto-load
     >
         <template #body="{ rows }">
@@ -304,16 +332,44 @@ const importBuys = () => {
                         </QTd>
                         <QTd v-for="col in props.cols" :key="col.name">
                             <component
-                                :is="tableColumnComponents[col.name].component()"
-                                v-bind="tableColumnComponents[col.name].props(col)"
+                                :is="tableColumnComponents[col.name].component"
+                                v-bind="tableColumnComponents[col.name].props"
                                 v-model="props.row[col.field]"
-                                v-on="tableColumnComponents[col.name].event(props)"
+                                v-on="
+                                    tableColumnComponents[col.name].event(
+                                        col.field,
+                                        props
+                                    )
+                                "
                             >
+                                <template
+                                    v-if="
+                                        col.name === 'grouping' || col.name === 'packing'
+                                    "
+                                    #append
+                                >
+                                    <QBtn
+                                        :icon="
+                                            showLockIcon(props.row.groupingMode, col.name)
+                                        "
+                                        @click="toggleGroupingMode(props.row, col.name)"
+                                        class="cursor-pointer"
+                                        size="sm"
+                                        flat
+                                        dense
+                                        unelevated
+                                        push
+                                    />
+                                </template>
                                 <template
                                     v-if="col.name === 'item' || col.name === 'import'"
                                 >
                                     {{ col.value }}
                                 </template>
+                                <ItemDescriptorProxy
+                                    v-if="col.name === 'item'"
+                                    :id="props.row.id"
+                                />
                             </component>
                         </QTd>
                     </QTr>
@@ -354,13 +410,14 @@ const importBuys = () => {
                             <QList dense>
                                 <QItem v-for="col in props.cols" :key="col.name">
                                     <component
-                                        :is="tableColumnComponents[col.name].component()"
-                                        v-bind="
-                                            tableColumnComponents[col.name].props(col)
-                                        "
+                                        :is="tableColumnComponents[col.name].component"
+                                        v-bind="tableColumnComponents[col.name].props"
                                         v-model="props.row[col.field]"
                                         v-on="
-                                            tableColumnComponents[col.name].event(props)
+                                            tableColumnComponents[col.name].event(
+                                                col.field,
+                                                props
+                                            )
                                         "
                                         class="full-width"
                                     >
@@ -381,6 +438,7 @@ const importBuys = () => {
             </QTable>
         </template>
     </VnPaginate>
+
     <QPageSticky :offset="[20, 20]">
         <QBtn fab icon="upload" color="primary" @click="importBuys()" />
         <QTooltip class="text-no-wrap">

src/pages/Entry/Card/EntryBuysImport.vue

@@ -7,6 +7,8 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FilterItemForm from 'src/components/FilterItemForm.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
@@ -27,6 +29,7 @@ const importData = ref({
     ref: null,
 });
 
+const inputFileRef = ref(null);
 const lastItemBuysOptions = ref([]);
 const packagingsOptions = ref([]);
 
@@ -197,14 +200,20 @@ const redirectToBuysView = () => {
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QFile
+                        ref="inputFileRef"
                         :label="t('entry.buys.file')"
-                        :multiple="false"
                         v-model="importData.file"
+                        :multiple="false"
+                        accept=".json"
                         @update:model-value="onFileChange($event)"
                         class="required"
                     >
                         <template #append>
-                            <QIcon name="vn:attach" class="cursor-pointer">
+                            <QIcon
+                                name="vn:attach"
+                                class="cursor-pointer"
+                                @click="inputFileRef.pickFiles()"
+                            >
                                 <QTooltip>{{ t('Select a file') }}</QTooltip>
                             </QIcon>
                         </template>
@@ -237,13 +246,19 @@ const redirectToBuysView = () => {
                     >
                         <template #body-cell-item="{ row, col }">
                             <QTd auto-width>
-                                <VnSelectFilter
+                                <VnSelectDialog
                                     v-model="row[col.field]"
                                     :options="col.options"
                                     :option-value="col.optionValue"
                                     :option-label="col.optionLabel"
                                     hide-selected
+                                    action-icon="filter_alt"
                                 >
+                                    <template #form>
+                                        <FilterItemForm
+                                            @item-selected="row[col.field] = $event"
+                                        />
+                                    </template>
                                     <template #option="scope">
                                         <QItem v-bind="scope.itemProps">
                                             <QItemSection>
@@ -254,7 +269,7 @@ const redirectToBuysView = () => {
                                             </QItemSection>
                                         </QItem>
                                     </template>
-                                </VnSelectFilter>
+                                </VnSelectDialog>
                             </QTd>
                         </template>
                         <template #body-cell-packagingFk="{ row, col }">

src/pages/Entry/Card/EntryCard.vue

@@ -16,6 +16,7 @@ const stateStore = useStateStore();
         <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="EntryList"
+                url="Entries/filter"
                 :label="t('Search entries')"
                 :info="t('You can search by entry reference')"
             />

src/pages/Entry/Card/EntryDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -111,26 +111,19 @@ const showEntryReport = () => {
             <QItem v-ripple clickable @click="showEntryReport(entity)">
                 <QItemSection>{{ t('Show entry report') }}</QItemSection>
             </QItem>
-            <QItem v-ripple clickable>
-                <QItemSection>
-                    <RouterLink :to="{ name: 'EntryList' }" class="color-vn-text">
-                        {{ t('Go to module index') }}
-                    </RouterLink>
-                </QItemSection>
-            </QItem>
         </template>
         <template #body="{ entity }">
             <VnLv
                 :label="t('entry.descriptor.agency')"
-                :value="entity.travel.agency.name"
+                :value="entity.travel?.agency?.name"
             />
             <VnLv
                 :label="t('entry.descriptor.landed')"
-                :value="toDate(entity.travel.landed)"
+                :value="toDate(entity.travel?.landed)"
             />
             <VnLv
                 :label="t('entry.descriptor.warehouseOut')"
-                :value="entity.travel.warehouseOut.name"
+                :value="entity.travel?.warehouseOut?.name"
             />
         </template>
         <template #icons="{ entity }">

src/pages/Entry/Card/EntryNotes.vue

@@ -15,6 +15,12 @@ const { t } = useI18n();
 const entryObservationsRef = ref(null);
 const entryObservationsOptions = ref([]);
 
+const sortEntryObservationOptions = (data) => {
+    entryObservationsOptions.value = [...data].sort((a, b) =>
+        a.description.localeCompare(b.description)
+    );
+};
+
 onMounted(() => {
     if (entryObservationsRef.value) entryObservationsRef.value.reload();
 });
@@ -22,7 +28,7 @@ onMounted(() => {
 <template>
     <FetchData
         url="ObservationTypes"
-        @on-fetch="(data) => (entryObservationsOptions = data)"
+        @on-fetch="(data) => sortEntryObservationOptions(data)"
         auto-load
     />
     <CrudModel
@@ -37,7 +43,7 @@ onMounted(() => {
         :default-remove="false"
         :data-required="{ entryFk: route.params.id }"
     >
-        <template #body="{ rows }">
+        <template #body="{ rows, validate }">
             <QCard class="q-pa-md">
                 <VnRow
                     v-for="(row, index) in rows"
@@ -49,6 +55,7 @@ onMounted(() => {
                             :label="t('entry.notes.observationType')"
                             v-model="row.observationTypeFk"
                             :options="entryObservationsOptions"
+                            :disable="!!row.id"
                             option-label="description"
                             option-value="id"
                             hide-selected
@@ -58,6 +65,7 @@ onMounted(() => {
                         <VnInput
                             :label="t('entry.notes.description')"
                             v-model="row.description"
+                            :rules="validate('EntryObservation.description')"
                         />
                     </div>
                     <div class="col-1 row justify-center items-center">

src/pages/Entry/Card/EntrySummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import EntrySummary from './EntrySummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <EntrySummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Entry/EntryCreate.vue

@@ -8,7 +8,9 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
+import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 
@@ -16,15 +18,16 @@ const state = useState();
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const stateStore = useStateStore();
 
 const user = state.getUser();
 const newEntryForm = reactive({
     supplierFk: null,
-    travelFk: route.query?.travelFk || null,
+    travelFk: Number(route.query?.travelFk) || null,
     companyFk: user.value.companyFk || null,
 });
 const suppliersOptions = ref([]);
-const travelsOptionsOptions = ref([]);
+const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 
 const redirectToEntryBasicData = (_, { id }) => {
@@ -44,7 +47,7 @@ const redirectToEntryBasicData = (_, { id }) => {
         url="Travels/filter"
         :filter="{ fields: ['id', 'warehouseInName'] }"
         order="id"
-        @on-fetch="(data) => (travelsOptionsOptions = data)"
+        @on-fetch="(data) => (travelsOptions = data)"
         auto-load
     />
     <FetchData
@@ -55,6 +58,17 @@ const redirectToEntryBasicData = (_, { id }) => {
         @on-fetch="(data) => (companiesOptions = data)"
         auto-load
     />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                url="Entries/filter"
+                custom-route-redirect-name="EntrySummary"
+                data-key="EntrySummary"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QPage>
         <VnSubToolbar />
         <FormModel
@@ -65,71 +79,78 @@ const redirectToEntryBasicData = (_, { id }) => {
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Supplier')"
-                        class="full-width"
-                        v-model="data.supplierFk"
-                        :options="suppliersOptions"
-                        option-value="id"
-                        option-label="nickname"
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.supplierFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        #{{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Travel')"
-                        class="full-width"
-                        v-model="data.travelFk"
-                        :options="travelsOptionsOptions"
-                        option-value="id"
-                        option-label="warehouseInName"
-                        map-options
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.travelFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel
-                                        >{{ scope.opt?.agencyModeName }} -
-                                        {{ scope.opt?.warehouseInName }} ({{
-                                            toDate(scope.opt?.shipped)
-                                        }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
-                                            toDate(scope.opt?.landed)
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Company')"
-                        class="full-width"
-                        v-model="data.companyFk"
-                        :options="companiesOptions"
-                        option-value="id"
-                        option-label="code"
-                        map-options
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.companyFk')"
-                    />
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.companyFk')"
+                        />
+                    </div>
                 </VnRow>
             </template>
         </FormModel>

src/pages/Entry/EntryFilter.vue

@@ -53,7 +53,7 @@ const suppliersOptions = ref([]);
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -95,6 +95,7 @@ const suppliersOptions = ref([]);
                     <VnSelectFilter
                         :label="t('params.companyFk')"
                         v-model="params.companyFk"
+                        @update:model-value="searchFn()"
                         :options="companiesOptions"
                         option-value="id"
                         option-label="code"
@@ -110,6 +111,7 @@ const suppliersOptions = ref([]);
                     <VnSelectFilter
                         :label="t('params.currencyFk')"
                         v-model="params.currencyFk"
+                        @update:model-value="searchFn()"
                         :options="currenciesOptions"
                         option-value="id"
                         option-label="name"
@@ -125,6 +127,7 @@ const suppliersOptions = ref([]);
                     <VnSelectFilter
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
+                        @update:model-value="searchFn()"
                         :options="suppliersOptions"
                         option-value="id"
                         option-label="name"
@@ -149,8 +152,9 @@ const suppliersOptions = ref([]);
                 <QItemSection>
                     <VnInputDate
                         :label="t('params.created')"
-                        is-outlined
                         v-model="params.created"
+                        @update:model-value="searchFn()"
+                        is-outlined
                     />
                 </QItemSection>
             </QItem>
@@ -158,8 +162,9 @@ const suppliersOptions = ref([]);
                 <QItemSection>
                     <VnInputDate
                         :label="t('params.from')"
-                        is-outlined
                         v-model="params.from"
+                        @update:model-value="searchFn()"
+                        is-outlined
                     />
                 </QItemSection>
             </QItem>
@@ -167,8 +172,9 @@ const suppliersOptions = ref([]);
                 <QItemSection>
                     <VnInputDate
                         :label="t('params.to')"
-                        is-outlined
                         v-model="params.to"
+                        @update:model-value="searchFn()"
+                        is-outlined
                     />
                 </QItemSection>
             </QItem>

src/pages/Entry/EntryLatestBuys.vue

@@ -0,0 +1,348 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDate, toCurrency } from 'src/filters';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+
+const router = useRouter();
+const session = useSession();
+const token = session.getToken();
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+const rowsFetchDataRef = ref(null);
+const editTableCellDialogRef = ref(null);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+const rows = ref([]);
+const rowsSelected = ref([]);
+const columns = computed(() => [
+    {
+        label: t('entry.latestBuys.picture'),
+        name: 'picture',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.itemFk'),
+        name: 'itemFk',
+        field: 'itemFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.grouping'),
+        field: 'grouping',
+        name: 'grouping',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.quantity'),
+        field: 'quantity',
+        name: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.description'),
+        field: 'description',
+        name: 'description',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.size'),
+        field: 'size',
+        name: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.tags'),
+        name: 'tags',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.type'),
+        field: 'code',
+        name: 'type',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.intrastat'),
+        field: 'intrastat',
+        name: 'intrastat',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.origin'),
+        field: 'origin',
+        name: 'origin',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.weightByPiece'),
+        field: 'weightByPiece',
+        name: 'weightByPiece',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.isActive'),
+        field: 'isActive',
+        name: 'isActive',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.family'),
+        field: 'family',
+        name: 'family',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.entryFk'),
+        field: 'entryFk',
+        name: 'entryFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.buyingValue'),
+        field: 'buyingValue',
+        name: 'buyingValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.freightValue'),
+        field: 'freightValue',
+        name: 'freightValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.comissionValue'),
+        field: 'comissionValue',
+        name: 'comissionValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.packageValue'),
+        field: 'packageValue',
+        name: 'packageValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.isIgnored'),
+        field: 'isIgnored',
+        name: 'isIgnored',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.price2'),
+        field: 'price2',
+        name: 'price2',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.price3'),
+        field: 'price3',
+        name: 'price3',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.minPrice'),
+        field: 'minPrice',
+        name: 'minPrice',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.ektFk'),
+        field: 'ektFk',
+        name: 'ektFk',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.weight'),
+        field: 'weight',
+        name: 'weight',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packagingFk'),
+        field: 'packagingFk',
+        name: 'packagingFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packingOut'),
+        field: 'packingOut',
+        name: 'packingOut',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.landing'),
+        field: 'landing',
+        name: 'landing',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+]);
+
+const editTableCellFormFieldsOptions = [
+    { field: 'packing', label: t('entry.latestBuys.packing') },
+    { field: 'grouping', label: t('entry.latestBuys.grouping') },
+    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
+    { field: 'weight', label: t('entry.latestBuys.weight') },
+    { field: 'description', label: t('entry.latestBuys.description') },
+    { field: 'size', label: t('entry.latestBuys.size') },
+    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
+    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
+    { field: 'landing', label: t('entry.latestBuys.landing') },
+];
+
+const openEditTableCellDialog = () => {
+    editTableCellDialogRef.value.show();
+};
+
+const onEditCellDataSaved = async () => {
+    rowsSelected.value = [];
+    await rowsFetchDataRef.value.fetch();
+};
+
+const redirectToEntryBuys = (entryFk) => {
+    router.push({ name: 'EntryBuys', params: { id: entryFk } });
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+</script>
+
+<template>
+    <FetchData
+        ref="rowsFetchDataRef"
+        url="Buys/latestBuysFilter"
+        :filter="{ order: 'itemFk DESC', limit: 20 }"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+    />
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data">
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="latestBuys"
+                labels-traductions-path="entry.latestBuys"
+                @on-config-saved="visibleColumns = ['picture', ...$event]"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            selection="multiple"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            :visible-columns="visibleColumns"
+            v-model:selected="rowsSelected"
+            @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
+        >
+            <template #body-cell-picture="{ row }">
+                <QTd>
+                    <QImg
+                        :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
+                        spinner-color="primary"
+                        :ratio="1"
+                        height="50px"
+                        width="50px"
+                        class="image"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-itemFk="{ row }">
+                <QTd @click.stop>
+                    <QBtn flat color="blue">
+                        {{ row.itemFk }}
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-tags="{ row }">
+                <QTd>
+                    <fetched-tags :item="row" :max-length="6" />
+                </QTd>
+            </template>
+            <template #body-cell-entryFk="{ row }">
+                <QTd @click.stop>
+                    <QBtn flat color="blue">
+                        <EntryDescriptorProxy :id="row.entryFk" />
+                        {{ row.entryFk }}
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-isIgnored="{ row }">
+                <QTd>
+                    <QIcon
+                        :name="row.isIgnored ? `check` : `close`"
+                        :color="row.isIgnored ? `positive` : `negative`"
+                        size="sm"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-isActive="{ row }">
+                <QTd>
+                    <QIcon
+                        :name="row.isActive ? `check` : `close`"
+                        :color="row.isActive ? `positive` : `negative`"
+                        size="sm"
+                    />
+                </QTd>
+            </template>
+        </QTable>
+        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
+            <QTooltip>
+                {{ t('Edit buy(s)') }}
+            </QTooltip>
+        </QPageSticky>
+        <QDialog ref="editTableCellDialogRef">
+            <EditTableCellValueForm
+                edit-url="Buys/editLatestBuys"
+                :rows="rowsSelected"
+                :fields-options="editTableCellFormFieldsOptions"
+                @on-data-saved="onEditCellDataSaved()"
+            />
+        </QDialog>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Edit buy(s): Editar compra(s)
+</i18n>

src/pages/Entry/EntryList.vue

@@ -2,21 +2,20 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
+import EntrySummary from './Card/EntrySummary.vue';
 import EntryFilter from './EntryFilter.vue';
-
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/entry/${id}` });
@@ -26,21 +25,22 @@ const redirectToCreateView = () => {
     router.push({ name: 'EntryCreate' });
 };
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: EntrySummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="EntryList"
+                url="Entries/filter"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <EntryFilter data-key="EntryList" />
@@ -51,7 +51,7 @@ onMounted(async () => {
             <VnPaginate
                 data-key="EntryList"
                 url="Entries/filter"
-                order="landed DESC, id DESC"
+                :order="['landed DESC', 'id DESC']"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -110,7 +110,7 @@ onMounted(async () => {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, EntrySummary)"
                                 color="primary"
                                 type="submit"
                             />
@@ -130,8 +130,8 @@ onMounted(async () => {
 
 <i18n>
 es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
     Inventory entry: Es inventario
     Virtual entry: Es una redada
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
 </i18n>

src/pages/Entry/EntryMain.vue

@@ -1,24 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import LeftMenu from 'src/components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 
-const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />
@@ -28,9 +16,3 @@ const stateStore = useStateStore();
         <RouterView></RouterView>
     </QPageContainer>
 </template>
-
-<i18n>
-es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
-</i18n>

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -36,7 +36,7 @@ const inputFileRef = ref();
 const editDmsRef = ref();
 const createDmsRef = ref();
 
-const requiredFieldRule = (val) => val || t('Required field');
+const requiredFieldRule = (val) => val || t('globals.requiredField');
 const dateMask = '####-##-##';
 const fillMask = '_';
 
@@ -186,6 +186,7 @@ async function upsert() {
                         url="Suppliers"
                         :fields="['id', 'nickname']"
                         sort-by="nickname"
+                        :is-clearable="false"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -684,7 +685,6 @@ async function upsert() {
         Type: Tipo
         Description: Descripción
         Generate identifier for original file: Generar identificador para archivo original
-        Required field: Campo obligatorio
         File: Fichero
         Create document: Crear documento
         Select a file: Seleccione un fichero

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -44,18 +44,16 @@ const arrayData = useArrayData('InvoiceIn', {
     filter,
 });
 
-onMounted(async () => {
-    await arrayData.fetch({ append: false });
-    watch(
-        () => route.params.id,
-        async (newId, oldId) => {
-            if (newId) {
-                arrayData.store.url = `InvoiceIns/${newId}`;
-                await arrayData.fetch({ append: false });
-            }
+onMounted(async () => await arrayData.fetch({ append: false }));
+watch(
+    () => route.params.id,
+    async (newId, oldId) => {
+        if (newId) {
+            arrayData.store.url = `InvoiceIns/${newId}`;
+            await arrayData.fetch({ append: false });
         }
-    );
-});
+    }
+);
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -83,6 +81,6 @@ onMounted(async () => {
 
 <i18n>
     es:
-        Search invoice: Buscar factura emitida
+        Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
     </i18n>

src/pages/InvoiceIn/Card/InvoiceInCorrective.vue

@@ -0,0 +1,164 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const invoiceId = route.params.id;
+const arrayData = useArrayData('InvoiceIn');
+const invoiceIn = computed(() => arrayData.store.data);
+const invoiceInCorrectionRef = ref();
+const filter = {
+    include: { relation: 'invoiceIn' },
+    where: { correctingFk: invoiceId },
+};
+const columns = computed(() => [
+    {
+        name: 'origin',
+        label: t('Original invoice'),
+        field: (row) => row.correctedFk,
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+        style: 'padding-bottom: 20px',
+    },
+    {
+        name: 'type',
+        label: useCapitalize(t('globals.type')),
+        field: (row) => row.cplusRectificationTypeFk,
+        options: cplusRectificationTypes.value,
+        model: 'cplusRectificationTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'class',
+        label: useCapitalize(t('globals.class')),
+        field: (row) => row.siiTypeInvoiceOutFk,
+        options: siiTypeInvoiceOuts.value,
+        model: 'siiTypeInvoiceOutFk',
+        optionValue: 'id',
+        optionLabel: 'code',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'reason',
+        label: useCapitalize(t('globals.reason')),
+        field: (row) => row.invoiceCorrectionTypeFk,
+        options: invoiceCorrectionTypes.value,
+        model: 'invoiceCorrectionTypeFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        sortable: true,
+        tabIndex: 1,
+        align: 'left',
+    },
+]);
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
+const rowsSelected = ref([]);
+
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
+const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/summary`);
+</script>
+<template>
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
+    <CrudModel
+        ref="invoiceInCorrectionRef"
+        v-if="invoiceIn"
+        data-key="InvoiceInCorrection"
+        url="InvoiceInCorrections"
+        :filter="filter"
+        auto-load
+        v-model:selected="rowsSelected"
+        primary-key="correctingFk"
+        @save-changes="onSave"
+    >
+        <template #body="{ rows }">
+            <QTable
+                v-model:selected="rowsSelected"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="single"
+                hide-pagination
+                :grid="$q.screen.lt.sm"
+                :pagination="{ rowsPerPage: 0 }"
+            >
+                <template #body-cell-type="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-class="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-reason="{ row, col }">
+                    <QTd>
+                        <VnSelectFilter
+                            class="q-pb-md"
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :rules="[requiredFieldRule]"
+                            :readonly="row.invoiceIn.isBooked"
+                        />
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+</template>
+<style lang="scss" scoped></style>
+<i18n>
+es:
+    Original invoice: Factura origen
+</i18n>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, reactive, computed, onBeforeMount, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -15,6 +15,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import { useCapitalize } from 'src/composables/useCapitalize';
 
 const $props = defineProps({
     id: {
@@ -34,11 +36,14 @@ const arrayData = useArrayData('InvoiceIn');
 
 const invoiceIn = computed(() => arrayData.store.data);
 const cardDescriptorRef = ref();
-const entityId = computed(() => $props.id || route.params.id);
+const correctionDialogRef = ref();
+const entityId = computed(() => $props.id || +route.params.id);
 const totalAmount = ref();
 const currentAction = ref();
 const config = ref();
-
+const cplusRectificationTypes = ref([]);
+const siiTypeInvoiceOuts = ref([]);
+const invoiceCorrectionTypes = ref([]);
 const actions = {
     book: {
         title: 'Are you sure you want to book this invoice?',
@@ -59,6 +64,9 @@ const actions = {
     sendPdf: {
         cb: sendPdfInvoiceConfirmation,
     },
+    correct: {
+        cb: () => correctionDialogRef.value.show(),
+    },
 };
 const filter = {
     include: [
@@ -86,8 +94,90 @@ const filter = {
         },
     ],
 };
-
 const data = ref(useCardDescription());
+const invoiceInCorrection = reactive({
+    correcting: [],
+    corrected: null,
+});
+const routes = reactive({
+    getSupplier: (id) => {
+        return { name: 'SupplierCard', params: { id } };
+    },
+    getTickets: (id) => {
+        return {
+            name: 'InvoiceInList',
+            query: {
+                params: JSON.stringify({ supplierFk: id }),
+            },
+        };
+    },
+    getCorrection: (invoiceInCorrection) => {
+        if (invoiceInCorrection.correcting.length > 1) {
+            return {
+                name: 'InvoiceInList',
+                query: {
+                    params: JSON.stringify({ correctedFk: entityId.value }),
+                },
+            };
+        }
+
+        return {
+            name: 'InvoiceInCard',
+            params: {
+                id: invoiceInCorrection.corrected ?? invoiceInCorrection.correcting[0],
+            },
+        };
+    },
+    getEntry: (id) => {
+        return { name: 'EntryCard', params: { id } };
+    },
+});
+const correctionFormData = reactive({
+    invoiceReason: 2,
+    invoiceType: 2,
+    invoiceClass: 6,
+});
+const isNotFilled = computed(() => Object.values(correctionFormData).includes(null));
+
+onBeforeMount(async () => await setInvoiceCorrection(entityId.value));
+
+watch(
+    () => route.params.id,
+    async (newId) => {
+        invoiceInCorrection.correcting.length = 0;
+        invoiceInCorrection.corrected = null;
+        if (newId) await setInvoiceCorrection(entityId.value);
+    }
+);
+
+async function setInvoiceCorrection(id) {
+    const [{ data: correctingData }, { data: correctedData }] = await Promise.all([
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctingFk: id,
+                    },
+                },
+            },
+        }),
+        axios.get('InvoiceInCorrections', {
+            params: {
+                filter: {
+                    where: {
+                        correctedFk: id,
+                    },
+                },
+            },
+        }),
+    ]);
+
+    if (correctingData[0]) invoiceInCorrection.corrected = correctingData[0].correctedFk;
+
+    invoiceInCorrection.correcting = correctedData.map(
+        (corrected) => corrected.correctingFk
+    );
+}
 
 async function setData(entity) {
     data.value = useCardDescription(entity.supplierRef, entity.id);
@@ -104,7 +194,7 @@ function openDialog() {
     quasar.dialog({
         component: VnConfirm,
         componentProps: {
-            title: currentAction.value.title,
+            title: t(currentAction.value.title),
             promise: currentAction.value.action,
         },
     });
@@ -135,7 +225,6 @@ async function checkToBook() {
 async function toBook() {
     await axios.post(`InvoiceIns/${entityId.value}/toBook`);
 
-    // Pendiente de sincronizar todo con arrayData
     quasar.notify({
         type: 'positive',
         message: t('globals.dataSaved'),
@@ -163,6 +252,8 @@ async function cloneInvoice() {
     router.push({ path: `/invoice-in/${data.id}/summary` });
 }
 
+const requiredFieldRule = (val) => val || t('globals.requiredField');
+
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () =>
@@ -202,6 +293,14 @@ function triggerMenu(type) {
     if (currentAction.value.cb) currentAction.value.cb();
     else openDialog(type);
 }
+
+const createInvoiceInCorrection = async () => {
+    const { data: correctingId } = await axios.post(
+        'InvoiceIns/corrective',
+        Object.assign(correctionFormData, { id: entityId.value })
+    );
+    router.push({ path: `/invoice-in/${correctingId}/summary` });
+};
 </script>
 
 <template>
@@ -211,7 +310,22 @@ function triggerMenu(type) {
         auto-load
         @on-fetch="(data) => (config = data)"
     />
-    <!--Refactor para añadir en el arrayData-->
+    <FetchData
+        url="CplusRectificationTypes"
+        @on-fetch="(data) => (cplusRectificationTypes = data)"
+        auto-load
+    />
+    <FetchData
+        url="SiiTypeInvoiceOuts"
+        :where="{ code: { like: 'R%' } }"
+        @on-fetch="(data) => (siiTypeInvoiceOuts = data)"
+        auto-load
+    />
+    <FetchData
+        url="InvoiceCorrectionTypes"
+        @on-fetch="(data) => (invoiceCorrectionTypes = data)"
+        auto-load
+    />
     <CardDescriptor
         ref="cardDescriptorRef"
         module="InvoiceIn"
@@ -265,6 +379,22 @@ function triggerMenu(type) {
                     >{{ t('Send agricultural receipt as PDF') }}...</QItemSection
                 >
             </QItem>
+            <QItem
+                v-if="!invoiceInCorrection.corrected"
+                v-ripple
+                clickable
+                @click="triggerMenu('correct')"
+            >
+                <QItemSection>{{ t('Create rectificative invoice') }}...</QItemSection>
+            </QItem>
+            <QItem
+                v-if="entity.dmsFk"
+                v-ripple
+                clickable
+                @click="downloadFile(entity.dmsFk)"
+            >
+                <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
+            </QItem>
             <QItem
                 v-if="entity.dmsFk"
                 v-ripple
@@ -285,29 +415,131 @@ function triggerMenu(type) {
         </template>
         <template #actions="{ entity }">
             <QCardActions>
-                <!--Sección proveedores no disponible-->
-                <!--Sección entradas no disponible-->
+                <QBtn
+                    size="md"
+                    icon="vn:supplier"
+                    color="primary"
+                    :to="routes.getSupplier(entity.supplierFk)"
+                >
+                    <QTooltip>{{ t('invoiceIn.list.supplier') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="vn:entry"
+                    color="primary"
+                    :to="routes.getEntry(entity.entryFk)"
+                >
+                    <QTooltip>{{ t('Entry') }}</QTooltip>
+                </QBtn>
                 <QBtn
                     size="md"
                     icon="vn:ticket"
                     color="primary"
-                    :to="{
-                        name: 'InvoiceInList',
-                        query: {
-                            params: JSON.stringify({ supplierFk: entity.supplierFk }),
-                        },
-                    }"
+                    :to="routes.getTickets(entity.supplierFk)"
                 >
                     <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    v-if="
+                        invoiceInCorrection.corrected ||
+                        invoiceInCorrection.correcting.length
+                    "
+                    size="md"
+                    :icon="
+                        invoiceInCorrection.corrected
+                            ? 'vn:link-to-corrected'
+                            : 'vn:link-to-correcting'
+                    "
+                    color="primary"
+                    :to="routes.getCorrection(invoiceInCorrection)"
+                >
+                    <QTooltip>{{
+                        invoiceInCorrection.corrected
+                            ? t('Original invoice')
+                            : t('Rectificative invoice')
+                    }}</QTooltip>
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>
+    <QDialog ref="correctionDialogRef">
+        <QCard>
+            <QCardSection>
+                <QItem class="q-px-none">
+                    <span class="text-primary text-h6 full-width">
+                        {{ t('Create rectificative invoice') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QCardSection>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('Original invoice')"
+                            v-model="entityId"
+                            readonly
+                        />
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.class'))}*`"
+                            v-model="correctionFormData.invoiceClass"
+                            :options="siiTypeInvoiceOuts"
+                            option-value="id"
+                            option-label="code"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.type'))}*`"
+                            v-model="correctionFormData.invoiceType"
+                            :options="cplusRectificationTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                        <VnSelectFilter
+                            :label="`${useCapitalize(t('globals.reason'))}*`"
+                            v-model="correctionFormData.invoiceReason"
+                            :options="invoiceCorrectionTypes"
+                            option-value="id"
+                            option-label="description"
+                            :rules="[requiredFieldRule]"
+                        />
+                    </QItemSection>
+                </QItem>
+            </QCardSection>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="createInvoiceInCorrection"
+                    :disable="isNotFilled"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
 </template>
 <style lang="scss" scoped>
 .q-dialog {
     .q-card {
-        width: 35em;
+        max-width: 45em;
+        .q-item__section > .q-input {
+            padding-bottom: 1.4em;
+        }
+    }
+}
+
+@media (max-width: $breakpoint-xs) {
+    .q-dialog {
+        .q-card__section:nth-child(2) {
+            .q-item,
+            .q-item__section {
+                flex-direction: column;
+            }
+        }
     }
 }
 </style>
@@ -324,4 +556,8 @@ es:
     Send agricultural receipt as PDF: Enviar recibo agrícola como PDF
     Are you sure you want to send it?: Estás seguro que quieres enviarlo?
     Send PDF invoice: Enviar factura a PDF
+    Create rectificative invoice: Crear factura rectificativa
+    Rectificative invoice: Factura rectificativa
+    Original invoice: Factura origen
+    Entry: entrada
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -423,6 +423,6 @@ function getLink(param) {
 </style>
 <i18n>
     es:
-        Search invoice: Buscar factura emitida
+        Search invoice: Buscar factura recibida
         You can search by invoice reference: Puedes buscar por referencia de la factura
 </i18n>

src/pages/InvoiceIn/Card/InvoiceInSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceInSummary from './InvoiceInSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceInSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import { useCapitalize } from 'src/composables/useCapitalize';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -49,6 +50,19 @@ const suppliersRef = ref();
                     </VnInput>
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="useCapitalize(t('params.correctedFk'))"
+                        v-model="params.correctedFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="attachment" size="sm" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -218,6 +232,7 @@ en:
         serial: Serial
         account: Account
         isBooked: is booked
+        correctedFk: Rectificatives
 es:
     params:
         search: Contiene
@@ -234,6 +249,7 @@ es:
         account: Cuenta
         created: Creada
         dued: Vencida
+        correctedFk: Rectificativas
     From: Desde
     To: Hasta
     Amount: Importe

src/pages/InvoiceIn/InvoiceInList.vue

@@ -2,7 +2,6 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
@@ -11,12 +10,13 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import InvoiceInSummaryDialog from './Card/InvoiceInSummaryDialog.vue';
 import { getUrl } from 'src/composables/getUrl';
+import InvoiceInSummary from './Card/InvoiceInSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 let url = ref();
 const { t } = useI18n();
 
@@ -29,15 +29,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/invoice-in/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceInSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -76,6 +67,7 @@ function viewSummary(id) {
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
                 order="issued DESC, id DESC"
+                auto-load
             >
                 <template #body="{ rows }">
                     <CardList
@@ -127,7 +119,7 @@ function viewSummary(id) {
 
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, InvoiceInSummary)"
                                 color="primary"
                                 type="submit"
                                 class="q-mt-sm"
@@ -158,7 +150,7 @@ function viewSummary(id) {
 
 <i18n>
 es:
-    Search invoice: Buscar factura emitida
+    Search invoice: Buscar factura recibida
     You can search by invoice reference: Puedes buscar por referencia de la factura
     Download: Descargar
 </i18n>

src/pages/InvoiceOut/Card/InvoiceOutSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceOutSummary from './InvoiceOutSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceOutSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,23 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
+import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
 const quasar = useQuasar();
 const router = useRouter();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -26,15 +28,6 @@ function navigate(id) {
     router.push({ path: `/invoice-out/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceOutSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const toggleIndividualCard = (cardData) => {
     if (selectedCards.value.has(cardData.id)) {
         selectedCards.value.delete(cardData.id);
@@ -233,7 +226,7 @@ const downloadCsv = () => {
                                 />
                                 <QBtn
                                     :label="t('components.smartCard.openSummary')"
-                                    @click.stop="viewSummary(row.id)"
+                                    @click.stop="viewSummary(row.id, InvoiceOutSummary)"
                                     color="primary"
                                     style="margin-top: 15px"
                                     type="submit"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -181,7 +181,7 @@ const columns = computed(() => [
     },
     {
         label: t('invoiceOut.negativeBases.comercial'),
-        field: 'comercialName',
+        field: 'workerSocialName',
         name: 'comercial',
         align: 'left',
     },

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ItemDescriptor from './ItemDescriptor.vue';
-import ItemSummaryDialog from './ItemSummaryDialog.vue';
+import ItemSummary from './ItemSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,7 @@ const $props = defineProps({
         <ItemDescriptor
             v-if="$props.id"
             :id="$props.id"
-            :summary="ItemSummaryDialog"
+            :summary="ItemSummary"
             :dated="dated"
         />
     </QPopupProxy>

src/pages/Item/Card/ItemSummaryDialog.vue

@@ -1,5 +0,0 @@
-<template>
-    <QDialog
-        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
-    >
-</template>

src/pages/Order/Card/OrderSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import OrderSummary from "pages/Order/Card/OrderSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <OrderSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Order/OrderList.vue

@@ -4,7 +4,6 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
-import { useQuasar } from 'quasar';
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -12,12 +11,13 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
-import OrderSummaryDialog from 'pages/Order/Card/OrderSummaryDialog.vue';
+import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
-const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -25,15 +25,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: OrderSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -134,7 +125,7 @@ function viewSummary(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, OrderSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Route/Card/RouteSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <RouteSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .route .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Route/RouteList.vue

@@ -2,6 +2,7 @@
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toDate, toHour } from 'src/filters';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
@@ -13,26 +14,16 @@ import VnInputTime from 'components/common/VnInputTime.vue';
 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import { useQuasar } from 'quasar';
-import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
-import { useSession } from 'composables/useSession';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSession } from 'composables/useSession';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
-const quasar = useQuasar();
 const session = useSession();
-
-const to = Date.vnNew();
-to.setDate(to.getDate() + 1);
-to.setHours(0, 0, 0, 0);
-
-const from = Date.vnNew();
-from.setDate(from.getDate());
-from.setHours(0, 0, 0, 0);
-
-const params = ref({ from, to });
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -178,18 +169,6 @@ const markAsServed = () => {
     refreshKey.value++;
     startingDate.value = null;
 };
-
-function previewRoute(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RouteSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -499,7 +478,9 @@ function previewRoute(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.id)"
+                                            @click="
+                                                viewSummary(props?.row?.id, RouteSummary)
+                                            "
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>

src/pages/Shelving/Card/ShelvingDescriptorMenu.vue

@@ -21,19 +21,19 @@ function confirmRemove() {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t('confirmDeletion'),
-                message: t('confirmDeletionMessage'),
-                promise: remove,
+                title: t('Confirm deletion'),
+                message: t('Are you sure you want to delete this shelving?'),
+                promise: remove
             },
         })
-        .onOk(async () => await router.push({ name: 'ShelvingList' }));
 }
 
 async function remove() {
-    if (!$props.shelving.value.id) {
+    if (!$props.shelving.id) {
         return;
     }
-    await axios.delete(`Shelvings/${$props.shelving.value.id}`);
+    await axios.delete(`Shelvings/${$props.shelving.id}`);
+    await router.push({ name: 'ShelvingList' });
     quasar.notify({
         message: t('globals.dataDeleted'),
         type: 'positive',
@@ -45,17 +45,13 @@ async function remove() {
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
-        <QItemSection>{{ t('deleteShelving') }}</QItemSection>
+        <QItemSection>{{ t('Delete Shelving') }}</QItemSection>
     </QItem>
 </template>
 
 <i18n>
-{
-    "en": {
-        "deleteShelving": "Delete Shelving"
-    },
-    "es": {
-        "deleteShelving": "Eliminar carro"
-    }
-}
+es:
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this shelving?: ¿Seguro que quieres eliminar este carro?
+    Delete Shelving: Eliminar carro
 </i18n>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -114,9 +114,11 @@ en:
         parkingFk: Parking
         userFk: Worker
         isRecyclable: Recyclable
+        search: Search
 es:
     params:
         parkingFk: Parking
         userFk: Trabajador
         isRecyclable: Reciclable
+        search: Contiene
 </i18n>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
@@ -10,11 +10,12 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 const shelvingId = route.params?.id || null;
 const isNew = Boolean(!shelvingId);
 const defaultInitialData = {
     parkingFk: null,
-    priority: 0,
+    priority: null,
     code: null,
     isRecyclable: false,
 };
@@ -58,6 +59,12 @@ const shelvingFilter = {
         { relation: 'parking' },
     ],
 };
+
+const onSave = (shelving, newShelving) => {
+    if (isNew) {
+        router.push({ name: 'ShelvingBasicData', params: { id: newShelving?.id } });
+    }
+};
 </script>
 <template>
     <VnSubToolbar />
@@ -75,6 +82,7 @@ const shelvingFilter = {
         model="shelving"
         :auto-load="!isNew"
         :form-initial-data="defaultInitialData"
+        @on-data-saved="onSave"
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
@@ -107,6 +115,7 @@ const shelvingFilter = {
                 <div class="col">
                     <VnInput
                         v-model="data.priority"
+                        type="number"
                         :label="t('shelving.basicData.priority')"
                         :rules="validate('Shelving.priority')"
                     />

src/pages/Shelving/Card/ShelvingSearchbar.vue

@@ -7,12 +7,12 @@ const { t } = useI18n();
 <template>
     <VnSearchbar
         data-key="ShelvingList"
+        url="Shelvings"
         :label="t('Search shelving')"
-        :info="t('You can search by search reference')"
+        :info="t('You can search by shelving reference')"
     />
 </template>
 
-<style scoped lang="scss"></style>
 <i18n>
 es:
     Search shelving: Buscar carros

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -6,6 +6,7 @@ import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
+import VnUserLink from "components/ui/VnUserLink.vue";
 
 const $props = defineProps({
     id: {
@@ -24,7 +25,7 @@ const hideRightDrawer = () => {
     if (!isDialog) {
         stateStore.rightDrawer = false;
     }
-}
+};
 onMounted(hideRightDrawer);
 onUnmounted(hideRightDrawer);
 const filter = {
@@ -69,9 +70,13 @@ const filter = {
             </template>
             <template #body="{ entity }">
                 <QCard class="vn-one">
-                    <div class="header">
+                    <RouterLink
+                        class="header"
+                        :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
+                    >
                         {{ t('shelving.pageTitles.basicData') }}
-                    </div>
+                        <QIcon name="open_in_new" color="primary" />
+                    </RouterLink>
                     <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                     <VnLv
                         :label="t('shelving.summary.parking')"
@@ -81,10 +86,14 @@ const filter = {
                         :label="t('shelving.summary.priority')"
                         :value="entity.priority"
                     />
-                    <VnLv
-                        :label="t('shelving.summary.worker')"
-                        :value="entity.worker?.user?.nickname"
-                    />
+                    <VnLv v-if="entity.worker" :label="t('shelving.summary.worker')">
+                        <template #value>
+                            <VnUserLink
+                                :name="entity.worker?.user?.nickname"
+                                :worker-id="entity.worker?.id"
+                            />
+                        </template>
+                    </VnLv>
                     <VnLv
                         :label="t('shelving.summary.recyclable')"
                         :value="entity.isRecyclable"

src/pages/Shelving/Card/ShelvingSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ShelvingSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Shelving/ShelvingList.vue

@@ -5,16 +5,16 @@ import { useI18n } from 'vue-i18n';
 import { onMounted, onUnmounted } from 'vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
 import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const filter = {
     include: [{ relation: 'parking' }],
 };
@@ -26,15 +26,6 @@ function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: ShelvingSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 function exprBuilder(param, value) {
     switch (param) {
         case 'search':
@@ -80,6 +71,7 @@ function exprBuilder(param, value) {
                 url="Shelvings"
                 :filter="filter"
                 :expr-builder="exprBuilder"
+                :limit="20"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -102,17 +94,10 @@ function exprBuilder(param, value) {
                             />
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                class="bg-vn-dark"
-                                outline
-                            />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ShelvingSummary)"
                                 color="primary"
-                                style="margin-top: 15px"
                             />
                         </template>
                     </CardList>

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -8,7 +8,7 @@ import CrudModel from 'components/CrudModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -110,8 +110,8 @@ onMounted(() => {
                         </VnInput>
                     </div>
                     <div class="col">
-                        <VnSelectCreate
-                            :label="t('supplier.accounts.bankEntity')"
+                        <VnSelectDialog
+                            :label="t('worker.create.bankEntity')"
                             v-model="row.bankEntityFk"
                             :options="bankEntitiesOptions"
                             option-label="name"
@@ -134,7 +134,7 @@ onMounted(() => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectCreate>
+                        </VnSelectDialog>
                     </div>
                     <div class="col">
                         <VnInput

src/pages/Supplier/Card/SupplierAddressesCreate.vue

@@ -7,7 +7,7 @@ import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 
@@ -104,7 +104,7 @@ onMounted(() => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
+                        <VnSelectDialog
                             v-model="data.postalCode"
                             :label="t('supplier.addresses.postcode')"
                             :rules="validate('supplierAddress.postcode')"
@@ -135,7 +135,7 @@ onMounted(() => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectCreate>
+                        </VnSelectDialog>
                     </div>
                     <div class="col">
                         <VnSelectFilter

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -8,31 +8,24 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 
-const postcodeFetchDataRef = ref(null);
-const townsFetchDataRef = ref(null);
 const sageTaxTypesOptions = ref([]);
 const sageWithholdingsOptions = ref([]);
 const sageTransactionTypesOptions = ref([]);
 const supplierActivitiesOptions = ref([]);
 const postcodesOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const townsLocationOptions = ref([]);
-const countriesOptions = ref([]);
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postCode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
-    formData.countryFk = countryFk;
-};
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 <template>
     <FetchData
@@ -55,28 +48,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
         auto-load
         @on-fetch="(data) => (supplierActivitiesOptions = data)"
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = 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"
-    />
     <FormModel
         :url="`Suppliers/${route.params.id}`"
         :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
@@ -172,100 +143,20 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
                         clearable
                     />
                 </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectCreate
-                        :label="t('supplier.fiscalData.postcode')"
-                        v-model="data.postCode"
-                        :options="postcodesOptions"
-                        :rules="validate('supplier.postCode')"
+                    <VnLocation
+                        :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
-                        option-label="code"
-                        option-value="code"
-                        hide-selected
+                        :options="postcodesOptions"
+                        v-model="data.postCode"
+                        @update:model-value="(location) => handleLocation(data, location)"
                     >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption
-                                        >{{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }} ({{
-                                            scope.opt.town.province.name
-                                        }},
-                                        {{
-                                            scope.opt.town.province.country.country
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectCreate>
+                    </VnLocation>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.city')"
-                        :options="townsLocationOptions"
-                        v-model="data.city"
-                        option-value="name"
-                        option-label="name"
-                        hide-selected
-                        :rules="validate('supplier.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>
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.provinceFk')"
-                        :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>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('supplier.fiscalData.country')"
-                        :options="countriesOptions"
-                        hide-selected
-                        option-label="country"
-                        option-value="id"
-                        v-model="data.countryFk"
-                        :rules="validate('postcode.countryFk')"
-                    />
-                </div>
                 <div class="col flex justify-around">
                     <QCheckbox
                         v-model="data.isTrucker"