update

src/assets/configurations.example.ts

@@ -110,4 +110,6 @@ export enum API_PATHS {
   getListConfigHotProduct = 'config/home/product',
   getDetailConfigHotProduct = 'config/home/product/detail',
   updateConfigHotProduct = 'config/home/product/update/salient',
+  addConfigHotProduct = 'config/home/product/add/salient',
+  deleteConfigHotProduct = 'config/home/product/delete/salient',
 }

src/assets/type.ts

@@ -695,3 +695,12 @@ export type UpdateConfigHotProduct = {
   imageUrl: string;
   salientStatus: number;
 };
+
+export type AddConfigHotProduct = {
+  code: string;
+  name: string;
+  artistName: string;
+  embeddedUrl: string;
+  imageUrl: string;
+  salientStatus: number;
+};

src/components/hotProduct/index.vue

@@ -97,16 +97,19 @@
             </div>
 
             <div class="col-6">
-              <q-input
+              <q-select
                 :model-value="artistName"
                 @update:model-value="$emit('update:artistName', $event)"
                 :label="$t('listHotProduct.dialogLabel.fieldLabels.artistName')"
                 class="q-my-sm"
+                :options="artistOptions"
+                option-label="artistName"
+                option-value="id"
                 type="text"
                 outlined
                 :rules="artistNameRules"
                 clearable
-              ></q-input>
+              ></q-select>
               <q-input
                 :model-value="name"
                 @update:model-value="$emit('update:name', $event)"
@@ -177,9 +180,10 @@ export default defineComponent({
     isUpdate: { type: Boolean, default: false },
     imageUrl: { type: String, required: true },
     name: { type: String, required: true },
-    artistName: { type: String, required: true },
+    artistName: { type: Number, required: true },
     embeddedUrl: { type: String, required: true },
     salientStatus: { type: Number, required: true },
+    artistOptions: { type: Array, required: true },
   },
   setup(_, context) {
     const selectedFile = (value: FileList) => {
@@ -204,8 +208,8 @@ export default defineComponent({
         i18n.global.t('listHotProduct.validateMessages.requireName'),
     ];
     const artistNameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
+      (val?: number) =>
+        val !== undefined ||
         i18n.global.t('listHotProduct.validateMessages.requireArtistName'),
     ];
     const embeddedUrlRules = [

src/i18n/vi/index.ts

@@ -1174,6 +1174,11 @@ export default {
       active: 'Hiển thị',
       inactive: 'Không hiển thị',
     },
+    confirmActionsTitle: {
+      confirmDelete: 'Xác nhận',
+      confirmDeleteContent: 'Bạn có chắc muốn xoá Sản phẩm nổi bật này không?',
+      confirmDeleteCancelBtnLabel: 'Huỷ',
+    },
     actionMessages: {
       addSuccess: 'Thêm cấu hính sản phẩm nổi bật thành công',
       updateSuccess: 'Cập nhật cấu hính sản phẩm nổi bật thành công',

src/pages/cau-hinh-san-pham-noi-bat/index.vue

@@ -6,13 +6,28 @@
     </div>
     <q-space></q-space>
     <div class="col-2 sreach">
-      <q-input
+      <q-select
         v-model="name_artist"
+        :options="artistOptions"
+        option-label="artistName"
+        option-value="id"
         dense
         outlined
         :label="$t('listHotProduct.titleColumnsTable.artistName')"
         clearable
-      ></q-input>
+      ></q-select>
+    </div>
+    <div class="col-2 sreach">
+      <q-select
+        v-model="sreachStatus"
+        :options="ListStatus"
+        option-label="name"
+        option-value="id"
+        dense
+        outlined
+        :label="$t('listHotProduct.titleColumnsTable.salientStatus')"
+        clearable
+      ></q-select>
     </div>
 
     <div class="col-auto">
@@ -64,8 +79,13 @@
                 $t('listHotProduct.toolTipMessageUpdate')
               }}</q-tooltip>
             </q-btn>
-            <q-btn flat round color="primary" icon="mdi-delete-outline">
-              <!-- @click="confirmDeleteConfig(item.row.id)" -->
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete-outline"
+              @click="confirmDeleteConfigHotProduct(rowData.row.id)"
+            >
               <q-tooltip :offset="[20, 10]">{{
                 $t('listHotProduct.toolTipMessageDelete')
               }}</q-tooltip>
@@ -132,10 +152,11 @@
       v-model:artistName="artistName"
       v-model:salientStatus="salientStatus"
       v-model:imageUrl="imageUrl"
+      :artistOptions="artistOptions"
       @SetAvatar="setAvatar($event)"
       @deleteAvatar="deleteAvatar"
       isUpdate
-      @saveHotProductInfo="addProduct"
+      @saveHotProductInfo="addConfigHotProduct"
     />
 
     <AddUpdateHotProductDialog
@@ -145,6 +166,7 @@
       v-model:artistName="artistName"
       v-model:salientStatus="salientStatus"
       v-model:imageUrl="imageUrl"
+      :artistOptions="artistOptions"
       @SetAvatar="setAvatar($event)"
       @deleteAvatar="deleteAvatar"
       @saveHotProductInfo="updateHotProduct"
@@ -164,7 +186,7 @@ import Pagination from 'components/pagination/index.vue';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import { config, API_PATHS } from 'src/assets/configurations';
 import { AxiosResponse } from 'axios';
-import { Notify } from 'quasar';
+import { Notify, Dialog } from 'quasar';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import {
   PaginationResponse,
@@ -172,6 +194,8 @@ import {
   ListConfigHotProduct,
   DetailConfigHotProduct,
   UpdateConfigHotProduct,
+  AddConfigHotProduct,
+  ListArrayArtist,
 } from 'src/assets/type';
 export default defineComponent({
   components: {
@@ -249,7 +273,7 @@ export default defineComponent({
     const showDialogAdd = ref(false);
     const showDialogUpdate = ref(false);
     const name: Ref<string | null> = ref(null);
-    const artistName: Ref<string | null> = ref(null);
+    const artistName: Ref<ListArrayArtist | undefined> = ref();
     const embeddedUrl: Ref<string | null> = ref(null);
     const salientStatus: Ref<number> = ref(SystemHotProductStatus.active);
     const imageUrl: Ref<string | null> = ref(null);
@@ -258,7 +282,24 @@ export default defineComponent({
     const imageChange: Ref<string> = ref('');
     const configImg = config;
     const configHotProductId: Ref<number | undefined> = ref(undefined);
+    const artistOptions: Ref<ListArrayArtist[]> = ref([]);
+    const ListStatus = ref([
+      { id: 1, name: 'Hiển thị' },
+      { id: 0, name: 'Không hiển thị' },
+    ]);
+    const sreachStatus: Ref<{ id: number; name: string } | undefined> =
+      ref(undefined);
 
+    const getArrayArtist = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayArtist,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayArtist[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        artistOptions.value = response.data.data;
+      }
+    };
     const getListConfigHotProduct = async () => {
       const response = (await api({
         url: API_PATHS.getListConfigHotProduct,
@@ -266,7 +307,8 @@ export default defineComponent({
         params: {
           pageIndex: pageIndex.value,
           pageSize: pageSize.value,
-          artistName: name_artist.value,
+          // artistName: name_artist.value?.id,
+          salientStatus: sreachStatus.value?.id,
         },
       })) as AxiosResponse<
         BaseResponseBody<PaginationResponse<ListConfigHotProduct[]>>
@@ -279,37 +321,38 @@ export default defineComponent({
 
     const openAddDialog = () => {
       name.value = '';
-      artistName.value = '';
+      artistName.value = undefined;
       embeddedUrl.value = '';
       imageUrl.value = null;
       salientStatus.value = SystemHotProductStatus.active;
       showDialogAdd.value = true;
     };
 
-    const addProduct = async () => {
-      // avatarUploaded.value = await callApiUploadAvatar(
-      //   avatarFile.value as File
-      // );
-      // const data = {
-      //   image: avatarUploaded.value,
-      //   status: status.value,
-      //   category: { id: category.value?.id },
-      //   langs: languageOptions.value,
-      // };
-      // const response = (await api({
-      //   url: API_PATHS.addPost,
-      //   method: 'POST',
-      //   data,
-      // })) as AxiosResponse<BaseResponseBody<PostAddType[]>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //   addPostDialogIsOpened.value = false;
-      //   Notify.create({
-      //     type: 'positive',
-      //     message: i18n.global.t('post.actionMessages.addNewPostAccess'),
-      //     actions: [{ icon: 'close', color: 'white' }],
-      //   });
-      //   void getlistHotProduct();
-      // }
+    const addConfigHotProduct = async () => {
+      avatarUploaded.value = await callApiUploadAvatar(
+        avatarFile.value as File
+      );
+      const data = {
+        image: avatarUploaded.value,
+        name: name.value,
+        artistName: { id: artistName.value?.id },
+        salientStatus: salientStatus.value,
+        embeddedUrl: embeddedUrl.value,
+      };
+      const response = (await api({
+        url: API_PATHS.addPost,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<AddConfigHotProduct[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        showDialogAdd.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t('post.actionMessages.addNewPostAccess'),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListConfigHotProduct();
+      }
     };
 
     const openUpdateDialog = (id: number) => {
@@ -329,7 +372,7 @@ export default defineComponent({
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           configHotProductId.value = response.data.data.id;
           name.value = response.data.data.name;
-          artistName.value = response.data.data.artistName;
+          // artistName.value = response.data.data.artistName
           salientStatus.value = response.data.data.salientStatus;
           embeddedUrl.value = response.data.data.embeddedUrl;
           imageUrl.value =
@@ -352,7 +395,7 @@ export default defineComponent({
       const data = {
         id: configHotProductId.value,
         name: name.value,
-        artistName: artistName.value,
+        artistName: { id: artistName.value?.id },
         salientStatus: salientStatus.value,
         embeddedUrl: embeddedUrl.value,
         imageUrl,
@@ -375,6 +418,45 @@ export default defineComponent({
       }
     };
 
+    const confirmDeleteConfigHotProduct = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'listHotProduct.confirmActionsTitle.confirmDelete'
+        ),
+        message: i18n.global.t(
+          'listHotProduct.confirmActionsTitle.confirmDeleteContent'
+        ),
+        cancel: i18n.global.t(
+          'listHotProduct.confirmActionsTitle.confirmDeleteCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteConfigHotProduct(id);
+      });
+    };
+
+    //gói api xóa
+    const deleteConfigHotProduct = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteConfigHotProduct,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t(
+              'listHotProduct.actionMessages.deleteSuccess'
+            ),
+          });
+          void getListConfigHotProduct();
+        }
+      } catch (error) {}
+    };
+
     const setAvatar = (value: { file?: File; url?: string }) => {
       avatarFile.value = value.file as File;
       imageUrl.value = value.url as string;
@@ -405,6 +487,7 @@ export default defineComponent({
 
     onMounted(() => {
       void getListConfigHotProduct();
+      void getArrayArtist();
     });
     return {
       imageUrl,
@@ -430,11 +513,15 @@ export default defineComponent({
       updateConfigHotProduct,
       updateHotProduct,
       openAddDialog,
-      addProduct,
+      addConfigHotProduct,
       getListConfigHotProduct,
       configHotProductId,
       avatarUploaded,
       deleteAvatar,
+      confirmDeleteConfigHotProduct,
+      artistOptions,
+      ListStatus,
+      sreachStatus,
     };
   },
 });