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,99 +30,130 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-5">
-              <div class="row q-mt-sm flex-center">
-                <div>
-                  <q-card style="margin-bottom: 8px" v-if="image !== null">
-                    <q-img
-                      :src="image"
-                      style="height: 268px; width: 350px"
-                      @click="uploadAvatar"
-                    >
-                    </q-img>
-                    <q-icon
-                      name="mdi-close-circle"
-                      color="red"
-                      style="position: absolute; right: 0; font-size: 18px"
-                      @click="deleteAvatar"
-                    ></q-icon>
-                  </q-card>
-                  <q-card v-else style="margin-bottom: 8px">
-                    <q-img
-                      src="~/assets/noavatar.png"
-                      style="height: 268px; width: 350px"
-                    ></q-img>
-                  </q-card>
+            <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">
+                        <q-img
+                          :src="image"
+                          style="height: 268px; width: 350px"
+                          @click="uploadAvatar"
+                        >
+                        </q-img>
+                        <q-icon
+                          name="mdi-close-circle"
+                          color="red"
+                          style="position: absolute; right: 0; font-size: 18px"
+                          @click="deleteAvatar"
+                        ></q-icon>
+                      </q-card>
+                      <q-card v-else style="margin-bottom: 8px">
+                        <q-img
+                          src="~/assets/noavatar.png"
+                          style="height: 268px; width: 350px"
+                        ></q-img>
+                      </q-card>
 
-                  <q-card @click="uploadAvatar">
-                    <div align="center" class="flex flex-center q-py-xs">
-                      <q-icon
-                        name="mdi-plus-circle-outline"
-                        :size="'xs'"
-                      ></q-icon>
-                      <div class="q-mt-xs">
-                        {{ $t('uploadImage.uploadBanner') }}
-                      </div>
+                      <q-card @click="uploadAvatar">
+                        <div align="center" class="flex flex-center q-py-xs">
+                          <q-icon
+                            name="mdi-plus-circle-outline"
+                            :size="'xs'"
+                          ></q-icon>
+                          <div class="q-mt-xs">
+                            {{ $t('post.uploadImg') }}
+                          </div>
+                        </div>
+
+                        <input
+                          ref="upload"
+                          hidden
+                          type="file"
+                          @change="selectedFile($event.target.files)"
+                          accept="image/png, image/jpeg"
+                        />
+                      </q-card>
                     </div>
+                  </div>
 
-                    <input
-                      ref="upload"
-                      hidden
-                      type="file"
-                      @change="selectedFile($event.target.files)"
-                      accept="image/png, image/jpeg"
-                    />
-                  </q-card>
-                </div>
-              </div>
-            </div>
-            <div class="col-7">
-              <q-input
-                :model-value="name"
-                @update:model-value="$emit('update:name', $event)"
-                :label="$t('post.dialogLabel.postLabels.name')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="nameRules"
-                clearable
-              ></q-input>
-              <q-select
-                :model-value="category"
-                @update:model-value="$emit('update:category', $event)"
-                :label="$t('post.dialogLabel.postLabels.category')"
-                :rules="categoryRules"
-                :options="categoryOptions"
-                map-options
-                option-value="id"
-                option-label="name"
-                type="text"
-                class="q-my-sm"
-                outlined
-              ></q-select>
-              <q-input
-                :model-value="content"
-                @update:model-value="$emit('update:content', $event)"
-                :label="$t('post.dialogLabel.postLabels.content')"
-                :rules="contentRules"
-                type="textarea"
-                class="q-my-sm"
-                outlined
-                clearable
-              ></q-input>
-              <div class="q-pt-sm">
-                <span class="text-body1">{{
-                  $t('post.dialogLabel.postLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="status"
-                  :true-value="1"
-                  :false-value="2"
-                  @update:model-value="$emit('update:status', $event)"
-                />
-              </div>
+                  <div class="q-pt-md">
+                    <q-input
+                      :model-value="name"
+                      @update:model-value="$emit('update:name', $event)"
+                      :label="$t('post.dialogLabel.postLabels.name')"
+                      type="text"
+                      class="q-my-sm"
+                      outlined
+                      :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="tab === 'vn' ? categoryRules : []"
+                      :options="categoryOptions"
+                      map-options
+                      option-value="id"
+                      option-label="name"
+                      type="text"
+                      class="q-my-sm"
+                      outlined
+                    ></q-select>
+                    <q-input
+                      :model-value="content"
+                      @update:model-value="$emit('update:content', $event)"
+                      :label="$t('post.dialogLabel.postLabels.content')"
+                      :rules="tab === 'vn' ? contentRules : []"
+                      type="textarea"
+                      class="q-my-sm"
+                      outlined
+                      clearable
+                    ></q-input>
+                    <div>
+                      <span class="text-body1">{{
+                        $t('post.dialogLabel.postLabels.status')
+                      }}</span
+                      ><q-toggle
+                        :model-value="status"
+                        :true-value="1"
+                        :false-value="2"
+                        @update:model-value="$emit('update:status', $event)"
+                      />
+                    </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,
     };
   },
 });