update

src/assets/configurations.example.ts

@@ -70,4 +70,5 @@ export enum API_PATHS {
   deletePost = 'post/delete',
   detailCustomer = 'customer/detail',
   updateCustomer = 'customer/update',
+  getPostCategory = 'postCategory',
 }

src/assets/type.ts

-import { type } from 'os';
-
 export type PaginationResponse<DataType> = {
   pageIndex: null | number;
   pageSize: null | number;

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

@@ -30,7 +30,33 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-5">
+            <div class="col-12">
+              <q-tabs
+                v-model="tab"
+                dense
+                class="text-grey"
+                active-color="primary"
+                indicator-color="primary"
+                align="justify"
+                narrow-indicator
+              >
+                <q-tab
+                  v-for="(info, index) in languageOptions"
+                  :key="`${info.id}-${index}`"
+                  :name="info.code"
+                  :label="info.name"
+                  no-caps
+                />
+              </q-tabs>
+
+              <q-separator />
+
+              <q-tab-panels v-model="tab" animated>
+                <q-tab-panel
+                  v-for="(info, index) in languageOptions"
+                  :key="`${info.id}-${index}`"
+                  :name="info.code"
+                >
                   <div class="row q-mt-sm flex-center">
                     <div>
                       <q-card style="margin-bottom: 8px" v-if="image !== null">
@@ -61,7 +87,7 @@
                             :size="'xs'"
                           ></q-icon>
                           <div class="q-mt-xs">
-                        {{ $t('uploadImage.uploadBanner') }}
+                            {{ $t('post.uploadImg') }}
                           </div>
                         </div>
 
@@ -75,8 +101,8 @@
                       </q-card>
                     </div>
                   </div>
-            </div>
-            <div class="col-7">
+
+                  <div class="q-pt-md">
                     <q-input
                       :model-value="name"
                       @update:model-value="$emit('update:name', $event)"
@@ -84,14 +110,14 @@
                       type="text"
                       class="q-my-sm"
                       outlined
-                :rules="nameRules"
+                      :rules="tab === 'vn' ? nameRules : []"
                       clearable
                     ></q-input>
                     <q-select
                       :model-value="category"
                       @update:model-value="$emit('update:category', $event)"
                       :label="$t('post.dialogLabel.postLabels.category')"
-                :rules="categoryRules"
+                      :rules="tab === 'vn' ? categoryRules : []"
                       :options="categoryOptions"
                       map-options
                       option-value="id"
@@ -104,13 +130,13 @@
                       :model-value="content"
                       @update:model-value="$emit('update:content', $event)"
                       :label="$t('post.dialogLabel.postLabels.content')"
-                :rules="contentRules"
+                      :rules="tab === 'vn' ? contentRules : []"
                       type="textarea"
                       class="q-my-sm"
                       outlined
                       clearable
                     ></q-input>
-              <div class="q-pt-sm">
+                    <div>
                       <span class="text-body1">{{
                         $t('post.dialogLabel.postLabels.status')
                       }}</span
@@ -122,7 +148,12 @@
                       />
                     </div>
                   </div>
+                </q-tab-panel>
+              </q-tab-panels>
             </div>
+          </div>
+
+          <div class="row q-col-gutter-sm"></div>
         </q-card-section>
         <q-card-actions align="right">
           <div>
@@ -149,7 +180,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 // import UploadImage from '../../upload-image/index.vue';
 export default defineComponent({
@@ -168,6 +199,16 @@ export default defineComponent({
     categoryOptions: { type: Array, required: true },
     content: { type: String, required: true },
     status: { type: Number, required: true },
+    languageOptions: {
+      type: Array as PropType<
+        {
+          id: number;
+          code: string;
+          name: string;
+        }[]
+      >,
+      required: true,
+    },
   },
   setup(_, context) {
     const selectedFile = (value: FileList) => {
@@ -208,6 +249,9 @@ export default defineComponent({
         (val && val.trim().length) ||
         i18n.global.t('post.validateMessages.requireName'),
     ];
+
+    const tab = ref('vn');
+    tab.value = 'vn';
     return {
       contentRules,
       nameRules,
@@ -217,6 +261,7 @@ export default defineComponent({
       upload,
       uploadAvatar,
       deleteAvatar,
+      tab,
     };
   },
   emits: [

src/i18n/vi/index.ts

@@ -632,6 +632,7 @@ export default {
   //bài viết
   post: {
     title: 'Danh sách bài viết',
+    uploadImg: 'Tải lên ảnh bài viết',
     tableColumnsPost: {
       stt: 'STT',
       name: 'Tên bài viết',

src/pages/bai-viet/index.vue

@@ -81,9 +81,9 @@
           </q-td>
         </template>
         <template v-slot:body-cell-image="image">
-          <q-td style="padding: auto; height: 100%" class="center">
+          <q-td style="padding: auto; height: 100%" class="flex flex-center">
             <q-img
-              style="width: 7rem"
+              style="width: 9rem"
               fit="contain"
               :ratio="16 / 9"
               :src="image.row.image"
@@ -129,6 +129,7 @@
       v-model:image="image"
       v-model:content="content"
       v-model:status="status"
+      :languageOptions="languageOptions"
       :categoryOptions="categoryOptions"
       isUpdate
       @SetAvatar="setAvatar($event)"
@@ -143,6 +144,7 @@
       v-model:image="image"
       v-model:content="content"
       v-model:status="status"
+      :languageOptions="languageOptions"
       :categoryOptions="categoryOptions"
       @SetAvatar="setAvatar($event)"
       @deleteAvatar="deleteAvatar"
@@ -158,7 +160,12 @@ 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, FileUploadType } from 'src/assets/type';
+import {
+  PaginationResponse,
+  Post,
+  FileUploadType,
+  CategoryPostType,
+} 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';
@@ -282,6 +289,10 @@ export default defineComponent({
     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 changePageSize = () => {
       pageIndex.value = 1;
@@ -353,11 +364,10 @@ export default defineComponent({
     const addNewPost = async () => {
       // const data = {
       //   name: name.value,
-      //   description: description.value,
       //   status: status.value,
       // };
       // const response = (await api({
-      //   // url: API_PATHS.addPost,
+      //   url: API_PATHS.addPost,
       //   method: 'POST',
       //   data,
       // })) as AxiosResponse<BaseResponseBody<[]>>;
@@ -443,8 +453,21 @@ export default defineComponent({
       image.value = null;
     };
 
+    //gọi api danh mục bv
+    const getpostCategory = async () => {
+      const response = (await api({
+        url: API_PATHS.getPostCategory,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<CategoryPostType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        categoryOptions.value = response.data.data;
+      }
+    };
+
     onMounted(() => {
       void getListPost();
+      void getpostCategory();
     });
     return {
       pageIndex,
@@ -470,11 +493,13 @@ export default defineComponent({
       updateNewPost,
       namePost,
       content,
+      languageOptions,
       image,
       postId,
       setAvatar,
       callApiUploadAvatar,
       deleteAvatar,
+      getpostCategory,
     };
   },
 });