update

src/assets/configurations.example.ts

@@ -65,4 +65,6 @@ export enum API_PATHS {
   addField = 'field/add',
   updateField = 'field/update',
   getDetailField = 'field/detail',
+  getListPost = 'post',
+  deletePost = 'post/delete',
 }

src/assets/type.ts

@@ -313,3 +313,15 @@ export type DetailField = {
   description: string;
   status: number;
 };
+
+export type Post = {
+  id: number;
+  name: string;
+  image: string;
+  category: string;
+  createBy: string;
+  createTime: string;
+  updateBy: string;
+  updateTime: string;
+  status: number;
+};

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

@@ -32,13 +32,13 @@
           <div class="row q-col-gutter-sm">
             <div class="col-6">
               <q-input
-                :model-value="avatar"
-                @update:model-value="$emit('update:avatar', $event)"
-                :label="$t('post.dialogLabel.postLabels.avatar')"
+                :model-value="image"
+                @update:model-value="$emit('update:image', $event)"
+                :label="$t('post.dialogLabel.postLabels.image')"
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="avatarRules"
+                :rules="imageRules"
                 clearable
               ></q-input>
             </div>
@@ -119,17 +119,17 @@ export default defineComponent({
       required: true,
     },
     isUpdate: { type: Boolean, default: false },
-    avatar: { type: String, required: true },
+    image: { type: String, required: true },
     name: { type: String, required: true },
     description: { type: String, required: true },
     content: { type: String, required: true },
     status: { type: Number, required: true },
   },
   setup() {
-    const avatarRules = [
+    const imageRules = [
       (val?: string) =>
         (val && val.trim().length) ||
-        i18n.global.t('post.validateMessages.requireAvatar'),
+        i18n.global.t('post.validateMessages.requireImage'),
     ];
     const contentRules = [
       (val?: string) =>
@@ -144,12 +144,12 @@ export default defineComponent({
     return {
       contentRules,
       nameRules,
-      avatarRules,
+      imageRules,
     };
   },
   emits: [
     'update:isOpened',
-    'update:avatar',
+    'update:image',
     'update:name',
     'update:description',
     'update:content',

src/i18n/vi/index.ts

@@ -628,11 +628,11 @@ export default {
     tableColumnsPost: {
       stt: 'STT',
       name: 'Tên bài viết',
-      avatar: 'Avatar',
+      image: 'Avatar',
       category: 'Danh mục bài viết',
-      addUser: 'Người thêm',
-      addTime: 'Thời gian thêm',
-      updateUser: 'Người cập nhập',
+      createBy: 'Người thêm',
+      createTime: 'Thời gian thêm',
+      updateBy: 'Người cập nhập',
       updateTime: 'Thời gian cập nhật',
       status: 'Trạng thái',
       action: 'Chức năng',
@@ -648,7 +648,7 @@ export default {
       },
       postLabels: {
         name: 'Tên bài viết *',
-        avatar: 'Avatar *',
+        image: 'Avatar *',
         description: 'Mô tả',
         content: 'Nội dung *',
         status: 'Trạng thái',
@@ -664,10 +664,10 @@ export default {
     },
     validateMessages: {
       requireName: 'Vui lòng nhập Tên bài viết',
-      requireAvatar: 'Vui lòng chọn Avatar',
+      requireImage: 'Vui lòng chọn Avatar',
       requireContent: 'Vui lòng nhập Nội dung',
     },
-    confirmActionsPost: {
+    confirmActionsTitle: {
       confirmDeletePostTitle: 'Xác nhận',
       confirmDeletePostCancelBtnLabel: 'Huỷ',
       confirmDeletePostContent: 'Bạn có chắc chắn muốn xoá bài viết này không?',

src/pages/bai-viet/index.vue

@@ -46,7 +46,7 @@
         class="sticky-header-table"
       >
         <template v-slot:body-cell-action="item">
-          <q-td style="padding: 0" class="flex flex-center">
+          <q-td style="padding: 0" class="center">
             <q-btn
               flat
               round
@@ -71,13 +71,13 @@
             </q-btn>
           </q-td>
         </template>
-        <template v-slot:body-cell-avatar="avatar">
-          <q-td style="padding: 0; height: 100%" class="flex flex-center">
+        <template v-slot:body-cell-image="image">
+          <q-td style="padding: auto; height: 100%" class="center">
             <q-img
               style="width: 7rem"
               fit="contain"
               :ratio="16 / 9"
-              :src="avatar.row.avatar"
+              :src="image.row.image"
             ></q-img>
           </q-td>
         </template>
@@ -103,11 +103,21 @@
       </q-table>
     </div>
 
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getListPost"
+      />
+    </div>
+
     <AddUpdatePostDialog
       v-model:isOpened="addPostDialogIsOpened"
       v-model:name="name"
       v-model:description="description"
-      v-model:avatar="avatar"
+      v-model:image="image"
       v-model:content="content"
       v-model:status="status"
       isUpdate
@@ -118,7 +128,7 @@
       v-model:isOpened="updatePostDialogIsOpened"
       v-model:name="name"
       v-model:description="description"
-      v-model:avatar="avatar"
+      v-model:image="image"
       v-model:content="content"
       v-model:status="status"
       @savePostInfo="updateNewPost"
@@ -129,17 +139,19 @@
 <script lang="ts">
 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
-// import { API_PATHS } from 'src/assets/configurations';
-// import { AxiosResponse } from 'axios';
-// import { api, BaseResponseBody } from 'src/boot/axios';
-// import { Post, AddPost, DetailPost, UpdatePost } from 'src/assets/type';
-// import { config } from 'src/assets/configurations';
+import Pagination from 'components/pagination/index.vue';
+import { API_PATHS } from 'src/assets/configurations';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { PaginationResponse, Post } from 'src/assets/type';
+import { config } from 'src/assets/configurations';
 import { PostStatus } from 'src/assets/enums';
 import AddUpdatePostDialog from 'components/add-update-post/index.vue';
 import { Dialog, Notify } from 'quasar';
 
 export default defineComponent({
   components: {
+    Pagination,
     AddUpdatePostDialog,
   },
   setup() {
@@ -162,10 +174,10 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'avatar',
-        field: 'avatar',
+        name: 'image',
+        field: 'image',
         required: true,
-        label: i18n.global.t('post.tableColumnsPost.avatar'),
+        label: i18n.global.t('post.tableColumnsPost.image'),
         headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
@@ -180,28 +192,28 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'addUser',
-        field: 'addUser',
+        name: 'createBy',
+        field: 'createBy',
         required: true,
-        label: i18n.global.t('post.tableColumnsPost.addUser'),
+        label: i18n.global.t('post.tableColumnsPost.createBy'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'addTime',
-        field: 'addTime',
+        name: 'createTime',
+        field: 'createTime',
         required: true,
-        label: i18n.global.t('post.tableColumnsPost.addTime'),
+        label: i18n.global.t('post.tableColumnsPost.createTime'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'updateUser',
-        field: 'updateUser',
+        name: 'updateBy',
+        field: 'updateBy',
         required: true,
-        label: i18n.global.t('post.tableColumnsPost.updateUser'),
+        label: i18n.global.t('post.tableColumnsPost.updateBy'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
@@ -235,69 +247,82 @@ export default defineComponent({
       },
     ];
 
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(1);
     const postTableRows: Ref<unknown[]> = ref([]);
     const addPostDialogIsOpened = ref(false);
     const updatePostDialogIsOpened = ref(false);
     const description = ref('');
     const name = ref('');
     const content = ref('');
-    const avatar = ref('');
+    const image = ref('');
     const status: Ref<number> = ref(PostStatus.active);
     const postId: Ref<number | undefined> = ref(undefined);
     const namePost = ref('');
 
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListPost();
+    };
+
     //gọi api ds
     const getListPost = async () => {
-      // const response = (await api({
-      // url: API_PATHS.getListPost,
-      //   method: 'GET',
-      //   params: {
-      //     name: namePost.value,
-      //   },
-      // })) as AxiosResponse<BaseResponseBody<[]>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //   postTableRows.value = response.data.data;
-      // }
+      const response = (await api({
+        url: API_PATHS.getListPost,
+        method: 'GET',
+        params: {
+          pageIndex: pageIndex.value,
+          pageSize: pageSize.value,
+          name: namePost.value,
+        },
+      })) as AxiosResponse<BaseResponseBody<PaginationResponse<Post>>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        postTableRows.value = response.data.data.data;
+        totalPage.value = response.data.data.totalPages;
+      }
     };
 
     const confirmDeletePost = (id: number) => {
       Dialog.create({
-        //   title: i18n.global.t('post.confirmActionsTitle.confirmDeletePostTitle'),
-        //   message: i18n.global.t(
-        //     'field.confirmActionsTitle.confirmDeletePostContent'
-        //   ),
-        //   cancel: i18n.global.t(
-        //     'field.confirmActionsTitle.confirmDeletePostCancelBtnLabel'
-        //   ),
-        //   color: 'negative',
-        // }).onOk(() => {
-        //   void deletePost(id);
+        title: i18n.global.t('post.confirmActionsTitle.confirmDeletePostTitle'),
+        message: i18n.global.t(
+          'post.confirmActionsTitle.confirmDeletePostContent'
+        ),
+        cancel: i18n.global.t(
+          'post.confirmActionsTitle.confirmDeletePostCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deletePost(id);
       });
     };
 
     //gói api xóa
     const deletePost = async (id: number) => {
-      // try {
-      //   const deleteResult = (await api({
-      //     // url: API_PATHS.deletePost,
-      //     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('post.actionMessages.deletePostAccess'),
-      //     });
-      //     void getListPost();
-      //   }
-      // } catch (error) {}
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deletePost,
+          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('post.actionMessages.deletePostAccess'),
+          });
+          void getListPost();
+        }
+      } catch (error) {}
     };
 
     const openAddPostDialog = () => {
       name.value = '';
       description.value = '';
+      content.value = '';
+      image.value = '';
       status.value = PostStatus.active;
       addPostDialogIsOpened.value = true;
     };
@@ -377,6 +402,10 @@ export default defineComponent({
       void getListPost();
     });
     return {
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
       addPostDialogIsOpened,
       updatePostDialogIsOpened,
       postTableColumns,
@@ -395,7 +424,7 @@ export default defineComponent({
       updateNewPost,
       namePost,
       content,
-      avatar,
+      image,
       postId,
     };
   },