create add-post feature in postCategory

src/components/customer/update-new-customer-dialog/UpdateNewCustomerDialog.ts

@@ -21,10 +21,6 @@ export default defineComponent({
       () => props.showDialogUpdate,
       (value) => {
         if (value) {
-          console.log(
-            props.customerInfo,
-            'customerInfocustomerInfocustomerInfo'
-          );
           void getData();
         }
       }

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

@@ -2,9 +2,10 @@ import { i18n } from 'src/boot/i18n';
 import { defineComponent, Ref, ref } from 'vue';
 import UploadImage from 'components/upload-image/index.vue';
 import { PostType } from 'src/assets/type';
+import ListPostDialog from 'components/post-category/list-post-dialog/index.vue';
 export default defineComponent({
   // name: 'ComponentName'
-  components: { UploadImage },
+  components: { UploadImage, ListPostDialog },
   props: {
     isOpenAddDialog: { type: Boolean, required: true },
   },
@@ -75,15 +76,17 @@ export default defineComponent({
       },
     ];
     const userTableRowsPost: Ref<PostType[]> = ref([]);
+    const isOpenListPost: Ref<boolean> = ref(false);
     const uploadImage = (value: FileList) => {
       urlFileLocal.value = URL.createObjectURL(value[0]);
       file.value = value[0];
       image.value = urlFileLocal.value;
       console.log(value, 'FileList');
     };
-    const getListPosts = () => {
-      console.log('getListPosts');
+    const deletePostSelected = (postIdx: number) => {
+      userTableRowsPost.value.splice(postIdx, 1);
     };
+
     return {
       name,
       title,
@@ -92,11 +95,12 @@ export default defineComponent({
       nameRules,
       file,
       urlFileLocal,
+      isOpenListPost,
       uploadImage,
       userTableColumnsPost,
       userTableRowsPost,
       keywordSearch,
-      getListPosts,
+      deletePostSelected,
     };
   },
   emits: [

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

@@ -9,7 +9,7 @@
         <q-card-section class="q-pa-none">
           <q-item>
             <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">
+              <q-item-label class="text-h6 q-py-md text-weight-regular">
                 {{ $t('postCategory.title.addPost') }}
               </q-item-label>
             </q-item-section>
@@ -63,14 +63,14 @@
             </div>
           </div>
           <div class="q-mt-md">
-            <span class="text-h6 text-weight-regular">{{
+            <span class="text-body1 text-weight-regular">{{
               $t('customerRank.dialogLabel.fieldLabels.status')
             }}</span
             ><q-toggle
               v-model="status"
               :true-value="1"
               :false-value="2"
-              size="56px"
+              size="50px"
             ></q-toggle>
           </div>
         </q-card-section>
@@ -84,11 +84,11 @@
                 q-mr-md
               "
             >
-              {{ $t('postCategory.title.listPosts') }}
+              {{ $t('postCategory.title.listPostsSelected') }}
               <q-separator vertical spaced />
             </div>
             <q-space></q-space>
-            <div class="col-2">
+            <!-- <div class="col-2">
               <q-input
                 v-model="keywordSearch"
                 dense
@@ -103,16 +103,16 @@
                 no-caps
                 :label="$t('crudActions.search')"
                 style="width: 100px"
-                @click="getListPosts"
               >
               </q-btn>
-            </div>
+            </div> -->
             <div class="col-auto">
               <q-btn
                 color="primary"
                 no-caps
                 :label="$t('crudActions.add')"
                 style="width: 100px"
+                @click="isOpenListPost = true"
               >
               </q-btn>
             </div>
@@ -149,7 +149,7 @@
                     </div>
                   </q-td>
                 </template>
-                <template v-slot:body-cell-action>
+                <template v-slot:body-cell-action="post">
                   <q-td style="padding: 0; height: 100%">
                     <div align="center">
                       <q-btn
@@ -157,6 +157,7 @@
                         round
                         color="primary"
                         icon="mdi-delete-outline"
+                        @click="deletePostSelected(post.rowIndex)"
                       >
                         <q-tooltip :offset="[20, 10]">{{
                           $t('customer.toolTipMessage.deleteCustomer')
@@ -191,6 +192,12 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <ListPostDialog
+    v-model:is-open-list-post="isOpenListPost"
+    :post-selected="userTableRowsPost"
+    @click:closeBtnDialog="isOpenListPost = false"
+    @submit-data="(userTableRowsPost = $event), (isOpenListPost = false)"
+  ></ListPostDialog>
 </template>
 
 <script lang="ts" src="./AddPostCategory.ts"></script>

src/components/post-category/list-post-dialog/ListPostDialog.ts

-import { defineComponent } from 'vue';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
+import { PaginationResponse, PostType } from 'src/assets/type';
+import { i18n } from 'src/boot/i18n';
+import { API_PATHS, config } from 'src/assets/configurations';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+import Pagination from 'components/pagination/index.vue';
 export default defineComponent({
-  // name: 'ComponentName'
+  components: {
+    Pagination,
+  },
+  props: {
+    isOpenListPost: { type: Boolean, required: true },
+    postSelected: { type: Array as PropType<PostType[]>, required: true },
+  },
+  setup(props) {
+    watch(
+      () => props.isOpenListPost,
+      (value) => {
+        if (value) {
+          void getListPosts();
+          selected.value = props.postSelected;
+        }
+      }
+    );
+    const keywordSearch: Ref<string | null> = ref(null);
+    const userTableRowsPost: Ref<PostType[]> = ref([]);
+    const userTableColumnsPost = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('postCategory.tableColumnsPost.stt'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'name',
+        field: 'name',
+        required: true,
+        label: i18n.global.t('postCategory.tableColumnsPost.name'),
+        align: 'center',
+        headerStyle: 'text-align: center !important;',
+        sortable: false,
+      },
+      {
+        name: 'image',
+        field: 'image',
+        required: true,
+        label: i18n.global.t('postCategory.tableColumnsPost.imageMini'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+    ];
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(1);
+    const configImg = config;
+    const selected: Ref<PostType[]> = ref([]);
+    const getListPosts = async () => {
+      const response = (await api({
+        url: API_PATHS.getListPost,
+        method: 'GET',
+        params: {
+          pageIndex: pageIndex.value,
+          pageSize: pageSize.value,
+          name: keywordSearch.value,
+          // langId: 1,
+        },
+      })) as AxiosResponse<BaseResponseBody<PaginationResponse<PostType>>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        userTableRowsPost.value = response.data.data.data;
+        totalPage.value = response.data.data.totalPages;
+      }
+    };
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListPosts();
+    };
+    const getSelectedString = () => {
+      return selected.value.length === 0
+        ? ''
+        : `${selected.value.length} bài viết đã được chọn `;
+    };
+    return {
+      keywordSearch,
+      userTableRowsPost,
+      userTableColumnsPost,
+      pageIndex,
+      pageSize,
+      totalPage,
+      configImg,
+      selected,
+      getListPosts,
+      changePageSize,
+      getSelectedString,
+    };
+  },
+  emits: ['update:isOpenListPost', 'click:closeBtnDialog', 'submitData'],
 });

src/components/post-category/list-post-dialog/index.vue

 <template>
-  <div>My component</div>
+  <q-dialog
+    persistent
+    :model-value="isOpenListPost"
+    @update:model-value="$emit('update:isOpenListPost', $event)"
+  >
+    <q-card class="full-width" style="max-width: 60rem" bordered>
+      <q-form greedy @submit.prevent="$emit('submitData', selected)">
+        <q-card-section class="q-pa-none">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-medium">
+                {{ $t('postCategory.title.addPostDialog') }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm flex-center q-mt-sm">
+            <div
+              class="
+                col-auto
+                text-body1 text-weight-regular
+                flex flex-center
+                q-mr-md
+              "
+            >
+              {{ $t('postCategory.title.listPosts') }}
+              <q-separator vertical spaced />
+            </div>
+            <q-space></q-space>
+            <div class="col-2">
+              <q-input
+                v-model="keywordSearch"
+                dense
+                outlined
+                :label="$t('postCategory.tableColumnsPost.name')"
+                clearable
+              ></q-input>
+            </div>
+            <div class="col-auto">
+              <q-btn
+                color="primary"
+                no-caps
+                :label="$t('crudActions.search')"
+                style="width: 100px"
+                @click="getListPosts"
+              >
+              </q-btn>
+            </div>
+            <div class="col-12 q-mt-sm">
+              <q-table
+                v-model:selected="selected"
+                :rows="userTableRowsPost"
+                :columns="userTableColumnsPost"
+                :pagination="{ rowsPerPage: pageSize }"
+                :selected-rows-label="getSelectedString"
+                :no-data-label="$t('emptyData')"
+                row-key="name"
+                separator="cell"
+                selection="multiple"
+                hide-pagination
+              >
+                <template v-slot:body-cell-stt="item">
+                  <q-td style="padding: 0; height: 100%">
+                    <div align="center">
+                      {{ item.rowIndex + 1 }}
+                    </div>
+                  </q-td>
+                </template>
+                <template v-slot:body-cell-image="image">
+                  <q-td
+                    style="padding: auto; height: 100%"
+                    class="flex flex-center"
+                  >
+                    <q-img
+                      style="width: 9rem"
+                      fit="contain"
+                      :ratio="16 / 9"
+                      :src="configImg.API_IMAGE_ENDPOINT + image.row.image"
+                    ></q-img>
+                  </q-td>
+                </template>
+              </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="getListPosts"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('post.crudActions.cancel')"
+              @click="$emit('click:closeBtnDialog')"
+            />
+
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('post.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts" src="./ListPostDialog.ts"></script>

src/i18n/vi/index.ts

@@ -695,6 +695,8 @@ export default {
       addPost: 'Thêm mới danh mục bài viết',
       editPost: 'Cập nhật danh mục bài viết',
       listPosts: 'Danh sách bài viết',
+      listPostsSelected: 'Danh sách bài viết đã chọn',
+      addPostDialog: 'Thêm bài viết',
     },
     tableColumnsPostCategory: {
       stt: 'STT',
@@ -711,6 +713,7 @@ export default {
       updateTime: 'Thời gian cập nhật gần nhất',
       status: 'Trạng thái',
       action: 'Chức năng',
+      imageMini: 'Ảnh thu nhỏ',
     },
     labelInput: {
       namePost: 'Tên danh mục',