update

src/assets/configurations.example.ts

@@ -50,4 +50,5 @@ export enum API_PATHS {
   uploadImage = 'file/upload',
   getDetailUnit = 'artistOwner/detail',
   updateUnit = 'artistOwner/update',
+  addArtist = 'artist/add',
 }

src/components/artist-information/VAB-account/index.vue

@@ -139,10 +139,28 @@
 
         <div class="col-4">
           <div class="text-h6 text-weight-regular">Story</div>
-          <q-carousel v-model="slideStory" animated arrows navigation infinite>
+          <q-card
+            class="my-card flex q-mt-xs flex-center"
+            style="height: 300px"
+            bordered
+            v-if="!stories.length"
+          >
+            <div align="center" class="flex flex-center q-py-xs">
+              <q-icon name="mdi-plus-circle-outline" size="xl"></q-icon>
+              <div class="q-mt-xs">{{ $t('uploadImage.uploadStory') }}</div>
+            </div>
+          </q-card>
+          <q-carousel
+            v-else
+            v-model="slideStory"
+            animated
+            arrows
+            navigation
+            infinite
+          >
             <q-carousel-slide
               v-for="(story, storyIdx) in stories"
-              :key="stories.length"
+              :key="storyIdx"
               :name="storyIdx"
               class="q-pt-sm"
             >

src/components/artist-information/personal-information/PersonalInformation.ts

@@ -39,7 +39,10 @@ export default defineComponent({
     const selectedFile = (value: FileList) => {
       // console.log(value);
       // console.log(URL.createObjectURL(value[0]));
-      context.emit('SetAvatar',{file:value[0], url:URL.createObjectURL(value[0])})
+      context.emit('SetAvatar', {
+        file: value[0],
+        url: URL.createObjectURL(value[0]),
+      });
     };
     const upload = ref(null);
     const uploadBanner = () => {
@@ -137,10 +140,10 @@ export default defineComponent({
           'artist.artistInformation.validateMessages.requireArtistLevel'
         ),
     ];
-    const deleteAvatar = ()=>{
+    const deleteAvatar = () => {
       console.log('object');
-      context.emit('deleteAvatar')
-    }
+      context.emit('deleteAvatar');
+    };
     return {
       artistCodeRules,
       fullNameRules,
@@ -158,7 +161,7 @@ export default defineComponent({
       upload,
       uploadBanner,
       selectedFile,
-      deleteAvatar
+      deleteAvatar,
     };
   },
   emits: [
@@ -183,6 +186,6 @@ export default defineComponent({
     'update:status',
     'addNewArtist',
     'SetAvatar',
-    'deleteAvatar'
+    'deleteAvatar',
   ],
 });

src/components/artist-information/personal-information/index.vue

@@ -246,8 +246,8 @@
         <div class="col-8">
           <q-select
             :model-value="artistLevel"
+            @update:model-value="$emit('update:artistLevel', $event)"
             :rules="artistLevelRules"
-            @update:model-value="$emit('update:artistLevel')"
             :options="artistLevelOptions"
             emit-value
             map-options

src/i18n/vi/index.ts

@@ -468,6 +468,7 @@ export default {
   uploadImage: {
     uploadBanner: 'Tải lên',
     uploadEmbed: 'Tải lên Embed',
+    uploadStory: 'Tải lên Story',
     titleEmbedDialog: 'Thay đổi Embed',
   },
 };

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

@@ -35,6 +35,13 @@ import {
   TypeCardType,
 } from 'src/assets/type';
 
+export type AvatarType = {
+  file?: File;
+  url?: string | null;
+};
+// export type Story = {
+//   story?:object |
+// };
 export default defineComponent({
   components: {
     PersonalInformation,
@@ -47,9 +54,10 @@ export default defineComponent({
     UpdateHotProduct,
     UploadEmbedDialog,
   },
-  setup() {
+
+  setup(_, context) {
     const route = useRoute();
-    const tab: Ref<string> = ref('information');
+    const tab = ref('information');
 
     // state open dialog
     const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
@@ -75,6 +83,7 @@ export default defineComponent({
     const id: Ref<number> = ref(0);
     const account: Ref<string> = ref('');
     const avatar: Ref<string | null> = ref(null);
+    const avatarFile: Ref<File | null> = ref(null);
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
     const artistName: Ref<string | null | undefined> = ref();
@@ -97,7 +106,7 @@ export default defineComponent({
     // 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 socialEmbedded: Ref<string | null> = ref(null);
     const stories: Ref<StoriesType[]> = ref([]);
     const schedules: Ref<SchedulesType[]> = ref([]);
     const formatSchedules: Ref<string[]> = ref([]);
@@ -113,57 +122,6 @@ export default defineComponent({
     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,
@@ -318,53 +276,108 @@ export default defineComponent({
     const SetProduct = (value: ProductType) => {
       DataUpdateHotProduct.value = value;
     };
+    const setAvatar = (value: BannerType) => {
+      console.log(value);
+      avatarFile.value = value.file as File;
+      avatar.value = value.url as string;
+    };
 
-    // 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) {}
-    // };
+    const confirmDeleteSocialEmbedded = () => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
+        ),
+        message: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteEmbedContent'
+        ),
+        cancel: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        socialEmbedded.value = null;
+      });
+    };
+
+    const changeEmbed = (newEmbed: string | null) => {
+      socialEmbedded.value = newEmbed;
+      console.log(newEmbed, 'newEmbed');
+
+      isOpenDialogEmbed.value = false;
+    };
+    const callApiUploadImage = async (file: File) => {
+      try {
+        const response = await api({
+          url: API_PATHS.uploadImage,
+          method: 'GET',
+          params: {},
+        });
+      } catch (error) {}
+    };
+
+    const addArtist = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.addArtist,
+          method: 'POST',
+          data: {
+            id: route.params.id,
+            avatar: avatar.value,
+            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: account.value,
+            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) {}
+    };
+    const deleteImagesStories = (value: number) => {
+      console.log(value, 'deleteImagesStories');
+      console.log(stories.value);
+    };
+    const DeleteItemStories = (value: StoriesType) => {
+      for (let i = 0; i < stories.value.length; i++) {
+        if (stories.value[i].id == value.id) {
+          console.log(1);
+          stories.value.splice(Number(stories.value[i]), 1);
+        }
+      }
+      console.log(stories.value);
+    };
+
+    const deleteAvatar = () => {
+      avatar.value = null;
+    };
     onMounted(() => {
-      //   void getInformationArtist();
       void getFieldOptions();
       void getNationalityOptions();
       void getArtistLevelOptions();
@@ -374,7 +387,6 @@ export default defineComponent({
       void getTypeCardOptions();
     });
     return {
-      //   getInformationArtist,
       tab,
       id,
       route,
@@ -434,6 +446,7 @@ export default defineComponent({
       resetOldData,
       reset,
       confirmDeleteRow,
+      addArtist,
       openUpdateHotProduct,
       SetProduct,
       DataUpdateHotProduct,
@@ -442,6 +455,12 @@ export default defineComponent({
       getTypeCardOptions,
       rowDataAccBank,
       avatar,
+      setAvatar,
+      deleteAvatar,
+      deleteImagesStories,
+      DeleteItemStories,
+      confirmDeleteSocialEmbedded,
+      changeEmbed,
     };
   },
 });

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

@@ -15,10 +15,10 @@
             name="information"
             :label="$t('artist.artistInformation.tabLabel.personalInformation')"
           />
-          <!-- <q-tab
+          <q-tab
             name="vabAccount"
             :label="$t('artist.artistInformation.tabLabel.vabAccout')"
-          /> -->
+          />
           <q-tab
             name="bankAccount"
             :label="$t('artist.artistInformation.tabLabel.bankAcount')"
@@ -60,11 +60,10 @@
               :work-options="workOptions"
             ></PersonalInformation>
           </q-tab-panel>
-          <!-- <q-tab-panel name="vabAccount">
+          <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)"
@@ -73,7 +72,7 @@
               :banners="banners"
               :stories="stories"
             ></VabAccount>
-          </q-tab-panel> -->
+          </q-tab-panel>
 
           <q-tab-panel name="bankAccount">
             <BankAccount
@@ -118,12 +117,12 @@
       @click:CloseBtn="isOpenEditAccountBankDialog = false"
     ></EditBankAccountDialog>
 
-    <!-- <UploadEmbedDialog
+    <UploadEmbedDialog
       v-model:is-open-dialog-embed="isOpenDialogEmbed"
       v-model:social-embedded="socialEmbedded"
       @uploadEmbed="isOpenDialogEmbed = false"
       @click:CloseBtn="isOpenDialogEmbed = false"
-    ></UploadEmbedDialog> -->
+    ></UploadEmbedDialog>
 
     <AddHotProductDialog
       @insertData="pushData"
@@ -154,6 +153,7 @@
             color="primary"
             no-caps
             :label="$t('crudActions.update')"
+            @click="addArtist"
           ></q-btn>
         </div>
       </div>