Se crea tabla y filtros de extended list

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/CustomerExtendedList.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+
+import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+
+    stateStore.rightDrawer = true;
+});
+
+const rows = computed(() => arrayData.value.store.data);
+
+const tableColumnComponents = {
+    id: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    socialName: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    salesPerson: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = ref([
+    {
+        align: 'left',
+        field: 'id',
+        label: 'Identifier',
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'socialName',
+        label: 'Social name',
+        name: 'socialName',
+    },
+    {
+        align: 'left',
+        field: 'salesPerson',
+        label: 'Salesperson',
+        name: 'salesPerson',
+    },
+    {
+        align: 'left',
+        field: 'phone',
+        label: 'Phone',
+        name: 'phone',
+    },
+    {
+        align: 'left',
+        field: 'city',
+        label: 'City',
+        name: 'city',
+    },
+    {
+        align: 'left',
+        field: 'email',
+        label: 'Email',
+        name: 'email',
+    },
+]);
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerExtendedListFilter data-key="CustomerExtendedList" />
+        </QScrollArea>
+    </QDrawer>
+
+    <QToolbar class="bg-vn-dark">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :rows="rows"
+            hide-bottom
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        {{ props.value }}
+                    </component>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px 6px 6px 6px;
+}
+</style>

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="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 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'),
+                },
             ],
         },
         {