create add artist page

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

@@ -35,10 +35,10 @@ import {
   TypeCardType,
 } from 'src/assets/type';
 
-export type AvatarType ={
-  file?:File,
-  url?:string | null
-}
+export type AvatarType = {
+  file?: File;
+  url?: string | null;
+};
 export default defineComponent({
   components: {
     PersonalInformation,
@@ -167,9 +167,9 @@ export default defineComponent({
       }
     };
 
-    const setAvatar =(value:BannerType)=>{
+    const setAvatar = (value: BannerType) => {
       console.log(value);
-      avatar.value = value.url as string
+      avatar.value = value.url as string;
     };
     const getFieldOptions = async () => {
       const response = (await api({
@@ -333,6 +333,7 @@ export default defineComponent({
           method: 'POST',
           data: {
             id: route.params.id,
+            avatar: avatar.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
             birthday: birthday.value,
@@ -450,7 +451,7 @@ export default defineComponent({
       getTypeCardOptions,
       rowDataAccBank,
       avatar,
-      setAvatar
+      setAvatar,
     };
   },
 });

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

+import { defineComponent, onMounted, ref, Ref } from '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 { Router } from 'src/router';
+import { Pages } from 'src/router/routes';
+
+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 UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
+
+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,
+    EditBankAccountDialog,
+    AddHotProductDialog,
+    UpdateHotProduct,
+    UploadEmbedDialog,
+  },
+  setup() {
+    const route = useRoute();
+    const tab: Ref<string> = ref('information');
+
+    // state open dialog
+    const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
+    const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
+    const openAddHotProduct: Ref<boolean> = ref(false);
+    const openUpdateHotProduct: Ref<boolean> = ref(false);
+    const isOpenDialogEmbed: Ref<boolean> = ref(false);
+
+    // state
+    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([]);
+    const typeBankOptions: Ref<TypeCardType[]> = ref([]);
+    const workOptions: Ref<WorkType[]> = ref([]);
+    const sexOptions = ref([
+      { id: 1, name: 'Nam' },
+      { id: 2, name: 'Nữ' },
+    ]);
+
+    //state sử dụng trong tab thong-tin-ca-nhan
+    const id: Ref<number> = ref(0);
+    const account: Ref<string> = ref('');
+    const avatar: Ref<string | null> = ref(null);
+    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 nationality: Ref<NationalityType | null> = ref(null);
+    const qualification: Ref<QualificationType | null> = ref(null);
+    const artistLevel: Ref<ArtistLevelType | null> = ref(null);
+    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();
+
+    // state sử dụng trong tab vab account
+    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([]);
+
+    //state accountBank
+    const bankAccounts: Ref<BankAccountType[]> = ref([]);
+    const rowBankAccIdx: Ref<number> = ref(0);
+    const rowDataAccBank: Ref<BankAccountType | null> = ref(null);
+
+    //satate hot product
+    const products: Ref<ProductType[]> = ref([]);
+    const statusHotProduct: Ref<number> = ref(2);
+    const DataInsertHotProduct: Ref<ProductType | null> = ref(null);
+    const DataUpdateHotProduct: Ref<ProductType | null> = ref(null);
+
+    // 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;
+    //   // avatar.value = ArtistInformation.avatar
+
+    //   avatar.value =
+    //     'https://static2.yan.vn/YanNews/2167221/201911/son-tung-mtp-so-huu-3-cong-ty-giai-tri-o-tuoi-25-cdm-qua-gioi-f53bb404.jpg';
+    //   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 getBankOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.bankOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<CardBankType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        cardBankOptions.value = response.data.data;
+      }
+    };
+    const getTypeCardOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.cardTypeOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<TypeCardType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        typeBankOptions.value = response.data.data;
+      }
+    };
+
+    const addAccBank = (value: BankAccountType) => {
+      bankAccounts.value.push(value);
+      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(() => {
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'artist.dialogLabel.validateMessages.deleteAccess'
+          ),
+        });
+        bankAccounts.value.splice(value, 1);
+      });
+    };
+    const openDialogEditAccBank = (
+      itemData: BankAccountType,
+      itemIdx: number
+    ) => {
+      console.log(itemData, 'rowData');
+      rowDataAccBank.value = itemData;
+      rowBankAccIdx.value = itemIdx;
+      console.log(rowBankAccIdx.value);
+
+      isOpenEditAccountBankDialog.value = true;
+    };
+    const editAccBank = (value: BankAccountType) => {
+      // console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
+      bankAccounts.value[rowBankAccIdx.value] = value;
+      isOpenEditAccountBankDialog.value = false;
+    };
+    const pushData = (value: ProductType) => {
+      products.value.push(value);
+      console.log(products.value);
+    };
+
+    const selectedFile = (value: BannerType) => {
+      banners.value.push(value);
+      console.log(banners.value);
+    };
+    const reset = ref(null);
+    const resetOldData = () => {
+      document.getElementById('reset')?.click();
+    };
+    const confirmDeleteRow = (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(() => {
+        products.value.splice(value, 1);
+      });
+    };
+    const UpdateData = (value: ProductType) => {
+      for (let i = 0; i < products.value.length; i++) {
+        if (products.value[i].id === value?.id) {
+          products.value[i] = value;
+        }
+      }
+    };
+    const SetProduct = (value: ProductType) => {
+      DataUpdateHotProduct.value = value;
+    };
+
+    // 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) {
+    //       await Router.push({ name: Pages.artist });
+    //       Notify.create({
+    //         type: 'positive',
+    //         message: i18n.global.t('artist.actionMessages.editNewUserAccess'),
+    //       });
+    //     }
+    //   } catch (error) {}
+    // };
+    onMounted(() => {
+      //   void getInformationArtist();
+      void getFieldOptions();
+      void getNationalityOptions();
+      void getArtistLevelOptions();
+      void getQualificationOptions();
+      void getWorkOptions();
+      void getBankOptions();
+      void getTypeCardOptions();
+    });
+    return {
+      //   getInformationArtist,
+      tab,
+      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,
+      addAccBank,
+      schedules,
+      formatSchedules,
+      confirmDeleteAccBank,
+      selectedFile,
+      isOpenDialogEmbed,
+      cardBankOptions,
+      typeBankOptions,
+      isOpenEditAccountBankDialog,
+      openDialogEditAccBank,
+      editAccBank,
+      rowBankAccIdx,
+      statusHotProduct,
+      DataInsertHotProduct,
+      pushData,
+      resetOldData,
+      reset,
+      confirmDeleteRow,
+      openUpdateHotProduct,
+      SetProduct,
+      DataUpdateHotProduct,
+      UpdateData,
+      getBankOptions,
+      getTypeCardOptions,
+      rowDataAccBank,
+      avatar,
+    };
+  },
+});

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"
+              :avatar="avatar"
+              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="isOpenAddAccountBankDialog = true"
+              @clickEditAccBankBtn="openDialogEditAccBank"
+            ></BankAccount>
+          </q-tab-panel>
+
+          <q-tab-panel name="hotProduct">
+            <HotProduct
+              :products="products"
+              @deleteRow="confirmDeleteRow($event)"
+              @reset="resetOldData"
+              :DataInsertHotProduct="DataInsertHotProduct"
+              @click:addHotProduct="openAddHotProduct = true"
+              @click:openUpadateHotProduct="openUpdateHotProduct = true"
+              @setDataUpdate="SetProduct($event)"
+            ></HotProduct>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+    <AddNewBankAccountDialog
+      v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
+      :card-bank-options="cardBankOptions"
+      :type-bank-options="typeBankOptions"
+      :bank-accounts="bankAccounts"
+      @addNewBankAccount="addAccBank"
+      @click:CloseBtn="isOpenAddAccountBankDialog = false"
+    ></AddNewBankAccountDialog>
+
+    <EditBankAccountDialog
+      v-model:is-open-edit-account-bank-dialog="isOpenEditAccountBankDialog"
+      :card-bank-options="cardBankOptions"
+      :type-bank-options="typeBankOptions"
+      :row-bank-acc-idx="rowBankAccIdx"
+      :bank-accounts="bankAccounts"
+      :row-data-acc-bank="rowDataAccBank"
+      @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
+      @insertData="pushData"
+      v-model:status-hot-product="statusHotProduct"
+      v-model:open-add-hot-product="openAddHotProduct"
+      @click:CloseBtnAddHotProduct="openAddHotProduct = false"
+    ></AddHotProductDialog>
+
+    <UpdateHotProduct
+      :dataUpdate="DataUpdateHotProduct"
+      @UpdateData="UpdateData($event)"
+      @click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
+      v-model:open-update-hot-product="openUpdateHotProduct"
+    ></UpdateHotProduct>
+    <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

@@ -52,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'),