update base

quasar.conf.js

@@ -80,7 +80,7 @@ module.exports = configure(function (ctx) {
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
-      port: 8080,
+      port: 10706,
       open: true, // opens browser window automatically
     },
 

src/assets/configurations.example.ts

@@ -21,5 +21,5 @@ export enum API_PATHS {
   login = '/user/login',
   getUserGroups = '/group/get_list',
   getGroupInfo = '/group/get_info',
-  getListPages = '/page/list',
+  getListPages = '/user/page/list',
 }

src/components/group-info/GroupInfo.ts

+import { defineComponent, ref } from 'vue';
+
+const check = ref(false);
+const check1 = ref(false);
+const check2 = ref(false);
+const check3 = ref(false);
+
+export const GroupInfoScript = defineComponent({
+  setup() {
+    return { check, check1, check2, check3 };
+  },
+});

src/components/group-info/index.vue

+<template>
+  <q-card flat bordered class="my-card">
+    <q-card-section style="padding-top: 28px">
+      <div class="row">
+        <div class="col-4" style="display: flex">
+          <div class="text-h5">Thông tin nhóm</div>
+        </div>
+        <div class="col-8" style="display: flex; justify-content: flex-end">
+          <q-btn
+            style="margin-right: 8px"
+            color="red"
+            icon="delete"
+            label="Xoá"
+          />
+          <q-btn color="primary" icon="update" label="Cập nhật" />
+        </div>
+        <div style="position: absolute; top: 0; right: 0">
+          <q-icon size="x-large" name="close" color="primary" />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-input outlined placeholder="Tên nhóm *" disable />
+    </q-card-section>
+    <q-card-section class="q-pt-none">
+      <q-input outlined placeholder="Mô tả *" disable />
+    </q-card-section>
+    <q-card-section>
+      <div class="row">
+        <div class="col-6">
+          <q-list bordered padding>
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="text-h5">Trang</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check1" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="text-subtitle1" style="display: flex"
+                  >Trang chủ</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check2" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label style="display: flex" class="text-subtitle1"
+                  >Người dùng</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+
+            <q-item tag="label" v-ripple>
+              <q-item-section side top>
+                <q-checkbox v-model="check3" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label style="display: flex" class="text-subtitle1"
+                  >Nhóm người dùng</q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+        <div class="col-6"></div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { GroupInfoScript } from './GroupInfo';
+export default GroupInfoScript;
+</script>

src/components/user-group/UserGroup.ts

+import { UserInfo } from 'src/store/authentication/state';
+import { defineComponent, PropType } from 'vue';
+// import { useStore } from 'src/store';
+
+export const UserGroupScript = defineComponent({
+  props: {
+    listUsers: {
+      type: Array as PropType<UserInfo[]>,
+      required: true,
+    },
+  },
+  setup() {
+    // const $store = useStore();
+  },
+});

src/components/user-group/index.vue

+<template>
+  <q-card flat bordered class="my-card">
+    <q-card-section style="padding-top: 28px">
+      <div class="row justify-start">
+        <div class="col-9 text-h5" style="display: flex">
+          <div>Nhóm người dùng</div>
+        </div>
+        <div class="col-3">
+          <q-btn color="primary" label="THÊM MỚI" />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-input outlined placeholder="Tìm kiếm" />
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-btn
+        v-for="(userItem, userItemIdx) in listUsers"
+        :key="`userItem-${userItemIdx}`"
+        align="left"
+        outline
+        size="large"
+        class="full-width my-1"
+        color="primary"
+        label="Admin"
+        no-caps
+      />
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { UserGroupScript } from './UserGroup';
+export default UserGroupScript;
+</script>

src/pages/nhom-nguoi-dung/UserGroup.ts

+import { defineComponent, onMounted, ref } from 'vue';
+import { useStore } from 'src/store';
+import UserGroupComponent from '../../components/user-group/index.vue';
+import GroupInfoComponent from '../../components/group-info/index.vue';
+import { UserInfo } from 'src/store/authentication/state';
+import { AxiosResponse } from 'axios';
+import { BaseResponseBody } from 'src/boot/axios';
+
+const userList = ref([1]);
+export const UserGroup = defineComponent({
+  components: { UserGroupComponent, GroupInfoComponent },
+  setup() {
+    const $store = useStore();
+    onMounted(async () => {
+      await $store.dispatch('authentication/getListUsers').then((response) => {
+        const res = response as AxiosResponse<
+          BaseResponseBody<{ data: UserInfo[] }>
+        >;
+        if (!res.data.error.code) {
+          // userList = res.data.data.data;
+        }
+      });
+    });
+    return { userList };
+  },
+});

src/pages/nhom-nguoi-dung/index.vue

+<template>
+  <q-page padding>
+    <div class="row q-col-gutter-sm" align="center" justify="center">
+      <div class="col-4">
+        <UserGroupComponent :list-users="userList"></UserGroupComponent>
+      </div>
+      <div class="col-8">
+        <GroupInfoComponent></GroupInfoComponent>
+      </div>
+    </div>
+  </q-page>
+</template>
+<script lang="ts">
+import { UserGroup } from './UserGroup';
+export default UserGroup;
+</script>

src/router/routes.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 export enum Pages {
   home = 'home',
   login = 'login',
+  groupUsers = 'nhom-nguoi-dung',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -20,6 +21,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/login/index.vue'),
         name: Pages.login,
       },
+      {
+        path: '/nhom-nguoi-dung',
+        component: () => import('pages/nhom-nguoi-dung/index.vue'),
+        name: Pages.groupUsers,
+      },
     ],
   },
 

src/store/authentication/actions.ts

@@ -95,6 +95,25 @@ const actions: ActionTree<AuthenticationState, StateInterface> = {
       }
     } catch (error) {}
   },
+  async getListUsers() {
+    try {
+      const response = (await api({
+        url: API_PATHS.getListUsers,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<unknown>>;
+      // if (!response.data.error.code) {
+      //   const res = response as AxiosResponse<
+      //     BaseResponseBody<{ data: UserInfo[] }>
+      //   >;
+      //   const listUser = res.data.data.data;
+      //   console.log(listUser, 'listUser');
+
+      //   context.commit('setUserList', listUser);
+      // }
+      return response;
+    } catch (error) {}
+  },
 };
 
 export default actions;

src/store/authentication/mutations.ts

 import { MutationTree } from 'vuex';
-import { AuthenticationState, MenuItem, Page, RoleInfo } from './state';
+import {
+  AuthenticationState,
+  MenuItem,
+  Page,
+  RoleInfo,
+  UserInfo,
+} from './state';
 
 const mutation: MutationTree<AuthenticationState> = {
   setToken(state, payload: string) {
@@ -33,6 +39,9 @@ const mutation: MutationTree<AuthenticationState> = {
   setMenuList(state, payload: MenuItem[]) {
     state.menuList = payload;
   },
+  setUserList(state, payload: UserInfo[]) {
+    state.userList = payload;
+  },
 };
 
 export default mutation;

src/store/authentication/state.ts

@@ -43,6 +43,26 @@ export type MenuItem = {
   menuIndex: number;
   children?: MenuItem[];
 };
+
+export type UserInfo = {
+  address: string | null;
+  birthday: number | null;
+  createBy: string | null;
+  createTime: number | null;
+  email: string | null;
+  fullName: string | null;
+  id: number;
+  isAdmin: boolean | null;
+  mobileNumber: number | null;
+  password: string;
+  phoneNumber: number | null;
+  sex: number;
+  status: number;
+  unit: string | null;
+  updateBy: string | null;
+  updateTime: number | null;
+  userName: string;
+};
 export interface AuthenticationState {
   token?: string;
   user?: {
@@ -57,6 +77,7 @@ export interface AuthenticationState {
   }[];
   pageList: Page[];
   menuList: MenuItem[];
+  userList: UserInfo[];
 }
 
 function state(): AuthenticationState {
@@ -65,6 +86,7 @@ function state(): AuthenticationState {
     pageList: [],
     pageRoles: [],
     menuList: [],
+    userList: [],
   };
 }