update

src/assets/configurations.example.ts

@@ -73,4 +73,7 @@ export enum API_PATHS {
   getPostCategory = 'postCategory',
   addPost = 'post/add',
   getListCategoryPost = 'postCategory',
+  getLanguage = 'language',
+  getDetailPost = 'post/detail',
+  updatePost = 'post/update',
 }

src/assets/type.ts

@@ -331,6 +331,7 @@ export type LanguageType = {
   code: string;
   name: string;
   status: number;
+  isDefault?: number;
 };
 
 export type LangType = {
@@ -373,3 +374,15 @@ export type PostCategoryDetailType = {
   updateBy?: string;
   updateTime?: string;
 };
+
+export type PostAddType = {
+  id: number;
+  image: string;
+  status: number;
+  langs: LangType[];
+  category: CategoryPostType;
+  createBy?: string;
+  createTime?: string;
+  updateBy?: string;
+  updateTime?: string;
+};

src/pages/bai-viet/index.vue

@@ -86,7 +86,7 @@
               style="width: 9rem"
               fit="contain"
               :ratio="16 / 9"
-              :src="image.row.image"
+              :src="configImg.API_IMAGE_ENDPOINT + image.row.image"
             ></q-img>
           </q-td>
         </template>
@@ -148,7 +148,7 @@
       :categoryOptions="categoryOptions"
       @SetAvatar="setAvatar($event)"
       @deleteAvatar="deleteAvatar"
-      @savePostInfo="updateNewPost"
+      @savePostInfo="confirmUpdatePost"
     />
   </div>
 </template>
@@ -165,7 +165,9 @@ import {
   PostType,
   FileUploadType,
   CategoryPostType,
+  LanguageType,
   PostDetailType,
+  PostAddType,
 } from 'src/assets/type';
 import { config } from 'src/assets/configurations';
 import { PostStatus } from 'src/assets/enums';
@@ -280,8 +282,8 @@ export default defineComponent({
     const postTableRows: Ref<unknown[]> = ref([]);
     const addPostDialogIsOpened = ref(false);
     const updatePostDialogIsOpened = ref(false);
-    const category: Ref<number | undefined> = ref(undefined);
-    const categoryOptions: Ref<unknown[]> = ref([]);
+    const category: Ref<CategoryPostType | undefined> = ref();
+    const categoryOptions: Ref<CategoryPostType[]> = ref([]);
     const name = ref('');
     const content = ref('');
     const image: Ref<string | null> = ref(null);
@@ -289,11 +291,9 @@ export default defineComponent({
     const postId: Ref<number | undefined> = ref(undefined);
     const namePost = ref('');
     const avatarFile: Ref<File | null> = ref(null);
-    const avatarUploaded: Ref<string | null> = ref(null);
-    const languageOptions = ref([
-      { id: 1, code: 'vn', name: 'Tiếng Việt' },
-      { id: 2, code: 'en', name: 'Tiếng Anh' },
-    ]);
+    const avatarUploaded: Ref<string> = ref('');
+    const imageChange: Ref<string> = ref('');
+    const languageOptions: Ref<FromType> = ref([]);
 
     const changePageSize = () => {
       pageIndex.value = 1;
@@ -353,26 +353,29 @@ export default defineComponent({
     };
 
     const openAddPostDialog = () => {
-      name.value = '';
-      category.value = undefined;
-      content.value = '';
-      image.value = null;
+      void getLanguage();
       status.value = PostStatus.active;
+      image.value = null;
+      category.value = undefined;
       addPostDialogIsOpened.value = true;
     };
 
     //gọi api add
     const addNewPost = async () => {
+      avatarUploaded.value = await callApiUploadAvatar(
+        avatarFile.value as File
+      );
       const data = {
-        image: image.value,
+        image: avatarUploaded.value,
         status: status.value,
-        category: category.value,
+        category: { id: category.value?.id },
+        langs: languageOptions.value,
       };
       const response = (await api({
         url: API_PATHS.addPost,
         method: 'POST',
         data,
-      })) as AxiosResponse<BaseResponseBody<PostDetailType[]>>;
+      })) as AxiosResponse<BaseResponseBody<PostAddType[]>>;
       if (response.data.error.code === config.API_RES_CODE.OK.code) {
         addPostDialogIsOpened.value = false;
         Notify.create({
@@ -391,46 +394,59 @@ export default defineComponent({
 
     //gọi api detail
     const getDetailPost = async (id: number) => {
-      // try {
-      //   const response = (await api({
-      // url: API_PATHS.getDetailPost,
-      //   method: 'GET',
-      //   params: {
-      //     id: id,
-      //   },
-      // })) as AxiosResponse<BaseResponseBody<DetailPost>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      // postId.value = response.data.data.id;
-      // name.value = response.data.data.name;
-      // description.value = response.data.data.description;
-      // status.value = response.data.data.status;
-      //   }
-      // } catch (error) {}
+      try {
+        const response = (await api({
+          url: API_PATHS.getDetailPost,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<PostDetailType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          postId.value = response.data.data.id;
+          image.value = config.API_IMAGE_ENDPOINT + response.data.data.image;
+          imageChange.value = response.data.data.image;
+          languageOptions.value = response.data.data.langs;
+          status.value = response.data.data.status;
+          category.value = response.data.data.category;
+        }
+      } catch (error) {}
     };
 
     //gọi api update
-    const updateNewPost = async () => {
-      // const data = {
-      //   id: postId.value,
-      //   name: name.value,
-      //   description: description.value,
-      //   status: status.value,
-      // };
-      // const response = (await api({
-      //   // url: API_PATHS.updatePost,
-      //   method: 'POST',
-      //   data,
-      // })) as AxiosResponse<BaseResponseBody<[]>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //   updatePostDialogIsOpened.value = false;
-      //   Notify.create({
-      //     type: 'positive',
-      //     message: i18n.global.t('post.actionMessages.updatePostAccess'),
-      //     actions: [{ icon: 'close', color: 'white' }],
-      //   });
-      //   void getListPost();
-      // }
+    const confirmUpdatePost = async () => {
+      if (avatarFile.value) {
+        avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
+        void updatePost(avatarUploaded.value);
+      } else {
+        void updatePost(imageChange.value);
+      }
     };
+
+    const updatePost = async (image: string) => {
+      const data = {
+        id: postId.value,
+        image,
+        status: status.value,
+        category: { id: category.value?.id },
+        langs: languageOptions.value,
+      };
+      const response = (await api({
+        url: API_PATHS.updatePost,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<PostDetailType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        updatePostDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t('post.actionMessages.updatePostAccess'),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListPost();
+      }
+    };
+
     const setAvatar = (value: { file?: File; url?: string }) => {
       avatarFile.value = value.file as File;
       image.value = value.url as string;
@@ -442,19 +458,25 @@ export default defineComponent({
         bodyFormData.append('file', file);
         const response = (await api({
           headers: { 'Content-Type': 'multipart/form-data' },
-          url: 'http://cms.vab.xteldev.com/file/upload',
+          url: 'http://cms.vab.xteldev.com/file/upload/',
           method: 'POST',
           data: bodyFormData,
         })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
-          avatarUploaded.value = response.data.data.fileName;
+          return response.data.data.fileName;
+        } else {
+          return '';
         }
-      } catch (error) {}
+      } catch (error) {
+        return '';
+      }
     };
     const deleteAvatar = () => {
       image.value = null;
     };
 
+    const configImg = config;
+
     //gọi api danh mục bv
     const getpostCategory = async () => {
       const response = (await api({
@@ -467,6 +489,45 @@ export default defineComponent({
       }
     };
 
+    type FromType = {
+      name: string;
+      title: string;
+      content: string;
+      status: number;
+      language: {
+        id: number;
+        code: string;
+        name: string;
+      };
+    }[];
+
+    const getLanguage = async () => {
+      const response = (await api({
+        url: API_PATHS.getLanguage,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<LanguageType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        languageOptions.value = response.data.data.reduce(
+          (acc: FromType, info) => {
+            acc.push({
+              name: '',
+              title: '',
+              content: '',
+              status: 1,
+              language: {
+                id: info.id,
+                code: info.code,
+                name: info.name,
+              },
+            });
+            return acc;
+          },
+          []
+        );
+      }
+    };
+
     onMounted(() => {
       void getListPost();
       void getpostCategory();
@@ -492,7 +553,7 @@ export default defineComponent({
       deletePost,
       openUpdatePostDialog,
       getDetailPost,
-      updateNewPost,
+      updatePost,
       namePost,
       content,
       languageOptions,
@@ -502,6 +563,9 @@ export default defineComponent({
       callApiUploadAvatar,
       deleteAvatar,
       getpostCategory,
+      getLanguage,
+      configImg,
+      confirmUpdatePost,
     };
   },
 });