Merge branch 'master' of https://gitea.verdnatura.es/verdnatura/salix-front into 6900-hotfix-fineTunning

CHANGELOG.md

@@ -1,3 +1,120 @@
+# Version 24.36 - 2024-09-03
+
+### Added 🆕
+
+-   Cesta → Se añaden notas
+-   Trabajadore → Se puede modificar la foto
+-   General → Recuperar y restaurar contraseña
+
+### Changed 📦
+
+-   (General) Modificado filtro lateral
+
+### Fixed 🛠️
+
+-   Cesta → Mejoras varias
+-   Reclamaciones → Mejoras varias
+-   Usuarios → Mejoras varias
+
+# Version 24.34 - 2024-08-20
+
+### Added 🆕
+
+## Changed 📦
+
+-   General → Trabajadores: Migrado de Salix a Lilium
+
+## Fixed 🛠️
+
+-   Artículos → General: Arreglados fallos de interfaz
+-   Fact. Recibidas → General: Arreglados fallos de interfaz
+-   Trabajadores → General: Arreglados fallos de interfaz
+-   Usuarios → General: Arreglados fallos de interfaz
+
+-   chore: #6900 order params by:jorgep
+-   chore: refs #6900 drop console log by:jorgep
+-   chore: refs #6900 drop vnCurrency by:jorgep
+-   chore: refs #6900 fix e2e tests by:jorgep
+-   chore: refs #6900 mv rectificative logic by:jorgep
+-   chore: refs #6900 responsive code by:jorgep
+-   chore: refs #7283 drop array types by:jorgep
+-   chore: refs #7283 drop import by:jorgep
+-   chore: refs #7283 fix e2e logout by:jorgep
+-   chore: refs #7283 update VnAvatar title handling by:jorgep
+-   chore: refs #7323 fix test by:jorgep
+-   chore: refs #7323 remove unused import by:jorgep
+-   chore: refs #7323drop commented code by:jorgep
+-   feat(VnCard): use props searchbar by:alexm
+-   feat(customer): improve basicData to balance by:alexm
+-   feat(customer_balance): refs #6943 add functionality from salix by:alexm
+-   feat(customer_balance): refs #6943 translations by:alexm
+-   feat: refs #6130 husky commitLint config by:pablone
+-   feat: refs #6130 husky hooks by:pablone
+-   feat: refs #6900 add InvoiceInSerial by:jorgep
+-   feat: refs #6900 add locale by:jorgep
+-   feat: refs #6900 use VnTable & sort filter fields by:jorgep
+-   feat: refs #7323 add flex-wrap by:jorgep
+-   feat: refs #7323 add my account" btn & fix models log selectable by:jorgep
+-   feat: refs #7323 improve test by:jorgep
+
+### Changed 📦
+
+-   refactor(customer_log: use VnLog by:alexm
+-   refactor(customer_recovery): to vnTable by:alexm
+-   refactor(customer_webAccess): FormModel by:alexm
+-   refactor: refs #7283 update avatar size and color by:jorgep
+
+### Fixed 🛠️
+
+-   chore: refs #6900 fix e2e tests by:jorgep
+-   chore: refs #7283 fix e2e logout by:jorgep
+-   chore: refs #7323 fix test by:jorgep
+-   feat: refs #7323 add my account" btn & fix models log selectable by:jorgep
+-   fix #7355 fix acls list by:carlossa
+-   fix(VnFilterPanel): emit userParams better by:alexm
+-   fix(claim_summary): url links (HEAD -> 7864_testToMaster_2434, origin/test, origin/7864_testToMaster_2434, test) by:alexm
+-   fix(customer_sms: fix reload by:alexm
+-   fix(twoFactor): unify code login and twoFactor by:alexm
+-   fix: VnCard VnSearchbar props by:alexm
+-   fix: accountMailAlias by:alexm
+-   fix: refs #6130 add commit lint modules by:pablone
+-   fix: refs #6130 pnpm-lock.yml by:pablone
+-   fix: refs #6900 improve loading by:jorgep
+-   fix: refs #6900 improve logic (origin/6900-addSerial) by:jorgep
+-   fix: refs #6900 improve logic by:jorgep
+-   fix: refs #6900 rectificative btn reactivity by:jorgep
+-   fix: refs #6900 use type number by:jorgep
+-   fix: refs #6900 vat & dueday by:jorgep
+-   fix: refs #6900 vat, dueday & intrastat by:jorgep
+-   fix: refs #6989 show entity name & default time from config table by:jorgep
+-   fix: refs #7283 basicData locale by:jorgep
+-   fix: refs #7283 itemLastEntries filter by:jorgep
+-   fix: refs #7283 itemTags & VnImg by:jorgep
+-   fix: refs #7283 locale by:jorgep
+-   fix: refs #7283 min-width vnImg by:jorgep
+-   fix: refs #7283 use vnAvatar & add optional zoom by:jorgep
+-   fix: refs #7283 userPanel pic by:jorgep
+-   fix: refs #7323 add department popup by:jorgep
+-   fix: refs #7323 add locale by:jorgep
+-   fix: refs #7323 css righ menu by:jorgep
+-   fix: refs #7323 data-key & add select by:jorgep
+-   fix: refs #7323 load all opts by:jorgep
+-   fix: refs #7323 righ menu bug by:jorgep
+-   fix: refs #7323 use global locale by:jorgep
+-   fix: refs #7323 use workerFilter (origin/7323-warmfix-fixErrors) by:jorgep
+-   fix: refs #7323 vnsubtoolbar css by:jorgep
+-   fix: refs #7323 wrong css by:jorgep
+-   refs #7355 fix Rol, alias by:carlossa
+-   refs #7355 fix accountAlias by:carlossa
+-   refs #7355 fix alias summary by:carlossa
+-   refs #7355 fix conflicts by:carlossa
+-   refs #7355 fix create Rol by:carlossa
+-   refs #7355 fix list by:carlossa
+-   refs #7355 fix lists redirects summary by:carlossa
+-   refs #7355 fix roles by:carlossa
+-   refs #7355 fix search exprBuilder by:carlossa
+-   refs #7355 fix vnTable by:carlos
+
 # Version 24.32 - 2024-08-06
 
 ### Added 🆕

src/components/FormModel.vue

@@ -87,6 +87,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    defaultTrim: {
+        type: Boolean,
+        default: true,
+    },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
@@ -195,6 +199,7 @@ async function save() {
 
     isLoading.value = true;
     try {
+        formData.value = trimData(formData.value);
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
         const method = $props.urlCreate ? 'post' : 'patch';
         const url =
@@ -253,6 +258,14 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
+function trimData(data) {
+    if (!$props.defaultTrim) return data;
+    for (const key in data) {
+        if (typeof data[key] == 'string') data[key] = data[key].trim();
+    }
+    return data;
+}
+
 defineExpose({
     save,
     isLoading,

src/components/VnTable/VnTable.vue

@@ -315,7 +315,7 @@ defineExpose({
                                 col?.columnFilter !== false &&
                                 col?.name !== 'tableActions'
                             "
-                            v-model="orders[col.name]"
+                            v-model="orders[col.orderBy ?? col.name]"
                             :name="col.orderBy ?? col.name"
                             :data-key="$attrs['data-key']"
                             :search-url="searchUrl"
@@ -409,7 +409,7 @@ defineExpose({
                                     style="height: 30px"
                                 >
                                     <VnTableOrder
-                                        v-model="orders[col.name]"
+                                        v-model="orders[col.orderBy ?? col.name]"
                                         :name="col.orderBy ?? col.name"
                                         :label="col?.label"
                                         :data-key="$attrs['data-key']"

src/components/common/VnCard.vue

@@ -26,7 +26,10 @@ const url = computed(() => {
     if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
     return props.customUrl;
 });
-
+const searchRightDataKey = computed(() => {
+    if (!props.searchDataKey) return route.name;
+    return props.searchDataKey;
+});
 const arrayData = useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
@@ -62,10 +65,9 @@ if (props.baseUrl) {
     <slot name="searchbar" v-if="props.searchDataKey">
         <VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
     </slot>
-    <slot v-else name="searchbar" />
     <RightMenu>
         <template #right-panel v-if="props.filterPanel">
-            <component :is="props.filterPanel" :data-key="props.searchDataKey" />
+            <component :is="props.filterPanel" :data-key="searchRightDataKey" />
         </template>
     </RightMenu>
     <QPageContainer>

src/components/ui/VnFilterPanel.vue

@@ -37,7 +37,7 @@ const $props = defineProps({
     },
     hiddenTags: {
         type: Array,
-        default: () => ['filter'],
+        default: () => ['filter', 'search', 'or', 'and'],
     },
     customTags: {
         type: Array,
@@ -111,24 +111,23 @@ watch(
 
 const isLoading = ref(false);
 async function search(evt) {
-    if (evt && $props.disableSubmitEvent) return;
-
-    store.filter.where = {};
-    isLoading.value = true;
-    const filter = { ...userParams.value, ...$props.modelValue };
-    store.userParamsChanged = true;
     try {
+        if (evt && $props.disableSubmitEvent) return;
+
+        store.filter.where = {};
+        isLoading.value = true;
+        const filter = { ...userParams.value, ...$props.modelValue };
+        store.userParamsChanged = true;
         const { params: newParams } = await arrayData.addFilter({
             params: filter,
         });
         userParams.value = newParams;
 
         if (!$props.showAll && !Object.values(filter).length) store.data = [];
+        emit('search');
     } finally {
         isLoading.value = false;
     }
-
-    emit('search');
 }
 
 async function reload() {
@@ -143,29 +142,31 @@ async function reload() {
 }
 
 async function clearFilters() {
-    isLoading.value = true;
-    store.userParamsChanged = true;
-    arrayData.reset(['skip', 'filter.skip', 'page']);
-    // Filtrar los params no removibles
-    const removableFilters = Object.keys(userParams.value).filter((param) =>
-        $props.unRemovableParams.includes(param)
-    );
-    const newParams = {};
-    // Conservar solo los params que no son removibles
-    for (const key of removableFilters) {
-        newParams[key] = userParams.value[key];
-    }
-    userParams.value = {};
-    userParams.value = { ...newParams }; // Actualizar los params con los removibles
-    await arrayData.applyFilter({ params: userParams.value });
+    try {
+        isLoading.value = true;
+        store.userParamsChanged = true;
+        arrayData.reset(['skip', 'filter.skip', 'page']);
+        // Filtrar los params no removibles
+        const removableFilters = Object.keys(userParams.value).filter((param) =>
+            $props.unRemovableParams.includes(param)
+        );
+        const newParams = {};
+        // Conservar solo los params que no son removibles
+        for (const key of removableFilters) {
+            newParams[key] = userParams.value[key];
+        }
+        userParams.value = {};
+        userParams.value = { ...newParams }; // Actualizar los params con los removibles
+        await arrayData.applyFilter({ params: userParams.value });
 
-    if (!$props.showAll) {
-        store.data = [];
+        if (!$props.showAll) {
+            store.data = [];
+        }
+        emit('clear');
+        emit('update:modelValue', userParams.value);
+    } finally {
+        isLoading.value = false;
     }
-
-    isLoading.value = false;
-    emit('clear');
-    emit('update:modelValue', userParams.value);
 }
 
 const tagsList = computed(() => {

src/components/ui/VnOutForm.vue

@@ -0,0 +1,32 @@
+<script setup>
+const emit = defineEmits(['submit']);
+defineProps({
+    icon: { type: String, required: false, default: 'phonelink_lock' },
+    title: { type: String, required: true },
+});
+</script>
+<template>
+    <QForm @submit="emit('submit')" class="q-gutter-y-md q-pa-lg formCard">
+        <div class="column items-center">
+            <QIcon v-if="icon != false" :name="icon" size="xl" color="primary" />
+            <h5 class="text-center q-my-md">
+                {{ title }}
+            </h5>
+        </div>
+        <slot></slot>
+        <div class="q-mt-lg">
+            <slot name="buttons"></slot>
+        </div>
+    </QForm>
+</template>
+<style lang="scss" scoped>
+.formCard {
+    max-width: 350px;
+    min-width: 300px;
+}
+@media (max-width: $breakpoint-xs-max) {
+    .formCard {
+        min-width: 100%;
+    }
+}
+</style>

src/components/ui/VnSearchbar.vue

@@ -104,9 +104,7 @@ onMounted(() => {
 });
 
 async function search() {
-    const staticParams = Object.entries(store.userParams).filter(
-        ([key, value]) => value && (props.staticParams || []).includes(key)
-    );
+    const staticParams = Object.entries(store.userParams);
     arrayData.reset(['skip', 'page']);
 
     if (props.makeFetch)

src/components/ui/VnSms.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watch, computed } from 'vue';
+import { computed } from 'vue';
 import { date } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';

src/css/app.scss

@@ -103,10 +103,6 @@ select:-webkit-autofill {
     border-radius: 8px;
 }
 
-.card-width {
-    width: 770px;
-}
-
 .vn-card-list {
     width: 100%;
     max-width: 60em;
@@ -268,3 +264,10 @@ input::-webkit-inner-spin-button {
         max-width: 400px;
     }
 }
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}

src/filters/getParamWhere.js

@@ -0,0 +1,21 @@
+// parsing JSON safely
+function parseJSON(str, fallback) {
+    try {
+        return JSON.parse(str ?? '{}');
+    } catch (e) {
+        console.error('Error parsing JSON:', e);
+        return fallback;
+    }
+}
+export default function (route, param) {
+    // catch route query params
+    const params = parseJSON(route?.query?.params, {});
+
+    // extract and parse filter from params
+    const { filter: filterStr = '{}' } = params;
+    const where = parseJSON(filterStr, {})?.where;
+    if (where && where[param] !== undefined) {
+        return where[param];
+    }
+    return null;
+}

src/filters/index.js

@@ -11,6 +11,7 @@ import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
 import toHour from './toHour';
 import dashOrCurrency from './dashOrCurrency';
+import getParamWhere from './getParamWhere';
 
 export {
     toLowerCase,
@@ -26,4 +27,5 @@ export {
     toPercentage,
     dashIfEmpty,
     dateRange,
+    getParamWhere,
 };

src/i18n/locale/en.yml

@@ -93,6 +93,7 @@ globals:
     since: Since
     from: From
     to: To
+    notes: Notes
     pageTitles:
         logIn: Login
         summary: Summary
@@ -251,6 +252,9 @@ globals:
         privileges: Privileges
         ldap: LDAP
         samba: Samba
+        twoFactor: Two factor
+        recoverPassword: Recover password
+        resetPassword: Reset password
         serial: Serial
     supplier: Supplier
     created: Created
@@ -291,14 +295,17 @@ twoFactor:
     explanation: >-
         Please, enter the verification code that we have sent to your email in the
         next 5 minutes
-    pageTitles:
-        twoFactor: Two-Factor
 verifyEmail:
     pageTitles:
         verifyEmail: Email verification
-dashboard:
-    pageTitles:
-
+recoverPassword:
+    userOrEmail: User or recovery email
+    explanation: >-
+        We will sent you an email to recover your password
+resetPassword:
+    repeatPassword: Repeat password
+    passwordNotMatch: Passwords don't match
+    passwordChanged: Password changed
 customer:
     list:
         phone: Phone
@@ -685,6 +692,7 @@ invoiceOut:
             chooseValidClient: Choose a valid client
             chooseValidCompany: Choose a valid company
             chooseValidPrinter: Choose a valid printer
+            chooseValidSerialType: Choose a serial type
             fillDates: Invoice date and the max date should be filled
             invoiceDateLessThanMaxDate: Invoice date can not be less than max date
             invoiceWithFutureDate: Exists an invoice with a future date

src/i18n/locale/es.yml

@@ -93,6 +93,7 @@ globals:
     since: Desde
     from: Desde
     to: Hasta
+    notes: Notas
     pageTitles:
         logIn: Inicio de sesión
         summary: Resumen
@@ -253,6 +254,9 @@ globals:
         packages: Bultos
         ldap: LDAP
         samba: Samba
+        twoFactor: Doble factor
+        recoverPassword: Recuperar contraseña
+        resetPassword: Restablecer contraseña
         serial: Facturas por serie
     supplier: Proveedor
     created: Fecha creación
@@ -291,14 +295,17 @@ twoFactor:
     validate: Validar
     insert: Introduce el código de verificación
     explanation: Por favor introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos
-    pageTitles:
-        twoFactor: Doble factor
 verifyEmail:
     pageTitles:
         verifyEmail: Verificación de correo
-dashboard:
-    pageTitles:
-
+recoverPassword:
+    userOrEmail: Usuario o correo de recuperación
+    explanation: >-
+        Te enviaremos un correo para restablecer tu contraseña
+resetPassword:
+    repeatPassword: Repetir contraseña
+    passwordNotMatch: Las contraseñas no coinciden
+    passwordChanged: Contraseña cambiada
 customer:
     list:
         phone: Teléfono
@@ -691,6 +698,7 @@ invoiceOut:
             chooseValidClient: Selecciona un cliente válido
             chooseValidCompany: Selecciona una empresa válida
             chooseValidPrinter: Selecciona una impresora válida
+            chooseValidSerialType: Selecciona una tipo de serie válida
             fillDates: La fecha de la factura y la fecha máxima deben estar completas
             invoiceDateLessThanMaxDate: La fecha de la factura no puede ser menor que la fecha máxima
             invoiceWithFutureDate: Existe una factura con una fecha futura
@@ -830,7 +838,7 @@ worker:
     card:
         workerId: ID Trabajador
         name: Nombre
-        email: Email
+        email: Correo personal
         phone: Teléfono
         mobile: Móvil
         active: Activo

src/pages/Account/AccountAcls.vue

@@ -6,7 +6,6 @@ import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
-import FetchData from 'components/FetchData.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
@@ -24,7 +23,6 @@ const stateStore = useStateStore();
 const quasar = useQuasar();
 
 const tableRef = ref();
-const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -41,14 +39,12 @@ const columns = computed(() => [
         name: 'id',
         label: t('id'),
         isId: true,
-        field: 'id',
         cardVisible: true,
     },
     {
         align: 'left',
         name: 'model',
         label: t('model'),
-        field: 'model',
         cardVisible: true,
         create: true,
     },
@@ -56,15 +52,19 @@ const columns = computed(() => [
         align: 'left',
         name: 'principalId',
         label: t('principalId'),
-        field: 'principalId',
         cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'VnRoles',
+            optionLabel: 'name',
+            optionValue: 'name',
+        },
         create: true,
     },
     {
         align: 'left',
         name: 'property',
         label: t('property'),
-        field: 'property',
         cardVisible: true,
         create: true,
     },
@@ -72,7 +72,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'accessType',
         label: t('accessType'),
-        field: 'accessType',
+        component: 'select',
+        attrs: {
+            options: ['READ', 'WRITE', '*'],
+        },
         cardVisible: true,
         create: true,
     },
@@ -118,13 +121,6 @@ const deleteAcl = async ({ id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
-
     <VnSearchbar
         data-key="AccountAcls"
         url="ACLs"
@@ -147,7 +143,6 @@ const deleteAcl = async ({ id }) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         :right-search="true"
         :is-editable="true"
         :use-model="true"
@@ -162,4 +157,15 @@ es:
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     Remove ACL: Eliminar Acl
     Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
+    principalId: Rol
+    model: Modelo
+en:
+    New ACL: New ACL
+    ACL removed: ACL removed
+    ACL will be removed: ACL will be removed
+    Are you sure you want to continue?: Are you sure you want to continue?
+    Remove ACL: Remove ACL
+    Do you want to remove this ACL?: Do you want to remove this ACL?
+    principalId: Rol
+    model: Models
 </i18n>

src/pages/Account/AccountAliasList.vue

@@ -60,7 +60,7 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="AccountAliasList"
-        :url="`MailAliases`"
+        url="MailAliases"
         :create="{
             urlCreate: 'MailAliases',
             title: 'Create MailAlias',
@@ -70,7 +70,6 @@ const columns = computed(() => [
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/alias"
         :is-editable="true"
         :use-model="true"

src/pages/Account/AccountList.vue

@@ -48,6 +48,14 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'left',
+        name: 'email',
+        label: t('email'),
+        component: 'input',
+        create: true,
+        visible: false,
+    },
     {
         align: 'right',
         label: '',
@@ -83,9 +91,9 @@ const exprBuilder = (param, value) => {
 
 <template>
     <VnSearchbar
-        :label="t('account.search')"
         data-key="AccountUsers"
         :expr-builder="exprBuilder"
+        :label="t('account.search')"
         :info="t('account.searchInfo')"
     />
 
@@ -96,7 +104,6 @@ const exprBuilder = (param, value) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account"
         :use-model="true"
     />

src/pages/Account/Alias/Card/AliasCard.vue

@@ -1,22 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-
 import VnCard from 'components/common/VnCard.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
-
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    return routeName.value;
-});
-const searchBarDataKeys = {
-    AliasBasicData: 'AliasBasicData',
-    AliasUsers: 'AliasUsers',
-};
 </script>
 
 <template>
@@ -24,12 +10,12 @@ const searchBarDataKeys = {
         data-key="Alias"
         base-url="MailAliases"
         :descriptor="AliasDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountAliasList"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'MailAliases',
             info: t('mailAlias.searchInfo'),
             label: t('mailAlias.search'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountBasicData.vue

@@ -37,9 +37,11 @@ watch(
                 <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
                 <VnInput v-model="data.email" :label="t('account.card.email')" />
                 <VnSelect
+                    url="Languages"
                     v-model="data.lang"
-                    :options="['es', 'en']"
                     :label="t('account.card.lang')"
+                    option-value="code"
+                    option-label="code"
                 />
             </div>
         </template>

src/pages/Account/Card/AccountCard.vue

@@ -1,36 +1,21 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
 import VnCard from 'components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    AccountSummary: 'AccountSummary',
-    AccountInheritedRoles: 'AccountInheritedRoles',
-    AccountMailForwarding: 'AccountMailForwarding',
-    AccountMailAlias: 'AccountMailAlias',
-    AccountPrivileges: 'AccountPrivileges',
-    AccountLog: 'AccountLog',
-};
 </script>
 
 <template>
     <VnCard
         data-key="Account"
         :descriptor="AccountDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountUsers"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'VnUsers/preview',
             label: t('account.search'),
             info: t('account.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -1,15 +1,12 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, toRefs } from 'vue';
-import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
-import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import useNotify from 'src/composables/useNotify.js';
-const quasar = useQuasar();
 const $props = defineProps({
     hasAccount: {
         type: Boolean,
@@ -35,7 +32,7 @@ async function updateStatusAccount(active) {
 
     account.value.hasAccount = active;
     const status = active ? 'enable' : 'disable';
-    quasar.notify({
+    notify({
         message: t(`account.card.${status}Account.success`),
         type: 'positive',
     });
@@ -44,19 +41,11 @@ async function updateStatusUser(active) {
     await axios.patch(`VnUsers/${entityId.value}`, { active });
     account.value.active = active;
     const status = active ? 'activate' : 'deactivate';
-    quasar.notify({
+    notify({
         message: t(`account.card.actions.${status}User.success`),
         type: 'positive',
     });
 }
-function setPassword() {
-    quasar.dialog({
-        component: CustomerChangePassword,
-        componentProps: {
-            id: entityId.value,
-        },
-    });
-}
 const showSyncDialog = ref(false);
 const syncPassword = ref(null);
 const shouldSyncPassword = ref(false);
@@ -66,22 +55,43 @@ async function sync() {
     await axios.patch(`Accounts/${account.value.name}/sync`, {
         params,
     });
-    quasar.notify({
+    notify({
         message: t('account.card.actions.sync.success'),
         type: 'positive',
     });
 }
-
-const removeAccount = async () => {
-    try {
-        await axios.delete(`VnUsers/${account.value.id}`);
-        notify(t('Account removed'), 'positive');
-    } catch (error) {
-        console.error('Error deleting user', error);
-    }
-};
 </script>
 <template>
+    <VnConfirm
+        v-model="showSyncDialog"
+        :message="t('account.card.actions.sync.message')"
+        :title="t('account.card.actions.sync.title')"
+        :promise="sync"
+    >
+        <template #customHTML>
+            {{ shouldSyncPassword }}
+            <QCheckbox
+                :label="t('account.card.actions.sync.checkbox')"
+                v-model="shouldSyncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+            >
+                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
+                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
+                </QIcon></QCheckbox
+            >
+            <QInput
+                v-if="shouldSyncPassword"
+                :label="t('login.password')"
+                v-model="syncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+                type="password"
+            />
+        </template>
+    </VnConfirm>
     <QItem
         v-if="account.hasAccount"
         v-ripple
@@ -130,10 +140,4 @@ const removeAccount = async () => {
     </QItem>
 
     <QSeparator />
-    <!-- <QItem @click="removeAccount(id)" v-ripple clickable>
-        <QItemSection avatar>
-            <QIcon name="delete" />
-        </QItemSection>
-        <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
-    </QItem> -->
 </template>

src/pages/Account/Card/AccountPrivileges.vue

@@ -14,16 +14,11 @@ const rolesOptions = ref([]);
 const formModelRef = ref();
 </script>
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (rolesOptions = data)"
-    />
+    <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
     <FormModel
         ref="formModelRef"
         model="AccountPrivileges"
-        :url="`VnUsers/${route.params.id}`"
+        :url="`VnUsers/${route.params.id}/privileges`"
         :url-create="`VnUsers/${route.params.id}/privileges`"
         auto-load
         @on-data-saved="formModelRef.fetch()"

src/pages/Account/Role/AccountRoles.vue

@@ -4,9 +4,9 @@ import { computed, ref } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RoleSummary from './Card/RoleSummary.vue';
 const route = useRoute();
-const stateStore = useStateStore();
 const { t } = useI18n();
 const $props = defineProps({
     id: {
@@ -16,7 +16,7 @@ const $props = defineProps({
 });
 const tableRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
-
+const { viewSummary } = useSummaryDialog();
 const columns = computed(() => [
     {
         align: 'left',
@@ -42,6 +42,18 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, RoleSummary),
+            },
+        ],
+    },
 ]);
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -62,16 +74,12 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="Roles"
-                :expr-builder="exprBuilder"
-                :label="t('role.searchRoles')"
-                :info="t('role.searchInfo')"
-            />
-        </Teleport>
-    </template>
+    <VnSearchbar
+        data-key="Roles"
+        :expr-builder="exprBuilder"
+        :label="t('role.searchRoles')"
+        :info="t('role.searchInfo')"
+    />
     <VnTable
         ref="tableRef"
         data-key="Roles"
@@ -87,8 +95,6 @@ const exprBuilder = (param, value) => {
         order="id ASC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/role"
-        :is-editable="true"
     />
 </template>

src/pages/Account/Role/Card/RoleBasicData.vue

@@ -23,11 +23,6 @@ const { t } = useI18n();
                     />
                 </div>
             </VnRow>
-            <VnRow>
-                <div class="col">
-                    <QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
-                </div>
-            </VnRow>
         </template>
     </FormModel>
 </template>

src/pages/Account/Role/Card/RoleCard.vue

@@ -1,33 +1,20 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    RoleSummary: 'RoleSummary',
-    RoleBasicData: 'RoleBasicData',
-    SubRoles: 'SubRoles',
-    InheritedRoles: 'InheritedRoles',
-    RoleLog: 'RoleLog',
-};
 </script>
 <template>
     <VnCard
         data-key="Role"
         :descriptor="RoleDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountRoles"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'VnRoles',
             label: t('role.searchRoles'),
             info: t('role.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Claim/ClaimList.vue

@@ -50,7 +50,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('claim.attendedBy'),
         name: 'attendedBy',
-        cardVisible: true,
+        orderBy: 'workerFk',
         columnFilter: {
             component: 'select',
             attrs: {
@@ -63,6 +63,7 @@ const columns = computed(() => [
                 optionFilter: 'firstName',
             },
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -77,6 +78,9 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('claim.state'),
+        format: ({ stateCode }) =>
+            claimFilterRef.value?.states.find(({code}) => code === stateCode)
+                ?.description,
         name: 'stateCode',
         chip: {
             condition: () => true,

src/pages/Claim/locale/es.yml

@@ -42,7 +42,7 @@ claim:
     pickup: Recoger
     null: No
     agency: Agencia
-    delivery: Entrega
+    delivery: Reparto
     fileDescription: 'ID de reclamación {claimId} del cliente {clientName} con ID {clientId}'
     noData: 'No hay imágenes/videos, haz clic aquí o arrastra y suelta el archivo'
     dragDrop: Arrastra y suelta aquí

src/pages/Customer/Card/CustomerBasicData.vue

@@ -97,7 +97,12 @@ const title = ref();
                     :rules="validate('client.salesPersonFk')"
                     :use-like="false"
                     :emit-value="false"
-                    @update:model-value="(val) => (title = val?.nickname)"
+                    @update:model-value="
+                        (val) => {
+                            title = val?.nickname;
+                            data.salesPersonFk = val?.id;
+                        }
+                    "
                 >
                     <template #prepend>
                         <VnAvatar

src/pages/Customer/Card/CustomerConsumption.vue

@@ -1,8 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import CustomerConsumptionFilter from './CustomerConsumptionFilter.vue';
 import { useStateStore } from 'src/stores/useStateStore';
-const { t } = useI18n();
 </script>
 
 <template>

src/pages/Entry/Card/EntryBasicData.vue

@@ -19,8 +19,6 @@ const { t } = useI18n();
 const { hasAny } = useRole();
 const isAdministrative = () => hasAny(['administrative']);
 
-const suppliersOptions = ref([]);
-const travelsOptions = ref([]);
 const companiesOptions = ref([]);
 const currenciesOptions = ref([]);
 
@@ -29,20 +27,6 @@ const onFilterTravelSelected = (formData, id) => {
 };
 </script>
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Travels/filter"
-        :filter="{ fields: ['id', 'warehouseInName'] }"
-        order="id"
-        @on-fetch="(data) => (travelsOptions = data)"
-        auto-load
-    />
     <FetchData
         ref="companiesRef"
         url="Companies"
@@ -71,9 +55,10 @@ const onFilterTravelSelected = (formData, id) => {
                 <VnSelect
                     :label="t('entry.basicData.supplier')"
                     v-model="data.supplierFk"
-                    :options="suppliersOptions"
+                    url="Suppliers"
                     option-value="id"
                     option-label="nickname"
+                    :fields="['id', 'nickname']"
                     hide-selected
                     :required="true"
                     map-options
@@ -92,7 +77,8 @@ const onFilterTravelSelected = (formData, id) => {
                 <VnSelectDialog
                     :label="t('entry.basicData.travel')"
                     v-model="data.travelFk"
-                    :options="travelsOptions"
+                    url="Travels/filter"
+                    :fields="['id', 'warehouseInName']"
                     option-value="id"
                     option-label="warehouseInName"
                     map-options

src/pages/Entry/EntryFilter.vue

@@ -20,7 +20,6 @@ const props = defineProps({
 
 const currenciesOptions = ref([]);
 const companiesOptions = ref([]);
-const suppliersOptions = ref([]);
 
 const stateStore = useStateStore();
 onMounted(async () => {
@@ -45,14 +44,6 @@ onMounted(async () => {
         @on-fetch="(data) => (currenciesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname', 'name'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -135,9 +126,11 @@ onMounted(async () => {
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
+                        :fields="['id', 'name', 'nickname']"
+                        sort-by="nickname"
                         hide-selected
                         dense
                         outlined

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -222,7 +222,7 @@ const showTransferInvoiceForm = async () => {
         <QItemSection>{{ t('Generate PDF invoice') }}</QItemSection>
     </QItem>
     <QItem v-ripple clickable>
-        <QItemSection>{{ t('Refund...') }}</QItemSection>
+        <QItemSection>{{ t('Refund') }}</QItemSection>
         <QItemSection side>
             <QIcon name="keyboard_arrow_right" />
         </QItemSection>
@@ -250,7 +250,7 @@ es:
     Delete invoice: Eliminar factura
     Book invoice: Asentar factura
     Generate PDF invoice: Generar PDF factura
-    Refund...: Abono
+    Refund: Abono
     As PDF: como PDF
     As CSV: como CSV
     Send PDF: Enviar PDF

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -176,7 +176,7 @@ const ticketsColumns = ref([
                         <QTd>
                             <QBtn class="no-uppercase link" flat dense>
                                 {{ value }}
-                                <CustomerDescriptorProxy :id="row.id" />
+                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                         </QTd>
                     </template>

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -94,11 +94,13 @@ const selectCustomerId = (id) => {
 };
 
 const statusText = computed(() => {
-    return status.value === 'invoicing'
-        ? `${t(`status.${status.value}`)} ${
-              addresses.value[getAddressNumber.value]?.clientId
-          }`
-        : t(`status.${status.value}`);
+    const baseStatus = t(`status.${status.value}`);
+    const clientId =
+        status.value === 'invoicing'
+            ? addresses.value[getAddressNumber.value]?.clientId || ''
+            : '';
+
+    return clientId ? `${baseStatus} ${clientId}`.trim() : baseStatus;
 });
 
 onMounted(() => (stateStore.rightDrawer = true));

src/pages/InvoiceOut/InvoiceOutGlobalForm.vue

@@ -20,21 +20,25 @@ const { initialDataLoading, formInitialData, invoicing, status } =
 const { makeInvoice, setStatusValue } = invoiceOutGlobalStore;
 
 const clientsToInvoice = ref('all');
-
 const companiesOptions = ref([]);
-
 const printersOptions = ref([]);
+const serialTypesOptions = ref([]);
 
-const clientsOptions = ref([]);
+const handleInvoiceOutSerialsFetch = (data) => {
+    serialTypesOptions.value = Array.from(
+        new Set(data.map((item) => item.type).filter((type) => type))
+    );
+};
 
 const formData = ref({});
 
 const optionsInitialData = computed(() => {
-    return (
-        companiesOptions.value.length > 0 &&
-        printersOptions.value.length > 0 &&
-        clientsOptions.value.length > 0
-    );
+    const optionsArrays = [
+        companiesOptions.value,
+        printersOptions.value,
+        serialTypesOptions.value,
+    ];
+    return optionsArrays.every((arr) => arr.length > 0);
 });
 
 const getStatus = computed({
@@ -59,8 +63,11 @@ onMounted(async () => {
         auto-load
     />
     <FetchData url="Printers" @on-fetch="(data) => (printersOptions = data)" auto-load />
-    <FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
-
+    <FetchData
+        url="invoiceOutSerials"
+        @on-fetch="handleInvoiceOutSerialsFetch"
+        auto-load
+    />
     <QForm
         v-if="!initialDataLoading && optionsInitialData"
         @submit="makeInvoice(formData, clientsToInvoice)"
@@ -87,7 +94,21 @@ onMounted(async () => {
                 v-if="clientsToInvoice === 'one'"
                 :label="t('client')"
                 v-model="formData.clientId"
-                :options="clientsOptions"
+                url="Clients"
+                option-value="id"
+                option-label="name"
+                hide-selected
+                dense
+                outlined
+                rounded
+            />
+            <VnSelect
+                :label="t('invoiceOutSerialType')"
+                v-model="formData.serialType"
+                :options="serialTypesOptions"
+                option-value="type"
+                option-label="type"
+                hide-selected
                 dense
                 outlined
                 rounded
@@ -160,6 +181,7 @@ en:
     printer: Printer
     invoiceOut: Invoice out
     client: Client
+    invoiceOutSerialType: Serial Type
     stop: Stop
 
 es:
@@ -171,5 +193,6 @@ es:
     printer: Impresora
     invoiceOut: Facturar
     client: Cliente
+    invoiceOutSerialType: Tipo de Serie
     stop: Parar
 </i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -198,14 +198,14 @@ watchEffect(selectedRows);
         :url="`${MODEL}/filter`"
         :create="{
             urlCreate: 'InvoiceOuts/createManualInvoice',
-            title: t('Create Manual Invoice'),
+            title: t('Create manual invoice'),
             onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {
                 active: true,
             },
         }"
         v-model:selected="selectedRows"
-        order="id DESC"
+        order="issued DESC, id DESC"
         :columns="columns"
         redirect="invoice-out"
         auto-load
@@ -242,7 +242,7 @@ watchEffect(selectedRows);
             />
             <VnSelect
                 url="InvoiceOutSerials"
-                v-model="data.invoiceOutSerial"
+                v-model="data.serial"
                 :label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
                 :options="invoiceOutSerialsOptions"
                 option-label="description"
@@ -254,7 +254,7 @@ watchEffect(selectedRows);
             />
             <VnSelect
                 url="TaxAreas"
-                v-model="data.area"
+                v-model="data.taxArea"
                 :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
                 :options="taxAreasOptions"
                 option-label="code"
@@ -275,10 +275,12 @@ en:
     fileAllowed: Successful download of CSV file
     youCanSearchByInvoiceReference: You can search by invoice reference
     createInvoice: Make invoice
+    Create manual invoice: Create manual invoice
 es:
     searchInvoice: Buscar factura emitida
     fileDenied: El navegador denegó la descarga de archivos...
     fileAllowed: Descarga exitosa de archivo CSV
     youCanSearchByInvoiceReference: Puedes buscar por referencia de la factura
     createInvoice: Crear factura
+    Create manual invoice: Crear factura manual
 </i18n>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
-        :unremovable-params="['from', 'to']"
+        :un-removable-params="['from', 'to']"
         :hidden-tags="['from', 'to']"
     >
         <template #tags="{ tag, formatFn }">

src/pages/Item/Card/ItemBasicData.vue

@@ -16,7 +16,6 @@ const route = useRoute();
 const { t } = useI18n();
 
 const itemTypesOptions = ref([]);
-const itemsWithNameOptions = ref([]);
 const intrastatsOptions = ref([]);
 const expensesOptions = ref([]);
 

src/pages/Item/Card/ItemBotanical.vue

@@ -19,15 +19,6 @@ const itemSpeciesOptions = ref([]);
 const itemBotanicals = ref([]);
 let itemBotanicalsForm = reactive({ itemFk: null });
 
-const onGenusCreated = (response, formData) => {
-    itemGenusOptions.value = [...itemGenusOptions.value, response];
-    formData.genusFk = response.id;
-};
-
-const onSpecieCreated = (response, formData) => {
-    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
-    formData.specieFk = response.id;
-};
 const entityId = computed(() => {
     return route.params.id;
 });
@@ -47,18 +38,6 @@ onMounted(async () => {
         }"
         @on-fetch="(data) => (itemBotanicals = data)"
     />
-    <FetchData
-        url="Genera"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemGenusOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Species"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemSpeciesOptions = data)"
-        auto-load
-    />
     <FormModel
         url-update="ItemBotanicals"
         model="entry"
@@ -69,36 +48,35 @@ onMounted(async () => {
         <template #form="{ data }">
             <VnRow>
                 <VnSelectDialog
+                    ref="genusRef"
                     :label="t('Genus')"
                     v-model="data.genusFk"
-                    :options="itemGenusOptions"
+                    url="Genera"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateGenusForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onGenusCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.genusFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>
                 <VnSelectDialog
                     :label="t('Species')"
                     v-model="data.specieFk"
-                    :options="itemSpeciesOptions"
+                    url="Species"
                     option-label="name"
                     option-value="id"
+                    :fields="['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                 >
                     <template #form>
                         <CreateSpecieForm
-                            @on-data-saved="
-                                (_, requestResponse) =>
-                                    onSpecieCreated(requestResponse, data)
-                            "
+                            @on-data-saved="(_, res) => (data.specieFk = res.id)"
                         />
                     </template>
                 </VnSelectDialog>

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -138,14 +138,6 @@ en:
 </i18n>
 
 <style lang="scss" scoped>
-.edit-photo-btn {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    z-index: 1;
-    cursor: pointer;
-}
-
 .separation-borders {
     border-left: 1px solid $white;
     border-right: 1px solid $white;

src/pages/Item/Card/ItemShelving.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -24,8 +23,6 @@ const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
 
 const rowsSelected = ref([]);
-const parkingsOptions = ref([]);
-const shelvingsOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -104,7 +101,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: parkingsOptions.value,
+                url: 'parkings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -124,7 +123,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: shelvingsOptions.value,
+                url: 'shelvings',
+                fields: ['code'],
+                'sort-by': 'code ASC',
                 'option-value': 'code',
                 'option-label': 'code',
                 dense: true,
@@ -188,18 +189,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <FetchData
-        url="parkings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (parkingsOptions = data)"
-    />
-    <FetchData
-        url="shelvings"
-        :filter="{ fields: ['code'], order: 'code ASC' }"
-        auto-load
-        @on-fetch="(data) => (shelvingsOptions = data)"
-    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#st-data">
             <div class="q-pa-md q-mr-lg q-ma-xs" style="border: 2px solid #222">
@@ -237,7 +226,6 @@ onMounted(async () => {
             </QBtn>
         </Teleport>
     </template>
-
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"

src/pages/Item/Card/ItemTags.vue

@@ -24,6 +24,7 @@ const getSelectedTagValues = async (tag) => {
         const filter = {
             fields: ['value'],
             order: 'value ASC',
+            limit: 30,
         };
 
         const params = { filter: JSON.stringify(filter) };
@@ -126,7 +127,7 @@ const insertTag = (rows) => {
                                 :key="row.tagFk"
                                 :label="t('Value')"
                                 v-model="row.value"
-                                :options="valueOptionsMap.get(row.tagFk)"
+                                :url="`Tags/${row.tagFk}/filterValue`"
                                 option-label="value"
                                 option-value="value"
                                 emit-value
@@ -135,6 +136,7 @@ const insertTag = (rows) => {
                                 :is-clearable="false"
                                 :required="false"
                                 :rules="validate('itemTag.tagFk')"
+                                :use-like="false"
                             />
                             <VnInput
                                 v-else-if="

src/pages/Item/ItemListFilter.vue

@@ -30,7 +30,7 @@ const itemTypesRef = ref(null);
 const categoriesOptions = ref([]);
 const itemTypesOptions = ref([]);
 const buyersOptions = ref([]);
-const suppliersOptions = ref([]);
+const tagOptions = ref([]);
 const tagValues = ref([]);
 const fieldFiltersValues = ref([]);
 const moreFields = ref([]);
@@ -161,12 +161,6 @@ onMounted(async () => {
         @on-fetch="(data) => (buyersOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC' }"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Tags"
         :filter="{ fields: ['id', 'name', 'isFree'] }"
@@ -261,9 +255,11 @@ onMounted(async () => {
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
+                        :fields="['id', 'name', 'nickname']"
+                        sort-by="name ASC"
                         hide-selected
                         dense
                         outlined

src/pages/Item/ItemRequest.vue

@@ -22,7 +22,6 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 const { t } = useI18n();
 const { notify } = useNotify();
 const stateStore = useStateStore();
-const workersOptions = ref([]);
 let filterParams = ref({});
 const denyFormRef = ref(null);
 const denyRequestId = ref(null);
@@ -208,13 +207,6 @@ onBeforeMount(() => {
 </script>
 
 <template>
-    <FetchData
-        url="Workers"
-        :filter="{ where: { role: 'buyer' } }"
-        order="id"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnSearchbar
         data-key="ItemRequests"
         url="TicketRequests/filter"
@@ -268,7 +260,9 @@ onBeforeMount(() => {
                 <QTd>
                     <VnSelect
                         v-model="row.attenderFk"
-                        :options="workersOptions"
+                        :where="{ role: 'buyer' }"
+                        sort-by="id"
+                        url="Workers"
                         hide-selected
                         option-label="firstName"
                         option-value="id"

src/pages/Item/ItemRequestFilter.vue

@@ -24,7 +24,6 @@ const stateOptions = [
 
 const itemTypesOptions = ref([]);
 const warehousesOptions = ref([]);
-const workersOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -72,18 +71,6 @@ const decrement = (paramsObj, key) => {
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Workers/search"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'name ASC',
-        }"
-        :params="{
-            departmentCodes: ['VT'],
-        }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
@@ -162,7 +149,10 @@ const decrement = (paramsObj, key) => {
                         :label="t('params.requesterFk')"
                         v-model="params.requesterFk"
                         @update:model-value="searchFn()"
-                        :options="workersOptions"
+                        url="Workers/search"
+                        :fields="['id', 'name']"
+                        order="name ASC"
+                        :params="{ departmentCodes: ['VT'] }"
                         option-value="id"
                         option-label="name"
                         hide-selected

src/pages/Login/LoginMain.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { Notify, useQuasar } from 'quasar';
+import { Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -11,7 +11,6 @@ import VnLogo from 'components/ui/VnLogo.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
 
-const quasar = useQuasar();
 const session = useSession();
 const loginCache = useLogin();
 const router = useRouter();
@@ -72,7 +71,8 @@ async function onSubmit() {
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
             class="red"
         />
-        <div>
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
+        <div class="column flex-center q-mt-lg">
             <QBtn
                 :label="t('login.submit')"
                 type="submit"
@@ -81,11 +81,15 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
+            <RouterLink
+                class="q-mt-md text-primary"
+                :to="`/recoverPassword?user=${username}`"
+            >
+                {{ t('I do not remember my password') }}
+            </RouterLink>
         </div>
-        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
     </QForm>
 </template>
-
 <style lang="scss" scoped>
 .formCard {
     max-width: 350px;
@@ -101,3 +105,7 @@ async function onSubmit() {
     }
 }
 </style>
+<i18n>
+es:
+    I do not remember my password: No recuerdo mi contraseña
+</i18n>

src/pages/Login/RecoverPassword.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const user = ref(route.query.user);
+
+async function onSubmit() {
+    try {
+        await axios.post('VnUsers/recoverPassword', { user: user.value, app: 'lilium' });
+        router.push('Login');
+        quasar.notify({
+            message: t('globals.notificationSent'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.recoverPassword')">
+        <template #default>
+            <VnInput
+                v-model="user"
+                :label="t('recoverPassword.userOrEmail')"
+                :hint="t('recoverPassword.explanation')"
+                autofocus
+                required
+            >
+                <template #prepend>
+                    <QIcon name="contact_mail" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.recoverPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/ResetPassword.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+
+import VnInput from 'components/common/VnInput.vue';
+import VnOutForm from 'components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const newPassword = ref();
+const repeatPassword = ref();
+const passRequirements = ref({});
+
+onMounted(async () => {
+    passRequirements.value = (await axios('UserPasswords/findOne')).data;
+});
+
+async function onSubmit() {
+    if (newPassword.value != repeatPassword.value)
+        return quasar.notify({
+            message: t('resetPassword.passwordNotMatch'),
+            type: 'negative',
+        });
+
+    const headers = {
+        Authorization: route.query.access_token,
+    };
+
+    try {
+        await axios.post(
+            'VnUsers/reset-password',
+            { newPassword: newPassword.value },
+            { headers }
+        );
+        router.push('Login');
+        quasar.notify({
+            message: t('resetPassword.passwordChanged'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.resetPassword')">
+        <template #default>
+            <VnInput
+                type="password"
+                :label="t('login.password')"
+                v-model="newPassword"
+                :info="
+                    t('passwordRequirements', {
+                        length: passRequirements.length,
+                        nAlpha: passRequirements.nAlpha,
+                        nUpper: passRequirements.nUpper,
+                        nDigits: passRequirements.nDigits,
+                        nPunct: passRequirements.nPunct,
+                    })
+                "
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+            <VnInput
+                type="password"
+                :label="t('resetPassword.repeatPassword')"
+                v-model="repeatPassword"
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.resetPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/TwoFactor.vue

@@ -8,6 +8,7 @@ import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -38,24 +39,22 @@ async function onSubmit() {
 }
 </script>
 <template>
-    <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
-        <div class="column items-center">
-            <QIcon name="phonelink_lock" size="xl" color="primary" />
-            <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
-        </div>
-        <VnInput
-            v-model="code"
-            :hint="t('twoFactor.explanation')"
-            mask="# # # # # #"
-            fill-mask
-            unmasked-value
-            autofocus
-        >
-            <template #prepend>
-                <QIcon name="lock" />
-            </template>
-        </VnInput>
-        <div class="q-mt-xl">
+    <VnOutForm @submit="onSubmit" :title="t('twoFactor.insert')">
+        <template #default>
+            <VnInput
+                v-model="code"
+                :hint="t('twoFactor.explanation')"
+                mask="# # # # # #"
+                fill-mask
+                unmasked-value
+                autofocus
+            >
+                <template #prepend>
+                    <QIcon name="lock" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
             <QBtn
                 :label="t('twoFactor.validate')"
                 type="submit"
@@ -64,18 +63,6 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
-        </div>
-    </QForm>
+        </template>
+    </VnOutForm>
 </template>
-<style lang="scss" scoped>
-.formCard {
-    max-width: 350px;
-    min-width: 300px;
-}
-
-@media (max-width: $breakpoint-xs-max) {
-    .formCard {
-        min-width: 100%;
-    }
-}
-</style>

src/pages/Monitor/SalesTicketsTable.vue

@@ -1,8 +1,6 @@
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
 import FetchData from 'components/FetchData.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -11,18 +9,14 @@ import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.v
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
 import { toCurrency, dateRange } from 'src/filters';
+
 const DEFAULT_AUTO_REFRESH = 1000;
 const { t } = useI18n();
 const autoRefresh = ref(false);
-const router = useRouter();
 const paginateRef = ref(null);
 const workersActiveOptions = ref([]);
 const provincesOptions = ref([]);
@@ -57,46 +51,6 @@ function exprBuilder(param, value) {
 const filter = { order: ['totalProblems DESC'] };
 let params = reactive({});
 
-const applyColumnFilter = async (col) => {
-    try {
-        const paramKey = col.columnFilter?.filterParamKey || col.field;
-        params[paramKey] = col.columnFilter.filterValue;
-        await paginateRef.value.addFilter(null, params);
-    } catch (err) {
-        console.error('Error applying column filter', err);
-    }
-};
-
-const getInputEvents = (col) => {
-    return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
-        ? { 'update:modelValue': () => applyColumnFilter(col) }
-        : {
-              'keyup.enter': () => applyColumnFilter(col),
-          };
-};
-
-const fetchParams = ($params = {}) => {
-    const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
-
-    const hasExcludedParams = excludedParams.some((param) => {
-        return $params && $params[param] != undefined;
-    });
-    const hasParams = Object.entries($params).length;
-    if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
-
-    if (typeof $params.scopeDays === 'number') {
-        const from = Date.vnNew();
-        from.setHours(0, 0, 0, 0);
-
-        const to = new Date(from.getTime());
-        to.setDate(to.getDate() + $params.scopeDays);
-        to.setHours(23, 59, 59, 999);
-
-        Object.assign($params, { from, to });
-    }
-    return { tableOrder: 'totalProblems DESC', ...$params };
-};
-
 const columns = computed(() => [
     {
         label: t('salesTicketsTable.problems'),
@@ -379,13 +333,6 @@ const redirectToSales = (id) => {
     const url = `#/ticket/${id}/sale`;
     window.open(url, '_blank');
 };
-
-// onMounted(async () => {
-//     const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
-//     allColumnNames.value = filteredColumns.map((col) => col.name);
-//     params = fetchParams();
-//     await paginateRef.value.addFilter(null, params);
-// });
 </script>
 
 <template>

src/pages/Order/Card/OrderBasicData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -7,6 +7,7 @@ import { useState } from 'composables/useState';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -15,7 +16,6 @@ const route = useRoute();
 const state = useState();
 const ORDER_MODEL = 'order';
 
-const router = useRouter();
 const isNew = Boolean(!route.params.id);
 const clientList = ref([]);
 const agencyList = ref([]);
@@ -64,13 +64,6 @@ const fetchOrderDetails = (order) => {
     fetchAgencyList(order?.landed, order?.addressFk);
 };
 
-const orderMapper = (order) => {
-    return {
-        addressId: order.addressFk,
-        agencyModeId: order.agencyModeFk,
-        landed: new Date(order.landed).toISOString(),
-    };
-};
 const orderFilter = {
     include: [
         { relation: 'agencyMode', scope: { fields: ['name'] } },
@@ -106,10 +99,6 @@ const onClientChange = async (clientId) => {
         console.error('Error al cambiar el cliente:', error);
     }
 };
-
-async function onDataSaved({ id }) {
-    await router.push({ path: `/order/${id}/catalog` });
-}
 </script>
 
 <template>
@@ -117,9 +106,8 @@ async function onDataSaved({ id }) {
     <div class="q-pa-md">
         <FormModel
             :url="`Orders/${route.params.id}`"
-            @on-data-saved="onDataSaved"
+            :url-update="`Orders/${route.params.id}/updateBasicData`"
             :model="ORDER_MODEL"
-            :mapper="orderMapper"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
             auto-load
@@ -180,8 +168,6 @@ async function onDataSaved({ id }) {
                             () => fetchAgencyList(data.landed, data.addressFk)
                         "
                     />
-                </VnRow>
-                <VnRow>
                     <VnSelect
                         :label="t('order.form.agencyModeFk')"
                         v-model="data.agencyModeFk"
@@ -189,9 +175,29 @@ async function onDataSaved({ id }) {
                         option-value="agencyModeFk"
                         option-label="agencyMode"
                         hide-selected
-                        :disable="!agencyList?.length"
-                    >
-                    </VnSelect>
+                        :disable="!agencyList?.length && data.isConfirmed === 1"
+                        clearable
+                        emit-value
+                        map-options
+                        :model-value="
+                            !data.isConfirmed &&
+                            agencyList?.length &&
+                            agencyList.some(
+                                (agency) => agency.agencyModeFk === data.agency_id
+                            )
+                                ? data.agencyModeFk
+                                : null
+                        "
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('globals.notes')"
+                        type="textarea"
+                        v-model="data.note"
+                        fill-input
+                        autogrow
+                    />
                 </VnRow>
             </template>
         </FormModel>

src/pages/Order/Card/OrderCard.vue

@@ -1,16 +1,35 @@
 <script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
 import OrderFilter from './OrderFilter.vue';
 import OrderSearchbar from './OrderSearchbar.vue';
+import OrderCatalogFilter from './OrderCatalogFilter.vue';
+const config = {
+    OrderCatalog: OrderCatalogFilter,
+};
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => {
+    const route = config[routeName.value];
+    if (route) return null;
+    return 'OrderList';
+});
+const customFilterPanel = computed(() => {
+    const filterPanel = config[routeName.value] ?? OrderFilter;
+    return filterPanel;
+});
 </script>
+
 <template>
     <VnCard
         data-key="Order"
         base-url="Orders"
         :descriptor="OrderDescriptor"
-        :filter-panel="OrderFilter"
-        search-data-key="OrderList"
+        :filter-panel="customFilterPanel"
+        :search-data-key="customRouteRedirectName"
     >
         <template #searchbar>
             <OrderSearchbar />

src/pages/Order/Card/OrderCatalog.vue

@@ -1,17 +1,24 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { onMounted, onUnmounted, ref } from 'vue';
+import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import CatalogItem from 'components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const route = useRoute();
+const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
+const tags = ref([]);
 
-onMounted(() => (stateStore.rightDrawer = true));
+onMounted(() => {
+    stateStore.rightDrawer = true;
+    checkOrderConfirmation();
+});
 onUnmounted(() => (stateStore.rightDrawer = false));
 
 const catalogParams = {
@@ -19,7 +26,12 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-const tags = ref([]);
+async function checkOrderConfirmation() {
+    const response = await axios.get(`Orders/${route.params.id}`);
+    if (response.data.isConfirmed === 1) {
+        router.push(`/order/${route.params.id}/line`);
+    }
+}
 
 function extractTags(items) {
     const resultTags = [];
@@ -52,6 +64,15 @@ function extractValueTags(items) {
 </script>
 
 <template>
+    <VnSearchbar
+        data-key="OrderCatalogList"
+        :user-params="catalogParams"
+        :static-params="['orderFk', 'orderBy']"
+        :redirect="false"
+        url="Orders/CatalogFilter"
+        :label="t('Search items')"
+        :info="t('You can search items by name or id')"
+    />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <OrderCatalogFilter
@@ -68,7 +89,6 @@ function extractValueTags(items) {
                 url="Orders/CatalogFilter"
                 :limit="50"
                 :user-params="catalogParams"
-                auto-load
                 @on-fetch="extractTags"
                 :update-router="false"
             >
@@ -106,3 +126,8 @@ function extractValueTags(items) {
     text-align: center;
 }
 </style>
+
+<i18n>
+es:
+    You can search items by name or id: Puedes buscar items por nombre o id
+</i18n>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
-import { useValidator } from 'src/composables/useValidator';
 import VnInput from 'src/components/common/VnInput.vue';
+import getParamWhere from 'src/filters/getParamWhere';
 
 const { t } = useI18n();
 
@@ -27,19 +27,26 @@ const props = defineProps({
         required: true,
     },
 });
-
 const categoryList = ref(null);
-const selectedCategoryFk = ref(null);
-const typeList = ref(null);
+const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
+const typeList = ref([]);
 const selectedTypeFk = ref(null);
-const validationsStore = useValidator();
-const selectedOrder = ref(null);
-const selectedOrderField = ref(null);
-const moreFields = ref([]);
-const moreFieldsOrder = ref([]);
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
 const tagOptions = ref([]);
+const vnFilterPanelRef = ref();
+const orderByList = ref([
+    { id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
+    { id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
+    { id: 'name', name: t('params.name'), priority: 999 },
+    { id: 'price', name: t('params.price'), priority: 999 },
+]);
+const orderWayList = ref([
+    { id: 'ASC', name: t('params.ASC') },
+    { id: 'DESC', name: t('params.DESC') },
+]);
+const orderBySelected = ref('relevancy DESC, name');
+const orderWaySelected = ref('ASC');
 
 const createValue = (val, done) => {
     if (val.length > 2) {
@@ -72,7 +79,7 @@ const selectCategory = (params, category, search) => {
     search();
 };
 
-const loadTypes = async (categoryFk) => {
+const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
     const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
         params: { itemCategoryId: categoryFk },
     });
@@ -84,7 +91,14 @@ const selectedCategory = computed(() =>
         (category) => category?.id === selectedCategoryFk.value
     )
 );
-
+function filterFn(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        tagOptions.value = props.tagValue.filter(
+            (v) => v.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
 const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
@@ -95,7 +109,8 @@ function exprBuilder(param, value) {
         case 'typeFk':
             return { [param]: value };
         case 'search':
-            return { 'i.name': { like: `%${value}%` } };
+            if (/^\d+$/.test(value)) return { 'i.id': value };
+            else return { 'i.name': { like: `%${value}%` } };
     }
 }
 
@@ -132,36 +147,6 @@ const removeTagChip = (selection, params, search) => {
     search();
 };
 
-const onOrderChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    tagObj.way = value.name;
-    params.orderBy = JSON.stringify(tagObj);
-};
-
-const onOrderFieldChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    switch (value) {
-        case 'Relevancy':
-            tagObj.name = value + ' DESC, name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'ColorAndPrice':
-            tagObj.name = 'showOrder, price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Name':
-            tagObj.name = 'name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Price':
-            tagObj.name = 'price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-    }
-};
-
-const _moreFields = ['ASC', 'DESC'];
-const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -169,8 +154,8 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
-    moreFields.value = useLang(_moreFields);
-    moreFieldsOrder.value = useLang(_moreFieldsTypes);
+
+    selectedCategoryFk.value && loadTypes();
 };
 
 const getCategoryClass = (category, params) => {
@@ -179,27 +164,22 @@ const getCategoryClass = (category, params) => {
     }
 };
 
-const useLang = (values) => {
-    const { models } = validationsStore;
-    const properties = models.Item?.properties || {};
-    return values.map((name) => {
-        let prop = properties[name];
-        const label = t(`params.${name}`);
-        return {
-            name,
-            label,
-            type: prop ? prop.type : null,
-        };
-    });
-};
+function addOrder(value, field, params) {
+    let { orderBy } = params;
+    orderBy = JSON.parse(orderBy);
+    orderBy[field] = value;
+    params.orderBy = JSON.stringify(orderBy);
+    vnFilterPanelRef.value.search();
+}
 </script>
 
 <template>
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <VnFilterPanel
+        ref="vnFilterPanelRef"
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
-        :unremovable-params="['orderFk', 'orderBy']"
+        :un-removable-params="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
         @remove="clearFilter"
@@ -289,33 +269,29 @@ const useLang = (values) => {
                 </QItemSection>
             </QItem>
             <QSeparator />
-            <QItem class="q-my-md">
-                <QItemSection>
-                    <VnSelect
-                        :label="t('Order')"
-                        v-model="selectedOrder"
-                        :options="moreFields"
-                        option-label="label"
-                        option-value="way"
-                        dense
-                        outlined
-                        rounded
-                        @update:model-value="(value) => onOrderChange(value, params)"
-                    />
-                </QItemSection>
-            </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
                     <VnSelect
                         :label="t('Order by')"
-                        v-model="selectedOrderField"
-                        :options="moreFieldsOrder"
-                        option-label="label"
-                        option-value="name"
+                        v-model="orderBySelected"
+                        :options="orderByList"
                         dense
                         outlined
                         rounded
-                        @update:model-value="(value) => onOrderFieldChange(value, params)"
+                        @update:model-value="(value) => addOrder(value, 'field', params)"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('Order')"
+                        v-model="orderWaySelected"
+                        :options="orderWayList"
+                        dense
+                        outlined
+                        rounded
+                        @update:model-value="(value) => addOrder(value, 'way', params)"
                     />
                 </QItemSection>
             </QItem>
@@ -352,7 +328,7 @@ const useLang = (values) => {
                     v-if="!selectedTag"
                     :label="t('params.value')"
                     v-model="value.value"
-                    :options="tagValue || []"
+                    :options="tagOptions || []"
                     option-value="value"
                     option-label="value"
                     dense
@@ -362,6 +338,8 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @filter="filterFn"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnSelect
                     v-else-if="selectedTag === 1"
@@ -377,6 +355,7 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnInput
                     v-else
@@ -386,6 +365,7 @@ const useLang = (values) => {
                     outlined
                     rounded
                     class="filter-input"
+                    @keyup.enter="applyTagFilter(params, searchFn)"
                 />
                 <QIcon
                     name="delete"
@@ -400,7 +380,7 @@ const useLang = (values) => {
                     @click="tagValues.push({})"
                 />
             </QItem>
-            <QItem>
+            <!-- <QItem>
                 <QItemSection class="q-py-sm">
                     <QBtn
                         :label="t('Search')"
@@ -414,7 +394,7 @@ const useLang = (values) => {
                         @click.stop="applyTagFilter(params, searchFn)"
                     />
                 </QItemSection>
-            </QItem>
+            </QItem> -->
             <QSeparator />
         </template>
     </VnFilterPanel>
@@ -477,10 +457,10 @@ en:
         order: Order
         ASC: Ascendant
         DESC: Descendant
-        Relevancy: Relevancy
-        ColorAndPrice: Color and price
-        Name: Name
-        Price: Price
+        relevancy: Relevancy
+        colorAndPrice: Color and price
+        name: Name
+        price: Price
 es:
     params:
         type: Tipo
@@ -490,10 +470,10 @@ es:
         order: Orden
         ASC: Ascendiente
         DESC: Descendiente
-        Relevancy: Relevancia
-        ColorAndPrice: Color y precio
-        Name: Nombre
-        Price: Precio
+        relevancy: Relevancia
+        colorAndPrice: Color y precio
+        name: Nombre
+        price: Precio
     Order: Orden
     Order by: Ordenar por
     Plant: Planta

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useRoute } from 'vue-router';
 import useNotify from 'composables/useNotify';
+import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
-const route = useRoute();
 const { notify } = useNotify();
+const emit = defineEmits(['added']);
+const route = useRoute();
 const props = defineProps({
     prices: {
         type: Array,
@@ -16,9 +18,8 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['added']);
-
 const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
+const descriptorData = useArrayData('orderData');
 
 const addToOrder = async () => {
     const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
@@ -28,19 +29,20 @@ const addToOrder = async () => {
     });
     notify(t('globals.dataSaved'), 'positive');
     emit('added');
+    descriptorData.fetch({});
 };
 </script>
 
 <template>
-    <div class="container order-catalog-item q-pb-md">
+    <div class="container order-catalog-item q-pa-md">
         <QForm @submit="addToOrder">
             <QMarkupTable class="shadow-0">
                 <tbody>
                     <tr v-for="item in fields" :key="item.warehouse">
-                        <td class="text-bold q-py-lg">
+                        <td class="text-bold q-pr-md td" style="width: 35%">
                             {{ item.warehouse }}
                         </td>
-                        <td class="text-right">
+                        <td class="text-right" style="width: 35%">
                             <span
                                 class="link"
                                 @click="
@@ -75,8 +77,11 @@ const addToOrder = async () => {
 </template>
 
 <style lang="scss" scoped>
-.container {
-    max-width: 448px;
-    width: 100%;
+// .container {
+//     max-width: 768px;
+//     width: 100%;
+// }
+.td {
+    width: 200px;
 }
 </style>

src/pages/Order/Card/OrderDescriptor.vue

@@ -4,13 +4,13 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
 import { useState } from 'src/composables/useState';
-
 import useCardDescription from 'src/composables/useCardDescription';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
 import FetchData from 'components/FetchData.vue';
+import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const DEFAULT_ITEMS = 0;
 
@@ -25,6 +25,8 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
+const data = ref(useCardDescription());
+const getTotalRef = ref();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -57,11 +59,11 @@ const filter = {
     ],
 };
 
-const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
+    getTotalRef.value && getTotalRef.value.fetch();
     data.value = useCardDescription(entity?.client?.name, entity?.id);
-    state.set('OrderDescriptor', entity);
+    state.set('orderData', entity);
 };
 
 const getConfirmationValue = (isConfirmed) => {
@@ -69,13 +71,17 @@ const getConfirmationValue = (isConfirmed) => {
 };
 
 const total = ref(null);
+
+function ticketFilter(order) {
+    return JSON.stringify({ id: order.id });
+}
 </script>
 
 <template>
     <FetchData
+        ref="getTotalRef"
         :url="`Orders/${entityId}/getTotal`"
         @on-fetch="(response) => (total = response)"
-        auto-load
     />
     <CardDescriptor
         ref="descriptor"
@@ -120,7 +126,7 @@ const total = ref(null);
                     color="primary"
                     :to="{
                         name: 'TicketList',
-                        query: { params: JSON.stringify({ orderFk: entity.id }) },
+                        query: { table: ticketFilter(entity) },
                     }"
                 >
                     <QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>

src/pages/Order/Card/OrderFilter.vue

@@ -21,15 +21,13 @@ const salesPersonFilter = {
     fields: ['id', 'nickname'],
 };
 const salesPersonList = ref(null);
-const sourceFilter = { fields: ['value'] };
-const sourceList = ref(null);
+const sourceList = ref([]);
 </script>
 
 <template>
     <FetchData
         url="AgencyModes/isActive"
         :filter="agencyFilter"
-        limit="30"
         sort-by="name ASC"
         auto-load
         @on-fetch="(data) => (agencyList = data)"
@@ -37,7 +35,6 @@ const sourceList = ref(null);
     <FetchData
         url="Workers/search"
         :filter="salesPersonFilter"
-        limit="30"
         sort-by="nickname ASC"
         @on-fetch="(data) => (salesPersonList = data)"
         :params="{ departmentCodes: ['VT'] }"
@@ -45,8 +42,7 @@ const sourceList = ref(null);
     />
     <FetchData
         url="Orders/getSourceValues"
-        :filter="sourceFilter"
-        limit="30"
+        :filter="{ fields: ['value'] }"
         sort-by="value ASC"
         @on-fetch="(data) => (sourceList = data)"
         auto-load
@@ -59,148 +55,88 @@ const sourceList = ref(null);
             </div>
         </template>
         <template #body="{ params }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        is-outlined
-                        :label="t('customerId')"
-                        v-model="params.clientFk"
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="agencyList">
-                    <VnSelect
-                        :label="t('agency')"
-                        v-model="params.agencyModeFk"
-                        :options="agencyList"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="salesPersonList">
-                    <VnSelect
-                        :label="t('salesPerson')"
-                        v-model="params.workerFk"
-                        :options="salesPersonList"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.nickname }},{{ opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.from"
-                        :label="t('fromLanded')"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.to"
-                        :label="t('toLanded')"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('orderId')"
-                        v-model="params.orderFk"
-                        lazy-rules
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="sourceList">
-                    <VnSelect
-                        :label="t('application')"
-                        v-model="params.sourceApp"
-                        :options="sourceList"
-                        option-label="value"
-                        emit-value
-                        map-options
-                        use-input
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('myTeam')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.isConfirmed"
-                        :label="t('isConfirmed')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
-                </QItemSection>
-            </QItem>
+            <div class="q-px-md q-gutter-y-sm">
+                <VnInput
+                    :label="t('customerId')"
+                    v-model="params.clientFk"
+                    lazy-rules
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnSelect
+                    :label="t('agency')"
+                    v-model="params.agencyModeFk"
+                    :options="agencyList"
+                    :input-debounce="0"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnSelect
+                    :label="t('salesPerson')"
+                    v-model="params.workerFk"
+                    url="Workers/search"
+                    :filter="{ departmentCodes: ['VT'] }"
+                    sort-by="nickname ASC"
+                    option-label="nickname"
+                    dense
+                    outlined
+                    rounded
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }},{{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnInputDate
+                    v-model="params.from"
+                    :label="t('fromLanded')"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnInputDate
+                    v-model="params.to"
+                    :label="t('toLanded')"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnInput
+                    :label="t('orderId')"
+                    v-model="params.orderFk"
+                    lazy-rules
+                    is-outlined
+                />
+                <VnSelect
+                    :label="t('application')"
+                    v-model="params.sourceApp"
+                    :options="sourceList"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    :input-debounce="0"
+                />
+                <QCheckbox
+                    v-model="params.myTeam"
+                    :label="t('myTeam')"
+                    toggle-indeterminate
+                />
+                <QCheckbox
+                    v-model="params.isConfirmed"
+                    :label="t('isConfirmed')"
+                    toggle-indeterminate
+                />
+                <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
+            </div>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Order/Card/OrderLines.vue

@@ -1,23 +1,26 @@
 <script setup>
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toCurrency, toDate } from 'src/filters';
 
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import { toCurrency, toDate } from 'src/filters';
-import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
-import { useStateStore } from 'stores/useStateStore';
 
+const router = useRouter();
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const descriptorData = useArrayData('orderData');
 const componentKey = ref(0);
 const tableLinesRef = ref();
 const order = ref();
@@ -25,6 +28,8 @@ const orderSummary = ref({
     total: null,
     vat: null,
 });
+const getTotalRef = ref();
+const getVATRef = ref();
 
 const lineFilter = ref({
     include: [
@@ -59,6 +64,13 @@ const lineFilter = ref({
                 fields: ['id', 'name'],
             },
         },
+        {
+            relation: 'order',
+            scope: {
+                fields: ['id', 'isConfirmed'],
+                where: { id: route.params.id },
+            },
+        },
     ],
     where: { orderFk: route.params.id },
 });
@@ -104,6 +116,7 @@ const columns = computed(() => [
             component: null,
         },
         format: (row) => row?.item?.name,
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -147,7 +160,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'amount',
         label: t('lines.amount'),
-        format: (row) => toCurrency(row.amount),
     },
     {
         align: 'right',
@@ -155,8 +167,9 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('delete'),
+                title: t('Delete'),
                 icon: 'delete',
+                show: (row) => !row.order.isConfirmed,
                 action: (row) => confirmRemove(row),
                 isPrimary: true,
             },
@@ -185,6 +198,9 @@ async function remove(item) {
         type: 'positive',
     });
     tableLinesRef.value.reload();
+    descriptorData.fetch({});
+    getTotalRef.value.fetch();
+    getVATRef.value.fetch();
 }
 
 async function confirmOrder() {
@@ -193,7 +209,22 @@ async function confirmOrder() {
         message: t('globals.confirm'),
         type: 'positive',
     });
+    router.push({
+        name: 'TicketList',
+        query: {
+            table: JSON.stringify({ clientFk: descriptorData.store.data.clientFk }),
+        },
+    });
 }
+
+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        lineFilter.value.where.orderFk = router.currentRoute.value.params.id;
+
+        tableLinesRef.value.reload();
+    }
+);
 </script>
 
 <template>
@@ -204,78 +235,80 @@ async function confirmOrder() {
         auto-load
     />
     <FetchData
+        ref="getTotalRef"
         :key="componentKey"
         :url="`Orders/${route.params.id}/getTotal`"
         @on-fetch="(data) => (orderSummary.total = data)"
         auto-load
     />
     <FetchData
+        ref="getVATRef"
         :key="componentKey"
         :url="`Orders/${route.params.id}/getVAT`"
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
     <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
-        <QCard class="order-lines-summary q-pa-lg">
+        <QCard
+            class="order-lines-summary q-pa-lg"
+            v-if="orderSummary.vat && orderSummary.total"
+        >
             <p class="header text-right block">
                 {{ t('summary') }}
             </p>
             <VnLv
-                v-if="orderSummary.vat && orderSummary.total"
                 :label="t('subtotal') + ': '"
                 :value="toCurrency(orderSummary.total - orderSummary.vat)"
             />
-            <VnLv
-                v-if="orderSummary.vat"
-                :label="t('VAT') + ': '"
-                :value="toCurrency(orderSummary?.vat)"
-            />
-            <VnLv
-                v-if="orderSummary.total"
-                :label="t('total') + ': '"
-                :value="toCurrency(orderSummary?.total)"
-            />
+            <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
+            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
         </QCard>
     </QDrawer>
-    <QPage :key="componentKey" class="column items-center">
-        <div class="order-list full-width">
-            <div v-if="!orderSummary.total" class="no-result">
-                {{ t('globals.noResults') }}
-            </div>
-            <VnTable
-                ref="tableLinesRef"
-                data-key="OrderLines"
-                url="OrderRows"
-                :columns="columns"
-                :right-search="false"
-                :use-model="true"
-                auto-load
-                :user-filter="lineFilter"
-            >
-                <template #column-image="{ row }">
-                    <div class="image-wrapper">
-                        <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
-                    </div>
-                </template>
 
-                <template #column-itemFk="{ row }">
-                    <div class="row column full-width justify-between items-start">
-                        {{ row?.item?.name }}
-                        <div v-if="row?.item?.subName" class="subName">
-                            {{ row?.item?.subName.toUpperCase() }}
-                        </div>
-                    </div>
-                    <FetchedTags :item="row?.item" :max-length="6" />
-                </template>
-            </VnTable>
-        </div>
-        <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
-            <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
-            <QTooltip>
-                {{ t('confirm') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableLinesRef"
+        data-key="OrderLines"
+        url="OrderRows"
+        :columns="columns"
+        :right-search="false"
+        :use-model="true"
+        auto-load
+        :user-filter="lineFilter"
+    >
+        <template #column-image="{ row }">
+            <div class="image-wrapper">
+                <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
+            </div>
+        </template>
+
+        <template #column-itemFk="{ row }">
+            <div class="row column full-width justify-between items-start">
+                {{ row?.item?.name }}
+                <div v-if="row?.item?.subName" class="subName">
+                    {{ row?.item?.subName.toUpperCase() }}
+                </div>
+            </div>
+            <FetchedTags :item="row?.item" :max-length="6" />
+        </template>
+        <template #column-amount="{ row }">
+            {{ toCurrency(row.quantity * row.price) }}
+        </template>
+        <template #column-tableActions="{ row }">
+            <QIcon
+                v-if="row.order?.isConfirmed === 0"
+                name="delete"
+                icon="delete"
+                @click="confirmRemove(row)"
+                class="cursor-pointer"
+            />
+        </template>
+    </VnTable>
+    <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
+        <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
+        <QTooltip>
+            {{ t('confirm') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <style lang="scss" scoped>

src/pages/Order/Card/OrderSummary.vue

@@ -180,15 +180,17 @@ const detailsColumns = ref([
                                         <ItemDescriptorProxy :id="props.row.item?.id" />
                                     </span>
                                 </QTd>
-                                <QTd key="description" :props="props" class="description">
-                                    <div class="name">
-                                        <span>{{ props.row.item.name }}</span>
-                                        <span
-                                            v-if="props.row.item.subName"
-                                            class="subName"
-                                        >
-                                            {{ props.row.item.subName }}
-                                        </span>
+                                <QTd key="description" :props="props">
+                                    <div class="description">
+                                        <div class="name">
+                                            {{ props.row.item.name }}
+                                            <span
+                                                v-if="props.row.item.subName"
+                                                class="subName"
+                                            >
+                                                {{ props.row.item.subName }}
+                                            </span>
+                                        </div>
                                     </div>
                                     <FetchedTags :item="props.row.item" :max-length="5" />
                                 </QTd>
@@ -228,24 +230,13 @@ const detailsColumns = ref([
 }
 
 .description {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     text-align: left;
-    height: auto;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 15px;
+    padding-bottom: 15px;
 
     .name {
-        display: flex;
-        align-items: center;
-        padding-bottom: 8px;
-
-        & > * {
-            flex: 1;
-        }
-
         .subName {
+            margin-left: 5%;
             text-transform: uppercase;
             color: var(--vn-label-color);
         }

src/pages/Order/Card/OrderVolume.vue

@@ -0,0 +1,140 @@
+<script setup>
+import axios from 'axios';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { dashIfEmpty } from 'src/filters';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const volumeSummary = ref(null);
+const volumeRef = ref();
+const volumes = ref([]);
+const volumeFilter = ref({
+    include: [
+        {
+            relation: 'item',
+        },
+    ],
+    where: { orderFk: route.params.id },
+});
+
+const columns = [
+    {
+        name: 'itemFk',
+        label: t('item'),
+        align: 'left',
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('quantity'),
+        align: 'left',
+    },
+    {
+        name: 'volume',
+        label: t('volume'),
+        align: 'left',
+    },
+];
+
+const loadVolumes = async (rows) => {
+    if (!rows) return;
+    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
+    rows.forEach((order) => {
+        (data.volumes || []).forEach((volume) => {
+            if (order.itemFk === volume.itemFk) order.volume = volume.volume;
+        });
+    });
+    volumes.value = rows;
+};
+</script>
+
+<template>
+    <FetchData
+        :url="`Orders/${route.params.id}/getTotalVolume`"
+        @on-fetch="(data) => (volumeSummary = data)"
+        auto-load
+    />
+    <QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
+        <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
+        <VnLv
+            :label="t('boxes')"
+            :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
+        />
+    </QCard>
+    <VnTable
+        ref="volumeRef"
+        data-key="OrderCatalogVolume"
+        url="OrderRows"
+        :columns="columns"
+        auto-load
+        :user-filter="volumeFilter"
+        order="itemFk"
+        @on-fetch="(data) => loadVolumes(data)"
+        :right-search="false"
+        :column-search="false"
+    >
+        <template #column-itemFk="{ row }">
+            <span class="link">
+                {{ row.itemFk }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
+        <template #column-description="{ row }">
+            <FetchedTags :item="row.item" :max-length="5" />
+        </template>
+        <template #column-volume="{ rowIndex }">
+            {{ volumes?.[rowIndex]?.volume }}
+        </template>
+    </VnTable>
+</template>
+
+<style lang="scss">
+.order-volume-summary {
+    .vn-label-value {
+        display: flex;
+        justify-content: flex-end;
+        gap: 2%;
+
+        .label {
+            color: var(--vn-label-color);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .value {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
+<i18n>
+en:
+    summary: Summary
+    total: Total
+    boxes: Boxes
+    item: Item
+    quantity: Quantity
+    volume: m³ per quantity
+es:
+    summary: Resumen
+    total: Total
+    boxes: Cajas
+    item: Artículo
+    quantity: Cantidad
+    volume: m³ por cantidad
+</i18n>

src/pages/Order/OrderList.vue

@@ -3,19 +3,21 @@ import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import OrderSearchbar from './Card/OrderSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import OrderFilter from './Card/OrderFilter.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
-const clientList = ref([]);
 const agencyList = ref([]);
-const selectedAddress = ref();
+const addressesList = ref([]);
+const clientId = ref();
 
 const columns = computed(() => [
     {
@@ -29,7 +31,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'clientName',
+        name: 'clientFk',
         label: t('module.customer'),
         isTitle: true,
         cardVisible: true,
@@ -41,20 +43,26 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
+        format: (row) => row?.clientName,
     },
     {
         align: 'left',
-        name: 'name',
+        name: 'salesPersonFk',
         label: t('module.salesPerson'),
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            where: { role: 'salesPerson' },
-        },
-        columnField: {
-            component: null,
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
         },
+        format: (row) => row?.name,
     },
     {
         align: 'left',
@@ -92,17 +100,21 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'agencyName',
+        name: 'agencyModeFk',
         label: t('module.agency'),
-        component: 'select',
+        format: (row) => row?.agencyName,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'agencyModes',
+                fields: ['id', 'name'],
+                find: {
+                    value: 'agencyModeFk',
+                    label: 'agencyName',
+                },
+            },
+        },
         cardVisible: true,
-        attrs: {
-            url: 'Agencies',
-            fields: ['id', 'name'],
-        },
-        columnField: {
-            component: null,
-        },
     },
     {
         align: 'left',
@@ -125,22 +137,36 @@ const columns = computed(() => [
     },
 ]);
 
-async function fetchClientAddress(id, data) {
-    const clientData = await axios.get(`Clients/${id}`);
-    selectedAddress.value = clientData.data.defaultAddressFk;
-    data.addressId = selectedAddress.value;
+async function fetchClientAddress(id, formData) {
+    const { data } = await axios.get(`Clients/${id}`, {
+        params: { filter: { include: { relation: 'addresses' } } },
+    });
+    addressesList.value = data.addresses;
+    formData.addressId = data.defaultAddressFk;
+    fetchAgencies(formData);
+}
+
+async function fetchAgencies({ landed, addressId }) {
+    if (!landed || !addressId) return (agencyList.value = []);
+
+    const { data } = await axios.get('Agencies/landsThatDay', {
+        params: { addressFk: addressId, landed },
+    });
+    agencyList.value = data;
 }
 </script>
 <template>
-    <VnSearchbar
-        data-key="OrderList"
-        :label="t('Search order')"
-        :info="t('You can search orders by reference')"
-    />
+    <OrderSearchbar />
+    <RightMenu>
+        <template #right-panel>
+            <OrderFilter data-key="OrderList" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="OrderList"
         url="Orders/filter"
+        :order="['landed DESC', 'clientFk ASC', 'id DESC']"
         :create="{
             urlCreate: 'Orders/new',
             title: 'Create Order',
@@ -152,36 +178,49 @@ async function fetchClientAddress(id, data) {
                 addressId: null,
             },
         }"
+        :user-params="{ showEmpty: false }"
+        :right-search="false"
         :columns="columns"
         redirect="order"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect
                 url="Clients"
-                v-model="data.id"
+                :include="{ relation: 'addresses' }"
+                v-model="clientId"
                 :label="t('module.customer')"
-                :options="clientList"
-                option-value="id"
-                option-label="name"
                 @update:model-value="(id) => fetchClientAddress(id, data)"
             />
             <VnSelect
-                url="Clients"
-                v-model="selectedAddress"
+                v-model="data.addressId"
+                :options="addressesList"
                 :label="t('module.address')"
-                :options="selectedAddress"
-                option-value="defaultAddressFk"
-                option-label="street"
+                option-value="id"
+                option-label="nickname"
+                @update:model-value="() => fetchAgencies(data)"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt?.nickname }}: {{ scope.opt?.street }},
+                                {{ scope.opt?.city }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <VnInputDate
+                v-model="data.landed"
+                :label="t('module.landed')"
+                @update:model-value="() => fetchAgencies(data)"
             />
-            <VnInputDate v-model="data.landed" :label="t('module.landed')" />
             <VnSelect
-                url="Agencies"
                 v-model="data.agencyModeId"
                 :label="t('module.agency')"
                 :options="agencyList"
-                option-value="id"
-                option-label="name"
+                option-value="agencyModeFk"
+                option-label="agencyMode"
             />
         </template>
     </VnTable>

src/pages/Order/OrderVolume.vue

@@ -1,156 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import CardList from 'components/ui/CardList.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-
-import { dashIfEmpty } from 'src/filters';
-import axios from 'axios';
-
-const route = useRoute();
-const { t } = useI18n();
-const volumeSummary = ref(null);
-
-const loadVolumes = async (rows) => {
-    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
-    (rows || []).forEach((order) => {
-        (data.volumes || []).forEach((volume) => {
-            if (order.itemFk === volume.itemFk) {
-                order.volume = volume.volume;
-            }
-        });
-    });
-};
-</script>
-
-<template>
-    <FetchData
-        :url="`Orders/${route.params.id}/getTotalVolume`"
-        @on-fetch="(data) => (volumeSummary = data)"
-        auto-load
-    />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <div
-                v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
-                class="no-result"
-            >
-                {{ t('globals.noResults') }}
-            </div>
-            <QCard v-else class="order-volume-summary q-pa-lg">
-                <p class="header text-right block">
-                    {{ t('summary') }}
-                </p>
-                <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
-                <VnLv
-                    :label="t('boxes')"
-                    :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
-                />
-            </QCard>
-            <VnPaginate
-                data-key="OrderCatalogVolume"
-                url="OrderRows"
-                :limit="20"
-                auto-load
-                :filter="{
-                    include: {
-                        relation: 'item',
-                    },
-                    where: { orderFk: route.params.id },
-                }"
-                order="itemFk"
-                @on-fetch="(data) => loadVolumes(data)"
-            >
-                <template #body="{ rows }">
-                    <div class="catalog-list q-mt-xl">
-                        <CardList
-                            v-for="row in rows"
-                            :key="row.id"
-                            :id="row.id"
-                            :title="row?.item?.name"
-                            class="cursor-inherit"
-                        >
-                            <template #list-items>
-                                <div class="q-mb-sm">
-                                    <FetchedTags :item="row.item" :max-length="5" />
-                                </div>
-                                <VnLv :label="t('item')" :value="row.item.id" />
-                                <VnLv :label="t('subName')">
-                                    <template #value>
-                                        <span class="text-uppercase">
-                                            {{ row.item.subName }}
-                                        </span>
-                                    </template>
-                                </VnLv>
-                                <VnLv :label="t('quantity')" :value="row.quantity" />
-                                <VnLv :label="t('volume')" :value="row.volume" />
-                            </template>
-                        </CardList>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<style lang="scss">
-.order-volume-summary {
-    .vn-label-value {
-        display: flex;
-        justify-content: flex-end;
-        gap: 2%;
-
-        .label {
-            color: var(--vn-label-color);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .value {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-}
-</style>
-<style lang="scss" scoped>
-.header {
-    color: $primary;
-    font-weight: bold;
-    margin-bottom: 25px;
-    font-size: 20px;
-    display: inline-block;
-}
-
-.no-result {
-    font-size: 24px;
-    font-weight: bold;
-    color: var(--vn-label-color);
-    text-align: center;
-}
-</style>
-<i18n>
-en:
-    summary: Summary
-    total: Total
-    boxes: Boxes
-    item: Item
-    subName: Subname
-    quantity: Quantity
-    volume: m³ per quantity
-es:
-    summary: Resumen
-    total: Total
-    boxes: Cajas
-    item: Artículo
-    subName: Subname
-    quantity: Cantidad
-    volume: m³ por cantidad
-</i18n>

src/pages/Shelving/Card/ShelvingFilter.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -15,25 +16,13 @@ const props = defineProps({
 const emit = defineEmits(['search']);
 
 const workers = ref();
-const parkings = ref();
 
 function setWorkers(data) {
     workers.value = data;
 }
-
-function setParkings(data) {
-    parkings.value = data;
-}
 </script>
 
 <template>
-    <FetchData
-        url="Parkings"
-        :filter="{ fields: ['id', 'code'] }"
-        sort-by="code ASC"
-        @on-fetch="setParkings"
-        auto-load
-    />
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
@@ -54,44 +43,36 @@ function setParkings(data) {
         </template>
         <template #body="{ params }">
             <QItem class="q-my-sm">
-                <QItemSection v-if="!parkings">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="parkings">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.parkingFk"
+                        url="Parkings"
+                        :fields="['id', 'code']"
+                        :label="t('params.parkingFk')"
+                        option-value="id"
+                        option-label="code"
+                        :filter-options="['id', 'code']"
                         dense
                         outlined
                         rounded
-                        :label="t('params.parkingFk')"
-                        v-model="params.parkingFk"
-                        :options="parkings"
-                        option-value="id"
-                        option-label="code"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
+                        sort-by="code ASC"
                     />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <QSelect
+                <QItemSection>
+                    <VnSelect
                         dense
                         outlined
                         rounded
                         :label="t('params.userFk')"
                         v-model="params.userFk"
-                        :options="workers"
+                        url="Workers/activeWithInheritedRole"
                         option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
+                        option-label="firstName"
+                        :where="{ role: 'salesPerson' }"
+                        sort-by="firstName ASC"
+                        :use-like="false"
                     />
                 </QItemSection>
             </QItem>

src/pages/Shelving/Card/ShelvingForm.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
 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';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -20,30 +19,6 @@ const defaultInitialData = {
     isRecyclable: false,
 };
 
-const parkingFilter = { fields: ['id', 'code'] };
-const parkingList = ref([]);
-const parkingListCopy = ref([]);
-
-const setParkingList = (data) => {
-    parkingList.value = data;
-    parkingListCopy.value = data;
-};
-
-const parkingSelectFilter = {
-    options: parkingList,
-    filterFn: (options, value) => {
-        const search = value.trim().toLowerCase();
-
-        if (!search || search === '') {
-            return parkingListCopy.value;
-        }
-
-        return options.value.filter((option) =>
-            option.code.toLowerCase().startsWith(search)
-        );
-    },
-};
-
 const shelvingFilter = {
     include: [
         {
@@ -68,12 +43,6 @@ const onSave = (shelving, newShelving) => {
 </script>
 <template>
     <VnSubToolbar />
-    <FetchData
-        url="Parkings"
-        :filter="parkingFilter"
-        @on-fetch="setParkingList"
-        auto-load
-    />
     <FormModel
         :url="isNew ? null : `Shelvings/${shelvingId}`"
         :url-create="isNew ? 'Shelvings' : null"
@@ -84,27 +53,22 @@ const onSave = (shelving, newShelving) => {
         :form-initial-data="defaultInitialData"
         @on-data-saved="onSave"
     >
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
                     v-model="data.code"
                     :label="t('shelving.basicData.code')"
                     :rules="validate('Shelving.code')"
                 />
-                <QSelect
+                <VnSelect
                     v-model="data.parkingFk"
-                    :options="parkingList"
+                    url="Parkings"
                     option-value="id"
                     option-label="code"
-                    emit-value
+                    :filter-options="['id', 'code']"
+                    :fields="['id', 'code']"
                     :label="t('shelving.basicData.parking')"
-                    map-options
-                    use-input
-                    @filter="
-                        (value, update) => filter(value, update, parkingSelectFilter)
-                    "
                     :rules="validate('Shelving.parkingFk')"
-                    :input-debounce="0"
                 />
             </VnRow>
             <VnRow>

src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue

@@ -30,7 +30,6 @@ const { t } = useI18n();
 const agencyFetchRef = ref(null);
 const zonesFetchRef = ref(null);
 
-const clientsOptions = ref([]);
 const warehousesOptions = ref([]);
 const companiesOptions = ref([]);
 const agenciesOptions = ref([]);
@@ -273,15 +272,6 @@ const redirectToCustomerAddress = () => {
 onMounted(() => onFormModelInit());
 </script>
 <template>
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id',
-        }"
-        @on-fetch="(data) => (clientsOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
@@ -317,7 +307,9 @@ onMounted(() => onFormModelInit());
                 v-model="clientId"
                 option-value="id"
                 option-label="name"
-                :options="clientsOptions"
+                url="Clients"
+                :fields="['id', 'name']"
+                sort-by="id"
                 hide-selected
                 map-options
                 :required="true"

src/pages/Ticket/Card/TicketCreateTracking.vue

@@ -17,9 +17,7 @@ const { t } = useI18n();
 const state = useState();
 const user = state.getUser();
 const stateFetchDataRef = ref(null);
-
 const statesOptions = ref([]);
-const workersOptions = ref([]);
 
 const onStateFkChange = (formData) => (formData.userFk = user.value.id);
 </script>
@@ -30,12 +28,6 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
         auto-load
         @on-fetch="(data) => (statesOptions = data)"
     />
-    <FetchData
-        url="Workers/search"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (workersOptions = data)"
-    />
     <FormModelPopup
         :title="t('Create tracking')"
         url-create="Tickets/state"
@@ -57,7 +49,9 @@ const onStateFkChange = (formData) => (formData.userFk = user.value.id);
                 <VnSelect
                     :label="t('tracking.worker')"
                     v-model="data.userFk"
-                    :options="workersOptions"
+                    url="Workers/search"
+                    fields=" ['id', 'name']"
+                    sort-by="name ASC"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/pages/Ticket/Card/TicketDescriptorMenu.vue

@@ -30,10 +30,13 @@ const actions = {
         let clonedTicketId;
 
         try {
-            const { data } = await axios.post(`Tickets/${ticketId}/clone`, {
+            const { data } = await axios.post(`Tickets/cloneAll`, {
                 shipped: ticket.value.shipped,
+                ticketsIds: [ticket.value.id],
+                withWarehouse: true,
+                negative: false,
             });
-            clonedTicketId = data;
+            clonedTicketId = data[0].id;
         } catch (e) {
             opts.message = t('It was not able to clone the ticket');
             opts.type = 'negative';

src/pages/Ticket/Card/TicketExpedition.vue

@@ -3,7 +3,6 @@ import { onMounted, ref, computed, onUnmounted, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketEditManaProxy from './TicketEditMana.vue';
@@ -35,7 +34,6 @@ const selectedExpeditions = ref([]);
 const allColumnNames = ref([]);
 const visibleColumns = ref([]);
 const newTicketWithRoute = ref(false);
-const itemsOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -139,7 +137,9 @@ const columns = computed(() => [
             filterValue: null,
             event: getInputEvents,
             attrs: {
-                options: itemsOptions.value,
+                url: 'Items',
+                fields: ['id', 'name'],
+                'sort-by': 'name ASC',
                 'option-value': 'id',
                 'option-label': 'name',
                 dense: true,
@@ -268,19 +268,12 @@ onMounted(async () => {
     stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter((col) => col.name !== 'history');
     allColumnNames.value = filteredColumns.map((col) => col.name);
-    // await expeditionsArrayData.fetch({ append: false });
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <FetchData
-        url="Items"
-        auto-load
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (itemsOptions = data)"
-    />
     <VnSubToolbar>
         <template #st-data>
             <TableVisibleColumns

src/pages/Ticket/Card/TicketSale.vue

@@ -11,7 +11,6 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketEditManaProxy from './TicketEditMana.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 
-import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
 import TicketTransfer from './TicketTransfer.vue';
@@ -39,7 +38,6 @@ const ticketConfig = ref(null);
 const isLocked = ref(false);
 const isTicketEditable = ref(false);
 const sales = ref([]);
-const itemsWithNameOptions = ref([]);
 const editableStatesOptions = ref([]);
 const selectedSales = ref([]);
 const mana = ref(null);
@@ -436,12 +434,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (isLocked = data)"
     />
-    <FetchData
-        url="Items/withName"
-        :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
-        auto-load
-        @on-fetch="(data) => (itemsWithNameOptions = data)"
-    />
     <FetchData
         url="States/editableStates"
         :filter="{ fields: ['code', 'name', 'id', 'alertLevel'], order: 'name ASC' }"
@@ -627,10 +619,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </div>
                 <VnSelect
                     v-else
-                    :options="itemsWithNameOptions"
                     hide-selected
                     option-label="name"
                     option-value="id"
+                    url="Items/withName"
+                    :fields="['id', 'name']"
+                    sort-by="id DESC"
                     @update:model-value="changeQuantity(row)"
                     v-model="row.itemFk"
                 >

src/pages/Ticket/Card/TicketSaleMoreActions.vue

@@ -153,14 +153,22 @@ const setReserved = async (reserved) => {
 };
 
 const createRefund = async (withWarehouse) => {
-    if (!props.sales) return;
+    if (!props.ticket) return;
 
-    const salesIds = props.sales.map((sale) => sale.id);
-    const params = { salesIds: salesIds, withWarehouse: withWarehouse, negative: true };
-    const { data } = await axios.post('Sales/clone', params);
-    const [refundTicket] = data;
-    notify(t('refundTicketCreated', { ticketId: refundTicket.id }), 'positive');
-    router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    const params = {
+        ticketsIds: [props.ticket.id],
+        withWarehouse: withWarehouse,
+        negative: true,
+    };
+
+    try {
+        const { data } = await axios.post('Tickets/cloneAll', params);
+        const [refundTicket] = data;
+        notify(t('refundTicketCreated', { ticketId: refundTicket.id }), 'positive');
+        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    } catch (error) {
+        console.error(error);
+    }
 };
 </script>
 
@@ -244,7 +252,7 @@ const createRefund = async (withWarehouse) => {
             </QItem>
             <QItem clickable v-ripple>
                 <QItemSection>
-                    <QItemLabel>{{ t('Refund...') }}</QItemLabel>
+                    <QItemLabel>{{ t('Refund') }}</QItemLabel>
                 </QItemSection>
                 <QItemSection side>
                     <QIcon name="keyboard_arrow_right" />
@@ -279,7 +287,7 @@ es:
     Add claim: Crear reclamación
     Mark as reserved: Marcar como reservado
     Unmark as reserved: Desmarcar como reservado
-    Refund...: Abono...
+    Refund: Abono
     with warehouse: con almacén
     without warehouse: sin almacén
     Claim out of time: Reclamación fuera de plazo

src/pages/Ticket/Card/TicketSaleTracking.vue

@@ -26,8 +26,6 @@ const saleTrackingFetchDataRef = ref(null);
 const sales = ref([]);
 const saleTrackings = ref([]);
 const itemShelvignsSales = ref([]);
-const shelvingsOptions = ref([]);
-const parkingsOptions = ref([]);
 const saleTrackingUrl = computed(() => `SaleTrackings/${route.params.id}/filter`);
 const oldQuantity = ref(null);
 
@@ -330,12 +328,6 @@ const qCheckBoxController = (sale, action) => {
         auto-load
         @on-fetch="(data) => (sales = data)"
     />
-    <FetchData
-        url="Shelvings"
-        auto-load
-        @on-fetch="(data) => (shelvingsOptions = data)"
-    />
-    <FetchData url="Parkings" auto-load @on-fetch="(data) => (parkingsOptions = data)" />
     <QTable
         :rows="sales"
         :columns="columns"
@@ -500,7 +492,7 @@ const qCheckBoxController = (sale, action) => {
             <template #body-cell-shelving="{ row }">
                 <QTd auto-width>
                     <VnSelect
-                        :options="shelvingsOptions"
+                        url="Shelvings"
                         hide-selected
                         option-label="code"
                         option-value="code"
@@ -513,7 +505,7 @@ const qCheckBoxController = (sale, action) => {
             <template #body-cell-parking="{ row }">
                 <QTd auto-width>
                     <VnSelect
-                        :options="parkingsOptions"
+                        url="Parkings"
                         hide-selected
                         option-label="code"
                         option-value="id"

src/pages/Ticket/TicketAdvance.vue

@@ -448,7 +448,7 @@ const handleCloseProgressDialog = () => {
 const handleCancelProgress = () => (cancelProgress.value = true);
 
 onMounted(async () => {
-    let today = Date.vnNew();
+    let today = Date.vnNew().toISOString();
     const tomorrow = new Date(today);
     tomorrow.setDate(tomorrow.getDate() + 1);
     userParams.dateFuture = tomorrow;

src/pages/Ticket/TicketAdvanceFilter.vue

@@ -55,7 +55,7 @@ onMounted(async () => await getItemPackingTypes());
         :data-key="props.dataKey"
         :search-button="true"
         :hidden-tags="['search']"
-        :unremovable-params="['warehouseFk', 'dateFuture', 'dateToAdvance']"
+        :un-removable-params="['warehouseFk', 'dateFuture', 'dateToAdvance']"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -70,7 +70,6 @@ onMounted(async () => await getItemPackingTypes());
                         v-model="params.dateFuture"
                         :label="t('params.dateFuture')"
                         is-outlined
-                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -80,7 +79,6 @@ onMounted(async () => await getItemPackingTypes());
                         v-model="params.dateToAdvance"
                         :label="t('params.dateToAdvance')"
                         is-outlined
-                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>

src/pages/Ticket/TicketFuture.vue

@@ -8,6 +8,8 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import TicketFutureFilter from './TicketFutureFilter.vue';
 
 import { dashIfEmpty, toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -37,9 +39,9 @@ const exprBuilder = (param, value) => {
             return { liters: value };
         case 'lines':
             return { lines: value };
-        case 'ipt':
+        case 'iptColFilter':
             return { ipt: { like: `%${value}%` } };
-        case 'futureIpt':
+        case 'futureIptColFilter':
             return { futureIpt: { like: `%${value}%` } };
         case 'totalWithVat':
             return { totalWithVat: value };
@@ -47,8 +49,8 @@ const exprBuilder = (param, value) => {
 };
 
 const userParams = reactive({
-    futureDated: Date.vnNew(),
-    originDated: Date.vnNew(),
+    futureDated: Date.vnNew().toISOString(),
+    originDated: Date.vnNew().toISOString(),
     warehouseFk: user.value.warehouseFk,
 });
 
@@ -83,6 +85,8 @@ const getInputEvents = (col) => {
           };
 };
 
+const tickets = computed(() => store.data);
+
 const ticketColumns = computed(() => [
     {
         label: t('futureTickets.problems'),
@@ -121,7 +125,7 @@ const ticketColumns = computed(() => [
         sortable: true,
         columnFilter: {
             component: VnSelect,
-            filterParamKey: 'ipt',
+            filterParamKey: 'iptColFilter',
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -214,7 +218,7 @@ const ticketColumns = computed(() => [
         sortable: true,
         columnFilter: {
             component: VnSelect,
-            filterParamKey: 'futureIpt',
+            filterParamKey: 'futureIptColFilter',
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -305,9 +309,14 @@ onMounted(async () => {
             </QBtn>
         </template>
     </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
+            <TicketFutureFilter data-key="FutureTickets" />
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
-            :rows="store.data"
+            :rows="tickets"
             :columns="ticketColumns"
             row-key="id"
             selection="multiple"

src/pages/Ticket/TicketFutureFilter.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import axios from 'axios';
+import { onMounted } from 'vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const warehousesOptions = ref([]);
+const itemPackingTypes = ref([]);
+const stateOptions = ref([]);
+
+const getItemPackingTypes = async () => {
+    try {
+        const filter = {
+            where: { isActive: true },
+        };
+        const { data } = await axios.get('ItemPackingTypes', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        itemPackingTypes.value = data.map((ipt) => ({
+            description: t(ipt.description),
+            code: ipt.code,
+        }));
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getGroupedStates = async () => {
+    try {
+        const { data } = await axios.get('AlertLevels');
+        stateOptions.value = data.map((state) => ({
+            id: state.id,
+            name: t(`futureTickets.${state.code}`),
+            code: state.code,
+        }));
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(async () => {
+    getItemPackingTypes();
+    getGroupedStates();
+});
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :hidden-tags="['search']"
+        :un-removable-params="['warehouseFk', 'originDated', 'futureDated']"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.originDated"
+                        :label="t('params.originDated')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.futureDated"
+                        :label="t('params.futureDated')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.litersMax')"
+                        v-model="params.litersMax"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.linesMax')"
+                        v-model="params.linesMax"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.ipt')"
+                        v-model="params.ipt"
+                        :options="itemPackingTypes"
+                        option-value="code"
+                        option-label="description"
+                        :info="t('iptInfo')"
+                        @update:model-value="searchFn()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.futureIpt')"
+                        v-model="params.futureIpt"
+                        :options="itemPackingTypes"
+                        option-value="code"
+                        option-label="description"
+                        :info="t('iptInfo')"
+                        @update:model-value="searchFn()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.state')"
+                        v-model="params.state"
+                        :options="stateOptions"
+                        option-value="code"
+                        option-label="name"
+                        @update:model-value="searchFn()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.futureState')"
+                        v-model="params.futureState"
+                        :options="stateOptions"
+                        option-value="code"
+                        option-label="name"
+                        @update:model-value="searchFn()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.problems')"
+                        v-model="params.problems"
+                        :toggle-indeterminate="false"
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.warehouseFk')"
+                        v-model="params.warehouseFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        @update:model-value="searchFn()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    iptInfo: IPT
+    params:
+        originDated: Origin date
+        futureDated: Destination date
+        futureIpt: Destination IPT
+        ipt: Origin IPT
+        warehouseFk: Warehouse
+        litersMax: Max liters
+        linesMax: Max lines
+        state: Origin grouped state
+        futureState: Destination grouped state
+        problems: With problems
+es:
+    Horizontal: Horizontal
+    Vertical: Vertical
+    iptInfo: Encajado
+    params:
+        originDated: Fecha origen
+        futureDated: Fecha destino
+        futureIpt: IPT destino
+        ipt: IPT Origen
+        warehouseFk: Almacén
+        litersMax: Litros máx.
+        linesMax: Líneas máx.
+        state: Estado agrupado origen
+        futureState: Estado agrupado destino
+        problems: Con problemas
+</i18n>

src/pages/Ticket/locale/en.yml

@@ -93,6 +93,11 @@ futureTickets:
     moveTicketSuccess: Tickets moved successfully!
     searchInfo: Search future tickets by date
     futureTicket: Future tickets
+    FREE: Free
+    ON_PREVIOUS: ON_PREVIOUS
+    ON_PREPARATION: On preparation
+    PACKED: Packed
+    DELIVERED: Delivered
 expedition:
     id: Expedition
     item: Item

src/pages/Ticket/locale/es.yml

@@ -140,6 +140,11 @@ futureTickets:
     moveTicketSuccess: Tickets movidos correctamente
     searchInfo: Buscar tickets por fecha
     futureTicket: Tickets a futuro
+    FREE: Libre
+    ON_PREVIOUS: ON_PREVIOUS
+    ON_PREPARATION: En preparación
+    PACKED: Encajado
+    DELIVERED: Servido
 ticketSale:
     id: Id
     visible: Visible

src/pages/Travel/ExtraCommunityFilter.vue

@@ -20,7 +20,6 @@ const props = defineProps({
 const warehousesOptions = ref([]);
 const continentsOptions = ref([]);
 const agenciesOptions = ref([]);
-const suppliersOptions = ref([]);
 const warehousesByContinent = ref({});
 
 const add = (paramsObj, key) => {
@@ -76,12 +75,6 @@ warehouses();
         @on-fetch="(data) => (agenciesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Suppliers"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
@@ -220,7 +213,7 @@ warehouses();
                     <VnSelect
                         :label="t('globals.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
-                        :options="suppliersOptions"
+                        url="Suppliers"
                         option-value="id"
                         option-label="name"
                         hide-selected

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnImg from 'src/components/ui/VnImg.vue';
+import EditPictureForm from 'components/EditPictureForm.vue';
 
 const $props = defineProps({
     id: {
@@ -18,6 +19,7 @@ const $props = defineProps({
         default: null,
     },
 });
+const image = ref(null);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -25,6 +27,10 @@ const state = useState();
 const user = state.getUser();
 const changePasswordFormDialog = ref(null);
 const cardDescriptorRef = ref(null);
+const showEditPhotoForm = ref(false);
+const toggleEditPictureForm = () => {
+    showEditPhotoForm.value = !showEditPhotoForm.value;
+};
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -99,7 +105,9 @@ const handleExcluded = async () => {
 
     workerExcluded.value = !workerExcluded.value;
 };
-
+const handlePhotoUpdated = (evt = false) => {
+    image.value.reload(evt);
+};
 const refetch = async () => await cardDescriptorRef.value.getData();
 </script>
 <template>
@@ -144,27 +152,49 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             </QItem>
         </template>
         <template #before>
-            <VnImg
-                :id="parseInt(entityId)"
-                collection="user"
-                resolution="520x520"
-                class="photo"
-            >
-                <template #error>
-                    <div
-                        class="absolute-full picture text-center q-pa-md flex flex-center"
-                    >
-                        <div>
-                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
-                                <QIcon name="vn:claims" />
-                            </div>
-                            <div class="text-grey-5" style="opacity: 0.4">
-                                {{ t('worker.imageNotFound') }}
+            <div class="relative-position">
+                <VnImg
+                    ref="image"
+                    :id="parseInt(entityId)"
+                    collection="user"
+                    resolution="520x520"
+                    class="photo"
+                >
+                    <template #error>
+                        <div
+                            class="absolute-full picture text-center q-pa-md flex flex-center"
+                        >
+                            <div>
+                                <div
+                                    class="text-grey-5"
+                                    style="opacity: 0.4; font-size: 5vh"
+                                >
+                                    <QIcon name="vn:claims" />
+                                </div>
+                                <div class="text-grey-5" style="opacity: 0.4">
+                                    {{ t('worker.imageNotFound') }}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </template>
-            </VnImg>
+                    </template> </VnImg
+                ><QBtn
+                    color="primary"
+                    size="lg"
+                    round
+                    class="edit-photo-btn"
+                    @click="toggleEditPictureForm()"
+                >
+                    <QIcon name="edit" size="sm" />
+                    <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
+                        <EditPictureForm
+                            collection="user"
+                            :id="entityId"
+                            @close-form="toggleEditPictureForm()"
+                            @on-photo-uploaded="handlePhotoUpdated"
+                        />
+                    </QDialog>
+                </QBtn>
+            </div>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />

src/pages/Zone/Card/ZoneCard.vue

@@ -10,11 +10,6 @@ const { t } = useI18n();
 const route = useRoute();
 
 const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    if (routeName.value === 'ZoneLocations') return null;
-    return routeName.value;
-});
-const searchbarMakeFetch = computed(() => routeName.value !== 'ZoneEvents');
 const searchBarDataKeys = {
     ZoneWarehouses: 'ZoneWarehouses',
     ZoneSummary: 'ZoneSummary',

src/router/index.js

@@ -46,7 +46,7 @@ export { Router };
 export default route(function (/* { store, ssrContext } */) {
     Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
-        const outLayout = ['Login', 'TwoFactor', 'VerifyEmail'];
+        const outLayout = Router.options.routes[0].children.map((r) => r.name);
         if (!isLoggedIn() && !outLayout.includes(to.name)) {
             return next({ name: 'Login', query: { redirect: to.fullPath } });
         }

src/router/modules/account.js

@@ -65,13 +65,13 @@ export default {
                     component: () => import('src/pages/Account/AccountAliasList.vue'),
                 },
                 {
-                    path: 'connections',
-                    name: 'AccountConnections',
+                    path: 'acls',
+                    name: 'AccountAcls',
                     meta: {
-                        title: 'connections',
+                        title: 'acls',
                         icon: 'check',
                     },
-                    component: () => import('src/pages/Account/AccountConnections.vue'),
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
                 },
                 {
                     path: 'accounts',
@@ -104,13 +104,13 @@ export default {
                     component: () => import('src/pages/Account/AccountSamba.vue'),
                 },
                 {
-                    path: 'acls',
-                    name: 'AccountAcls',
+                    path: 'connections',
+                    name: 'AccountConnections',
                     meta: {
-                        title: 'acls',
-                        icon: 'check',
+                        title: 'connections',
+                        icon: 'share',
                     },
-                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                    component: () => import('src/pages/Account/AccountConnections.vue'),
                 },
                 {
                     path: 'acl-form',

src/router/modules/order.js

@@ -63,7 +63,7 @@ export default {
                         title: 'basicData',
                         icon: 'vn:settings',
                     },
-                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                    component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
                 },
                 {
                     name: 'OrderCatalog',
@@ -72,7 +72,7 @@ export default {
                         title: 'catalog',
                         icon: 'vn:basket',
                     },
-                    component: () => import('src/pages/Order/OrderCatalog.vue'),
+                    component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
                 },
                 {
                     name: 'OrderVolume',
@@ -81,7 +81,7 @@ export default {
                         title: 'volume',
                         icon: 'vn:volume',
                     },
-                    component: () => import('src/pages/Order/OrderVolume.vue'),
+                    component: () => import('src/pages/Order/Card/OrderVolume.vue'),
                 },
                 {
                     name: 'OrderLines',
@@ -90,7 +90,7 @@ export default {
                         title: 'lines',
                         icon: 'vn:lines',
                     },
-                    component: () => import('src/pages/Order/OrderLines.vue'),
+                    component: () => import('src/pages/Order/Card/OrderLines.vue'),
                 },
             ],
         },

src/router/routes.js

@@ -46,6 +46,18 @@ const routes = [
                 meta: { title: 'verifyEmail' },
                 component: () => import('../pages/Login/VerifyEmail.vue'),
             },
+            {
+                path: '/recoverPassword',
+                name: 'RecoverPassword',
+                meta: { title: 'recoverPassword' },
+                component: () => import('../pages/Login/RecoverPassword.vue'),
+            },
+            {
+                path: '/resetPassword',
+                name: 'ResetPassword',
+                meta: { title: 'resetPassword' },
+                component: () => import('../pages/Login/ResetPassword.vue'),
+            },
         ],
     },
     {

src/stores/invoiceOutGlobal.js

@@ -19,6 +19,7 @@ export const useInvoiceOutGlobalStore = defineStore({
             maxShipped: null,
             clientId: null,
             printer: null,
+            serialType: null,
         },
         addresses: [],
         minInvoicingDate: null,
@@ -100,6 +101,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                     maxShipped: new Date(formData.maxShipped),
                     clientId: formData.clientId ? formData.clientId : null,
                     companyFk: formData.companyFk,
+                    serialType: formData.serialType,
                 };
 
                 this.validateMakeInvoceParams(params, clientsToInvoice);
@@ -152,7 +154,13 @@ export const useInvoiceOutGlobalStore = defineStore({
                 );
                 throw new Error('Invoice date in the future');
             }
-
+            if (!params.serialType) {
+                notify(
+                    'invoiceOut.globalInvoices.errors.chooseValidSerialType',
+                    'negative'
+                );
+                throw new Error('Invalid Serial Type');
+            }
             if (!params.companyFk) {
                 notify('invoiceOut.globalInvoices.errors.chooseValidCompany', 'negative');
                 throw new Error('Invalid company');
@@ -180,6 +188,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                     invoiceDate: new Date(formData.invoiceDate),
                     maxShipped: new Date(formData.maxShipped),
                     companyFk: formData.companyFk,
+                    serialType: formData.serialType,
                 };
 
                 this.status = 'invoicing';
@@ -191,12 +200,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                 this.addressIndex++;
                 this.isInvoicing = false;
             } catch (err) {
-                if (
-                    err &&
-                    err.response &&
-                    err.response.status >= 400 &&
-                    err.response.status < 500
-                ) {
+                if (err?.response?.status >= 400 && err?.response?.status < 500) {
                     this.invoiceClientError(address, err.response?.data?.error?.message);
                     return;
                 } else {
@@ -243,7 +247,7 @@ export const useInvoiceOutGlobalStore = defineStore({
                     params,
                 });
 
-                if (data.data && data.data.error) throw new Error();
+                if (data?.data?.error) throw new Error();
 
                 const status = exportFile('negativeBases.csv', data, {
                     encoding: 'windows-1252',

test/cypress/integration/outLogin/recoverPassword.spec.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+describe('Recover Password', () => {
+    const username = 'trainee';
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should go to recover password section and send notification', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get(`a[href="#/recoverPassword?user=${username}"]`).click();
+
+        cy.waitForElement('input[aria-label="User or recovery email"]');
+        cy.get('input[aria-label="User or recovery email"]').should(
+            'have.value',
+            username
+        );
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Notification sent');
+    });
+
+    it('should change password to user', () => {
+        // Get token from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const regex = /access_token=([a-zA-Z0-9]+)/;
+            const [match] = response.body[0].body.match(regex);
+
+            const resetUrl = '/#/resetPassword?' + match;
+            cy.visit(resetUrl);
+        });
+
+        // Change password
+        const newPassword = 'test.1234';
+        cy.waitForElement('input[aria-label="Password"]');
+        cy.waitForElement('input[aria-label="Repeat password"]');
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('input[aria-label="Repeat password"]').type(newPassword);
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Password changed');
+
+        // Try to login successfully
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/dashboard');
+
+        // ❗The password cannot be returned because "nightmare" does not meet the requirements
+    });
+});

test/cypress/integration/outLogin/twoFactor.spec.js

@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+describe('Two Factor', () => {
+    const username = 'sysadmin';
+    const userId = 66;
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should enable two factor to sysadmin', () => {
+        cy.request(
+            'PATCH',
+            `http://localhost:3000/api/VnUsers/${userId}/update-user?access_token=DEFAULT_TOKEN`,
+            { twoFactor: 'email' }
+        );
+    });
+
+    it('should fail when login with incorrect two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        cy.get('input[type="text"]').type('123456');
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/twoFactor');
+    });
+
+    it('should login with correct two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        // Get code from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = response.body[0].body;
+            const codeElement = tempDiv.querySelector('.code');
+            const code = codeElement ? codeElement.textContent.trim() : null;
+
+            cy.get('input[type="text"]').type(code);
+            cy.get('button[type="submit"]').click();
+            cy.url().should('contain', '/dashboard');
+        });
+    });
+});

test/cypress/integration/ticket/ticketDescriptor.spec.js

@@ -16,7 +16,7 @@ describe('Ticket descriptor', () => {
         cy.openActionsDescriptor();
         cy.get(toCloneOpt).click();
         cy.clickConfirm();
-        cy.get(warehouseValue).contains('-');
+        cy.get(warehouseValue).contains('Warehouse One');
         cy.get(summaryHeader)
             .invoke('text')
             .then((text) => {

test/vitest/__tests__/pages/Login/Login.spec.js

@@ -44,10 +44,6 @@ describe('Login', () => {
 
     it('should not set the token into session if any error occurred', async () => {
         vi.spyOn(axios, 'post').mockReturnValue({ data: null });
-        vi.spyOn(vm.quasar, 'notify');
-
         await vm.onSubmit();
-
-        expect(vm.quasar.notify).not.toHaveBeenCalled();
     });
 });