update

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

@@ -70,5 +70,6 @@ export default defineComponent({
     'update:formatSchedules',
     'selectedFile',
     'deleteBanner',
+    'openDialogUploadEmbed',
   ],
 });

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

@@ -90,14 +90,38 @@
     <div class="col-12 q-mt-md">
       <div class="row q-col-gutter-lg" align="center" justify="center">
         <div class="col-4">
-          <div class="text-h6 text-weight-regular">Nổi bật(Embed)</div>
-          <q-card class="my-card q-mt-sm" style="height: 300px">
-            <!-- <img style="height: 100%" :src="socialEmbedded" /> -->
+          <div class="flex flex-center">
+            <div class="text-h6 text-weight-regular">Nổi bật(Embed)</div>
+            <q-space></q-space>
+            <q-btn
+              v-if="socialEmbedded !== null"
+              @click="$emit('openDialogUploadEmbed')"
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil-circle-outline"
+            ></q-btn>
+          </div>
+          <q-card
+            class="my-card q-mt-sm flex flex-center"
+            style="height: 300px"
+            bordered
+          >
             <iframe
+              v-if="socialEmbedded !== null"
               style="height: 100%; width: 100%"
               :src="socialEmbedded"
               frameborder="0"
             ></iframe>
+            <div
+              v-else
+              @click="$emit('openDialogUploadEmbed')"
+              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.uploadEmbed') }}</div>
+            </div>
           </q-card>
         </div>
 

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

+import { defineComponent } from 'vue';
+export default defineComponent({
+  // name: 'ComponentName'
+  props: {
+    isOpenDialogEmbed: {
+      type: Boolean,
+      required: true,
+    },
+    socialEmbedded: { type: String, required: true },
+  },
+  emits: [
+    'update:isOpenDialogEmbed',
+    'click:CloseBtn',
+    'update:socialEmbedded',
+    'uploadEmbed',
+  ],
+});

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpenDialogEmbed"
+    @update:model-value="$emit('update:isOpenDialogEmbed', $event)"
+  >
+    <q-card bordered>
+      <q-card-section>
+        <q-item>
+          <q-item-section>
+            <q-item-label class="text-h6 text-weight-regular">{{
+              $t('uploadImage.titleEmbedDialog')
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <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>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          color="grey"
+          no-caps
+          style="width: 90px"
+          :label="$t('customer.crudActions.cancel')"
+          @click="$emit('click:CloseBtn')"
+        />
+        <q-btn
+          type="submit"
+          color="primary"
+          no-caps
+          style="width: 90px"
+          :label="$t('customer.crudActions.save')"
+          @click="$emit('uploadEmbed')"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./UploadEmbedDialog.ts"></script>

src/i18n/vi/index.ts

@@ -452,5 +452,7 @@ export default {
   recordPerPage: 'Số bản ghi',
   uploadImage: {
     uploadBanner: 'Tải lên Banner',
+    uploadEmbed: 'Tải lên Embed',
+    titleEmbedDialog: 'Thay đổi Embed',
   },
 };

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

@@ -69,11 +69,13 @@
               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"
@@ -97,6 +99,12 @@
       @addNewBankAccount="addAccBank"
       @click:CloseBtn="isOpenAddAccountBankDialog = false"
     ></AddNewBankAccountDialog>
+    <UploadEmbedDialog
+      v-model:is-open-dialog-embed="isOpenDialogEmbed"
+      v-model:social-embedded="socialEmbedded"
+      @uploadEmbed="isOpenDialogEmbed = false"
+      @click:CloseBtn="isOpenDialogEmbed = false"
+    ></UploadEmbedDialog>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

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';
 import HotProduct from '../../components/artist-information/hot-product/index.vue';
 import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/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';
@@ -30,6 +31,7 @@ export default defineComponent({
     BankAccount,
     HotProduct,
     AddNewBankAccountDialog,
+    UploadEmbedDialog,
   },
   watch: {
     tab(value) {
@@ -50,6 +52,7 @@ export default defineComponent({
       console.log('askdaskdkasds');
     };
     const isOpenAddAccountBankDialog: 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([]);
@@ -293,6 +296,7 @@ export default defineComponent({
       formatSchedules,
       confirmDeleteAccBank,
       selectedFile,
+      isOpenDialogEmbed,
     };
   },
 });