update

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

@@ -76,10 +76,34 @@ export default defineComponent({
         });
       });
     };
+
     const deleteStory = (storyIdx: number) => {
       context.emit('confirmDeleteStory', storyIdx);
     };
 
+    const uploadBannerImg = ref(null);
+    const indexBanner = ref(0);
+    const updateImage = (index: number) => {
+      indexBanner.value = index;
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      uploadBannerImg.value?.click();
+    };
+
+    const updateBanner = (value: FileList) => {
+      context.emit('editBanner', {
+        index: indexBanner.value,
+        obj: encodeImageFileAsURL(value[0]),
+      });
+
+      Notify.create({
+        type: 'positive',
+        message: i18n.global.t('artist.actionMessages.bannerUpdateAccess'),
+        actions: [{ icon: 'close', color: 'white' }],
+      });
+    };
+
     return {
       autoplay: ref(true),
       router,
@@ -91,6 +115,9 @@ export default defineComponent({
       deleteImage,
       deleteStory,
       configImg,
+      updateImage,
+      uploadBannerImg,
+      updateBanner,
     };
   },
   emits: [
@@ -106,5 +133,6 @@ export default defineComponent({
     'click:openAddStoryDialog',
     'click:openUpdateStoryDialog',
     'confirmDeleteStory',
+    'editBanner',
   ],
 });

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

@@ -34,8 +34,14 @@
     </div>
     <div class="col-12 flex q-mt-sm">
       <div class="text-uppercase text-weight-medium">Thông tin profile</div>
+      <q-space />
+      <UploadImage
+        v-if="banners.length !== 0"
+        :isButton="false"
+        @selectedFile="uploadBanner"
+      ></UploadImage>
     </div>
-    <div class="col-12 q-mt-sm">
+    <div class="col-12">
       <div class="row q-col-gutter-lg">
         <div class="col-12">
           <q-carousel
@@ -75,26 +81,48 @@
                     @click="deleteImage(bannerIdx)"
                   ></q-icon>
                 </div>
+                <div align="right">
+                  <div @click="updateImage(bannerIdx)">
+                    <q-icon
+                      style="
+                        position: absolute;
+                        right: 30px;
+                        font-size: 24px;
+                        top: 1px;
+                        cursor: pointer;
+                      "
+                      color="red"
+                      name="mdi-pencil-circle"
+                    >
+                    </q-icon>
+                    <input
+                      ref="uploadBannerImg"
+                      hidden
+                      type="file"
+                      accept="image/png, image/jpeg"
+                      @change="updateBanner($event.target.files)"
+                    />
+                  </div>
+                </div>
               </template>
             </q-carousel-slide>
           </q-carousel>
           <UploadImage
-            v-if="banners.length !== null"
-            :isBtn="true"
+            v-if="banners.length === 0"
             @selectedFile="uploadBanner"
           ></UploadImage>
-          <UploadImage v-else @selectedFile="uploadBanner"> </UploadImage>
         </div>
         <div class="col-12">
           <q-editor
             :model-value="shortDescription"
             @update:model-value="$emit('update:shortDescription', $event)"
             ref="editorRef"
-            placeholder="Nội dung"
+            placeholder="Thông tin Profile"
             toolbar-text-color="white"
             toolbar-toggle-color="yellow-8"
             toolbar-bg="primary"
             style="height: 100%"
+            :spellcheck="false"
             :toolbar="[
               [
                 {

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

@@ -311,7 +311,6 @@
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.favoriteScore') }}
-          <span style="color: red">*</span>
         </div>
         <div class="col-8">
           <q-input

src/components/configSystem/index.vue

@@ -90,6 +90,7 @@
                   toolbar-text-color="white"
                   toolbar-toggle-color="yellow-8"
                   toolbar-bg="primary"
+                  :spellcheck="false"
                   :toolbar="[
                     [
                       {

src/components/upload-image/UploadImage.ts

@@ -6,6 +6,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    isButton: {
+      type: Boolean,
+      default: true,
+    },
+    tooltipMessage: {
+      type: String,
+      default: '',
+    },
   },
   setup() {
     const upload = ref(null);

src/components/upload-image/index.vue

 <template>
   <div @click="uploadBanner">
     <div
+      v-if="isButton"
       style="
         border: 2px dashed #5d319e;
         border-radius: 5px;
@@ -17,6 +18,16 @@
       <span>Tải ảnh lên</span>
       <!-- <div style="font-size: 12px">(kích cỡ: 1914x448)</div> -->
     </div>
+
+    <q-btn
+      v-else
+      class="q-py-md"
+      flat
+      style="color: #5d319e"
+      icon="mdi-plus-circle-outline"
+    >
+      <q-tooltip v-if="tooltipMessage">{{ tooltipMessage }}</q-tooltip>
+    </q-btn>
     <input
       ref="upload"
       hidden

src/i18n/vi/index.ts

@@ -462,6 +462,7 @@ export default {
       StoryAddSuccess: 'Thêm Story thành công',
       bannerDeleteAccess: 'Xóa banner thành công',
       bannerAddAccess: 'Thêm banner thành công',
+      bannerUpdateAccess: 'Cập nhập banner thành công',
     },
     artistInformation: {
       tabLabel: {

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

@@ -90,14 +90,15 @@
             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"
             :id="route.params.id"
             :social-embedded="socialEmbedded"
             :banners="banners"
             :stories="stories"
+            @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
+            @selectedFile="selectedFile"
+            @deleteBanner="banners.splice($event, 1)"
+            @openDialogUploadEmbed="isOpenDialogEmbed = true"
+            @editBanner="editBanner"
             @deleteStories="DeleteItemStories"
             @click:openAddStoryDialog="isOpenAddStory = true"
             @click:openUpdateStoryDialog="isOpenUpdateStory = true"

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

@@ -499,6 +499,9 @@ export default defineComponent({
     const selectedFile = (value: BannerType) => {
       banners.value.push(value);
     };
+    const editBanner = (data: { index: number; obj: BannerType }) => {
+      banners.value[data.index] = data.obj;
+    };
     const reset = ref(null);
     const resetOldData = () => {
       document.getElementById('reset')?.click();
@@ -931,6 +934,7 @@ export default defineComponent({
       formatSchedules,
       confirmDeleteAccBank,
       selectedFile,
+      editBanner,
       isOpenDialogEmbed,
       cardBankOptions,
       typeBankOptions,

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

@@ -440,6 +440,10 @@ export default defineComponent({
     const selectedFile = (value: BannerType) => {
       banners.value.push(value);
     };
+
+    const editBanner = (data: { index: number; obj: BannerType }) => {
+      banners.value[data.index] = data.obj;
+    };
     const reset = ref(null);
     const resetOldData = () => {
       document.getElementById('reset')?.click();
@@ -843,6 +847,7 @@ export default defineComponent({
       formatSchedules,
       confirmDeleteAccBank,
       selectedFile,
+      editBanner,
       isOpenDialogEmbed,
       cardBankOptions,
       typeBankOptions,

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

@@ -90,10 +90,6 @@
             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"
             :id="route.params.id"
             :social-embedded="socialEmbedded"
             :banners="banners"
@@ -102,6 +98,11 @@
             @click:openAddStoryDialog="isOpenAddStory = true"
             @click:openUpdateStoryDialog="isOpenUpdateStory = true"
             @confirmDeleteStory="deleteStory"
+            @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
+            @selectedFile="selectedFile"
+            @editBanner="editBanner"
+            @deleteBanner="banners.splice($event, 1)"
+            @openDialogUploadEmbed="isOpenDialogEmbed = true"
           ></VabAccount>
         </q-tab-panel>
         <q-tab-panel name="bankAccount">