Se mergea la rama inicial

src/i18n/en/index.js

@@ -111,6 +111,7 @@ export default {
             customers: 'Customers',
             list: 'List',
             webPayments: 'Web Payments',
+            extendedList: 'Extended list',
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',

src/i18n/es/index.js

@@ -111,6 +111,7 @@ export default {
             customers: 'Clientes',
             list: 'Listado',
             webPayments: 'Pagos Web',
+            extendedList: 'Listado extendido',
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',

src/pages/Customer/CustomerExtendedListFilter.vue

@@ -0,0 +1,153 @@
+<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 VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const clients = ref();
+const workers = ref();
+</script>
+
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{ where: { role: 'socialName' } }"
+        @on-fetch="(data) => (clients = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <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 }">
+            <QList dense class="list">
+                <QItem class="q-mb-sm q-mt-sm">
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Identifier')"
+                            v-model="params.identifier"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!clients">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="clients">
+                        <VnSelectFilter
+                            :label="t('Social name')"
+                            v-model="params.socialName"
+                            @update:model-value="searchFn()"
+                            :options="clients"
+                            option-value="socialName"
+                            option-label="socialName"
+                            emit-value
+                            map-options
+                            use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection v-if="!workers">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="workers">
+                        <VnSelectFilter
+                            :label="t('Salesperson')"
+                            v-model="params.salesPerson"
+                            @update:model-value="searchFn()"
+                            :options="workers"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                            :input-debounce="0"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined />
+                    </QItemSection>
+                </QItem>
+
+                <QSeparator />
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        identifier: Identifier
+        socialName: Social name
+        salesPerson: Salesperson
+        phone: Phone
+        city: City
+        email: Email
+es:
+    params:
+        identifier: Identificador
+        socialName: Razón social
+        salesPerson: Comercial
+        phone: Teléfono
+        city: Población
+        email: Email
+    Identifier: Identificador
+    Social name: Razón social
+    Salesperson: Comercial
+    Phone: Teléfono
+    City: Población
+    Email: Email
+</i18n>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -154,7 +154,7 @@ function viewSummary(id) {
             </VnPaginate>
         </div>
     </QPage>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
+    <QPageSticky position="bottom-right" :offset="[20, 20]">
         <QBtn
             color="primary"
             icon="add"

src/router/modules/customer.js

@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'CustomerMain' },
     menus: {
-        main: ['CustomerList', 'CustomerPayments'],
+        main: ['CustomerList', 'CustomerPayments', 'CustomerExtendedList'],
         card: ['CustomerBasicData'],
     },
     children: [
@@ -46,6 +46,16 @@ export default {
                     },
                     component: () => import('src/pages/Customer/CustomerPayments.vue'),
                 },
+                {
+                    path: 'extendedList',
+                    name: 'CustomerExtendedList',
+                    meta: {
+                        title: 'extendedList',
+                        icon: 'vn:client',
+                    },
+                    component: () =>
+                        import('src/pages/Customer/CustomerExtendedList.vue'),
+                },
             ],
         },
         {