Update index.vue

src/pages/don-vi-chu-quan/index.vue

@@ -57,7 +57,13 @@
       >
         <template v-slot:body-cell-action="item">
           <q-td style="padding: 0" class="flex flex-center">
-            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateUnitDialog()"
+            >
               <q-tooltip :offset="[20, 10]">{{
                 $t('managingUnit.toolTipMessage.updateInfo')
               }}</q-tooltip>
@@ -118,6 +124,21 @@
       v-model:artistList="unitArtistList"
       @addNewUnit="addNewUnit"
     />
+
+    <AddUpdateUnitDialog
+      v-model:isOpened="updateUnitDialogIsOpened"
+      v-model:address="unitAddress"
+      v-model:code="unitCode"
+      v-model:email="unitEmail"
+      v-model:fields="unitField"
+      v-model:fieldsOptions="fieldsOptions"
+      v-model:name="unitName"
+      v-model:phoneNumber="unitPhoneNumber"
+      v-model:representative="unitRepresentative"
+      v-model:status="unitStatus"
+      v-model:artistList="unitArtistList"
+      @updateNewUnit="updateNewUnit"
+    />
   </div>
 </template>
 
@@ -129,7 +150,12 @@ import { Dialog, Notify } from 'quasar';
 import { API_PATHS } from 'src/assets/configurations.example';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-import { PaginationResponse, ArtistOwner, FieldType } from 'src/assets/type';
+import {
+  PaginationResponse,
+  ArtistOwner,
+  FieldType,
+  ArtistOwnerAdd,
+} from 'src/assets/type';
 import { config } from 'src/assets/configurations';
 import AddUpdateUnitDialog from 'components/units-manager/add-update-unit-dialog/index.vue';
 
@@ -232,6 +258,7 @@ export default defineComponent({
     const totalPage = ref(1);
     const fieldSelected: Ref<number | undefined> = ref();
     const addUnitDialogIsOpened = ref(false);
+    const updateUnitDialogIsOpened = ref(false);
     const unitField = ref(undefined);
     const unitCode = ref('');
     const unitName = ref('');
@@ -239,7 +266,7 @@ export default defineComponent({
     const unitEmail = ref('');
     const unitAddress = ref('');
     const unitPhoneNumber = ref('');
-    const unitStatus = ref('');
+    const unitStatus: Ref<boolean | number> = ref(true);
     const unitArtistList: Ref<unknown[]> = ref([]);
 
     const getListUnits = async () => {
@@ -267,10 +294,22 @@ export default defineComponent({
       unitEmail.value = '';
       unitAddress.value = '';
       unitPhoneNumber.value = '';
-      unitStatus.value = '';
+      unitStatus.value = true;
       addUnitDialogIsOpened.value = true;
     };
 
+    const openUpdateUnitDialog = () => {
+      // unitField.value = undefined;
+      // unitCode.value = '';
+      // unitName.value = '';
+      // unitRepresentative.value = '';
+      // unitEmail.value = '';
+      // unitAddress.value = '';
+      // unitPhoneNumber.value = '';
+      // unitStatus.value = true;
+      updateUnitDialogIsOpened.value = true;
+    };
+
     const changePageSize = () => {
       pageIndex.value = 1;
       void getListUnits();
@@ -328,25 +367,40 @@ export default defineComponent({
       }
     };
 
-    const updateNewManagingUnits = () => {
+    const updateNewUnit = () => {
       //gọi api update
       try {
       } catch (error) {}
     };
 
-    const addNewUnit = () => {
+    //add
+    const addNewUnit = async () => {
       const data = {
-        // name: unitName.value,
-        // code: unitCode.value,
-        // representative: unitRepresentative.value,
-        // address: unitAddress.value,
-        // email: unitEmail.value,
-        // phoneNumber: unitPhoneNumber.value,
-        // status: unitStatus.value,
-        // fields: fieldSelected.value,
-        // artistList: unitArtistList.value,
+        name: unitName.value,
+        code: unitCode.value,
+        representative: unitRepresentative.value,
+        address: unitAddress.value,
+        email: unitEmail.value,
+        phoneNumber: unitPhoneNumber.value,
+        status: unitStatus.value ? 1 : 2,
+        fields: unitField.value,
+        artistList: unitArtistList.value,
       };
-      //   // call API use Data
+      const response = (await api({
+        url: API_PATHS.artistOwnerAdd,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<ArtistOwnerAdd[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'managingUnit.actionMessages.addNewManagingUnitsAccess'
+          ),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListUnits();
+      }
     };
 
     onMounted(() => {
@@ -355,8 +409,9 @@ export default defineComponent({
     });
     return {
       addUnitDialogIsOpened,
+      updateUnitDialogIsOpened,
       getFieldOptions,
-      updateNewManagingUnits,
+      updateNewUnit,
       confirmDeleteManagingUnits,
       deleteManagingUnits,
       fieldsOptions,
@@ -381,6 +436,7 @@ export default defineComponent({
       openAddUnitDialog,
       unitArtistList,
       addNewUnit,
+      openUpdateUnitDialog,
     };
   },
 });