update

src/assets/configurations.example.ts

@@ -94,4 +94,5 @@ export enum API_PATHS {
   updateConfigSystem = 'config-page/update',
   addConfigSystem = 'config-page/add',
   deleteConfigSystem = 'config-page/delete',
+  getListVABInfo = 'information',
 }

src/assets/type.ts

@@ -511,3 +511,33 @@ export type AddConfigSystem = {
   url: string;
   numIndex: number;
 };
+
+export type VABInfoType = {
+  id: number;
+  comName: string;
+  logo: string;
+  email: string;
+  website: string;
+  phone: string;
+  address: string;
+};
+
+export type DetailVABInfoType = {
+  id: number;
+  comName: string;
+  logo: string;
+  email: string;
+  website: string;
+  phone: string;
+  address: string;
+};
+
+export type UpdateVABInfoType = {
+  id: number;
+  comName: string;
+  logo: string;
+  email: string;
+  website: string;
+  phone: string;
+  address: string;
+};

src/components/configSystem/index.vue

@@ -62,11 +62,11 @@
                 :rules="urlRules"
                 clearable
               ></q-input>
+              <!-- :rules="nameMenuRules" -->
               <q-select
                 :model-value="nameMenu"
                 @update:model-value="$emit('update:nameMenu', $event)"
                 :label="$t('listConfigSystem.dialogLabel.fieldLabels.nameMenu')"
-                :rules="nameMenuRules"
                 :options="nameMenuOptions"
                 multiple
                 map-options
@@ -236,15 +236,15 @@ export default defineComponent({
         (val && val.trim().length) ||
         i18n.global.t('listConfigSystem.validateMessages.requireUrl'),
     ];
-    const nameMenuRules = [
-      (val?: number) =>
-        val !== undefined ||
-        i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'),
-    ];
+    // const nameMenuRules = [
+    //   (val?: number) =>
+    //     val !== undefined ||
+    //     i18n.global.t('listConfigSystem.validateMessages.requireNameMenu'),
+    // ];
     return {
       namePageRules,
       urlRules,
-      nameMenuRules,
+      // nameMenuRules,
     };
   },
   emits: [

src/components/update-info-vab/update-info-vab-dialog/index.vue

@@ -4,7 +4,7 @@
     :model-value="isOpened"
     @update:model-value="$emit('update:isOpened', $event)"
   >
-    <q-card class="full-width" style="max-width: 60rem" bordered>
+    <q-card class="full-width" style="max-width: 80rem" bordered>
       <q-form
         greedy
         @submit.prevent="
@@ -30,55 +30,73 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-12">
-              <div class="row flex-center q-pt-sm">
-                <div>
-                  <q-card style="margin-bottom: 8px" v-if="image !== null">
+            <div class="col-6">
+              <div class="row flex-center">
+                <div class="q-mt-lg">
+                  <q-card v-if="logo !== null">
                     <q-img
-                      :src="image"
-                      style="height: 268px; width: 350px"
                       @click="uploadAvatar"
-                    >
-                    </q-img>
+                      :src="logo"
+                      style="height: 390px; width: 350px; cursor: pointer"
+                    ></q-img>
                     <q-icon
                       name="mdi-close-circle"
-                      style="position: absolute; right: 0; font-size: 18px"
+                      color="red"
+                      style="
+                        position: absolute;
+                        right: 0;
+                        font-size: 18px;
+                        cursor: pointer;
+                      "
                       @click="deleteAvatar"
                     ></q-icon>
                   </q-card>
-                  <q-card v-else style="margin-bottom: 8px">
-                    <q-img
-                      src="~/assets/noavatar.png"
-                      style="height: 265px; width: 350px"
-                    ></q-img>
-                  </q-card>
-
-                  <q-card @click="uploadAvatar">
-                    <div align="center" class="flex flex-center q-py-xs">
+                  <div
+                    @click="uploadAvatar"
+                    v-else
+                    style="
+                      height: 390px;
+                      width: 350px;
+                      border: 2px dashed #5d319e;
+                      border-radius: 4px;
+                      cursor: pointer;
+                    "
+                  >
+                    <div
+                      style="
+                        height: 390px;
+                        width: 350px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                      "
+                    >
                       <q-icon
                         style="color: #5d319e"
-                        name="mdi-plus-circle-outline"
-                        :size="'xs'"
+                        name="mdi-cloud-upload"
+                        size="xl"
                       ></q-icon>
-                      <div class="q-mt-xs">
-                        {{ $t('infoVAB.uploadImg') }}
+                      Tải ảnh lên
                     </div>
                   </div>
-
+                  <div>
                     <input
                       ref="upload"
                       hidden
-                      type="file"
                       @change="selectedFile($event.target.files)"
+                      type="file"
                       accept="image/png, image/jpeg"
                     />
-                  </q-card>
                   </div>
                 </div>
+              </div>
+            </div>
+            <div class="col-6">
               <q-input
-                :model-value="name"
-                @update:model-value="$emit('update:name', $event)"
-                :label="$t('infoVAB.dialogLabel.infoVABLabels.name')"
+                :model-value="comName"
+                @update:model-value="$emit('update:comName', $event)"
+                :label="$t('infoVAB.dialogLabel.infoVABLabels.comName')"
                 type="text"
                 class="q-my-sm q-pt-md"
                 outlined
@@ -156,7 +174,7 @@
               <template v-slot:body-cell-action="">
                 <q-td style="padding: 0" class="flex flex-center">
                   <q-btn flat round color="primary" icon="mdi-delete-outline">
-                    <q-tooltip :offset="[20, 10]">{{
+                    <q-tooltip :offset="[10, 10]">{{
                       $t('infoVAB.toolTipMessage.deleteBankAccount')
                     }}</q-tooltip>
                   </q-btn>
@@ -166,7 +184,7 @@
                     color="primary"
                     icon="mdi-account-edit-outline"
                   >
-                    <q-tooltip :offset="[20, 10]">{{
+                    <q-tooltip :offset="[10, 10]">{{
                       $t('infoVAB.toolTipMessage.updateBankAccount')
                     }}</q-tooltip>
                   </q-btn>
@@ -242,7 +260,6 @@
 import { defineComponent, ref, Ref, PropType } from 'vue';
 import InfoVABAddUpdateBankAccountDialog from 'components/update-info-vab/info-vab-add-update-bank-account/index.vue';
 import { i18n } from 'src/boot/i18n';
-
 //bankAccount
 const bankAccountTableColumnsInfoVAB = [
   {
@@ -318,10 +335,10 @@ export default defineComponent({
       required: true,
     },
     isUpdate: { type: Boolean, default: false },
-    name: { type: String, required: true },
-    image: { type: String, required: true },
+    comName: { type: String, required: true },
+    logo: { type: String, required: true },
     website: { type: String, required: true },
-    phone: { type: String, required: true },
+    phone: { type: Number, required: true },
     email: { type: String, required: true },
     address: { type: String, required: true },
     bankAccountList: { type: Array as PropType<unknown[]>, required: true },
@@ -338,6 +355,7 @@ export default defineComponent({
     };
     const upload = ref(null);
     const uploadAvatar = () => {
+      console.log(1);
       // eslint-disable-next-line
       // @ts-ignore
       // eslint-disable-next-line
@@ -407,6 +425,7 @@ export default defineComponent({
       selectedFile,
       deleteAvatar,
       uploadAvatar,
+      upload,
       bankAccountTableColumnsInfoVAB,
       addBankAccountDialogIsOpened,
       bank,
@@ -426,12 +445,12 @@ export default defineComponent({
   },
   emits: [
     'update:isOpened',
-    'update:name',
+    'update:comName',
     'update:website',
     'update:phone',
     'update:email',
     'update:address',
-    'update:image',
+    'update:logo',
     'SetAvatar',
     'deleteAvatar',
     'saveInfoVAB',

src/i18n/vi/index.ts

@@ -846,8 +846,8 @@ export default {
     titleBankAccount: 'Danh sách tài khoản ngân hàng thụ hưởng',
     tableColumnsInfoVAB: {
       stt: 'STT',
-      name: 'Tên công ty',
-      image: 'Logo',
+      comName: 'Tên công ty',
+      logo: 'Logo',
       website: 'Website',
       phone: 'Số điện thoại',
       email: 'Email',
@@ -869,7 +869,7 @@ export default {
         updateBankAccount: 'Cập nhật ngân hàng thụ hưởng',
       },
       infoVABLabels: {
-        name: 'Tên công ty *',
+        comName: 'Tên công ty *',
         website: 'Website *',
         phone: 'Số điện thoại *',
         email: 'Email *',

src/pages/cau-hinh-trang-tinh/index.vue

@@ -144,7 +144,6 @@
     />
 
     <AddUpdatePolicyDialog
-      isUpdate
       v-model:isOpened="showDialogUpdate"
       v-model:namePage="namePage"
       v-model:content="content"

src/pages/thong-tin-chung/index.vue

@@ -11,47 +11,67 @@
         :columns="infoVABTableColumns"
         row-key="infoVABName"
         separator="cell"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
         :no-data-label="$t('emptyData')"
         hide-pagination
         class="sticky-header-table"
       >
-        <template v-slot:body-cell-action="">
+        <template v-slot:body-cell-action="item">
           <q-td style="padding: 0" align="center">
             <q-btn
               flat
               round
               color="primary"
-              icon="mdi-book-edit-outline"
-              @click="openUpdateInfoVABDialog()"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateInfoVABDialog(item.row.id)"
             >
-              <q-tooltip :offset="[20, 10]">{{
+              <q-tooltip :offset="[10, 10]">{{
                 $t('infoVAB.toolTipMessage.updateInfoVAB')
               }}</q-tooltip>
             </q-btn>
-            <q-btn flat round color="primary" icon="mdi-delete-outline">
-              <q-tooltip :offset="[20, 10]">{{
+            <!-- <q-btn flat round color="primary" icon="mdi-delete-outline">
+              <q-tooltip :offset="[10, 10]">{{
                 $t('infoVAB.toolTipMessage.updateInfoVAB')
               }}</q-tooltip>
-            </q-btn>
+            </q-btn> -->
+          </q-td>
+        </template>
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
-        <template v-slot:body-cell-image="image">
+        <template v-slot:body-cell-logo="logo">
           <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"
+              :src="configImg.API_IMAGE_ENDPOINT + logo.row.logo"
             ></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="getListVABInfo"
+      />
+    </div>
+
     <UpdateInfoVABDialog
       v-model:isOpened="updateInfoVABDialogIsOpened"
-      v-model:name="name"
-      v-model:image="image"
+      v-model:com-name="comName"
+      v-model:logo="logo"
       v-model:website="website"
       v-model:phone="phone"
       v-model:email="email"
@@ -68,10 +88,17 @@ import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
-import { FileUploadType } from 'src/assets/type';
-import { config } from 'src/assets/configurations';
+import { Notify } from 'quasar';
+import Pagination from 'components/pagination/index.vue';
+import {
+  FileUploadType,
+  PaginationResponse,
+  VABInfoType,
+  DetailVABInfoType,
+  UpdateVABInfoType,
+} from 'src/assets/type';
+import { config, API_PATHS } from 'src/assets/configurations';
 import UpdateInfoVABDialog from 'components/update-info-vab/update-info-vab-dialog/index.vue';
-
 export type AvatarType = {
   file?: File;
   url?: string | null;
@@ -79,32 +106,33 @@ export type AvatarType = {
 
 export default defineComponent({
   components: {
+    Pagination,
     UpdateInfoVABDialog,
   },
   setup() {
     const infoVABTableColumns = [
-      // {
-      //   name: 'index',
-      //   field: 'index',
-      //   required: true,
-      //   label: 'STT',
-      //   align: 'center',
-      //   sortable: false,
-      // },
       {
-        name: 'name',
-        field: 'name',
+        name: 'stt',
+        field: 'stt',
         required: true,
-        label: i18n.global.t('infoVAB.tableColumnsInfoVAB.name'),
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'comName',
+        field: 'comName',
+        required: true,
+        label: i18n.global.t('infoVAB.tableColumnsInfoVAB.comName'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'image',
-        field: 'image',
+        name: 'logo',
+        field: 'logo',
         required: true,
-        label: i18n.global.t('infoVAB.tableColumnsInfoVAB.image'),
+        label: i18n.global.t('infoVAB.tableColumnsInfoVAB.logo'),
         headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
@@ -156,83 +184,112 @@ export default defineComponent({
       },
     ];
 
-    const infoVABTableRows: Ref<unknown[]> = ref([
-      { name: 'VietNam Artist Booking' },
-    ]);
+    const infoVABTableRows: Ref<unknown[]> = ref([]);
     const updateInfoVABDialogIsOpened = ref(false);
-    const name = ref('');
-    const phone = ref('');
-    const email = ref('');
-    const address = ref('');
-    const website = ref('');
-    const image: Ref<string | null> = ref(null);
+    const comName: Ref<string | null> = ref(null);
+    const phone: Ref<string> = ref('');
+    const email: Ref<string> = ref('');
+    const address: Ref<string> = ref('');
+    const website: Ref<string> = ref('');
+    const logo: Ref<string | null> = ref(null);
+    const imageChange: Ref<string> = ref('');
     const infoVABId: Ref<number | undefined> = ref(undefined);
     const avatarFile: Ref<File | null> = ref(null);
     const avatarUploaded: Ref<string> = ref('');
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(1);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListVABInfo();
+    };
+    const VABInfoId: Ref<number | undefined> = ref(undefined);
 
     //gọi api ds
-    const getListInfoVAB = async () => {
-      // const response = (await api({
-      //   url: API_PATHS.getListBanner,
-      //   method: 'GET',
-      //   params: {
-      //     name: nameBanner.value,
-      //   },
-      // })) as AxiosResponse<BaseResponseBody<BannerType[]>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //   bannerTableRows.value = response.data.data;
-      // }
+    const getListVABInfo = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListVABInfo,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<PaginationResponse<VABInfoType>>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          infoVABTableRows.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+        }
+      } catch (error) {}
     };
 
-    const openUpdateInfoVABDialog = () => {
-      void getDetailInfoVAB();
+    const openUpdateInfoVABDialog = (id: number) => {
+      void getDetailInfoVAB(id);
       updateInfoVABDialogIsOpened.value = true;
     };
 
     //gọi api detail
-    const getDetailInfoVAB = async () => {
-      // try {
-      //   const response = (await api({
-      //     url: API_PATHS.getDetailBanner,
-      //     method: 'GET',
-      //     params: {
-      //       id: id,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<DetailBannerType>>;
-      //   if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //     bannerId.value = response.data.data.id;
-      //     name.value = response.data.data.name;
-      //     status.value = response.data.data.status;
-      //   }
-      // } catch (error) {}
+    const getDetailInfoVAB = async (id: number) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getDetailInfoVAB,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<DetailVABInfoType>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          VABInfoId.value = response.data.data.id;
+          logo.value = config.API_IMAGE_ENDPOINT + response.data.data.logo;
+          imageChange.value = response.data.data.logo;
+          comName.value = response.data.data.comName;
+          email.value = response.data.data.email;
+          website.value = response.data.data.website;
+          phone.value = response.data.data.phone;
+          address.value = response.data.data.address;
+        }
+      } catch (error) {}
     };
 
     //gọi api update
     const updateInfoVAB = async () => {
-      // const data = {
-      //   id: bannerId.value,
-      //   name: name.value,
-      //   status: status.value,
-      // };
-      // const response = (await api({
-      //   url: API_PATHS.updateBanner,
-      //   method: 'POST',
-      //   data,
-      // })) as AxiosResponse<BaseResponseBody<UpdateBannerType[]>>;
-      // if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //   updateBannerDialogIsOpened.value = false;
-      //   Notify.create({
-      //     type: 'positive',
-      //     message: i18n.global.t('banner.actionMessages.updateBannerAccess'),
-      //     actions: [{ icon: 'close', color: 'white' }],
-      //   });
-      //   void getListBanner();
-      // }
+      if (avatarFile.value) {
+        avatarUploaded.value = await callApiUploadAvatar(avatarFile.value);
+        void confirmUpdatePost(avatarUploaded.value);
+      } else {
+        void confirmUpdatePost(imageChange.value);
+      }
+    };
+
+    const confirmUpdatePost = async (logo: string) => {
+      const data = {
+        id: VABInfoId.value,
+        logo,
+        comName: comName.value,
+        email: email.value,
+        website: website.value,
+        address: address.value,
+        phone: phone.value,
+      };
+      const response = (await api({
+        url: API_PATHS.updateInfoVAB,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<UpdateVABInfoType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        updateInfoVABDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t('post.actionMessages.updatePostAccess'),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListVABInfo();
+      }
     };
 
     const setAvatar = (value: { file?: File; url?: string }) => {
       avatarFile.value = value.file as File;
-      image.value = value.url as string;
+      logo.value = value.url as string;
     };
 
     const callApiUploadAvatar = async (file: File) => {
@@ -255,20 +312,20 @@ export default defineComponent({
       }
     };
     const deleteAvatar = () => {
-      image.value = null;
+      logo.value = null;
     };
 
     const configImg = config;
 
     onMounted(() => {
-      void getListInfoVAB();
+      void getListVABInfo();
     });
     return {
       updateInfoVABDialogIsOpened,
       infoVABTableColumns,
       infoVABTableRows,
-      getListInfoVAB,
-      name,
+      getListVABInfo,
+      comName,
       phone,
       email,
       address,
@@ -277,12 +334,16 @@ export default defineComponent({
       openUpdateInfoVABDialog,
       getDetailInfoVAB,
       updateInfoVAB,
-      image,
+      logo,
       setAvatar,
       callApiUploadAvatar,
       deleteAvatar,
       configImg,
-      avatarUploaded,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      VABInfoId,
     };
   },
 });