update base

src/assets/enums.ts

 export enum EditMode {
-  edit = 1,
-  none = 0,
-  add = 2,
+  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);
@@ -20,7 +21,8 @@ export const GroupInfoScript = defineComponent({
       requite: true,
     },
   },
+  emits: ['resetGroupInfo'],
   setup() {
-    return { check, check1, check2, check3 };
+    return { check, check1, check2, check3, EditMode };
   },
 });

src/components/group-info/index.vue

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

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({
@@ -9,7 +10,7 @@ export const UserGroupScript = defineComponent({
       required: true,
     },
   },
-  emits: ['click:groupName', 'update:addNewGroupUsers'],
+  emits: ['click:groupName', 'click:addNewGroupUsers'],
   setup(props) {
     // const $store = useStore();
     const keyword = ref('');
@@ -20,6 +21,6 @@ export const UserGroupScript = defineComponent({
       );
     });
 
-    return { keyword, filteredListUsers };
+    return { keyword, filteredListUsers, EditMode };
   },
 });

src/components/user-group/index.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="col-4" style="display: flex; justify-content: flex-end">
           <q-btn
-            @click="$emit('click:addNewGroupUsers', 1)"
+            @click="$emit('click:addNewGroupUsers', EditMode.add)"
             color="primary"
             label="Thêm mới"
             no-caps

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

@@ -4,7 +4,7 @@ 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 { group } from 'console';
+import { EditMode } from 'src/assets/enums';
 
 export type GroupInfoType = {
   createBy: null | string;
@@ -18,26 +18,23 @@ export type GroupInfoType = {
 };
 
 const userList: Ref<GroupInfoType[]> = ref([]);
-const isDisable = ref(0);
+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) => {
-      console.log(groupInfo);
-
-      isDisable.value = 2;
+      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<

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

@@ -14,6 +14,7 @@
           :is-disable="isDisable"
           :group-name="groupName"
           :group-description="groupDescription"
+          @resetGroupInfo="changeValueIsDisable"
         ></GroupInfoComponent>
       </div>
     </div>