update code

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

 import { defineComponent, Ref, ref, watch } from 'vue';
-// import { i18n } from 'src/boot/i18n';
+import { i18n } from 'src/boot/i18n';
 // import { isEmail } from '../../../boot/functions';
 // import { isMobilePhone } from '../../../boot/functions';
 import UploadImage from '../../upload-image/index.vue';
@@ -51,6 +51,21 @@ export default defineComponent({
                 imageUrl: urlFileLocal.value
             })
         }
+        const product_code = [
+            (val?: string) =>
+              (val && val.trim().length) ||
+              i18n.global.t(
+                'artist.artistInformation.validateMessages.requireProducCode'
+              ),
+          ];
+          const url_embed = [
+            (val?: string) =>
+              (val && val.trim().length) ||
+              i18n.global.t(
+                'artist.artistInformation.validateMessages.requireUrlembed'
+              ),
+          ];
+       
         return {
             uploadAvatar,
             SubbmitData,
@@ -59,7 +74,9 @@ export default defineComponent({
             code,
             embeddedUrl,
             status,
-            ResetData
+            ResetData,
+            product_code,
+            url_embed
         };
     },
 

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

@@ -2,11 +2,10 @@
   <q-dialog
     persistent
     :model-value="openAddHotProduct"
-     @update:model-value="$emit('update:openAddHotProduct', $event)"
+    @update:model-value="$emit('update:openAddHotProduct', $event)"
   >
     <q-card style="min-width: 600px" bordered>
-     
-      <q-form greedy >
+      <q-form greedy @submit="SubbmitData">
         <q-card-section>
           <q-item>
             <q-item-section>
@@ -21,22 +20,26 @@
         <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 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"
+                :isBtn="true"
                 @selectedFile="uploadAvatar"
               ></UploadImage>
               <q-input
-               v-model="code"
+                v-model="code"
                 label="
                  Mã sản phẩm
                 "
+                :rules="product_code"
                 type="text"
                 class="q-my-sm"
                 outlined
@@ -44,29 +47,22 @@
                 clearable
               ></q-input>
               <q-input
-               v-model="embeddedUrl"
+                v-model="embeddedUrl"
                 label="Url embed"
+                :rules="url_embed"
                 hide-bottom-space
                 type="text"
                 class="q-my-sm"
                 outlined
                 clearable
               ></q-input>
-             
-            </div> 
-              <div style="padding-top: 13px; padding-left: 12px">
-                <span class="text-body1">{{
+            </div>
+            <div style="padding-top: 13px; padding-left: 12px">
+              <span class="text-body1">{{
                 $t('userPage.dialogLabel.fieldLabels.status')
-              }}</span
-              >
-              <q-toggle
-                v-model="status"
-                :false-value="2"
-                :true-value="1"
-              
-              />
-              </div>
-              
+              }}</span>
+              <q-toggle v-model="status" :false-value="2" :true-value="1" />
+            </div>
           </div>
         </q-card-section>
         <q-card-actions align="right">
@@ -78,12 +74,11 @@
             @click="$emit('click:CloseBtnAddHotProduct')"
           />
           <q-btn
-           
             color="primary"
             no-caps
             style="width: 90px"
             :label="$t('customer.crudActions.save')"
-            @click="SubbmitData"
+            type="submit"
           />
         </q-card-actions>
       </q-form>

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="openUpdateHotProduct"
+    @update:model-value="$emit('update:openUpadateHotProduct', $event)"
+  >
+    <q-card style="min-width: 600px" bordered>
+      <q-form greedy @submit="SubbmitDataUpdate">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('artist.dialogLabel.title.addHotProduct')
+              }}</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-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
+                v-model="code"
+                label="
+                 Mã sản phẩm
+                "
+                :rules="product_code"
+                type="text"
+                class="q-my-sm"
+                outlined
+                hide-bottom-space
+                clearable
+              ></q-input>
+              <q-input
+                v-model="embeddedUrl"
+                label="Url embed"
+                :rules="url_embed"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+                clearable
+              ></q-input>
+            </div>
+            <div style="padding-top: 13px; padding-left: 12px">
+              <span class="text-body1">{{
+                $t('userPage.dialogLabel.fieldLabels.status')
+              }}</span>
+              <q-toggle v-model="status" :false-value="2" :true-value="1" />
+            </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:CloseBtnUpdateHotProduct')"
+          />
+          <q-btn
+            color="primary"
+            no-caps
+            style="width: 90px"
+            :label="$t('customer.crudActions.save')"
+            type="submit"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./updateHotProduc.ts"></script>

src/components/artist-information/UpdateHotProduct/updateHotProduc.ts

+import { defineComponent, PropType, 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';
+import { ProductType } from 'src/assets/type';
+
+export default defineComponent({
+  components: {
+    UploadImage,
+  },
+
+  props: {
+    openUpdateHotProduct: {
+      type: Boolean,
+      requied: true,
+    },
+    dataUpdate: {
+      type: Object as PropType<ProductType>,
+      requied: false,
+    },
+  },
+
+  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 id: Ref<number | null> = ref(null);
+    const uploadAvatar = (value: FileList) => {
+      urlFileLocal.value = URL.createObjectURL(value[0]);
+      file.value = value[0];
+    };
+    watch(
+      () => props.openUpdateHotProduct,
+      (value) => {
+        if (value) {
+          id.value = props.dataUpdate?.id as number;
+          code.value = props.dataUpdate?.code as string;
+          embeddedUrl.value = props.dataUpdate?.embeddedUrl as string;
+          status.value = props.dataUpdate?.status as number;
+          urlFileLocal.value = props.dataUpdate?.imageUrl as string;
+        }
+      }
+    );
+    const ResetData = () => {
+      file.value = '';
+      code.value = '';
+      embeddedUrl.value = '';
+      urlFileLocal.value = '';
+      status.value = 2;
+    };
+    const SubbmitDataUpdate = () => {
+      context.emit('click:CloseBtnUpdateHotProduct');
+      context.emit('UpdateData', {
+        file: file.value,
+        code: code.value,
+        status: status.value,
+        embeddedUrl: embeddedUrl.value,
+        imageUrl: urlFileLocal.value,
+        id:id.value
+      });
+    };
+    const product_code = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireProducCode'
+        ),
+    ];
+    const url_embed = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireUrlembed'
+        ),
+    ];
+
+    return {
+      uploadAvatar,
+      SubbmitDataUpdate,
+      urlFileLocal,
+      file,
+      code,
+      embeddedUrl,
+      status,
+      ResetData,
+      product_code,
+      url_embed,
+      id,
+    };
+  },
+
+  emits: [
+    'UpdateData',
+    'update:statusHotProduct',
+    'selectedFile',
+    'click:CloseBtnUpdateHotProduct',
+    'update:openUpadateHotProduct',
+  ],
+});

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

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
+import { ProductType } from 'src/assets/type';
 export default defineComponent({
   components: {
     Pagination,
@@ -91,13 +92,26 @@ export default defineComponent({
       pageIndex.value = 1;
       void getListHotProduct();
     };
-
+    const updateProduct = (item: { row: ProductType }) => {
+      context.emit('setDataUpdate', {
+        code: item.row.code,
+        embeddedUrl: item.row.embeddedUrl,
+        id: item.row.id,
+        imageUrl: item.row.imageUrl,
+        name: item.row.name,
+        status: item.row.status,
+      });
+      
+      context.emit('click:openUpadateHotProduct'
+        );
+    };
     const clickAdd = () => {
       context.emit('click:addHotProduct');
     };
     const deleteRow = (index: number) => {
       context.emit('deleteRow', index);
     };
+
     onMounted(() => {
       void getListHotProduct();
     });
@@ -111,7 +125,14 @@ export default defineComponent({
       getListHotProduct,
       changePageSize,
       clickAdd,
+      updateProduct,
     };
   },
-  emits: ['click:addHotProduct', 'reset', 'deleteRow'],
+  emits: [
+    'click:addHotProduct',
+    'reset',
+    'deleteRow',
+    'click:openUpadateHotProduct',
+    'setDataUpdate'
+  ],
 });

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

@@ -3,7 +3,7 @@
     <q-space></q-space>
     <div class="col-auto">
       <q-btn
-         @click="clickAdd"
+        @click="clickAdd"
         color="primary"
         no-caps
         style="width: 100px"
@@ -23,51 +23,54 @@
         <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
-              <q-checkbox  
+              <q-checkbox
                 :true-value="1"
-                :false-value="2" 
-                v-model="rowData.value" 
+                :false-value="2"
+                v-model="rowData.value"
               />
             </div>
           </q-td>
         </template>
-         <template v-slot:body-cell-STT="item">
+        <template v-slot:body-cell-STT="item">
           <q-td style="padding: 0; height: 100%">
             <div align="center">
               {{ item.rowIndex + 1 }}
             </div>
           </q-td>
         </template>
-    
-         <template v-slot:body-cell-action="item">
+
+        <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">
-              <q-tooltip>
-                Sửa
-              </q-tooltip>
-            </q-btn>
-            <q-btn flat round color="primary" @click="deleteRow(item.rowIndex)" icon="mdi-delete-outline">
-              <q-tooltip>
-                Xóa
-              </q-tooltip>
-            </q-btn>
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-circle-edit-outline"
+                @click="updateProduct(item)"
+              >
+                <q-tooltip> Sửa </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                color="primary"
+                @click="deleteRow(item.rowIndex)"
+                icon="mdi-delete-outline"
+              >
+                <q-tooltip> Xóa </q-tooltip>
+              </q-btn>
             </div>
           </q-td>
         </template>
         <template v-slot:body-cell-imageUrl="rowData">
           <q-td style="padding: 0; height: 100%">
             <div align="center">
-              <q-img
-                :src="rowData.value"
-                style="width: 100%"
-               >
-              </q-img> 
+              <q-img :src="rowData.value" style="max-width: 70px"> </q-img>
             </div>
           </q-td>
         </template>
       </q-table>
-      
     </div>
   </div>
 </template>

src/i18n/vi/index.ts

@@ -104,6 +104,7 @@ export default {
       requireUserName: 'Tên đăng nhập không hợp lệ',
       requirePassword: 'Vui lòng nhập mật khẩu',
       requireFullName: 'Vui lòng nhập họ tên',
+     
       requireEmail: 'Vui lòng nhập Email',
       isEmail: 'Email không hợp lệ',
       requireMobileNumber: 'Vui lòng nhập số điện thoại',
@@ -182,6 +183,7 @@ export default {
       requireName: 'Vui lòng nhập Tên đơn vị',
       requireRepresentative: 'Vui lòng nhập Người đại diện',
       requireFields: 'Vui lòng chọn Lĩnh vực',
+      
       requireEmail: 'Vui lòng nhập Email',
       isEmail: 'Email không hợp lệ',
       requirePhoneNumber: 'Vui lòng nhập Số điện thoại',
@@ -419,6 +421,8 @@ export default {
         whatsapp: 'Whatsapp',
       },
       validateMessages: {
+        requireProducCode: 'Vui lòng nhập mã sản phẩm',
+        requireUrlembed: 'Vui lòng nhập Url Embed',
         requireArtistCode: 'Vui lòng nhập mã nghệ sỹ',
         requireFullName: 'Vui lòng nhập họ tên nghệ sỹ',
         requireArtistName: 'Vui lòng nhập nghệ danh',

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

@@ -86,11 +86,13 @@
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
             <HotProduct
+              :products="products"
               @deleteRow="confirmDeleteRow($event)"
               @reset="resetOldData"
               :DataInsertHotProduct="DataInsertHotProduct"
               @click:addHotProduct="openAddHotProduct = true"
-              :products="products"
+              @click:openUpadateHotProduct="openUpdateHotProduct = true"
+              @setDataUpdate="SetProduct($event)"
             ></HotProduct>
           </q-tab-panel>
         </q-tab-panels>
@@ -131,6 +133,12 @@
       v-model:open-add-hot-product="openAddHotProduct"
       @click:CloseBtnAddHotProduct="openAddHotProduct = false"
     ></AddHotProductDialog>
+    <UpdateHotProduct
+      :dataUpdate="DataUpdatHotProduct"
+      @UpdateData="UpdateData($event)"
+      @click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
+      v-model:open-update-hot-product="openUpdateHotProduct"
+    ></UpdateHotProduct>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

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

@@ -14,7 +14,7 @@ import { AxiosResponse } from 'axios';
 import moment from 'moment';
 import { i18n } from 'src/boot/i18n';
 import { Dialog, Notify } from 'quasar';
-
+import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
 import {
   ArtistInfoType,
   FieldType,
@@ -41,6 +41,7 @@ export default defineComponent({
     UploadEmbedDialog,
     AddHotProductDialog,
     EditBankAccountDialog,
+    UpdateHotProduct,
   },
   watch: {
     tab(value) {
@@ -63,7 +64,7 @@ export default defineComponent({
     const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
     const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
     const openAddHotProduct: Ref<boolean> = ref(false);
-
+    const openUpdateHotProduct: Ref<boolean> = ref(false);
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
     const fieldOptions: Ref<FieldType[]> = ref([]);
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
@@ -156,6 +157,7 @@ export default defineComponent({
     //satate hot product
     const statusHotProduct: Ref<number> = ref(2);
     const DataInsertHotProduct: Ref<ProductType | null> = ref(null);
+    const DataUpdatHotProduct: Ref<ProductType | null> = ref(null);
 
     const getInformationArtist = async () => {
       const response = (await api({
@@ -285,8 +287,6 @@ export default defineComponent({
       });
     };
     const openDialogAddHotProduct = () => {
-      console.log('object');
-      // console.log(openAddHotProduct.value);
       openAddHotProduct.value = true;
     };
     const openDialogAddAccBank = () => {
@@ -346,6 +346,7 @@ export default defineComponent({
 
     const pushData = (value: ProductType) => {
       products.value.push(value);
+      console.log(products.value);
     };
     const reset = ref(null);
     const resetOldData = () => {
@@ -413,7 +414,20 @@ export default defineComponent({
         }
       } catch (error) {}
     };
-
+    const UpdateData = (value:ProductType)=>{
+    
+     
+      for(let i=0; i<products.value.length;i++){
+        if(products.value[i].id === value?.id){
+          // console.log(products.value[i],'Item đẹpo');
+          products.value[i] = value
+        }
+      }
+      // console.log(products.value);
+    };
+    const SetProduct = (value: ProductType) => {
+      DataUpdatHotProduct.value= value
+    };
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -496,6 +510,10 @@ export default defineComponent({
       deleteRowItem,
       confirmDeleteRow,
       updateInformationArtist,
+      openUpdateHotProduct,
+      SetProduct,
+      DataUpdatHotProduct,
+      UpdateData
     };
   },
 });