src/i18n/locale/en.yml

@@ -1015,6 +1015,14 @@ supplier:
         payDay: Pay day
         account: Account
         newSupplier: New supplier
+        tableVisibleColumns:
+            id: Id
+            name: Name
+            nif: NIF/CIF
+            nickname: Alias
+            account: Account
+            payMethod: Pay Method
+            payDay: Pay Day
     summary:
         responsible: Responsible
         notes: Notes

src/i18n/locale/es.yml

@@ -1000,6 +1000,14 @@ supplier:
         payDay: Día de pago
         account: Cuenta
         newSupplier: Nuevo proveedor
+        tableVisibleColumns:
+            id: Id
+            name: Nombre
+            nif: NIF/CIF
+            nickname: Alias
+            account: Cuenta
+            payMethod: Método de pago
+            payDay: Dia de pago
     summary:
         responsible: Responsable
         notes: Notas

src/pages/Supplier/SupplierList.vue

@@ -1,85 +1,92 @@
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import SupplierSummary from './Card/SupplierSummary.vue';
 import SupplierListFilter from './SupplierListFilter.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RightMenu from 'src/components/common/RightMenu.vue';
 
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
 
-function navigate(id) {
+const columns = computed(() => [
-    router.push({ path: `/supplier/${id}` });
+    {
-}
+        align: 'left',
-
+        label: t('supplier.list.tableVisibleColumns.id'),
-const redirectToCreateView = () => {
+        name: 'id',
-    router.push({ name: 'SupplierCreate' });
+        isTitle: true,
-};
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.name'),
+        name: 'name',
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.nif'),
+        name: 'nif',
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.nickname'),
+        name: 'nickname',
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.account'),
+        name: 'account',
+        create: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.payMethod'),
+        name: 'payMethodFk',
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'payMethods',
+            fields: ['id', 'name'],
+        },
+    },
+    {
+        align: 'left',
+        label: t('supplier.list.tableVisibleColumns.payDay'),
+        name: 'payDat',
+        create: true,
+        component: 'input',
+    },
+]);
 </script>
 
 <template>
-    <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
     <RightMenu>
         <template #right-panel>
             <SupplierListFilter data-key="SuppliersList" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="SuppliersRef"
-            <VnPaginate data-key="SuppliersList" url="Suppliers/filter">
+        data-key="SuppliersList"
-                <template #body="{ rows }">
+        :url="`Suppliers`"
-                    <CardList
+        save-url="Suppliers/crud"
-                        v-for="row of rows"
+        :create="{
-                        :key="row.id"
+            urlCreate: 'suppliers',
-                        :title="row.socialName"
+            title: t('Create Supplier'),
-                        :id="row.id"
+            onDataSaved: () => tableRef.reload(),
-                        @click="navigate(row.id)"
+        }"
-                    >
+        order="id ASC"
-                        <template #list-items>
+        :columns="columns"
-                            <VnLv label="NIF/CIF" :value="row.nif" />
+        default-mode="table"
-                            <VnLv label="Alias" :value="row.alias" />
+        auto-load
-                            <VnLv
+        :right-search="false"
-                                :label="t('supplier.list.payMethod')"
+        :is-editable="true"
-                                :value="row.payMethod"
+        :use-model="true"
-                            />
+    />
-                            <VnLv
-                                :label="t('supplier.list.payDeadline')"
-                                :title-label="t('invoiceOut.list.created')"
-                                :value="row.payDem"
-                            />
-                            <VnLv
-                                :label="t('supplier.list.payDay')"
-                                :value="row.payDay"
-                            />
-                            <VnLv
-                                :label="t('supplier.list.account')"
-                                :value="row.account"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, SupplierSummary)"
-                                color="primary"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-            <QTooltip>
-                {{ t('supplier.list.newSupplier') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>
 
 <i18n>