update

src/assets/configurations.example.ts

@@ -44,4 +44,5 @@ export enum API_PATHS {
   deleteArtist = '/artist/delete',
   getArtistDicitionaryOptions = 'artist/dictionary',
   artistOwnerAdd = 'artistOwner/add',
+  updateArtist = 'artist/update',
 }

src/components/artist-information/hot-product/HotProduct.ts

@@ -94,10 +94,10 @@ export default defineComponent({
 
     const clickAdd = () => {
       context.emit('click:addHotProduct');
-    }
+    };
     const deleteRow = (index: number) => {
-      context.emit('deleteRow', index)
-    }
+      context.emit('deleteRow', index);
+    };
     onMounted(() => {
       void getListHotProduct();
     });
@@ -113,5 +113,5 @@ export default defineComponent({
       clickAdd,
     };
   },
-  emits: ['click:addHotProduct', 'reset', 'deleteRow']
+  emits: ['click:addHotProduct', 'reset', 'deleteRow'],
 });

src/i18n/vi/index.ts

@@ -387,6 +387,7 @@ export default {
     },
     actionMessages: {
       deleteArtistAccess: 'Xoá nghệ sỹ thành công',
+      editNewUserAccess: 'Cập nhật thông tin nghệ sỹ thành công',
     },
     artistInformation: {
       tabLabel: {

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -147,6 +147,7 @@
             color="primary"
             no-caps
             :label="$t('crudActions.update')"
+            @click="updateInformationArtist"
           ></q-btn>
         </div>
       </div>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

-import { defineComponent, onMounted, ref, Ref, } from 'vue';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
 import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
 import VabAccount from '../../components/artist-information/VAB-account/index.vue';
 import BankAccount from '../../components/artist-information/bank-account/index.vue';
@@ -154,9 +154,8 @@ export default defineComponent({
     const rowBankAccIdx: Ref<number> = ref(0);
 
     //satate hot product
-    const statusHotProduct: Ref<number> = ref(2)
-    const DataInsertHotProduct: Ref<ProductType | null> = ref(null)
-
+    const statusHotProduct: Ref<number> = ref(2);
+    const DataInsertHotProduct: Ref<ProductType | null> = ref(null);
 
     const getInformationArtist = async () => {
       const response = (await api({
@@ -346,13 +345,12 @@ export default defineComponent({
     };
 
     const pushData = (value: ProductType) => {
-      products.value.push(value)
-    }
+      products.value.push(value);
+    };
     const reset = ref(null);
     const resetOldData = () => {
-
-      document.getElementById('reset')?.click()
-    }
+      document.getElementById('reset')?.click();
+    };
     const confirmDeleteRow = (value: number) => {
       Dialog.create({
         title: i18n.global.t(
@@ -370,8 +368,52 @@ export default defineComponent({
       });
     };
     const deleteRowItem = (index: number) => {
-      products.value.splice(index, 1)
+      products.value.splice(index, 1);
+    };
+    const updateInformationArtist = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.updateArtist,
+          method: 'POST',
+          data: {
+            id: route.params.id,
+            artistCode: artistCode.value,
+            artistName: artistName.value,
+            birthday: birthday.value,
+            sex: sex.value,
+            address: address.value,
+            phoneNumber: phoneNumber.value,
+            email: email.value,
+            facebook: facebook.value,
+            facebookMessage: facebookMessage.value,
+            instagram: instagram.value,
+            whatsapp: whatsapp.value,
+            fullName: fullName.value,
+            // "workStatus": 1,
+            shortDescription: null,
+            account: null,
+            socialEmbedded: socialEmbedded.value,
+            artistLevel: artistLevel.value,
+            fields: fields.value,
+            nationality: nationality.value,
+            qualification: qualification.value,
+            works: works.value,
+            banners: banners.value,
+            bankAccounts: bankAccounts.value,
+            schedules: schedules.value,
+            stories: stories.value,
+            products: products.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
+          });
         }
+      } catch (error) {}
+    };
+
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -452,7 +494,8 @@ export default defineComponent({
       resetOldData,
       reset,
       deleteRowItem,
-      confirmDeleteRow
+      confirmDeleteRow,
+      updateInformationArtist,
     };
   },
 });

src/pages/nghe-sy/index.vue

@@ -56,7 +56,7 @@
         color="primary"
         no-caps
         :label="$t('crudActions.add')"
-        @click="isOpenNewArtistDialog = true"
+        to="/nghe-sy/them-nghe-sy"
       ></q-btn>
     </div>
 

src/pages/them-nghe-sy/AddArtist.ts

+import { defineComponent, onMounted, ref, Ref } from 'vue';
+import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
+import VabAccount from '../../components/artist-information/VAB-account/index.vue';
+import BankAccount from '../../components/artist-information/bank-account/index.vue';
+import HotProduct from '../../components/artist-information/hot-product/index.vue';
+import AddHotProductDialog from '../../components/artist-information/AddHotProduct/index.vue';
+import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
+import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
+import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { API_PATHS, config } from 'src/assets/configurations';
+import { useRoute } from 'vue-router';
+import { AxiosResponse } from 'axios';
+import moment from 'moment';
+import { i18n } from 'src/boot/i18n';
+import { Dialog, Notify } from 'quasar';
+
+import {
+  ArtistInfoType,
+  FieldType,
+  NationalityType,
+  ArtistLevelType,
+  QualificationType,
+  WorkType,
+  BankAccountType,
+  ProductType,
+  BannerType,
+  StoriesType,
+  SchedulesType,
+  CardBankType,
+  TypeCardType,
+} from 'src/assets/type';
+
+export default defineComponent({
+  components: {
+    PersonalInformation,
+    VabAccount,
+    BankAccount,
+    HotProduct,
+    AddNewBankAccountDialog,
+    UploadEmbedDialog,
+    AddHotProductDialog,
+    EditBankAccountDialog,
+  },
+  watch: {
+    tab(value) {
+      if (value === 'information') {
+        console.log('information');
+      } else if (value === 'vabAccount') {
+        console.log('vabAccount');
+        // console.log(this.$router.currentRoute.value.params, 'asdasd');
+      } else if (value === 'bankAccount') {
+        console.log('bankAccount');
+      } else console.log('hotProduct');
+    },
+  },
+
+  setup() {
+    const tab = ref('information');
+    const clickBtn = () => {
+      console.log('askdaskdkasds');
+    };
+    const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
+    const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
+    const openAddHotProduct: Ref<boolean> = ref(false);
+
+    const isOpenDialogEmbed: Ref<boolean> = ref(false);
+    const fieldOptions: Ref<FieldType[]> = ref([]);
+    const nationalityOptions: Ref<NationalityType[]> = ref([]);
+    const professionOptions: Ref<QualificationType[]> = ref([]);
+    const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
+    const cardBankOptions: Ref<CardBankType[]> = ref([
+      { id: 1, name: 'TPBank', status: 1, numIndex: 1 },
+      { id: 2, name: 'BIDV', status: 1, numIndex: 1 },
+      { id: 3, name: 'VietinBank', status: 1, numIndex: 1 },
+      { id: 4, name: 'VietcomBank', status: 1, numIndex: 1 },
+    ]);
+    const typeBankOptions: Ref<TypeCardType[]> = ref([
+      { id: 1, name: 'ATM', status: 1, numIndex: 1 },
+      { id: 2, name: 'Visa', status: 1, numIndex: 1 },
+      { id: 3, name: 'Credit', status: 1, numIndex: 1 },
+    ]);
+    const workOptions: Ref<WorkType[]> = ref([]);
+    const sexOptions = ref([
+      { id: 1, name: 'Nam' },
+      { id: 2, name: 'Nữ' },
+    ]);
+    // const status: Ref<boolean | number> = ref(true);
+    const id: Ref<number> = ref(0);
+    const account: Ref<string> = ref('');
+    const artistCode: Ref<string> = ref('');
+    const fullName: Ref<string> = ref('');
+    const artistName: Ref<string | null | undefined> = ref();
+    const birthday: Ref<string | null | undefined> = ref('29/04/2021');
+    const sex: Ref<number | undefined> = ref();
+    const cardBank: Ref<CardBankType> = ref({
+      id: 0,
+      name: '',
+      status: 1,
+      numIndex: 1,
+    });
+    const typeCard: Ref<TypeCardType> = ref({
+      id: 0,
+      name: '',
+      status: 1,
+      numIndex: 1,
+    });
+    const nationality: Ref<NationalityType> = ref({
+      id: 0,
+      name: '',
+      status: 1,
+      numIndex: 1,
+    });
+    const qualification: Ref<QualificationType> = ref({
+      id: 0,
+      name: '',
+      status: 1,
+      numIndex: 1,
+    });
+    const artistLevel: Ref<ArtistLevelType> = ref({
+      id: 0,
+      name: '',
+      status: 1,
+      artistLevel: 1,
+      description: '',
+    });
+    const address: Ref<string | null | undefined> = ref();
+    const status: Ref<number> = ref(1);
+    const fields: Ref<FieldType[]> = ref([]);
+    const works: Ref<WorkType[]> = ref([]);
+    const phoneNumber: Ref<string | null | undefined> = ref();
+    const email: Ref<string | null | undefined> = ref();
+    const facebook: Ref<string | null | undefined> = ref();
+    const facebookMessage: Ref<string | null | undefined> = ref();
+    const instagram: Ref<string | null | undefined> = ref();
+    const whatsapp: Ref<string | null | undefined> = ref();
+    const bankAccounts: Ref<BankAccountType[]> = ref([]);
+    const products: Ref<ProductType[]> = ref([]);
+    const banners: Ref<BannerType[]> = ref([]);
+    const shortDescription: Ref<string | null> = ref('');
+    const socialEmbedded: Ref<string | null> = ref('');
+    const stories: Ref<StoriesType[]> = ref([]);
+    const schedules: Ref<SchedulesType[]> = ref([]);
+    const formatSchedules: Ref<string[]> = ref([]);
+    const route = useRoute();
+
+    //state accountBank
+
+    const accountNumber: Ref<string | null | undefined> = ref();
+    const cardNumber: Ref<string | null | undefined> = ref();
+    const bankName: Ref<string | null | undefined> = ref();
+    const cardType: Ref<number | undefined> = ref();
+    const isDefault: Ref<number | undefined> = ref(1);
+    const rowBankAccIdx: Ref<number> = ref(0);
+
+    const getInformationArtist = async () => {
+      const response = (await api({
+        url: API_PATHS.getDetailArtist,
+        method: 'GET',
+        params: { artistId: route.params.id },
+      })) as AxiosResponse<BaseResponseBody<ArtistInfoType>>;
+      console.log(response, 'Artist Detail Info');
+      const ArtistInformation = response.data.data;
+      id.value = ArtistInformation.id;
+      account.value = ArtistInformation.account;
+      artistCode.value = ArtistInformation.artistCode;
+      fullName.value = ArtistInformation.fullName;
+      artistName.value = ArtistInformation.artistName;
+      birthday.value = moment(
+        ArtistInformation.birthday,
+        'DD/MM/YYYY HH:mm:ss'
+      ).format('YYYY-MM-DD');
+      address.value = ArtistInformation.address;
+      status.value = ArtistInformation.status;
+      phoneNumber.value = ArtistInformation.phoneNumber;
+      email.value = ArtistInformation.email;
+      facebook.value = ArtistInformation.facebook;
+      facebookMessage.value = ArtistInformation.facebookMessage;
+      instagram.value = ArtistInformation.instagram;
+      whatsapp.value = ArtistInformation.whatsapp;
+      nationality.value = ArtistInformation.nationality;
+      qualification.value = ArtistInformation.qualification;
+      works.value = ArtistInformation.works;
+      artistLevel.value = ArtistInformation.artistLevel;
+      sex.value = ArtistInformation.sex;
+      fields.value = ArtistInformation.fields;
+      bankAccounts.value = ArtistInformation.bankAccounts;
+      products.value = ArtistInformation.products;
+      banners.value = ArtistInformation.banners || [];
+      socialEmbedded.value = ArtistInformation.socialEmbedded;
+      stories.value = ArtistInformation.stories;
+      schedules.value = ArtistInformation.schedules;
+      for (let index = 0; index < schedules.value.length; index++) {
+        const element = schedules.value[index];
+
+        formatSchedules.value.push(
+          moment(element.scheduleTime, 'DD/MM/YYYY HH:mm:ss').format(
+            'YYYY/MM/DD'
+          )
+        );
+      }
+    };
+    const getFieldOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getFieldOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        fieldOptions.value = response.data.data;
+        console.log(fieldOptions.value, 'fieldOptions');
+      }
+    };
+
+    const getNationalityOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getNationalityOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        nationalityOptions.value = response.data.data;
+      }
+    };
+    const getArtistLevelOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getArtistLevelOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ArtistLevelType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        artistLevelOptions.value = response.data.data;
+      }
+    };
+    const getQualificationOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getQualificationOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<QualificationType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        professionOptions.value = response.data.data;
+      }
+    };
+    const getWorkOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getWorkOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<WorkType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        workOptions.value = response.data.data;
+      }
+    };
+    const addAccBank = () => {
+      const newAccount = {
+        accountNumber: accountNumber.value,
+        cardNumber: cardNumber.value,
+        bankName: bankName.value,
+        cardType: cardType.value,
+        isDefault: isDefault.value,
+      };
+      bankAccounts.value.push(newAccount as BankAccountType);
+      isOpenAddAccountBankDialog.value = false;
+    };
+
+    const confirmDeleteAccBank = (value: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
+        ),
+        message: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankContent'
+        ),
+        cancel: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        deleteAccBank(value);
+      });
+    };
+    const openDialogAddHotProduct = () => {
+      console.log('object');
+      // console.log(openAddHotProduct.value);
+      openAddHotProduct.value = true;
+    };
+    const openDialogAddAccBank = () => {
+      accountNumber.value = null;
+      cardNumber.value = null;
+      bankName.value = null;
+      cardType.value = undefined;
+      isDefault.value = 2;
+      isOpenAddAccountBankDialog.value = true;
+    };
+    const deleteAccBank = (index: number) => {
+      Notify.create({
+        type: 'positive',
+        message: i18n.global.t(
+          'artist.dialogLabel.validateMessages.deleteAccess'
+        ),
+      });
+      bankAccounts.value.splice(index, 1);
+    };
+    const selectedFile = (value: BannerType) => {
+      banners.value.push(value);
+      console.log(banners.value);
+    };
+    const openDialogEditAccBank = (
+      itemData: BankAccountType,
+      itemIdx: number
+    ) => {
+      console.log(itemData, 'rowData');
+      accountNumber.value = itemData.accountNumber;
+      cardNumber.value = itemData.cardNumber;
+      bankName.value = itemData.bankName;
+      cardType.value = itemData.cardType;
+      isDefault.value = itemData.isDefault;
+      rowBankAccIdx.value = itemIdx;
+      console.log(rowBankAccIdx.value);
+
+      isOpenEditAccountBankDialog.value = true;
+    };
+    const editAccBank = () => {
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].accountNumber = accountNumber.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].cardNumber = cardNumber.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].bankName = bankName.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].cardType = cardType.value as number;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].isDefault = isDefault.value as number;
+      isOpenEditAccountBankDialog.value = false;
+    };
+
+    onMounted(() => {
+      void getFieldOptions();
+      void getNationalityOptions();
+      void getArtistLevelOptions();
+      void getQualificationOptions();
+      void getWorkOptions();
+    });
+    return {
+      tab,
+      getInformationArtist,
+      id,
+      route,
+      artistCode,
+      fullName,
+      artistName,
+      birthday,
+      sex,
+      nationality,
+      address,
+      status,
+      fields,
+      works,
+      qualification,
+      artistLevel,
+      phoneNumber,
+      email,
+      facebook,
+      facebookMessage,
+      instagram,
+      whatsapp,
+      socialEmbedded,
+      sexOptions,
+      fieldOptions,
+      nationalityOptions,
+      professionOptions,
+      artistLevelOptions,
+      workOptions,
+      getFieldOptions,
+      getNationalityOptions,
+      getArtistLevelOptions,
+      getQualificationOptions,
+      getWorkOptions,
+      bankAccounts,
+      products,
+      account,
+      banners,
+      shortDescription,
+      stories,
+      isOpenAddAccountBankDialog,
+      openAddHotProduct,
+      clickBtn,
+      accountNumber,
+      cardNumber,
+      bankName,
+      cardType,
+      isDefault,
+      addAccBank,
+      schedules,
+      formatSchedules,
+      confirmDeleteAccBank,
+      selectedFile,
+      isOpenDialogEmbed,
+      deleteAccBank,
+      openDialogAddAccBank,
+      openDialogAddHotProduct,
+      cardBankOptions,
+      typeBankOptions,
+      cardBank,
+      typeCard,
+      isOpenEditAccountBankDialog,
+      openDialogEditAccBank,
+      editAccBank,
+      rowBankAccIdx,
+    };
+  },
+});

src/pages/them-nghe-sy/index.vue

+<template>
+  <div class="q-mt-sm row q-col-gutter-sm">
+    <div class="col-12" width="100%">
+      <q-card>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab
+            name="information"
+            :label="$t('artist.artistInformation.tabLabel.personalInformation')"
+          />
+          <q-tab
+            name="vabAccount"
+            :label="$t('artist.artistInformation.tabLabel.vabAccout')"
+          />
+          <q-tab
+            name="bankAccount"
+            :label="$t('artist.artistInformation.tabLabel.bankAcount')"
+          />
+          <q-tab
+            name="hotProduct"
+            :label="$t('artist.artistInformation.tabLabel.hotProduct')"
+          />
+        </q-tabs>
+
+        <q-separator />
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="information">
+            <PersonalInformation
+              :id="id"
+              v-model:artist-code="artistCode"
+              v-model:full-name="fullName"
+              v-model:artist-name="artistName"
+              v-model:birthday="birthday"
+              v-model:sex="sex"
+              v-model:nationality="nationality"
+              v-model:status="status"
+              v-model:address="address"
+              v-model:fields="fields"
+              v-model:works="works"
+              v-model:qualification="qualification"
+              v-model:artist-level="artistLevel"
+              v-model:phone-number="phoneNumber"
+              v-model:email="email"
+              v-model:facebook="facebook"
+              v-model:facebook-message="facebookMessage"
+              v-model:instagram="instagram"
+              v-model:whatsapp="whatsapp"
+              :sex-options="sexOptions"
+              :field-options="fieldOptions"
+              :nationality-options="nationalityOptions"
+              :profession-options="professionOptions"
+              :artist-level-options="artistLevelOptions"
+              :work-options="workOptions"
+            ></PersonalInformation>
+          </q-tab-panel>
+          <q-tab-panel name="vabAccount">
+            <VabAccount
+              v-model:account="account"
+              v-model:short-description="shortDescription"
+              v-model:content="stories[0].content"
+              v-model:format-schedules="formatSchedules"
+              @selectedFile="selectedFile"
+              @deleteBanner="banners.splice($event, 1)"
+              @openDialogUploadEmbed="isOpenDialogEmbed = true"
+              :social-embedded="socialEmbedded"
+              :banners="banners"
+              :stories="stories"
+            ></VabAccount>
+          </q-tab-panel>
+
+          <q-tab-panel name="bankAccount">
+            <BankAccount
+              :bank-accounts="bankAccounts"
+              @confirmDeleteAccBank="confirmDeleteAccBank"
+              @click:addBankBtn="openDialogAddAccBank"
+              @clickEditAccBankBtn="openDialogEditAccBank"
+            ></BankAccount>
+          </q-tab-panel>
+          <q-tab-panel name="hotProduct">
+            <HotProduct
+              @click:addHotProduct="openAddHotProduct = true"
+              :products="products"
+            ></HotProduct>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+    <AddNewBankAccountDialog
+      v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
+      v-model:account-number="accountNumber"
+      v-model:card-number="cardNumber"
+      v-model:bank-name="bankName"
+      v-model:card-type="cardType"
+      v-model:is-default="isDefault"
+      :bank-accounts="bankAccounts"
+      @addNewBankAccount="addAccBank"
+      @click:CloseBtn="isOpenAddAccountBankDialog = false"
+    ></AddNewBankAccountDialog>
+    <EditBankAccountDialog
+      v-model:is-open-edit-account-bank-dialog="isOpenEditAccountBankDialog"
+      v-model:account-number="accountNumber"
+      v-model:card-number="cardNumber"
+      v-model:bank-name="bankName"
+      v-model:card-type="cardType"
+      v-model:is-default="isDefault"
+      :row-bank-acc-idx="rowBankAccIdx"
+      :bank-accounts="bankAccounts"
+      @editBankAccount="editAccBank"
+      @click:CloseBtn="isOpenEditAccountBankDialog = false"
+    ></EditBankAccountDialog>
+    <UploadEmbedDialog
+      v-model:is-open-dialog-embed="isOpenDialogEmbed"
+      v-model:social-embedded="socialEmbedded"
+      @uploadEmbed="isOpenDialogEmbed = false"
+      @click:CloseBtn="isOpenDialogEmbed = false"
+    ></UploadEmbedDialog>
+    <AddHotProductDialog
+      v-model:status="status"
+      v-model:open-add-hot-product="openAddHotProduct"
+      @click:CloseBtnAddHotProduct="openAddHotProduct = false"
+    ></AddHotProductDialog>
+    <div class="col-12 q-mt-md">
+      <div class="row">
+        <q-space></q-space>
+        <div class="col-auto">
+          <q-btn
+            to="/nghe-sy"
+            color="grey"
+            no-caps
+            :label="$t('crudActions.back')"
+          ></q-btn>
+        </div>
+        <div class="col-auto q-mx-md">
+          <q-btn
+            color="primary"
+            no-caps
+            :label="$t('crudActions.update')"
+          ></q-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./AddArtist.ts"></script>

src/router/routes.ts

@@ -9,6 +9,7 @@ export enum Pages {
   artist = 'nghe-sy',
   informationArtist = 'cap-nhat-thong-tin-nghe-sy',
   customer = 'khach-hang',
+  addArtist = 'them-nghe-sy',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -51,6 +52,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/cap-nhat-thong-tin-nghe-sy/index.vue'),
         name: Pages.informationArtist,
       },
+      {
+        path: '/nghe-sy/them-nghe-sy',
+        component: () => import('pages/them-nghe-sy/index.vue'),
+        name: Pages.addArtist,
+      },
       {
         path: '/khach-hang',
         component: () => import('pages/khach-hang/index.vue'),