feat: refs #6900 use VnTable & sort filter fields

src/components/VnTable/VnColumn.vue

@@ -151,7 +151,7 @@ const col = computed(() => {
         };
     }
     if (
-        (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
+        (/^is[A-Z]/.test(newColumn.name) || /^has[A-Z]/.test(newColumn.name)) &&
         newColumn.component == null
     )
         newColumn.component = 'checkbox';

src/i18n/locale/en.yml

@@ -262,6 +262,7 @@ globals:
     unsavedPopup:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?
+    createInvoiceIn: Create invoice in
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -264,6 +264,8 @@ globals:
     unsavedPopup:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?
+    createInvoiceIn: Crear factura recibida
+
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/InvoiceIn/InvoiceInCreate.vue

@@ -26,8 +26,7 @@ const newInvoiceIn = reactive({
     companyFk: user.value.companyFk || null,
     issued: Date.vnNew(),
 });
-const suppliersOptions = ref([]);
+const companies = ref([]);
-const companiesOptions = ref([]);
 
 const redirectToInvoiceInBasicData = (__, { id }) => {
     router.push({ name: 'InvoiceInBasicData', params: { id } });
@@ -35,19 +34,12 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         ref="companiesRef"
         url="Companies"
         :filter="{ fields: ['id', 'code'] }"
         order="code"
-        @on-fetch="(data) => (companiesOptions = data)"
+        @on-fetch="(data) => (companies = data)"
         auto-load
     />
     <template v-if="stateStore.isHeaderMounted()">
@@ -69,9 +61,10 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
             <template #form="{ data, validate }">
                 <VnRow>
                     <VnSelect
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
                         :label="t('Supplier')"
                         v-model="data.supplierFk"
-                        :options="suppliersOptions"
                         option-value="id"
                         option-label="nickname"
                         hide-selected
@@ -98,7 +91,7 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
                     <VnSelect
                         :label="t('Company')"
                         v-model="data.companyFk"
-                        :options="companiesOptions"
+                        :options="companies"
                         option-value="id"
                         option-label="code"
                         map-options

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -28,6 +28,22 @@ const activities = ref([]);
             </div>
         </template>
         <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.supplierFk"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        :label="t('params.supplierFk')"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        :filter-options="['id', 'name']"
+                    />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -50,17 +66,30 @@ const activities = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnInput
-                        v-model="params.supplierFk"
+                        :label="t('params.serialNumber')"
-                        url="Suppliers"
+                        v-model="params.serialNumber"
-                        :fields="['id', 'nickname']"
+                        is-outlined
-                        :label="t('params.supplierFk')"
+                        lazy-rules
-                        option-value="id"
+                    />
-                        option-label="nickname"
+                </QItemSection>
-                        dense
+            </QItem>
-                        outlined
+            <QItem>
-                        rounded
+                <QItemSection>
-                        :filter-options="['id', 'name']"
+                    <VnInput
+                        :label="t('params.serial')"
+                        v-model="params.serial"
+                        is-outlined
+                        lazy-rules
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('Issued')"
+                        v-model="params.issued"
+                        is-outlined
                     />
                 </QItemSection>
             </QItem>
@@ -76,40 +105,17 @@ const activities = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnCurrency v-model="params.amount" is-outlined />
+                    <VnInput
-                </QItemSection>
+                        :label="t('params.awb')"
-            </QItem>
+                        v-model="params.awbCode"
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('Issued')"
-                        v-model="params.issued"
                         is-outlined
+                        lazy-rules
                     />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnCurrency v-model="params.amount" is-outlined />
-                        :label="t('params.supplierActivityFk')"
-                        v-model="params.supplierActivityFk"
-                        dense
-                        outlined
-                        rounded
-                        option-value="code"
-                        option-label="name"
-                        :options="activities"
-                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -133,32 +139,16 @@ const activities = ref([]);
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <VnInputDate
-                            :label="t('params.serialNumber')"
+                            :label="t('From')"
-                            v-model="params.serialNumber"
+                            v-model="params.from"
                             is-outlined
-                            lazy-rules
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                            :label="t('params.serial')"
-                            v-model="params.serial"
-                            is-outlined
-                            lazy-rules
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.awb')"
-                            v-model="params.awbCode"
-                            is-outlined
-                            lazy-rules
-                        />
                     </QItemSection>
                 </QItem>
             </QExpansionItem>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,18 +1,19 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 
 const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
@@ -20,8 +21,91 @@ const { t } = useI18n();
 
 onMounted(async () => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
-</script>
 
+const tableRef = ref();
+const cols = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: 'Id',
+    },
+    {
+        align: 'left',
+        name: 'supplierFk',
+        label: t('invoiceIn.list.supplier'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Suppliers',
+                fields: ['id', 'name'],
+            },
+        },
+        columnClass: 'expand',
+    },
+    {
+        align: 'left',
+        name: 'supplierRef',
+        label: t('invoiceIn.list.supplierRef'),
+    },
+
+    {
+        align: 'left',
+        name: 'serialNumber',
+        label: t('invoiceIn.list.serialNumber'),
+    },
+    {
+        align: 'left',
+        name: 'serial',
+        label: t('invoiceIn.list.serial'),
+    },
+    {
+        align: 'left',
+        label: t('invoiceIn.list.issued'),
+        name: 'issued',
+        component: null,
+        columnFilter: {
+            component: 'date',
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
+    },
+    {
+        align: 'left',
+        name: 'isBooked',
+        label: t('invoiceIn.list.isBooked'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'awbCode',
+        label: t('invoiceIn.list.awb'),
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceIn.list.amount'),
+        format: ({ amount }) => toCurrency(amount),
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.openSummary'),
+                icon: 'preview',
+                type: 'submit',
+                action: (row) => viewSummary(row.id, InvoiceInSummary),
+            },
+            {
+                title: t('globals.download'),
+                icon: 'download',
+                type: 'submit',
+                isPrimary: true,
+                action: (row) => downloadFile(row.dmsFk),
+            },
+        ],
+    },
+]);
+</script>
 <template>
     <InvoiceInSearchbar />
     <RightMenu>
@@ -29,92 +113,62 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <InvoiceInFilter data-key="InvoiceInList" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="tableRef"
-            <VnPaginate
         data-key="InvoiceInList"
         url="InvoiceIns/filter"
-                order="issued DESC, id DESC"
+        :order="['issued DESC', 'id DESC']"
-                auto-load
+        redirect="invoice-in"
+        :columns="cols"
+        :right-search="false"
+        :create="{
+            urlCreate: 'InvoiceIns',
+            title: t('globals.createInvoiceIn'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
+        }"
+        :disable-option="{ card: true }"
     >
-                <template #body="{ rows }">
+        <template #column-supplierFk="{ row }">
-                    <CardList
+            <span class="link" @click.stop>
-                        v-for="(row, index) of rows"
-                        :key="index"
-                        :title="row.supplierRef"
-                        @click="$router.push({ path: `/invoice-in/${row.id}` })"
-                        :id="row.id"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('invoiceIn.list.supplierRef')"
-                                :value="row.supplierRef"
-                            />
-                            <VnLv
-                                :label="t('invoiceIn.list.supplier')"
-                                :value="row.supplierName"
-                                @click.stop
-                            >
-                                <template #value>
-                                    <span class="link">
                 {{ row.supplierName }}
                 <SupplierDescriptorProxy :id="row.supplierFk" />
             </span>
         </template>
-                            </VnLv>
+        <template #more-create-dialog="{ data }">
-                            <VnLv
+            <VnSelect
-                                :label="t('invoiceIn.list.serialNumber')"
+                v-model="data.supplierFk"
-                                :value="row.serialNumber"
+                url="Suppliers"
-                            />
+                :fields="['id', 'nickname']"
-                            <VnLv
+                :label="t('Supplier')"
-                                :label="t('invoiceIn.list.serial')"
+                option-value="id"
-                                :value="row.serial"
+                option-label="nickname"
-                            />
+                :filter-options="['id', 'name']"
-                            <VnLv
+                :required="true"
-                                :label="t('invoiceIn.list.issued')"
+            >
-                                :value="toDate(row.issued)"
+                <template #option="scope">
-                            />
+                    <QItem v-bind="scope.itemProps">
-                            <VnLv :label="t('invoiceIn.list.awb')" :value="row.awbCode" />
+                        <QItemSection>
-                            <VnLv
+                            <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                :label="t('invoiceIn.list.amount')"
+                            <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
-                                :value="toCurrency(row.amount)"
+                        </QItemSection>
-                            />
+                    </QItem>
-                            <VnLv
-                                :label="t('invoiceIn.list.isBooked')"
-                                :value="!!row.isBooked"
-                            />
                 </template>
-                        <template #actions>
+            </VnSelect>
-                            <QBtn
+            <VnInput
-                                :label="t('components.smartCard.openCard')"
+                :label="t('invoiceIn.summary.supplierRef')"
-                                @click.stop="
+                v-model="data.supplierRef"
-                                    $router.push({ path: `/invoice-in/${row.id}` })
-                                "
-                                outline
-                                type="reset"
             />
-
+            <VnSelect
-                            <QBtn
+                url="Companies"
-                                :label="t('components.smartCard.openSummary')"
+                :label="t('Company')"
-                                @click.stop="viewSummary(row.id, InvoiceInSummary)"
+                :fields="['id', 'code']"
-                                color="primary"
+                v-model="data.companyFk"
-                                type="submit"
+                option-value="id"
-                                class="q-mt-sm"
+                option-label="code"
-                            />
+                :required="true"
-                            <QBtn
-                                :label="t('globals.download')"
-                                class="q-mt-sm"
-                                @click.stop="downloadFile(row.dmsFk)"
-                                type="submit"
-                                color="primary"
             />
+            <VnInputDate :label="t('invoiceIn.summary.issued')" v-model="data.issued" />
         </template>
-                    </CardList>
+    </VnTable>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-    <QPageSticky position="bottom-right" :offset="[20, 20]">
-        <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
-    </QPageSticky>
 </template>

src/pages/Route/RouteAutonomous.vue

@@ -214,7 +214,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 @click="openDmsUploadDialog"
             >
                 <QTooltip>
-                    {{ t('Create invoiceIn') }}
+                    {{ t('globals.createInvoiceIn') }}
                 </QTooltip>
             </QBtn>
         </QCard>
@@ -267,7 +267,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 es:
     Search autonomous: Buscar autónomos
     You can search by autonomous reference: Puedes buscar por referencia del autónomo
-    Create invoiceIn: Crear factura recibida
     Two autonomous cannot be counted at the same time: Dos autonónomos no pueden ser contabilizados al mismo tiempo
     Date: Fecha
     Agency route: Agencia Ruta

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -177,7 +177,7 @@ const getEntryQueryParams = (supplier) => {
                     icon="vn:invoice-in-create"
                     color="primary"
                 >
-                    <QTooltip>{{ t('Create invoiceIn') }}</QTooltip>
+                    <QTooltip>{{ t('globals.createInvoiceIn') }}</QTooltip>
                 </QBtn>
             </QCardActions>
         </template>
@@ -188,7 +188,6 @@ const getEntryQueryParams = (supplier) => {
 es:
     All entries with current supplier: Todas las entradas con proveedor actual
     Go to client: Ir a cliente
-    Create invoiceIn: Crear factura recibida
     Go to module index: Ir al índice del módulo
     Inactive supplier: Proveedor inactivo
     Unverified supplier: Proveedor no verificado