fix bug

src/assets/type.ts

@@ -159,6 +159,8 @@ export type ProductType = {
   name: string;
   numIndex: number;
   status: number;
+  url?: string;
+  file?: File;
 };
 
 export type ArtistOwner = {

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

@@ -23,7 +23,7 @@
               <q-card flat style="max-height: 200px" v-if="urlFileLocal">
                 <div align="center">
                   <q-img
-                    :src="urlFileLocal"
+                    :src="imageAPI ? imageAPI : urlFileLocal"
                     style="max-height: 200px; aspect-ratio: 16/9"
                   >
                   </q-img>

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

@@ -4,7 +4,7 @@ import { i18n } from 'src/boot/i18n';
 // import { isMobilePhone } from '../../../boot/functions';
 import UploadImage from '../../upload-image/index.vue';
 import { ProductType } from 'src/assets/type';
-
+import { config } from 'src/assets/configurations';
 export default defineComponent({
   components: {
     UploadImage,
@@ -22,16 +22,20 @@ export default defineComponent({
   },
 
   setup(props, context) {
+    const configImg = config;
     const file: Ref<File | string> = ref('');
     const code: Ref<string> = ref('');
     const embeddedUrl: Ref<string> = ref('');
     const urlFileLocal: Ref<string> = ref('');
+    const imageAPI: Ref<string | null> = ref(null);
     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];
+      imageAPI.value = null;
     };
+
     watch(
       () => props.openUpdateHotProduct,
       (value) => {
@@ -41,6 +45,10 @@ export default defineComponent({
           embeddedUrl.value = props.dataUpdate?.embeddedUrl as string;
           status.value = props.dataUpdate?.status as number;
           urlFileLocal.value = props.dataUpdate?.imageUrl as string;
+
+          imageAPI.value =
+            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+            configImg.API_IMAGE_ENDPOINT + props.dataUpdate?.imageUrl;
         }
       }
     );
@@ -59,7 +67,7 @@ export default defineComponent({
         status: status.value,
         embeddedUrl: embeddedUrl.value,
         imageUrl: urlFileLocal.value,
-        id:id.value
+        id: id.value,
       });
     };
     const product_code = [
@@ -89,6 +97,9 @@ export default defineComponent({
       product_code,
       url_embed,
       id,
+      configImg,
+
+      imageAPI,
     };
   },
 

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

@@ -3,6 +3,7 @@ import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
 import { ProductType } from 'src/assets/type';
 import { HotProductStatus } from 'src/assets/enums';
+import { config } from 'src/assets/configurations';
 export default defineComponent({
   components: {
     Pagination,
@@ -12,6 +13,7 @@ export default defineComponent({
     // DataInsertHotProduct: { type: Object, requied: false }
   },
   setup(_, context) {
+    const configImg = config;
     const userTableColumnsHotProduct = [
       {
         name: 'STT',
@@ -70,29 +72,6 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
-    const getListHotProduct = () => {
-      //   const response = (await api({
-      //     url: API_PATHS.getListArtist,
-      //     method: 'GET',
-      //     params: {
-      //       pageIndex: pageIndex.value,
-      //       pageSize: pageSize.value,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-      const fakeData: unknown[] = [
-        {
-          productCode: 91239381,
-          urlEmbed: 'urlEmbel',
-          productImage: 'Image',
-          status: true,
-        },
-      ];
-      userTableRowsHotProduct.value = fakeData;
-    };
-    const changePageSize = () => {
-      pageIndex.value = 1;
-      void getListHotProduct();
-    };
     const updateProduct = (item: { row: ProductType }) => {
       context.emit('setDataUpdate', {
         code: item.row.code,
@@ -112,18 +91,14 @@ export default defineComponent({
       context.emit('deleteRow', index);
     };
 
-    onMounted(() => {
-      void getListHotProduct();
-    });
     return {
+      configImg,
       userTableColumnsHotProduct,
       userTableRowsHotProduct,
       pageIndex,
       pageSize,
       totalPage,
       deleteRow,
-      getListHotProduct,
-      changePageSize,
       clickAdd,
       updateProduct,
       HotProductStatus,

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

@@ -44,17 +44,6 @@
             </div>
           </q-td>
         </template>
-        <!-- <template v-slot:body-cell-status="rowData">
-          <q-td>
-            <div align="center">
-              <q-checkbox
-                :true-value="1"
-                :false-value="2"
-                v-model="rowData.value"
-              />
-            </div>
-          </q-td>
-        </template> -->
         <template v-slot:body-cell-STT="item">
           <q-td style="padding: 0; height: 100%">
             <div align="center">
@@ -90,7 +79,14 @@
         <template v-slot:body-cell-imageUrl="rowData">
           <q-td style="padding: 0; height: 100%">
             <div align="center">
-              <q-img :src="rowData.value" style="max-width: 70px"> </q-img>
+              <q-img
+                :src="
+                  rowData.row.file === undefined
+                    ? configImg.API_IMAGE_ENDPOINT + rowData.value
+                    : rowData.value
+                "
+                style="max-width: 70px"
+              ></q-img>
             </div>
           </q-td>
         </template>

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

@@ -602,6 +602,23 @@ export default defineComponent({
         }
       } catch (error) {}
     };
+
+    const callAPIUploadHotProduct = async (file: File, idx: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: config.API_IMAGE_ENDPOINT,
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const urlHotProductUpload = response.data.data.fileName;
+          products.value[idx].imageUrl = urlHotProductUpload;
+        }
+      } catch (error) {}
+    };
     const checkValidate = () => {
       let hasError = false;
       if (!artistCode.value || !artistCode.value?.trim().length) {
@@ -705,6 +722,12 @@ export default defineComponent({
             await callApiUploadStories(item.file, idx);
           }
         }
+        for (let idx = 0; idx < products.value.length; idx++) {
+          const item = products.value[idx];
+          if (item.file !== undefined) {
+            await callAPIUploadHotProduct(item.file, idx);
+          }
+        }
 
         const response = (await api({
           url: API_PATHS.updateArtist,

src/pages/nghe-sy/artist.ts

@@ -116,7 +116,7 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
-    const fullNameKeyword = ref('');
+    const fullNameKeyword: Ref<string | null> = ref(null);
     const sexOptions = ref([
       { id: 1, name: 'Nam' },
       { id: 2, name: 'Nữ' },
@@ -170,7 +170,8 @@ export default defineComponent({
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           userTableRowsArtist.value = response.data.data.data;
           totalPage.value = response.data.data.totalPages;
-          console.log(response.data.data);
+          // pageSize.value = response.data.data.pageSize as number;
+          // pageIndex.value = response.data.data.pageIndex as number;
         }
       } catch (error) {}
     };

src/pages/nghe-sy/index.vue

@@ -7,6 +7,7 @@
         dense
         outlined
         :label="$t('artist.tableColumnsArtist.artistName')"
+        clearable
       ></q-input>
     </div>
     <div class="col-2" dense outlined>
@@ -18,6 +19,7 @@
         label="Lĩnh vực"
         dense
         outlined
+        clearable
       ></q-select>
     </div>
 
@@ -30,6 +32,7 @@
         dense
         outlined
         label="Độ chuyên"
+        clearable
       ></q-select>
     </div>
     <div class="col-2" dense outlined>
@@ -41,6 +44,7 @@
         dense
         outlined
         label="Xếp hạng"
+        clearable
       ></q-select>
     </div>
     <div class="col-auto">

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

@@ -545,6 +545,23 @@ export default defineComponent({
         }
       } catch (error) {}
     };
+
+    const callAPIUploadHotProduct = async (file: File, idx: number) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          url: config.API_IMAGE_ENDPOINT,
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          const urlHotProductUpload = response.data.data.fileName;
+          products.value[idx].imageUrl = urlHotProductUpload;
+        }
+      } catch (error) {}
+    };
     const checkValidate = () => {
       let hasError = false;
       if (!artistCode.value || !artistCode.value?.trim().length) {
@@ -642,6 +659,12 @@ export default defineComponent({
             await callApiUploadStories(item.file, idx);
           }
         }
+        for (let idx = 0; idx < products.value.length; idx++) {
+          const item = products.value[idx];
+          if (item.file !== undefined) {
+            await callAPIUploadHotProduct(item.file, idx);
+          }
+        }
 
         const response = (await api({
           url: API_PATHS.addArtist,