Merge branch 'master' of http://103.147.34.20:30081/son.nguyen/quasar-web-base

quasar.conf.js

@@ -80,8 +80,8 @@ 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,
-      open: true, // opens browser window automatically
+      port: 10706,
+      open: false, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework

src/assets/configurations.example.ts

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

src/assets/enums.ts

+export enum EditMode {
+  default = 0,
+  add = 1,
+  edit = 2,
+}

src/components/group-info/GroupInfo.ts

+import { defineComponent, ref } from 'vue';
+import { EditMode } from 'src/assets/enums';
+
+const check = ref(false);
+const check1 = ref(false);
+const check2 = ref(false);
+const check3 = ref(false);
+
+export const GroupInfoScript = defineComponent({
+  props: {
+    isDisable: {
+      type: Number,
+      required: true,
+    },
+    groupName: {
+      type: String,
+      requite: true,
+    },
+    groupDescription: {
+      type: String,
+      requite: true,
+    },
+  },
+  emits: ['resetGroupInfo'],
+  setup() {
+    return { check, check1, check2, check3, EditMode };
+  },
+});

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-h6">Thông tin nhóm</div>
+        </div>
+        <div class="col-8" style="display: flex; justify-content: flex-end">
+          <q-btn
+            v-if="isDisable === EditMode.edit"
+            style="margin-right: 8px"
+            color="red"
+            icon="delete"
+            label="Xoá"
+          />
+          <q-btn
+            v-if="isDisable"
+            color="primary"
+            icon="update"
+            label="Cập nhật"
+          />
+        </div>
+        <div v-if="isDisable" style="position: absolute; top: 0; right: 0">
+          <q-btn
+            @click="$emit('resetGroupInfo', EditMode.default)"
+            size="x-small"
+            flat
+            round
+            color="primary"
+            icon="close"
+          />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-input
+        v-model="groupName"
+        :disable="!isDisable ? true : false"
+        outlined
+        placeholder="Tên nhóm *"
+      />
+    </q-card-section>
+    <q-card-section class="q-pt-none">
+      <q-input
+        v-model="groupDescription"
+        :disable="!isDisable ? true : false"
+        outlined
+        placeholder="Mô tả *"
+      />
+    </q-card-section>
+    <q-card-section v-if="isDisable === EditMode.edit">
+      <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 { GroupInfoType } from 'src/pages/nhom-nguoi-dung/UserGroup';
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { EditMode } from 'src/assets/enums';
+// import { useStore } from 'src/store';
+
+export const UserGroupScript = defineComponent({
+  props: {
+    listUsers: {
+      type: Array as PropType<GroupInfoType[]>,
+      required: true,
+    },
+  },
+  emits: ['click:groupName', 'click:addNewGroupUsers'],
+  setup(props) {
+    // const $store = useStore();
+    const keyword = ref('');
+
+    const filteredListUsers = computed(() => {
+      return props.listUsers.filter((group) =>
+        group.groupName.includes(keyword.value)
+      );
+    });
+
+    return { keyword, filteredListUsers, EditMode };
+  },
+});

src/components/user-group/index.vue

+<template>
+  <q-card flat bordered class="my-card">
+    <q-card-section style="padding-top: 28px">
+      <div class="row">
+        <div class="col-8 text-h6" style="display: flex">
+          <div>Nhóm người dùng</div>
+        </div>
+        <div class="col-4" style="display: flex; justify-content: flex-end">
+          <q-btn
+            @click="$emit('click:addNewGroupUsers', EditMode.add)"
+            color="primary"
+            label="Thêm mới"
+            no-caps
+          />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-input v-model="keyword" outlined placeholder="Tìm kiếm" />
+    </q-card-section>
+
+    <q-card-section class="q-pt-none">
+      <q-btn
+        v-for="(userItem, userItemIdx) in filteredListUsers"
+        :key="`userItem-${userItemIdx}`"
+        align="left"
+        outline
+        size="large"
+        class="full-width my-1"
+        color="primary"
+        :label="userItem.groupName"
+        no-caps
+        @click="$emit('click:groupName', userItem)"
+      />
+
+      <div v-if="!filteredListUsers.length">
+        {{ $t('emptyData') }}
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { UserGroupScript } from './UserGroup';
+export default UserGroupScript;
+</script>

src/i18n/vi/index.ts

@@ -21,4 +21,5 @@ export default {
   responseErrorMsg: {
     'msg-1': 'Lỗi không xác định',
   },
+  emptyData: 'Không tìm thấy dữ liệu',
 };

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

+import { defineComponent, onMounted, Ref, 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 { AxiosResponse } from 'axios';
+import { BaseResponseBody } from 'src/boot/axios';
+import { EditMode } from 'src/assets/enums';
+
+export type GroupInfoType = {
+  createBy: null | string;
+  createTime: null | string;
+  description: string;
+  groupName: string;
+  id: number;
+  status: number;
+  updateBy: null | string;
+  updateTime: null | string;
+};
+
+const userList: Ref<GroupInfoType[]> = ref([]);
+const isDisable = ref(EditMode.default);
+const groupName = ref('');
+const groupDescription = ref('');
+export const UserGroup = defineComponent({
+  components: { UserGroupComponent, GroupInfoComponent },
+  setup() {
+    const $store = useStore();
+    const getGroupInfo = (groupInfo: GroupInfoType) => {
+      isDisable.value = EditMode.edit;
+      groupName.value = groupInfo.groupName;
+      groupDescription.value = groupInfo.description;
+    };
+    const changeValueIsDisable = (value: number) => {
+      isDisable.value = value;
+      groupName.value = '';
+      groupDescription.value = '';
+    };
+    onMounted(async () => {
+      await $store.dispatch('authentication/getListUsers').then((response) => {
+        const res = response as AxiosResponse<
+          BaseResponseBody<GroupInfoType[]>
+        >;
+        if (!res.data.error.code) {
+          userList.value = res.data.data;
+        }
+      });
+    });
+    return {
+      userList,
+      getGroupInfo,
+      isDisable,
+      changeValueIsDisable,
+      groupName,
+      groupDescription,
+    };
+  },
+});

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"
+          :is-disable="isDisable"
+          @click:groupName="getGroupInfo"
+          @click:addNewGroupUsers="changeValueIsDisable"
+        ></UserGroupComponent>
+      </div>
+      <div class="col-8">
+        <GroupInfoComponent
+          :is-disable="isDisable"
+          :group-name="groupName"
+          :group-description="groupDescription"
+          @resetGroupInfo="changeValueIsDisable"
+        ></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.getListGroupUsers,
+        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: [],
   };
 }