done delete , add PostCategory feature

src/assets/configurations.example.ts

@@ -76,4 +76,6 @@ export enum API_PATHS {
   getLanguage = 'language',
   getDetailPost = 'post/detail',
   updatePost = 'post/update',
+  addCategoryPost = 'postCategory/add',
+  deleteCategoryPost = 'postCategory/delete',
 }

src/components/post-category/add-post-category/AddPostCategory.ts

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, PropType, Ref, ref, watch } from 'vue';
 import UploadImage from 'components/upload-image/index.vue';
-import { PostType, LanguageType } from 'src/assets/type';
+import { PostType, LanguageType, FileUploadType } from 'src/assets/type';
 import ListPostDialog from 'components/post-category/list-post-dialog/index.vue';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+import { config } from 'src/assets/configurations';
 
 export default defineComponent({
   // name: 'ComponentName'
@@ -11,7 +14,7 @@ export default defineComponent({
     isOpenAddDialog: { type: Boolean, required: true },
     languages: { type: Array as PropType<LanguageType[]>, required: true },
   },
-  setup(props) {
+  setup(props, context) {
     type FromDataType = {
       name: string;
       title: string;
@@ -109,15 +112,41 @@ export default defineComponent({
     const isOpenListPost: Ref<boolean> = ref(false);
     const langs: Ref<FromDataType[]> = ref([]);
     const tabName: Ref<string> = ref('vi');
+    const tabTitle: Ref<string> = ref('vi');
     const uploadImage = (value: FileList) => {
       urlFileLocal.value = URL.createObjectURL(value[0]);
       file.value = value[0];
       image.value = urlFileLocal.value;
       console.log(value, 'FileList');
     };
+    const imageUploaded: Ref<string | null> = ref(null);
     const deletePostSelected = (postIdx: number) => {
       userTableRowsPost.value.splice(postIdx, 1);
     };
+    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: config.API_IMAGE_ENDPOINT,
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          imageUploaded.value = response.data.data.fileName;
+        }
+      } catch (error) {}
+    };
+    const confirmAddPostCategory = async () => {
+      await callApiUploadAvatar(file.value as File);
+      context.emit('addPostCategory', {
+        image: imageUploaded.value,
+        status: status.value,
+        posts: userTableRowsPost.value,
+        langs: langs.value,
+      });
+    };
 
     return {
       name,
@@ -135,6 +164,8 @@ export default defineComponent({
       deletePostSelected,
       langs,
       tabName,
+      tabTitle,
+      confirmAddPostCategory,
     };
   },
   emits: [
@@ -142,5 +173,6 @@ export default defineComponent({
     'click:closeBtnDialog',
     'SetImage',
     'deleteImage',
+    'addPostCategory',
   ],
 });

src/components/post-category/add-post-category/index.vue

@@ -5,7 +5,7 @@
     @update:model-value="$emit('update:isOpenAddDialog', $event)"
   >
     <q-card class="full-width" style="max-width: 60rem" bordered>
-      <q-form greedy @submit.prevent>
+      <q-form greedy @submit.prevent="confirmAddPostCategory">
         <q-card-section class="q-pa-none">
           <q-item>
             <q-item-section>
@@ -46,22 +46,58 @@
             >
               <q-input
                 v-model="info.name"
-                :label="$t('postCategory.labelInput.namePost')"
+                :label="`${
+                  tabName === 'vi'
+                    ? $t('postCategory.labelInput.namePost')
+                    : $t('postCategory.labelInput.nameEnglish')
+                }`"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="tabName === 'vi' ? nameRules : ''"
+                hide-bottom-space
+              ></q-input>
+            </q-tab-panel>
+          </q-tab-panels>
+
+          <q-tabs
+            v-model="tabTitle"
+            dense
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="left"
+            narrow-indicator
+          >
+            <q-tab
+              v-for="(lang, idxLang) in langs"
+              :key="`${lang.language.id}-${idxLang}`"
+              :name="lang.language.code"
+              :label="lang.language.name"
+              no-caps
+            />
+          </q-tabs>
+          <q-separator />
+          <q-tab-panels v-model="tabTitle" animated>
+            <q-tab-panel
+              v-for="(info, index) in langs"
+              :key="`${info.language.id}-${index}`"
+              :name="info.language.code"
+            >
+              <q-input
+                v-model="info.title"
+                :label="`${
+                  tabTitle === 'vi'
+                    ? $t('postCategory.labelInput.description')
+                    : $t('postCategory.labelInput.shortDescription')
+                }`"
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="nameRules"
               ></q-input>
             </q-tab-panel>
           </q-tab-panels>
 
-          <q-input
-            v-model="title"
-            :label="$t('postCategory.labelInput.description')"
-            type="text"
-            class="q-my-sm"
-            outlined
-          ></q-input>
           <div class="row">
             <div class="col-6">
               <q-card v-if="image" flat style="max-height: 200px">

src/i18n/vi/index.ts

@@ -718,7 +718,17 @@ export default {
     labelInput: {
       namePost: 'Tên danh mục',
       description: 'Mô tả ngắn',
+      shortDescription: 'Short description',
       uploadImg: 'Tải lên ảnh bìa',
+      nameEnglish: 'Article category name',
+    },
+    actionMessages: {
+      addPostCategoryAccess: 'Thêm danh mục bài viết thành công',
+      deletePostCategoryAccess: 'Xoá danh mục bài viết thành công',
+    },
+    confirmActionsTitle: {
+      confirmDeletePostCategory:
+        'Bạn có chắc muốn xoá danh mục bài viết này không?',
     },
   },
 

src/pages/danh-muc-bai-viet/CategoryPost.ts

@@ -3,8 +3,13 @@ import { defineComponent, onMounted, Ref, ref } from 'vue';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-import { CategoryPostType, LanguageType } from 'src/assets/type';
+import {
+  CategoryPostType,
+  LanguageType,
+  PostCategoryDetailType,
+} from 'src/assets/type';
 import AddCategoryPostDialog from 'components/post-category/add-post-category/index.vue';
+import { Dialog, Notify } from 'quasar';
 // import { Dialog, Notify } from 'quasar';
 export default defineComponent({
   components: {
@@ -97,6 +102,65 @@ export default defineComponent({
       } catch (error) {}
     };
 
+    const addPostCategory = async (formData: PostCategoryDetailType) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.addCategoryPost,
+          method: 'POST',
+          data: {
+            image: formData.image,
+            status: formData.status,
+            posts: formData.posts,
+            langs: formData.langs,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          isOpenAddDialog.value = false;
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t(
+              'postCategory.actionMessages.addPostCategoryAccess'
+            ),
+          });
+          void getListCategoryPost();
+        }
+      } catch (error) {}
+    };
+
+    const confirmDelete = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
+        ),
+        message: i18n.global.t(
+          'postCategory.confirmActionsTitle.confirmDeletePostCategory'
+        ),
+        cancel: i18n.global.t(
+          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(async () => {
+        try {
+          const response = (await api({
+            url: API_PATHS.deleteCategoryPost,
+            method: 'GET',
+            params: {
+              id: id,
+            },
+          })) as AxiosResponse<BaseResponseBody<unknown>>;
+          if (response.data.error.code === config.API_RES_CODE.OK.code) {
+            Notify.create({
+              type: 'positive',
+              message: i18n.global.t(
+                'postCategory.actionMessages.deletePostCategoryAccess'
+              ),
+            });
+            void getListCategoryPost();
+          }
+        } catch (error) {}
+      });
+    };
+
     onMounted(() => {
       void getListCategoryPost();
       void getLanguages();
@@ -110,6 +174,8 @@ export default defineComponent({
       getListCategoryPost,
       getLanguages,
       languages,
+      addPostCategory,
+      confirmDelete,
     };
   },
 });

src/pages/danh-muc-bai-viet/index.vue

@@ -82,7 +82,7 @@
             </div>
           </q-td>
         </template>
-        <template v-slot:body-cell-action>
+        <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-account-edit-outline">
@@ -90,7 +90,13 @@
                   $t('customer.toolTipMessage.updateCustomerInfo')
                 }}</q-tooltip>
               </q-btn>
-              <q-btn flat round color="primary" icon="mdi-delete-outline">
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-delete-outline"
+                @click="confirmDelete(item.row.id)"
+              >
                 <q-tooltip :offset="[20, 10]">{{
                   $t('customer.toolTipMessage.deleteCustomer')
                 }}</q-tooltip>
@@ -104,6 +110,7 @@
       v-model:is-open-add-dialog="isOpenAddDialog"
       :languages="languages"
       @click:closeBtnDialog="isOpenAddDialog = false"
+      @addPostCategory="addPostCategory($event)"
     />
   </div>
 </template>