update

quasar.conf.js

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

src/assets/configurations.example.ts

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

src/assets/enums.ts

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

src/components/group-info/GroupInfo.ts

@@ -6,6 +6,20 @@ 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,
+    },
+  },
   setup() {
     return { check, check1, check2, check3 };
   },

src/components/group-info/index.vue

@@ -3,30 +3,46 @@
     <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 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 === 2"
             style="margin-right: 8px"
             color="red"
             icon="delete"
             label="Xoá"
           />
-          <q-btn color="primary" icon="update" label="Cập nhật" />
+          <q-btn
+            v-if="isDisable !== 0"
+            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
+          v-if="isDisable !== 0"
+          style="position: absolute; top: 0; right: 0"
+        >
+          <q-btn size="x-small" flat round color="primary" icon="close" />
         </div>
       </div>
     </q-card-section>
 
     <q-card-section class="q-pt-none">
-      <q-input outlined placeholder="Tên nhóm *" disable />
+      <q-input v-if="!isDisable" disable outlined placeholder="Tên nhóm *" />
+      <q-input v-else v-model="groupName" outlined placeholder="Tên nhóm *" />
     </q-card-section>
     <q-card-section class="q-pt-none">
-      <q-input outlined placeholder="Mô tả *" disable />
+      <q-input v-if="!isDisable" disable outlined placeholder="Mô tả *" />
+      <q-input
+        v-else
+        v-model="groupDescription"
+        outlined
+        placeholder="Mô tả *"
+      />
     </q-card-section>
-    <q-card-section>
+    <q-card-section v-if="isDisable === 2">
       <div class="row">
         <div class="col-6">
           <q-list bordered padding>

src/components/user-group/UserGroup.ts

-import { UserInfo } from 'src/store/authentication/state';
-import { defineComponent, PropType } from 'vue';
+import { GroupInfoType } from 'src/pages/nhom-nguoi-dung/UserGroup';
+import { computed, defineComponent, PropType, ref } from 'vue';
 // import { useStore } from 'src/store';
 
 export const UserGroupScript = defineComponent({
   props: {
     listUsers: {
-      type: Array as PropType<UserInfo[]>,
+      type: Array as PropType<GroupInfoType[]>,
       required: true,
     },
   },
-  setup() {
+  emits: ['click:groupName', 'update: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 };
   },
 });

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 class="row">
+        <div class="col-8 text-h6" 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 class="col-4" style="display: flex; justify-content: flex-end">
+          <q-btn
+            @click="$emit('click:addNewGroupUsers', 1)"
+            color="primary"
+            label="Thêm mới"
+            no-caps
+          />
         </div>
       </div>
     </q-card-section>
 
     <q-card-section class="q-pt-none">
-      <q-input outlined placeholder="Tìm kiếm" />
+      <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 listUsers"
+        v-for="(userItem, userItemIdx) in filteredListUsers"
         :key="`userItem-${userItemIdx}`"
         align="left"
         outline
         size="large"
         class="full-width my-1"
         color="primary"
-        label="Admin"
+        :label="userItem.groupName"
         no-caps
+        @click="$emit('click:groupName', userItem)"
       />
+
+      <div v-if="!filteredListUsers.length">
+        {{ $t('emptyData') }}
+      </div>
     </q-card-section>
   </q-card>
 </template>

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 } from 'vue';
+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 { UserInfo } from 'src/store/authentication/state';
 import { AxiosResponse } from 'axios';
 import { BaseResponseBody } from 'src/boot/axios';
+import { group } from 'console';
 
-const userList = ref([1]);
+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(0);
+const groupName = ref('');
+const groupDescription = ref('');
 export const UserGroup = defineComponent({
   components: { UserGroupComponent, GroupInfoComponent },
   setup() {
     const $store = useStore();
+
+    const getGroupInfo = (groupInfo: GroupInfoType) => {
+      console.log(groupInfo);
+
+      isDisable.value = 2;
+      groupName.value = groupInfo.groupName;
+      groupDescription.value = groupInfo.description;
+    };
+
+    const changeValueIsDisable = (value: number) => {
+      isDisable.value = value;
+    };
+
     onMounted(async () => {
       await $store.dispatch('authentication/getListUsers').then((response) => {
         const res = response as AxiosResponse<
-          BaseResponseBody<{ data: UserInfo[] }>
+          BaseResponseBody<GroupInfoType[]>
         >;
         if (!res.data.error.code) {
-          // userList = res.data.data.data;
+          userList.value = res.data.data;
         }
       });
     });
-    return { userList };
+    return {
+      userList,
+      getGroupInfo,
+      isDisable,
+      changeValueIsDisable,
+      groupName,
+      groupDescription,
+    };
   },
 });

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

@@ -2,10 +2,19 @@
   <q-page padding>
     <div class="row q-col-gutter-sm" align="center" justify="center">
       <div class="col-4">
-        <UserGroupComponent :list-users="userList"></UserGroupComponent>
+        <UserGroupComponent
+          :list-users="userList"
+          :is-disable="isDisable"
+          @click:groupName="getGroupInfo"
+          @click:addNewGroupUsers="changeValueIsDisable"
+        ></UserGroupComponent>
       </div>
       <div class="col-8">
-        <GroupInfoComponent></GroupInfoComponent>
+        <GroupInfoComponent
+          :is-disable="isDisable"
+          :group-name="groupName"
+          :group-description="groupDescription"
+        ></GroupInfoComponent>
       </div>
     </div>
   </q-page>

src/store/authentication/actions.ts

@@ -98,7 +98,7 @@ const actions: ActionTree<AuthenticationState, StateInterface> = {
   async getListUsers() {
     try {
       const response = (await api({
-        url: API_PATHS.getListUsers,
+        url: API_PATHS.getListGroupUsers,
         method: 'GET',
         params: {},
       })) as AxiosResponse<BaseResponseBody<unknown>>;