update

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

@@ -4,7 +4,7 @@
     :model-value="isOpened"
     @update:model-value="$emit('update:isOpened', $event)"
   >
-    <q-card class="full-width" style="max-width: 50rem" bordered>
+    <q-card class="full-width" style="max-width: 60rem" bordered>
       <q-form
         greedy
         @submit.prevent="
@@ -30,46 +30,53 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-6">
-              <div>
-                <q-card style="margin-bottom: 8px" v-if="image !== null">
-                  <q-img :src="image" style="height: 180px; width: 135px">
-                  </q-img>
-                  <q-icon
-                    name="mdi-close-circle"
-                    color="red"
-                    style="position: absolute; right: 0; font-size: 18px"
-                  ></q-icon>
-                </q-card>
-                <q-card v-else style="margin-bottom: 8px">
-                  <q-img
-                    src="~/assets/noavatar.png"
-                    style="height: 180px; width: 135px"
-                  ></q-img>
-                </q-card>
-
-                <q-card @click="uploadAvatar">
-                  <div align="center" class="flex flex-center q-py-xs">
+            <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-plus-circle-outline"
-                      :size="'xs'"
+                      name="mdi-close-circle"
+                      color="red"
+                      style="position: absolute; right: 0; font-size: 18px"
+                      @click="deleteAvatar"
                     ></q-icon>
-                    <div class="q-mt-xs">
-                      {{ $t('uploadImage.uploadBanner') }}
+                  </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>
                     </div>
-                  </div>
 
-                  <input
-                    ref="upload"
-                    hidden
-                    type="file"
-                    @change="selectedFile($event.target.files)"
-                    accept="image/png, image/jpeg"
-                  />
-                </q-card>
+                    <input
+                      ref="upload"
+                      hidden
+                      type="file"
+                      @change="selectedFile($event.target.files)"
+                      accept="image/png, image/jpeg"
+                    />
+                  </q-card>
+                </div>
               </div>
             </div>
-            <div class="col-6">
+            <div class="col-7">
               <q-input
                 :model-value="name"
                 @update:model-value="$emit('update:name', $event)"
@@ -80,14 +87,19 @@
                 :rules="nameRules"
                 clearable
               ></q-input>
-              <q-input
-                :model-value="description"
-                @update:model-value="$emit('update:description', $event)"
-                :label="$t('post.dialogLabel.postLabels.description')"
+              <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-input>
+              ></q-select>
               <q-input
                 :model-value="content"
                 @update:model-value="$emit('update:content', $event)"
@@ -96,6 +108,7 @@
                 type="textarea"
                 class="q-my-sm"
                 outlined
+                clearable
               ></q-input>
               <div class="q-pt-sm">
                 <span class="text-body1">{{
@@ -138,8 +151,11 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
-
+// import UploadImage from '../../upload-image/index.vue';
 export default defineComponent({
+  // components: {
+  //   UploadImage,
+  // },
   props: {
     isOpened: {
       type: Boolean,
@@ -148,19 +164,23 @@ export default defineComponent({
     isUpdate: { type: Boolean, default: false },
     image: { type: String, required: true },
     name: { type: String, required: true },
-    description: { type: String, required: true },
+    category: { type: Number, required: true },
+    categoryOptions: { type: Array, required: true },
     content: { type: String, required: true },
     status: { type: Number, required: true },
   },
-  setup(props, context) {
+  setup(_, context) {
     const selectedFile = (value: FileList) => {
       console.log(value, 'valueee image');
-      // console.log(URL.createObjectURL(value[0]));
       context.emit('SetAvatar', {
         file: value[0],
         url: URL.createObjectURL(value[0]),
       });
     };
+    const deleteAvatar = () => {
+      console.log('object');
+      context.emit('deleteAvatar');
+    };
     const upload = ref(null);
     const uploadAvatar = () => {
       // eslint-disable-next-line
@@ -168,6 +188,11 @@ export default defineComponent({
       // eslint-disable-next-line
       upload.value?.click();
     };
+    const categoryRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('post.validateMessages.requireCategory'),
+    ];
     const imageRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -188,19 +213,22 @@ export default defineComponent({
       nameRules,
       imageRules,
       selectedFile,
+      categoryRules,
       upload,
       uploadAvatar,
+      deleteAvatar,
     };
   },
   emits: [
     'update:isOpened',
     'update:image',
     'update:name',
-    'update:description',
+    'update:category',
     'update:content',
     'update:status',
     'savePostInfo',
     'SetAvatar',
+    'deleteAvatar',
   ],
 });
 </script>

src/components/units-manager/unit-add-update-bank-account/index.vue

@@ -36,7 +36,7 @@
                 @update:model-value="$emit('update:bank', $event)"
                 :label="$t('managingUnitAdd.dialogLabel.fieldLabels.bank')"
                 :options="bankOptions"
-                :rules="bankdRules"
+                :rules="bankRules"
                 map-options
                 option-value="id"
                 option-label="name"
@@ -147,7 +147,7 @@ export default defineComponent({
     isDefault: { type: Number, required: true },
   },
   setup() {
-    const bankdRules = [
+    const bankRules = [
       (val?: number) =>
         val !== undefined ||
         i18n.global.t('managingUnitAdd.validateMessages.requireBank'),
@@ -173,7 +173,7 @@ export default defineComponent({
         i18n.global.t('managingUnitAdd.validateMessages.requireUserCard'),
     ];
     return {
-      bankdRules,
+      bankRules,
       cardTypeRules,
       cardCodeRules,
       numberCardRules,

src/i18n/vi/index.ts

@@ -650,12 +650,12 @@ export default {
     dialogLabel: {
       title: {
         addPost: 'Thêm bài viết',
-        updatePost: 'Cập nhật Bài viết',
+        updatePost: 'Cập nhật bài viết',
       },
       postLabels: {
         name: 'Tên bài viết *',
         image: 'Avatar *',
-        description: 'Mô tả',
+        category: 'Danh mục bài viết *',
         content: 'Nội dung *',
         status: 'Trạng thái',
       },
@@ -672,6 +672,7 @@ export default {
       requireName: 'Vui lòng nhập Tên bài viết',
       requireImage: 'Vui lòng chọn Avatar',
       requireContent: 'Vui lòng nhập Nội dung',
+      requireCategory: 'Vui lòng chọn Danh mục bài viết',
     },
     confirmActionsTitle: {
       confirmDeletePostTitle: 'Xác nhận',

src/pages/bai-viet/index.vue

@@ -125,22 +125,27 @@
     <AddUpdatePostDialog
       v-model:isOpened="addPostDialogIsOpened"
       v-model:name="name"
-      v-model:description="description"
+      v-model:category="category"
       v-model:image="image"
       v-model:content="content"
       v-model:status="status"
+      :categoryOptions="categoryOptions"
       isUpdate
-      @SetAvatar="setAvatar"
+      @SetAvatar="setAvatar($event)"
+      @deleteAvatar="deleteAvatar"
       @savePostInfo="addNewPost"
     />
 
     <AddUpdatePostDialog
       v-model:isOpened="updatePostDialogIsOpened"
       v-model:name="name"
-      v-model:description="description"
+      v-model:category="category"
       v-model:image="image"
       v-model:content="content"
       v-model:status="status"
+      :categoryOptions="categoryOptions"
+      @SetAvatar="setAvatar($event)"
+      @deleteAvatar="deleteAvatar"
       @savePostInfo="updateNewPost"
     />
   </div>
@@ -153,11 +158,15 @@ 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 { PaginationResponse, Post, FileUploadType } 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 type AvatarType = {
+  file?: File;
+  url?: string | null;
+};
 
 export default defineComponent({
   components: {
@@ -263,13 +272,16 @@ export default defineComponent({
     const postTableRows: Ref<unknown[]> = ref([]);
     const addPostDialogIsOpened = ref(false);
     const updatePostDialogIsOpened = ref(false);
-    const description = ref('');
+    const category: Ref<number | undefined> = ref(undefined);
+    const categoryOptions: Ref<unknown[]> = ref([]);
     const name = ref('');
     const content = ref('');
-    const image = ref('');
+    const image: Ref<string | null> = ref(null);
     const status: Ref<number> = ref(PostStatus.active);
     const postId: Ref<number | undefined> = ref(undefined);
     const namePost = ref('');
+    const avatarFile: Ref<File | null> = ref(null);
+    const avatarUploaded: Ref<string | null> = ref(null);
 
     const changePageSize = () => {
       pageIndex.value = 1;
@@ -330,9 +342,9 @@ export default defineComponent({
 
     const openAddPostDialog = () => {
       name.value = '';
-      description.value = '';
+      category.value = undefined;
       content.value = '';
-      image.value = '';
+      image.value = null;
       status.value = PostStatus.active;
       addPostDialogIsOpened.value = true;
     };
@@ -408,9 +420,29 @@ export default defineComponent({
       // }
     };
     const setAvatar = (value: { file?: File; url?: string }) => {
+      avatarFile.value = value.file as File;
       image.value = value.url as string;
     };
 
+    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: 'http://cms.vab.xteldev.com/file/upload',
+          method: 'POST',
+          data: bodyFormData,
+        })) as AxiosResponse<BaseResponseBody<FileUploadType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          avatarUploaded.value = response.data.data.fileName;
+        }
+      } catch (error) {}
+    };
+    const deleteAvatar = () => {
+      image.value = null;
+    };
+
     onMounted(() => {
       void getListPost();
     });
@@ -427,8 +459,9 @@ export default defineComponent({
       PostStatus,
       openAddPostDialog,
       name,
-      description,
+      category,
       status,
+      categoryOptions,
       addNewPost,
       confirmDeletePost,
       deletePost,
@@ -440,6 +473,8 @@ export default defineComponent({
       image,
       postId,
       setAvatar,
+      callApiUploadAvatar,
+      deleteAvatar,
     };
   },
 });