update

src/assets/configurations.example.ts

@@ -47,4 +47,5 @@ export enum API_PATHS {
   updateArtist = 'artist/update',
   bankOptions = 'bank',
   cardTypeOptions = 'cardType',
+  uploadImage = 'file/upload',
 }

src/components/artist-information/VAB-account/VabAccount.ts

-import { defineComponent, PropType, ref, watch } from 'vue';
+import { defineComponent, PropType, ref, Ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { BannerType, StoriesType } from 'src/assets/type';
 import UploadImage from 'components/upload-image/index.vue';
@@ -15,6 +15,7 @@ export default defineComponent({
     stories: { type: Array as PropType<StoriesType[]>, required: true },
     formatSchedules: { type: Array as PropType<string[]>, required: true },
   },
+
   setup(props, context) {
     watch(
       () => props.banners.length,
@@ -54,15 +55,15 @@ export default defineComponent({
         context.emit('deleteBanner', index);
       });
     };
-    const deleteImagesStoriess = (story:StoriesType,storyIdx:number) =>{
-    
-      if(story.content==''){
-        context.emit('deleteStories',story)
-      }else{
+    const deleteImagesStoriess = (story: StoriesType, storyIdx: number) => {
+      if (story.content == '') {
+        context.emit('deleteStories', story);
+      } else {
         // story.imageUrl =''
-        context.emit('deleteImagesStories',story)
-      }
+        context.emit('deleteImagesStories', story);
       }
+    };
+
     return {
       slide,
       slideStory,
@@ -70,7 +71,7 @@ export default defineComponent({
       accountRules,
       uploadBanner,
       deleteImage,
-      deleteImagesStoriess
+      deleteImagesStoriess,
     };
   },
   emits: [
@@ -82,6 +83,7 @@ export default defineComponent({
     'deleteBanner',
     'openDialogUploadEmbed',
     'deleteImagesStories',
-    'deleteStories'
+    'deleteStories',
+    'confirmDeleteSocialEmbedded',
   ],
 });

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

@@ -100,7 +100,19 @@
               round
               color="primary"
               icon="mdi-pencil-circle-outline"
-            ></q-btn>
+            >
+              <q-tooltip :offset="[20, 10]">Chỉnh sửa</q-tooltip></q-btn
+            >
+            <q-btn
+              v-if="socialEmbedded !== null"
+              flat
+              round
+              color="primary"
+              icon="mdi-trash-can-outline"
+              @click="$emit('confirmDeleteSocialEmbedded')"
+            >
+              <q-tooltip :offset="[20, 10]">Xoá</q-tooltip></q-btn
+            >
           </div>
           <q-card
             class="my-card q-mt-sm flex flex-center"

src/components/artist-information/upload-embed-dialog/UploadEmbedDialog.ts

-import { defineComponent } from 'vue';
+import { defineComponent, Ref, ref, watch } from 'vue';
 export default defineComponent({
   // name: 'ComponentName'
   props: {
@@ -8,6 +8,21 @@ export default defineComponent({
     },
     socialEmbedded: { type: String, required: true },
   },
+  setup(props, context) {
+    watch(
+      () => props.isOpenDialogEmbed,
+      (value) => {
+        if (value) {
+          newSocialEmbed.value = props.socialEmbedded;
+        }
+      }
+    );
+    const newSocialEmbed: Ref<string | null> = ref(null);
+    const confirmEditEmbed = () => {
+      context.emit('uploadEmbed', newSocialEmbed.value);
+    };
+    return { newSocialEmbed, confirmEditEmbed };
+  },
   emits: [
     'update:isOpenDialogEmbed',
     'click:CloseBtn',

src/components/artist-information/upload-embed-dialog/index.vue

@@ -4,10 +4,10 @@
     :model-value="isOpenDialogEmbed"
     @update:model-value="$emit('update:isOpenDialogEmbed', $event)"
   >
-    <q-card bordered>
-      <q-card-section>
+    <q-card style="width: 400px" bordered>
+      <q-card-section style="padding-top: 0; padding-bottom: 0">
         <q-item>
-          <q-item-section>
+          <q-item-section align="center">
             <q-item-label class="text-h6 text-weight-regular">{{
               $t('uploadImage.titleEmbedDialog')
             }}</q-item-label>
@@ -17,25 +17,21 @@
       <q-separator />
 
       <q-card-section>
-        <div class="row q-col-gutter-sm">
+        <div class="row q-col-gutter-sm flex-center">
           <div class="col-3">Link Embed</div>
           <div class="col-9">
-            <q-input
-              :model-value="socialEmbedded"
-              @update:model-value="$emit('update:socialEmbedded', $event)"
-              outlined
-              dense
-            ></q-input>
+            <q-input v-model="newSocialEmbed" outlined dense></q-input>
           </div>
         </div>
       </q-card-section>
-      <q-card-actions align="right">
+      <q-card-actions align="right" class="q-mt-xs">
         <q-btn
           color="grey"
           no-caps
           style="width: 90px"
           :label="$t('customer.crudActions.cancel')"
           @click="$emit('click:CloseBtn')"
+          dense
         />
         <q-btn
           type="submit"
@@ -43,7 +39,8 @@
           no-caps
           style="width: 90px"
           :label="$t('customer.crudActions.save')"
-          @click="$emit('uploadEmbed')"
+          @click="confirmEditEmbed"
+          dense
         />
       </q-card-actions>
     </q-card>

src/i18n/vi/index.ts

@@ -379,6 +379,7 @@ export default {
     confirmActionsTitle: {
       confirmDeleteArtistTitle: 'Xác nhận',
       confirmDeleteArtistContent: 'Bạn có chắc muốn xoá nghệ sỹ này không?',
+      confirmDeleteEmbedContent: 'Bạn có chắc muốn xoá Embed này không?',
       confirmDeleteArtistBtnLabel: 'Huỷ',
     },
     actionMessages: {

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

@@ -67,6 +67,7 @@
               v-model:account="account"
               v-model:short-description="shortDescription"
               v-model:format-schedules="formatSchedules"
+              @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
               @selectedFile="selectedFile"
               @deleteBanner="banners.splice($event, 1)"
               @openDialogUploadEmbed="isOpenDialogEmbed = true"
@@ -121,8 +122,8 @@
 
     <UploadEmbedDialog
       v-model:is-open-dialog-embed="isOpenDialogEmbed"
-      v-model:social-embedded="socialEmbedded"
-      @uploadEmbed="isOpenDialogEmbed = false"
+      :social-embedded="socialEmbedded"
+      @uploadEmbed="changeEmbed"
       @click:CloseBtn="isOpenDialogEmbed = false"
     ></UploadEmbedDialog>
 

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

@@ -56,8 +56,6 @@ export default defineComponent({
   },
 
   setup(_, context) {
-
-  
     const route = useRoute();
     const tab = ref('information');
 
@@ -85,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();
@@ -107,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([]);
@@ -172,10 +171,6 @@ export default defineComponent({
       }
     };
 
-    const setAvatar = (value: BannerType) => {
-      console.log(value);
-      avatar.value = value.url as string;
-    };
     const getFieldOptions = async () => {
       const response = (await api({
         url: API_PATHS.getFieldOptions,
@@ -330,6 +325,44 @@ 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 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 updateInformationArtist = async () => {
       try {
@@ -376,24 +409,23 @@ export default defineComponent({
         }
       } catch (error) {}
     };
-   const deleteAvatar=()=>{
-      avatar.value = null
-      
-    };
-    const deleteImagesStories=(value:number)=>{
-      console.log(value,'deleteImagesStories');
+    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){
+    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)
+          stories.value.splice(Number(stories.value[i]), 1);
         }
       }
       console.log(stories.value);
     };
 
+    const deleteAvatar = () => {
+      avatar.value = null;
+    };
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -477,7 +509,9 @@ export default defineComponent({
       setAvatar,
       deleteAvatar,
       deleteImagesStories,
-      DeleteItemStories
+      DeleteItemStories,
+      confirmDeleteSocialEmbedded,
+      changeEmbed,
     };
   },
 });