update

src/assets/configurations.example.ts

@@ -150,4 +150,7 @@ export enum API_PATHS {
   // trang cấu hình liveStream
   livestream = 'livestream/list',
   updateLiveStream = 'livestream/update',
+
+  // thêm sản phẩm nổi bật
+  homeAddProduct = 'config/home/addProduct',
 }

src/assets/type.ts

@@ -38,6 +38,10 @@ export type UserObject = {
   updateBy: null | string;
 };
 
+export type artistName = {
+  artistName: string;
+  id: number;
+};
 export type ArtistInfoType = {
   id: number;
   account: string;

src/components/danh-sach-san-pham-noi-bat-chua-chon/add.vue

@@ -26,9 +26,7 @@
               icon="mdi-magnify"
             />
 
-            <q-btn @click="openAddDialog = true" color="primary"
-              >Thêm mới</q-btn
-            >
+            <q-btn @click="handAddProduct" color="primary">Thêm mới</q-btn>
           </q-item>
         </q-card-section>
         <div class="col-12 q-mt-sm">
@@ -96,9 +94,14 @@
     <openAdd
       v-model:imageUrl="imageUrl"
       v-model:isOpened="openAddDialog"
+      v-model:codeProduct="codeProduct"
+      v-model:artistName="artistName"
+      v-model:nameProduct="nameProduct"
+      v-model:embeddedUrl="embeddedUrl"
+      v-model:salientStatus="salientStatus"
       @SetAvatar="setAvatar($event)"
       @deleteAvatar="deleteAvatar"
-      @successful="listProductNotActive"
+      @handleSave="handleSave"
     />
   </q-dialog>
 </template>
@@ -111,7 +114,12 @@ import { API_PATHS, config } from 'src/assets/configurations.example';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import Pagination from 'components/pagination/index.vue';
-import { listProductNotActives, PaginationResponse } from 'src/assets/type';
+import {
+  listProductNotActives,
+  PaginationResponse,
+  FileUploadType,
+  artistName,
+} from 'src/assets/type';
 import { emit } from 'cluster';
 import openAdd from '../danh-sach-san-pham-noi-bat-chua-chon/addNewProduct.vue';
 export default defineComponent({
@@ -128,6 +136,12 @@ export default defineComponent({
   },
   setup(props, context) {
     const avatarFile: Ref<File | null> = ref(null);
+    const avatarUploaded: Ref<string> = ref('');
+    const artistName: Ref<artistName | null> = ref(null);
+    const nameProduct = ref(null);
+    const embeddedUrl = ref(null);
+    const salientStatus = ref(1);
+    const codeProduct = ref(null);
     const setAvatar = (value: { file?: File; url?: string }) => {
       avatarFile.value = value.file as File;
       imageUrl.value = value.url as string;
@@ -149,6 +163,59 @@ export default defineComponent({
       imageUrl.value = null;
     };
 
+    const callApiUploadAvatar = async (file: File) => {
+      try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('file', file);
+        const response = (await api({
+          headers: { 'Content-Type': 'multipart/form-data' },
+          // url: 'https://cms.vab.vn/file/upload/', // pro
+          url: config.API_IMAGE_ENDPOINT, // pro
+
+          // url: 'http://103.147.34.20:10705/file/upload/', // test
+
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          return response.data.data.fileName;
+        } else {
+          return '';
+        }
+      } catch (error) {
+        return '';
+      }
+    };
+
+    const handleSave = async () => {
+      avatarUploaded.value = await callApiUploadAvatar(
+        avatarFile.value as File
+      );
+      try {
+        const browserResult = (await api({
+          url: API_PATHS.homeAddProduct,
+          method: 'POST',
+          data: {
+            code: codeProduct.value,
+            artistId: artistName.value?.id,
+            name: nameProduct.value,
+            embeddedUrl: embeddedUrl.value,
+            status: salientStatus.value,
+            isFeaturedOnHomepage: 0,
+            imageUrl: avatarUploaded.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (browserResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Thêm sản phẩm thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+          context.emit('update:isOpened', false);
+        }
+      } catch (error) {}
+    };
+
     const bannerTableColumns = [
       {
         name: 'name',
@@ -217,6 +284,17 @@ export default defineComponent({
       pageIndex.value = 1;
       void listProductNotActive();
     };
+
+    const handAddProduct = () => {
+      openAddDialog.value = true;
+      artistName.value = null;
+      nameProduct.value = null;
+      embeddedUrl.value = null;
+      salientStatus.value = 1;
+      codeProduct.value = null;
+      imageUrl.value = '';
+      avatarUploaded.value = '';
+    };
     const handleConfirmAdd = async () => {
       if ((selected.value || []).length !== 0) {
         const data = [] as any[];
@@ -297,6 +375,11 @@ export default defineComponent({
       keyWord,
       openAddDialog,
       imageUrl,
+      artistName,
+      nameProduct,
+      embeddedUrl,
+      salientStatus,
+      codeProduct,
       changePageSize,
       deleteAvatar,
       // hàm
@@ -304,9 +387,11 @@ export default defineComponent({
       listProductNotActive,
       getSelectedString,
       handleConfirmAdd,
+      handleSave,
       handleTogle,
       search,
       setAvatar,
+      handAddProduct,
     };
   },
   emits: ['update:isOpened', 'saveBannerInfo'],

src/components/danh-sach-san-pham-noi-bat-chua-chon/addNewProduct.vue

@@ -5,7 +5,13 @@
     @update:model-value="$emit('update:isOpened', $event)"
   >
     <q-card class="full-width" style="max-width: 80rem" bordered>
-      <q-form greedy @submit.prevent="$emit('update:isOpened', false)">
+      <q-form
+        greedy
+        @submit.prevent="
+          $emit('handleSave', {});
+          $emit('update:isOpened', false);
+        "
+      >
         <q-card-section>
           <q-item>
             <q-item-section>
@@ -88,7 +94,7 @@
 
             <div class="col-6">
               <q-select
-                v-model="artistName"
+                :model-value="artistName"
                 :label="$t('listHotProduct.dialogLabel.fieldLabels.artistName')"
                 class="q-my-sm"
                 :options="artistOptions"
@@ -98,18 +104,30 @@
                 outlined
                 :rules="artistNameRules"
                 clearable
+                @update:model-value="$emit('update:artistName', $event)"
               ></q-select>
               <q-input
-                v-model="nameProduct"
+                :model-value="codeProduct"
+                label="Mã sản phẩm"
+                class="q-my-sm"
+                type="text"
+                outlined
+                :rules="codeProductRules"
+                clearable
+                @update:model-value="$emit('update:codeProduct', $event)"
+              ></q-input>
+              <q-input
+                :model-value="nameProduct"
                 :label="$t('listHotProduct.dialogLabel.fieldLabels.name')"
                 class="q-my-sm"
                 type="text"
                 outlined
                 :rules="nameRules"
                 clearable
+                @update:model-value="$emit('update:nameProduct', $event)"
               ></q-input>
               <q-input
-                v-model="embeddedUrl"
+                :model-value="embeddedUrl"
                 :label="
                   $t('listHotProduct.dialogLabel.fieldLabels.embeddedUrl')
                 "
@@ -118,15 +136,17 @@
                 outlined
                 :rules="embeddedUrlRules"
                 clearable
+                @update:model-value="$emit('update:embeddedUrl', $event)"
               ></q-input>
               <div class="q-pt-sm">
                 <span class="text-body1">{{
                   $t('listHotProduct.dialogLabel.fieldLabels.salientStatus')
                 }}</span
                 ><q-toggle
-                  v-model="salientStatus"
+                  :model-value="salientStatus"
                   :true-value="SystemHotProductStatus.active"
                   :false-value="SystemHotProductStatus.inactive"
+                  @update:model-value="$emit('update:salientStatus', $event)"
                 />
               </div>
             </div>
@@ -141,7 +161,7 @@
             @click="$emit('update:isOpened', false)"
           />
           <q-btn
-            @click="handleSave"
+            type="submit"
             color="primary"
             no-caps
             style="width: 90px"
@@ -159,7 +179,7 @@ import { defineComponent, ref, Ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-
+import { Dialog, Notify } from 'quasar';
 import { ListArrayArtist } from 'src/assets/type';
 import { config, API_PATHS } from 'src/assets/configurations.example';
 export default defineComponent({
@@ -172,6 +192,27 @@ export default defineComponent({
       type: String,
       required: true,
     },
+
+    codeProduct: {
+      type: String,
+      required: true,
+    },
+    artistName: {
+      type: String,
+      required: true,
+    },
+    nameProduct: {
+      type: String,
+      required: true,
+    },
+    embeddedUrl: {
+      type: String,
+      required: true,
+    },
+    salientStatus: {
+      type: String,
+      required: true,
+    },
   },
   setup(_, context) {
     watch(
@@ -184,11 +225,8 @@ export default defineComponent({
         }
       }
     );
-    const salientStatus = ref(1);
+
     const artistOptions: Ref<ListArrayArtist[]> = ref([]);
-    const artistName: Ref<ListArrayArtist | undefined> = ref();
-    const embeddedUrl: Ref<string | null> = ref(null);
-    const nameProduct = ref(null);
 
     const selectedFile = (value: FileList) => {
       context.emit('SetAvatar', {
@@ -209,9 +247,6 @@ export default defineComponent({
     };
     const reset = () => {
       artistOptions.value = [];
-      artistName.value = undefined;
-      embeddedUrl.value = null;
-      nameProduct.value = null;
     };
     const deleteAvatar = () => {
       context.emit('deleteAvatar');
@@ -223,6 +258,12 @@ export default defineComponent({
       // eslint-disable-next-line
       upload.value?.click();
     };
+
+    const codeProductRules = [
+      (val?: string) =>
+        (val && val.trim().length) || 'Vui lòng nhập mã sản phẩm',
+    ];
+
     const nameRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -239,35 +280,63 @@ export default defineComponent({
         i18n.global.t('listHotProduct.validateMessages.requireEmbeddedUrl'),
     ];
 
-    const handleSave = () => {
-      context.emit('successful');
-      context.emit('update:isOpened', false);
-    };
+    // const handleSave = () => {
+    //   void uploadAvatar();
+    //   // try {
+    //   //   const browserResult = (await api({
+    //   //     url: API_PATHS.homeAddProduct,
+    //   //     method: 'POST',
+    //   //     data: {
+    //   //       code: codeProduct.value,
+    //   //       artistId: artistName.value,
+    //   //       name: nameProduct.value,
+    //   //       embeddedUrl: 'https://www.youtube.com/watch?v=psZ1g9fMfeo',
+    //   //       status: salientStatus.value,
+    //   //       isFeaturedOnHomepage: 0,
+    //   //       imageUrl: '2021/8/30/vab-image-1632988070841.jpeg',
+    //   //     },
+    //   //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+    //   //   if (browserResult.data.error.code === config.API_RES_CODE.OK.code) {
+    //   //     Notify.create({
+    //   //       type: 'positive',
+    //   //       message: 'Thêm sản phẩm thành công',
+    //   //       actions: [{ icon: 'close', color: 'white' }],
+    //   //     });
+    //   //     context.emit('successful');
+    //   //     context.emit('update:isOpened', false);
+    //   //   }
+    //   // } catch (error) {}
+    // };
 
     return {
       nameRules,
       artistNameRules,
       embeddedUrlRules,
-      embeddedUrl,
+
       SystemHotProductStatus,
       artistOptions,
-      nameProduct,
-      artistName,
-      salientStatus,
+
+      codeProductRules,
+
       selectedFile,
       deleteAvatar,
       uploadAvatar,
 
       upload,
-      handleSave,
     };
   },
   emits: [
     'update:isOpened',
     'update:imageUrl',
+    'update:codeProduct',
+    'update:artistName',
+    'update:nameProduct',
+    'update:embeddedUrl',
+    'update:salientStatus',
     'SetAvatar',
     'deleteAvatar',
-    'successful',
+
+    'handleSave',
   ],
 });
 </script>

src/components/units-manager/unit-add-update-artist/index.vue

@@ -101,7 +101,7 @@
                   :rules="artistNameRules"
                   map-options
                   option-value="id"
-                  option-label="fullName"
+                  option-label="artistName"
                   class="q-my-sm"
                   outlined
                   use-input