update

package.json

@@ -2,7 +2,7 @@
   "name": "quasar-web-base",
   "version": "0.0.1",
   "description": "A Quasar Framework app",
-  "productName": "Quasar App",
+  "productName": "CMS Vietnam Artist Booking",
   "author": "thanhdat <thanhdatwg@gmail.com>",
   "private": true,
   "scripts": {

quasar.conf.js

@@ -138,8 +138,8 @@ module.exports = configure(function (ctx) {
       },
 
       manifest: {
-        name: 'Quasar App',
-        short_name: 'Quasar App',
+        name: 'CMS Vietnam Artist Booking',
+        short_name: 'CMS Vietnam Artist Booking',
         description: 'A Quasar Framework app',
         display: 'standalone',
         orientation: 'portrait',
@@ -147,27 +147,27 @@ module.exports = configure(function (ctx) {
         theme_color: '#027be3',
         icons: [
           {
-            src: 'icons/icon-128x128.png',
+            src: 'icons/VAN_Favicon.png',
             sizes: '128x128',
             type: 'image/png',
           },
           {
-            src: 'icons/icon-192x192.png',
+            src: 'icons/VAN_Favicon.png',
             sizes: '192x192',
             type: 'image/png',
           },
           {
-            src: 'icons/icon-256x256.png',
+            src: 'icons/VAN_Favicon.png',
             sizes: '256x256',
             type: 'image/png',
           },
           {
-            src: 'icons/icon-384x384.png',
+            src: 'icons/VAN_Favicon.png',
             sizes: '384x384',
             type: 'image/png',
           },
           {
-            src: 'icons/icon-512x512.png',
+            src: 'icons/VAN_Favicon.png',
             sizes: '512x512',
             type: 'image/png',
           },

src/assets/configurations.example.ts

@@ -32,7 +32,7 @@ export enum API_PATHS {
   resetPassword = '/user/resetPass',
   getUserDetail = '/user/detail',
   updateUser = '/user/update',
-  getListUnits = '/unit/list',
+  getListUnits = '/artistOwner',
   getListArtists = '/artist',
   getFieldOptions = '/field',
   getNationalityOptions = '/nationality',

src/assets/type.ts

@@ -82,3 +82,14 @@ export type WorkType = {
   status: number;
   numIndex: number;
 };
+
+export type ARTISTOWNER = {
+  id: number;
+  code: string;
+  name: string;
+  representative: string;
+  fields: string;
+  email: string;
+  phoneNumber: number;
+  status: number;
+};

src/components/customer/add-new-customer-dialog/index.vue

@@ -114,7 +114,6 @@
                 map-options
                 option-value="id"
                 option-label="text"
-                type="text"
                 class="q-my-sm"
                 outlined
                 hide-bottom-space

src/components/managingunits/add-new-managingunits-dialog/NewManagingUnits.ts

+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
+
+export default defineComponent({
+  props: {
+    showDialog: {
+      type: Boolean,
+      required: true,
+    },
+    fieldsOptions: {type: Array, required: true},
+    fields: { type: Number, required: true},
+    code: { type: String, required: true },
+    name: { type: String, required: true },
+    representative: { type: String, required: true },
+    email: { type: String, required: true },
+    address: { type: String, required: true },
+    phoneNumber: { type: String, required: true },
+    status: { type: Boolean, required: true },
+  },
+  setup() {
+    const codeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireCode'),
+    ];
+    const nameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireName'),
+    ];
+    const representativeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireRepresentative'),
+    ];
+      const fieldsRules = [
+        (val?: number) =>
+          val !== undefined ||
+          i18n.global.t('managingUnit.validateMessages.requireFields'),
+      ];
+    const phoneNumberRules = [
+        (val?: string) =>
+          (val && val.trim().length) ||
+          i18n.global.t('managingUnit.validateMessages.requirePhoneNumber'),
+        (val: string) =>
+          isMobilePhone(val) ||
+          i18n.global.t('managingUnit.validateMessages.isPhone'),
+      ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) || i18n.global.t('managingUnit.validateMessages.isEmail'),
+    ];
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('managingUnit.validateMessages.requireAddress'),
+    ];
+    return {
+    codeRules,
+    nameRules,
+    representativeRules,
+    addressRules,
+    phoneNumberRules,
+    emailRules,
+    fieldsRules
+    };
+  },
+  emits: [
+    'update:showDialog',
+    'click:CloseBtn',
+    'update:code',
+    'update:name',
+    'update:representative',
+    'update:fields',
+    'update:email',
+    'update:phoneNumber',
+    'update:address',
+    'update:status',
+    'addNewManagingUnits',
+  ],
+});

src/components/managingunits/add-new-managingunits-dialog/index.vue

+<template>
+  <q-dialog
+    persistent
+    :model-value="showDialog"
+    @update:model-value="$emit('update:showDialog', $event)"
+  >
+    <q-card style="min-width: 1500px" bordered>
+      <q-form greedy @submit.prevent="$emit('addNewManagingUnits')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('managingUnit.dialogLabel.title.add')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="code"
+                @update:model-value="$emit('update:code', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.code')"
+                :rules="codeRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.name')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="nameRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="representative"
+                @update:model-value="$emit('update:representative', $event)"
+                :label="
+                  $t('managingUnit.dialogLabel.fieldLabels.representative')
+                "
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="representativeRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="address"
+                @update:model-value="$emit('update:address', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.address')"
+                class="q-my-sm"
+                type="textarea"
+                outlined
+                :rules="addressRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+            </div>
+            <div class="col-6">
+              <q-input
+                :model-value="email"
+                @update:model-value="$emit('update:email', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.email')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="emailRules"
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="phoneNumber"
+                emit-value
+                @update:model-value="$emit('update:phoneNumber', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.phoneNumber')"
+                class="q-my-sm"
+                type="number"
+                :rules="phoneNumberRules"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-select
+                :model-value="fields"
+                @update:model-value="$emit('update:fields', $event)"
+                :label="$t('managingUnit.dialogLabel.fieldLabels.fields')"
+                :options="fieldsOptions"
+                :rules="fieldsRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-select>
+
+              <div style="padding-top: 13px; padding-left: 8px">
+                <span class="text-body1">{{
+                  $t('managingUnit.dialogLabel.fieldLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
+          <q-btn
+            type="submit"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.save')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./NewManagingUnits.ts"></script>

src/components/managingunits/update-new-managingunits-dialog/index.vue

+<template>
+  <div>My component</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  // name: 'ComponentName'
+})
+</script>

src/i18n/vi/index.ts

@@ -133,17 +133,63 @@ export default {
       informationUser: 'Thông tin',
     },
   },
-  managingUnit: {
+
+   // Đơn vị chủ quản
+   managingUnit: {
+    title: 'Đơn vị chủ quản',
     tableColumns: {
-      unit: 'Mã đơn vị',
-      unitName: 'Tên đơn vị',
-      deputy: 'Người đại diện',
-      field: 'Lĩnh vực',
+      code: 'Mã đơn vị',
+      name: 'Tên đơn vị',
+      representative: 'Người đại diện',
+      fields: 'Lĩnh vực',
       email: 'Email',
       phoneNumber: 'SĐT',
       status: 'Trạng thái',
       action: 'Chức năng',
     },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+    dialogLabel: {
+      title: {
+        add: 'Thêm đơn vị chủ quản',
+        update: 'Cập nhật đơn vị chủ quản',
+      },
+      fieldLabels: {
+        code: 'Mã đơn vị *',
+        name: 'Tên đơn vị *',
+        representative: 'Người đại diện *',
+        address: 'Địa chỉ *',
+        email: 'Email *',
+        phoneNumber: 'Số điện thoại *',
+        fields: 'Lĩnh vực *',
+        status: 'Trạng thái',
+      },
+    },
+    toolTipMessage: {
+      updateInfo: 'Cập nhật',
+      information: 'Thông tin',
+    },
+    crudActions: {
+      save: 'Lưu',
+      cancel: 'Đóng',
+    },
+    validateMessages: {
+      requireCode: 'Vui lòng nhập Mã đơn vị',
+      requireName: 'Vui lòng nhập Tên đơn vị',
+      requireRepresentative: 'Vui lòng nhập Người đại diện',
+      requireFields: 'Vui lòng chọn Lĩnh vực',
+      requireEmail: 'Vui lòng nhập Email',
+      isEmail: 'Email không hợp lệ',
+      requirePhoneNumber: 'Vui lòng nhập Số điện thoại',
+      isPhone: 'Số điện thoại không hợp lệ',
+      requireAddress: 'Vui lòng nhập Địa chỉ',
+    },
+    // confirmActionsTitle: {
+    // },
+    // actionMessages: {
+    // },
   },
 
   // khách hàng
@@ -179,7 +225,7 @@ export default {
         ratings: 'Xếp hạng *',
         address: 'Địa chỉ *',
         businessType: 'Loại doanh nghiệp *',
-        representative: 'Đại diện *',
+        representative: 'Người đại diện *',
         position: 'Chức vụ *',
         phone: 'Số điện thoại *',
         status: 'Trạng thái',
@@ -200,13 +246,13 @@ export default {
       requireTaxCode: 'Vui lòng nhập Mã số thuế',
       requireEmail: 'Vui lòng nhập Email',
       isEmail: 'Email không hợp lệ',
-      requirePhone: 'Vui lòng nhập số điện thoại',
+      requirePhone: 'Vui lòng nhập Số điện thoại',
       isPhone: 'Số điện thoại không hợp lệ',
-      requireAddress: 'Vui lòng nhập địa chỉ',
+      requireAddress: 'Vui lòng nhập Địa chỉ',
       requireBusinessType: 'Vui lòng nhập Loại doanh nghiệp',
-      requireRatings: 'Vui lòng nhập xếp hạng',
-      requireRepresentative: 'Vui lòng nhập giới tính',
-      requiredPosition: 'Vui lòng nhập chức vụ',
+      requireRatings: 'Vui lòng nhập Xếp hạng',
+      requireRepresentative: 'Vui lòng nhập Người đại diện',
+      requiredPosition: 'Vui lòng nhập Chức vụ',
     },
     confirmActionsTitle: {
       confirmDeleteUserTitle: 'Xác nhận',

src/index.template.html

@@ -3,17 +3,40 @@
   <head>
     <title><%= productName %></title>
 
-    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />
 
-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="128x128"
+      href="icons/VAN_Favicon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="icons/VAN_Favicon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="icons/VAN_Favicon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="icons/VAN_Favicon.png"
+    />
+    <link rel="icon" type="image/ico" href="favicon.ico" />
   </head>
   <body>
     <!-- DO NOT touch the following DIV -->

src/pages/don-vi-chu-quan/ManagingUnit.ts

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
-// import { API_PATHS } from 'src/assets/configurations.example';
-// import { AxiosResponse } from 'axios';
-// import { api, BaseResponseBody } from 'src/boot/axios';
+import { API_PATHS } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import {
+  PaginationResponse,
+  ARTISTOWNER,
+} from 'src/assets/type';
+import { config } from 'src/assets/configurations';
+import AddNewManagingUnitsDialogComponent from '../../components/managingunits/add-new-managingunits-dialog/index.vue';
+
+export type CustomerInfoType = {
+  id: number;
+  code: string | null;
+  name: string | null;
+  address: string | null;
+  email: string | null;
+  representative: string | null;
+  phoneNumber: string | null;
+  status: number;
+};
 
 export default defineComponent({
   components: {
     Pagination,
+    AddNewManagingUnitsDialogComponent,
   },
   setup() {
     const managingUnitTableColumns = [
@@ -20,37 +38,37 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'unitCode',
-        field: 'unitCode',
+        name: 'code',
+        field: 'code',
         required: true,
-        label: i18n.global.t('managingUnit.tableColumns.unit'),
+        label: i18n.global.t('managingUnit.tableColumns.code'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'unitName',
-        field: 'unitName',
+        name: 'name',
+        field: 'name',
         required: true,
-        label: i18n.global.t('managingUnit.tableColumns.unitName'),
+        label: i18n.global.t('managingUnit.tableColumns.name'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'deputy',
-        field: 'deputy',
+        name: 'representative',
+        field: 'representative',
         required: true,
-        label: i18n.global.t('managingUnit.tableColumns.deputy'),
+        label: i18n.global.t('managingUnit.tableColumns.representative'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'field',
-        field: 'field',
+        name: 'fields',
+        field: 'fields',
         required: true,
-        label: i18n.global.t('managingUnit.tableColumns.field'),
+        label: i18n.global.t('managingUnit.tableColumns.fields'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
@@ -93,38 +111,44 @@ export default defineComponent({
       },
     ];
     const managingUnitTableRows: Ref<unknown[]> = ref([]);
+    const showDialog = ref(false);
+    const code: Ref<string | undefined> = ref();
+    const name: Ref<string | undefined> = ref();
+    const email: Ref<string | undefined> = ref();
+    const phoneNumber: Ref<string | undefined> = ref();
+    const representative: Ref<string | undefined> = ref();
+    const address: Ref<string | undefined> = ref();
+    const fields: Ref<number | undefined> = ref();
+    const status: Ref<boolean | number> = ref(true);
 
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const unitNameKeyword = ref('');
-    const fieldOptions = ref([
+    const fieldsOptions = ref([
       { id: 1, text: 'Giải trí' },
       { id: 2, text: 'Âm nhạc' },
       { id: 1, text: 'Thể thao' },
     ]);
     const totalPage = ref(10);
     const fieldSelected: Ref<number | undefined> = ref();
-    const getListUnits = () => {
-      //   const response = (await api({
-      //     url: API_PATHS.getListUnits,
-      //     method: 'GET',
-      //     params: {
-      //       pageIndex: pageIndex.value,
-      //       pageSize: pageSize.value,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-      const fakeData: unknown[] = [
-        {
-          unitCode: '0001',
-          unitName: 'MTP Entertainment',
-          deputy: 'Sơn Tùng MTP',
-          field: 'Giải trí',
-          email: 'sontung@gmail.com',
-          phoneNumber: '0899999999',
-          status: 1,
-        },
-      ];
-      managingUnitTableRows.value = fakeData;
+    const getListUnits = async() => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListUnits,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+          },
+        })) as AxiosResponse<
+          BaseResponseBody<PaginationResponse<ARTISTOWNER>>
+        >;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          managingUnitTableRows.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+        }
+      } catch (error) {}
+      // managingUnitTableRows.value = fakeData;
     };
     const filterListUnit = () => {
       //   const response = (await api({
@@ -140,17 +164,46 @@ export default defineComponent({
       pageIndex.value = 1;
       void getListUnits();
     };
+
+    const openAddManagingUnitsDialog = () => {
+      showDialog.value = true;
+      code.value = '';
+      name.value = '';
+      fields.value = undefined;
+      email.value = '';
+      address.value = '';
+      representative.value = '';
+      phoneNumber.value = '';
+    };
+
+    const addNewManagingUnits = () => {
+      //gọi api thêm mới
+      try {
+      } catch (error) {}
+    };
+
     onMounted(() => {
       void getListUnits();
     });
     return {
+      openAddManagingUnitsDialog,
+      addNewManagingUnits,
+      showDialog,
+      fieldsOptions,
+      status,
+      code,
+      name,
+      fields,
+      email,
+      address,
+      phoneNumber,
+      representative,
       managingUnitTableColumns,
       managingUnitTableRows,
       getListUnits,
       pageIndex,
       pageSize,
       unitNameKeyword,
-      fieldOptions,
       fieldSelected,
       filterListUnit,
       totalPage,

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

 <template>
   <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
+      {{ $t('managingUnit.title') }}
+      <q-separator vertical spaced />
+    </div>
     <q-space></q-space>
     <div class="col-2">
       <q-input
         dense
         outlined
-        :label="$t('managingUnit.tableColumns.unitName')"
+        :label="$t('managingUnit.tableColumns.name')"
         v-model="unitNameKeyword"
+        clearable
       ></q-input>
     </div>
     <div class="col-2">
       <q-select
         v-model="fieldSelected"
-        :options="fieldOptions"
+        :options="fieldsOptions"
+        label="Lĩnh vực"
         option-label="text"
         option-value="id"
         dense
         outlined
+        clearable
       ></q-select>
     </div>
     <div class="col-auto">
@@ -28,7 +35,13 @@
       ></q-btn>
     </div>
     <div class="col-auto">
-      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        @click="openAddManagingUnitsDialog"
+      >
+      </q-btn>
     </div>
 
     <div class="col-12 q-mt-sm">
@@ -40,6 +53,37 @@
         :no-data-label="$t('emptyData')"
         hide-pagination
       >
+        <template v-slot:body-cell-action="">
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn flat round color="primary" icon="mdi-information-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('managingUnit.toolTipMessage.information')
+              }}</q-tooltip>
+            </q-btn>
+            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('managingUnit.toolTipMessage.updateInfo')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-status="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="rowData.value ? 'positive' : 'orange'"
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value
+                    ? $t('managingUnit.statusLabel.active')
+                    : $t('managingUnit.statusLabel.inactive')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
       </q-table>
     </div>
     <div class="col-12 q-mt-sm">
@@ -50,6 +94,20 @@
         @update:pageSize="changePageSize"
         @update:currentPage="getListUnits"
       />
+
+      <AddNewManagingUnitsDialogComponent
+        v-model:show-dialog="showDialog"
+        v-model:code="code"
+        v-model:name="name"
+        v-model:email="email"
+        v-model:address="address"
+        v-model:phone-number="phoneNumber"
+        v-model:status="status"
+        v-model:fields="fields"
+        :fields-options="fieldsOptions"
+        @click:CloseBtn="showDialog = false"
+        @addNewManagingUnits="addNewManagingUnits"
+      ></AddNewManagingUnitsDialogComponent>
     </div>
   </div>
 </template>

src/pages/khach-hang/customer.ts

@@ -4,7 +4,7 @@ import Pagination from 'components/pagination/index.vue';
 import AddNewCustomerDialogComponent from '../../components/customer/add-new-customer-dialog/index.vue';
 import UpdateNewCustomerDialogComponent from '../../components/customer/update-new-customer-dialog/index.vue';
 // import { API_PATHS } from 'src/assets/configurations.example';
-export type ArtistInfoType = {
+export type CustomerInfoType = {
   id: number;
   userName: string | null;
   customerName: string | null;