create user page

src/assets/configurations.example.ts

@@ -26,4 +26,5 @@ export enum API_PATHS {
   deleteGroupUser = '/user/group/delete',
   getUserGroupDetail = '/user/group/detail',
   updateUserGroupInfo = '/user/group/update',
+  getListUsers = '/user/list',
 }

src/assets/type.ts

+export type PaginationResponse<DataType> = {
+  pageIndex: null | number;
+  pageSize: null | number;
+  totalPages: number;
+  totalRecords: number;
+  beginIndex: number;
+  endIndex: number;
+  data: DataType[];
+};
+
+export type UserObject = {
+  id: number;
+  userName: string;
+  password: string;
+  fullName: null | string;
+  birthday: null | string;
+  email: null | string;
+  phoneNumber: null | string;
+  mobileNumber: null | string;
+  sex: number;
+  address: null | string;
+  unit: null | number;
+  status: number;
+  isAdmin: null | number;
+  createTime: null | string;
+  createBy: null | string;
+  updateTime: null | string;
+  updateBy: null | string;
+};

src/i18n/vi/index.ts

@@ -58,4 +58,20 @@ export default {
       confirmDeleteGroupCancelBtnLabel: 'Huỷ',
     },
   },
+  userPage: {
+    title: 'Quản lý người dùng',
+    tableColumns: {
+      userName: 'Tên đăng nhập',
+      fullName: 'Họ tên',
+      email: 'Email',
+      phone: 'SĐT',
+      unit: 'Đơn vị',
+      status: 'Trạng thái',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+  },
 };

src/pages/nguoi-dung/User.ts

+import { AxiosResponse } from 'axios';
+import { API_PATHS, config } from 'src/assets/configurations';
+import { PaginationResponse, UserObject } from 'src/assets/type';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const totalPage = ref(0);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const userTableColumns = [
+      {
+        name: 'userName',
+        field: 'userName',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.userName'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'fullName',
+        field: 'fullName',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.fullName'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'email',
+        field: 'email',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.email'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'phoneNumber',
+        field: 'phoneNumber',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.phone'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'unit',
+        field: 'unit',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.unit'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.status'),
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('userPage.tableColumns.action'),
+        align: 'left',
+        sortable: true,
+      },
+    ];
+    const userTableRows: Ref<UserObject[]> = ref([]);
+
+    const getListUsers = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListUsers,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<PaginationResponse<UserObject>>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          userTableRows.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+          console.log(response.data.data);
+        }
+      } catch (error) {}
+    };
+
+    onMounted(() => {
+      void getListUsers();
+    });
+    return {
+      rows: userTableRows,
+      userTableColumns,
+      totalPage,
+      pageIndex,
+      pageSize,
+    };
+  },
+});

src/pages/nguoi-dung/index.vue

+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12">
+      <q-table
+        :rows="rows"
+        :columns="userTableColumns"
+        row-key="name"
+        separator="cell"
+        hide-pagination
+      >
+        <template v-slot:top>
+          <q-th class="row">
+            <div class="col-2 text-h6 text-weight-regular">
+              {{ $t('userPage.title') }}
+            </div>
+          </q-th>
+        </template>
+        <template v-slot:body-cell-status="rowData">
+          <q-td class="flex flex-center">
+            <q-chip
+              :color="rowData.value ? 'positive' : undefined"
+              text-color="white"
+              size="sm"
+            >
+              {{
+                rowData.value
+                  ? $t('userPage.statusLabel.active')
+                  : $t('userPage.statusLabel.inactive')
+              }}
+            </q-chip>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+    <div class="col-12 q-pa-lg flex flex-center">
+      <q-pagination
+        v-model="pageIndex"
+        :max="totalPage"
+        direction-links
+        boundary-links
+        icon-first="skip_previous"
+        icon-last="skip_next"
+        icon-prev="fast_rewind"
+        icon-next="fast_forward"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./User.ts"></script>

src/router/routes.ts

@@ -4,6 +4,7 @@ export enum Pages {
   home = 'home',
   login = 'login',
   groupUsers = 'nhom-nguoi-dung',
+  cmsUser = 'nguoi-dung',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -26,6 +27,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/nhom-nguoi-dung/index.vue'),
         name: Pages.groupUsers,
       },
+      {
+        path: '/nguoi-dung',
+        component: () => import('pages/nguoi-dung/index.vue'),
+        name: Pages.cmsUser,
+      },
     ],
   },