src/pages/Account/AccountList.vue

@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -47,6 +47,52 @@ const exprBuilder = (param, value) => {
     }
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'nickname',
+        label: t('nickname'),
+        field: 'nickname',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        field: 'name',
+        component: 'input',
+        columnField: {
+            component: null,
+        },
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, AccountSummary),
+            },
+        ],
+    },
+]);
 const getApiUrl = () => new URL(window.location).origin;
 
 const navigate = (event, id) => {
@@ -90,55 +136,25 @@ const openCreateModal = () => accountCreateDialogRef.value.show();
             <AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                :filter="filter"
-                data-key="AccountList"
-                url="VnUsers/preview"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.nickname"
-                        @click="navigate($event, row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.card.name')" :value="row.nickname">
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.card.nickname')"
-                                :value="row.username"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="accountCreateDialogRef"
-            transition-hide="scale"
-            transition-show="scale"
-        >
-            <AccountCreate />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
-            <QBtn @click="openCreateModal" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('account.card.newUser') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+
+    <VnTable
+        ref="tableRef"
+        data-key="AccountUsers"
+        :url="`VnUsers`"
+        :create="{
+            urlCreate: 'Accounts',
+            title: 'Create Account',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>