update code

src/components/artist-information/AddHotProduct/AddHotProductDialog.ts

-import { defineComponent } from 'vue';
+import { defineComponent, Ref, ref, watch } from 'vue';
 // import { i18n } from 'src/boot/i18n';
 // import { isEmail } from '../../../boot/functions';
 // import { isMobilePhone } from '../../../boot/functions';
+import UploadImage from '../../upload-image/index.vue';
 
 export default defineComponent({
+    components: {
+        UploadImage
+    },
+
     props: {
         openAddHotProduct: {
             type: Boolean,
             requied: true
         },
-        status: { type: Boolean || Number, required: false },
     },
-    setup() {
-
 
+    setup(props, context) {
+        const file: Ref<File | string> = ref('')
+        const code: Ref<string> = ref('')
+        const embeddedUrl: Ref<string> = ref('')
+        const urlFileLocal: Ref<string> = ref('')
+        const status: Ref<number> = ref(2)
+        const uploadAvatar = (value: FileList) => {
+            urlFileLocal.value = URL.createObjectURL(value[0])
+            file.value = value[0]
+        };
+        watch(
+            () => props.openAddHotProduct,
+            (value) => {
+                if (value) {
+                    ResetData()
+                }
+            }
+        );
+        const ResetData = () => {
+            file.value = ''
+            code.value = ''
+            embeddedUrl.value = ''
+            urlFileLocal.value = ''
+            status.value = 2
+        }
+        const SubbmitData = () => {
+            context.emit('click:CloseBtnAddHotProduct')
+            context.emit('insertData', {
+                file: file.value,
+                code: code.value,
+                status: status.value,
+                embeddedUrl: embeddedUrl.value,
+                imageUrl: urlFileLocal.value
+            })
+        }
         return {
-
+            uploadAvatar,
+            SubbmitData,
+            urlFileLocal,
+            file,
+            code,
+            embeddedUrl,
+            status,
+            ResetData
         };
     },
+
     emits: [
+        'insertData',
         'update:openAddHotProduct',
-        'update:status',
+        'update:statusHotProduct',
+        'selectedFile',
         'click:CloseBtnAddHotProduct'
     ],
 });
+
+

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

@@ -4,7 +4,8 @@
     :model-value="openAddHotProduct"
      @update:model-value="$emit('update:openAddHotProduct', $event)"
   >
-    <q-card style="min-width: 700px" bordered>
+    <q-card style="min-width: 600px" bordered>
+     
       <q-form greedy >
         <q-card-section>
           <q-item>
@@ -20,27 +21,21 @@
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
+              <q-card flat style="max-height:200px" v-if="urlFileLocal">
+               <div align=center>
+                  <q-img :src="urlFileLocal"  style="max-height:200px;aspect-ratio: 16/9;" > 
+                </q-img>
+               </div>
+              </q-card>
+              <UploadImage
+                class="q-mt-md"
+               :isBtn="true"
+                @selectedFile="uploadAvatar"
+              ></UploadImage>
               <q-input
-                :label="
-                  $t('artist.artistInformation.titleDataField.artistCode')
-                "
-                type="text"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-input>
-              <q-input
-                :label="$t('artist.artistInformation.titleDataField.fullName')"
-                hide-bottom-space
-                type="text"
-                class="q-my-sm"
-                outlined
-                clearable
-              ></q-input>
-              <q-input
-                :label="
-                  $t('artist.artistInformation.titleDataField.artistName')
+               v-model="code"
+                label="
+                 Mã sản phẩm
                 "
                 type="text"
                 class="q-my-sm"
@@ -49,21 +44,15 @@
                 clearable
               ></q-input>
               <q-input
-                :label="$t('artist.artistInformation.titleDataField.birthday')"
-                type="text"
-                class="q-my-sm"
-                outlined
+               v-model="embeddedUrl"
+                label="Url embed"
                 hide-bottom-space
-                clearable
-              ></q-input>
-              <q-input
-                :label="$t('artist.artistInformation.titleDataField.email')"
                 type="text"
                 class="q-my-sm"
                 outlined
-                hide-bottom-space
                 clearable
               ></q-input>
+             
             </div> 
               <div style="padding-top: 13px; padding-left: 12px">
                 <span class="text-body1">{{
@@ -71,8 +60,9 @@
               }}</span
               >
               <q-toggle
-              
-                :model-value="status"
+                v-model="status"
+                :false-value="2"
+                :true-value="1"
               
               />
               </div>
@@ -88,11 +78,12 @@
             @click="$emit('click:CloseBtnAddHotProduct')"
           />
           <q-btn
-            type="submit"
+           
             color="primary"
             no-caps
             style="width: 90px"
             :label="$t('customer.crudActions.save')"
+            @click="SubbmitData"
           />
         </q-card-actions>
       </q-form>

src/components/artist-information/hot-product/HotProduct.ts

@@ -7,8 +7,9 @@ export default defineComponent({
   },
   props: {
     products: { type: Array, required: true },
+    // DataInsertHotProduct: { type: Object, requied: false }
   },
-  setup() {
+  setup(_, context) {
     const userTableColumnsHotProduct = [
       {
         name: 'STT',
@@ -62,6 +63,7 @@ export default defineComponent({
         sortable: false,
       },
     ];
+
     const userTableRowsHotProduct: Ref<unknown[]> = ref([]);
     const pageIndex = ref(1);
     const pageSize = ref(20);
@@ -90,6 +92,12 @@ export default defineComponent({
       void getListHotProduct();
     };
 
+    const clickAdd = () => {
+      context.emit('click:addHotProduct');
+    }
+    const deleteRow = (index: number) => {
+      context.emit('deleteRow', index)
+    }
     onMounted(() => {
       void getListHotProduct();
     });
@@ -99,10 +107,11 @@ export default defineComponent({
       pageIndex,
       pageSize,
       totalPage,
-
+      deleteRow,
       getListHotProduct,
       changePageSize,
+      clickAdd,
     };
   },
-  emits: ['click:addHotProduct']
+  emits: ['click:addHotProduct', 'reset', 'deleteRow']
 });

src/components/artist-information/hot-product/index.vue

@@ -3,7 +3,7 @@
     <q-space></q-space>
     <div class="col-auto">
       <q-btn
-         @click="$emit('click:addHotProduct')"
+         @click="clickAdd"
         color="primary"
         no-caps
         style="width: 100px"
@@ -39,7 +39,7 @@
           </q-td>
         </template>
     
-         <template v-slot:body-cell-action>
+         <template v-slot:body-cell-action="item">
           <q-td style="padding: 0; height: 100%">
             <div align="center">
             <q-btn flat round color="primary" icon="mdi-circle-edit-outline">
@@ -47,7 +47,7 @@
                 Sửa
               </q-tooltip>
             </q-btn>
-            <q-btn flat round color="primary" icon="mdi-delete-outline">
+            <q-btn flat round color="primary" @click="deleteRow(item.rowIndex)" icon="mdi-delete-outline">
               <q-tooltip>
                 Xóa
               </q-tooltip>

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

@@ -86,6 +86,9 @@
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
             <HotProduct
+              @deleteRow="confirmDeleteRow($event)"
+              @reset="resetOldData"
+              :DataInsertHotProduct="DataInsertHotProduct"
               @click:addHotProduct="openAddHotProduct = true"
               :products="products"
             ></HotProduct>
@@ -123,7 +126,8 @@
       @click:CloseBtn="isOpenDialogEmbed = false"
     ></UploadEmbedDialog>
     <AddHotProductDialog
-      v-model:status="status"
+      @insertData="pushData"
+      v-model:status-hot-product="statusHotProduct"
       v-model:open-add-hot-product="openAddHotProduct"
       @click:CloseBtnAddHotProduct="openAddHotProduct = false"
     ></AddHotProductDialog>

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';
@@ -153,6 +153,11 @@ export default defineComponent({
     const isDefault: Ref<number | undefined> = ref(1);
     const rowBankAccIdx: Ref<number> = ref(0);
 
+    //satate hot product
+    const statusHotProduct: Ref<number> = ref(2)
+    const DataInsertHotProduct: Ref<ProductType | null> = ref(null)
+
+
     const getInformationArtist = async () => {
       const response = (await api({
         url: API_PATHS.getDetailArtist,
@@ -340,6 +345,33 @@ export default defineComponent({
       isOpenEditAccountBankDialog.value = false;
     };
 
+    const pushData = (value: ProductType) => {
+      products.value.push(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(() => {
+        deleteRowItem(value);
+      });
+    };
+    const deleteRowItem = (index: number) => {
+      products.value.splice(index, 1)
+    }
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -414,6 +446,13 @@ export default defineComponent({
       openDialogEditAccBank,
       editAccBank,
       rowBankAccIdx,
+      statusHotProduct,
+      DataInsertHotProduct,
+      pushData,
+      resetOldData,
+      reset,
+      deleteRowItem,
+      confirmDeleteRow
     };
   },
 });