update fix-bug

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

@@ -81,7 +81,7 @@
                 @update:model-value="$emit('update:phoneNumber', $event)"
                 :label="$t('managingUnit.dialogLabel.fieldLabels.phoneNumber')"
                 class="q-my-sm"
-                type="number"
+                mask="##########"
                 :rules="phoneNumberRules"
                 outlined
                 clearable
@@ -100,7 +100,14 @@
                 outlined
                 use-chips
                 clearable
-              ></q-select>
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      {{ $t('managingUnitAdd.noDataTable') }}
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
               <q-input
                 :model-value="address"
                 @update:model-value="$emit('update:address', $event)"
@@ -544,7 +551,6 @@ export default defineComponent({
       (val?: string) =>
         (val && val.trim().length) ||
         i18n.global.t('managingUnit.validateMessages.requireName'),
-        
     ];
     const representativeRules = [
       (val?: string) =>
@@ -552,11 +558,13 @@ export default defineComponent({
         i18n.global.t('managingUnit.validateMessages.requireRepresentative'),
       (val?: string) =>
         (val && val.trim().length < 30) ||
-        i18n.global.t('managingUnit.validateMessages.requireLengthRepresentative'),
+        i18n.global.t(
+          'managingUnit.validateMessages.requireLengthRepresentative'
+        ),
     ];
     const fieldsRules = [
-      (val?: number) =>
-        val !== undefined ||
+      (val?: Array<unknown>) =>
+        val?.length ||
         i18n.global.t('managingUnit.validateMessages.requireFields'),
     ];
     const phoneNumberRules = [

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

@@ -44,7 +44,14 @@
                 option-label="name"
                 class="q-my-sm"
                 outlined
-              ></q-select>
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      {{ $t('managingUnitAdd.noDataTable') }}
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
               <q-input
                 :model-value="contractTimeFrom"
                 :label="
@@ -95,8 +102,13 @@
                   option-label="fullName"
                   class="q-my-sm"
                   outlined
-                >
-                </q-select
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        {{ $t('managingUnitAdd.noDataTable') }}
+                      </q-item-section>
+                    </q-item>
+                  </template> </q-select
                 ><q-tooltip v-if="!artistField"
                   >Vui lòng chọn Lĩnh vực</q-tooltip
                 >

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

@@ -42,7 +42,15 @@
                 option-label="name"
                 class="q-my-sm"
                 outlined
-              ></q-select>
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      {{ $t('managingUnitAdd.noDataTable') }}
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
               <q-select
                 :model-value="cardType"
                 @update:model-value="$emit('update:cardType', $event)"
@@ -54,12 +62,20 @@
                 option-label="name"
                 class="q-my-sm"
                 outlined
-              ></q-select>
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      {{ $t('managingUnitAdd.noDataTable') }}
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
               <q-input
                 :model-value="cardCode"
                 @update:model-value="$emit('update:cardCode', $event)"
                 :label="$t('managingUnitAdd.dialogLabel.fieldLabels.cardCode')"
-                type="text"
+                mask="###############"
                 class="q-my-sm"
                 outlined
                 :rules="cardCodeRules"
@@ -83,7 +99,7 @@
                 :label="
                   $t('managingUnitAdd.dialogLabel.fieldLabels.numberCard')
                 "
-                type="number"
+                mask="################"
                 class="q-my-sm"
                 outlined
                 :rules="numberCardRules"
@@ -161,11 +177,17 @@ export default defineComponent({
       (val?: string) =>
         (val && val.trim().length) ||
         i18n.global.t('managingUnitAdd.validateMessages.requireCardCode'),
+      (val?: string) =>
+        (val && val.trim().length >= 8) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireCardCode1'),
     ];
     const numberCardRules = [
       (val?: string) =>
         (val && val.trim().length) ||
         i18n.global.t('managingUnitAdd.validateMessages.requireNumberCard'),
+      (val?: string) =>
+        (val && val.trim().length === 16) ||
+        i18n.global.t('managingUnitAdd.validateMessages.requireNumberCard1'),
     ];
     const userCardRules = [
       (val?: string) =>

src/i18n/vi/index.ts

@@ -215,6 +215,7 @@ export default {
     AddmanagingBankAccount: 'Thêm ngân hàng',
     titleAdd: 'Danh sách nghệ sỹ',
     titleUnitBankAccount: 'Danh sách tài khoản ngân hàng thụ hưởng',
+    noDataTable: 'Không có dữ liệu',
     tableColumns: {
       sttAdd: 'STT',
       nameAdd: 'Tên Nghệ sỹ',
@@ -239,7 +240,7 @@ export default {
     },
     statusLabel: {
       active: 'Còn thời gian',
-      inactive: 'Hết hợp đồng',
+      inactive: 'Hết hạn hợp đồng',
     },
     dialogLabel: {
       title: {
@@ -283,7 +284,9 @@ export default {
       requireBank: 'Vui lòng chọn Ngân hàng',
       requireCardType: 'Vui lòng chọn Loại thẻ',
       requireCardCode: 'Vui lòng nhập Số tài khoản',
+      requireCardCode1: 'Số tài khoản không hợp lệ',
       requireNumberCard: 'Vui lòng nhập Số ghi trên thẻ',
+      requireNumberCard1: 'Số ghi trên thẻ không hợp lệ',
       requireUserCard: 'Vui lòng nhập Chủ tài khoản',
     },
     confirmActionsTitle: {

src/pages/don-vi-chu-quan/index.vue

@@ -24,7 +24,14 @@
         dense
         outlined
         clearable
-      ></q-select>
+        ><template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('managingUnitAdd.noDataTable') }}
+            </q-item-section>
+          </q-item>
+        </template></q-select
+      >
     </div>
     <div class="col-auto">
       <q-btn
@@ -53,9 +60,19 @@
         row-key="unitCode"
         separator="cell"
         :no-data-label="$t('emptyData')"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
         hide-pagination
         class="sticky-header-table"
       >
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template>
         <template v-slot:body-cell-action="item">
           <q-td style="padding: 0" class="flex flex-center">
             <q-btn
@@ -173,14 +190,14 @@ export default defineComponent({
   setup() {
     //DS đơn vị chủ quản
     const managingUnitTableColumns = [
-      // {
-      //   name: 'index',
-      //   field: 'index',
-      //   required: true,
-      //   label: 'STT',
-      //   align: 'center',
-      //   sortable: false,
-      // },
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
       {
         name: 'code',
         field: 'code',
@@ -259,9 +276,9 @@ export default defineComponent({
 
     const pageIndex = ref(1);
     const pageSize = ref(20);
+    const totalPage = ref(0);
     const unitNameKeyword = ref('');
     const fieldsOptions: Ref<FieldType[]> = ref([]);
-    const totalPage = ref(1);
     const fieldSelected: Ref<FieldType | undefined> = ref();
     const addUnitDialogIsOpened = ref(false);
     const updateUnitDialogIsOpened = ref(false);

src/pages/nghe-sy/artist.ts

@@ -23,9 +23,9 @@ export default defineComponent({
     const configImg = config;
     const userTableColumnsArtist = [
       {
+        name: 'stt',
+        field: 'stt',
         required: true,
-        name: 'STT',
-        field: 'STT',
         label: 'STT',
         align: 'center',
         sortable: false,
@@ -115,8 +115,8 @@ export default defineComponent({
     const userTableRowsArtist: Ref<unknown[]> = ref([]);
     const pageIndex = ref(1);
     const pageSize = ref(20);
-    const totalPage = ref(10);
-    const fullNameKeyword: Ref<string | null> = ref(null);
+    const totalPage = ref(0);
+    const fullNameKeyword = ref('');
     const sexOptions = ref([
       { id: 1, name: 'Nam' },
       { id: 2, name: 'Nữ' },
@@ -129,7 +129,6 @@ export default defineComponent({
     const fieldSelected: Ref<FieldType | null> = ref(null);
     const professionSelected: Ref<QualificationType | null> = ref(null);
     const artistLevelSelected: Ref<ArtistLevelType | null> = ref(null);
-
     const isOpenNewArtistDialog = ref(false);
     const id: Ref<number> = ref(0);
     const artistCode: Ref<string> = ref('');
@@ -170,8 +169,6 @@ export default defineComponent({
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           userTableRowsArtist.value = response.data.data.data;
           totalPage.value = response.data.data.totalPages;
-          // pageSize.value = response.data.data.pageSize as number;
-          // pageIndex.value = response.data.data.pageIndex as number;
         }
       } catch (error) {}
     };

src/pages/nghe-sy/index.vue

@@ -69,18 +69,20 @@
       <q-table
         :rows="userTableRowsArtist"
         :columns="userTableColumnsArtist"
-        :no-data-label="$t('emptyData')"
         row-key="name"
         separator="cell"
-        :pagination="{ rowsPerPage: pageSize }"
+        :no-data-label="$t('emptyData')"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
         hide-pagination
         class="sticky-header-table"
       >
-        <template v-slot:body-cell-STT="item">
-          <q-td style="padding: 0; height: 100%">
-            <div align="center">
-              {{ item.rowIndex + 1 }}
-            </div>
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
           </q-td>
         </template>
         <template v-slot:body-cell-avatar="avatar">
@@ -126,6 +128,7 @@
           </q-td>
         </template>
       </q-table>
+    </div>
     <div class="col-12 q-mt-sm">
       <Pagination
         v-model:currentPage="pageIndex"
@@ -164,7 +167,329 @@
       @click:CloseBtn="isOpenNewArtistDialog = false"
     ></AddNewArtistDialog>
   </div>
-  </div>
 </template>
 
-<script lang="ts" src="./artist.ts"></script>
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
+import { Dialog, Notify } from 'quasar';
+import {
+  PaginationResponse,
+  ArtistInfoType,
+  FieldType,
+  NationalityType,
+  ArtistLevelType,
+  QualificationType,
+  WorkType,
+} from 'src/assets/type';
+import Pagination from 'components/pagination/index.vue';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { API_PATHS, config } from 'src/assets/configurations';
+import { AxiosResponse } from 'axios';
+
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const userTableColumnsArtist = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'artistCode',
+        field: 'artistCode',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.artistCode'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'fullName',
+        field: 'fullName',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.fullName'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'artistName',
+        field: 'artistName',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.artistName'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'avatar',
+        field: 'avatar',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.avatar'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'field',
+        field: 'field',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.field'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'work',
+        field: 'work',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.work'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'qualification',
+        field: 'qualification',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.qualification'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'artistLevel',
+        field: 'artistLevel',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.artistLevel'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('artist.tableColumnsArtist.action'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
+    const userTableRowsArtist: Ref<unknown[]> = ref([]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(0);
+    const fullNameKeyword = ref('');
+    const sexOptions = ref([
+      { id: 1, name: 'Nam' },
+      { id: 2, name: 'Nữ' },
+    ]);
+    const configImg = config;
+    const fieldOptions: Ref<FieldType[]> = ref([]);
+    const nationalityOptions: Ref<NationalityType[]> = ref([]);
+    const professionOptions: Ref<QualificationType[]> = ref([]);
+    const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
+    const workOptions: Ref<WorkType[]> = ref([]);
+    const fieldSelected: Ref<FieldType | null> = ref(null);
+    const professionSelected: Ref<QualificationType | null> = ref(null);
+    const artistLevelSelected: Ref<ArtistLevelType | null> = ref(null);
+    const isOpenNewArtistDialog = ref(false);
+    const id: Ref<number> = ref(0);
+    const artistCode: Ref<string> = ref('');
+    const fullName: Ref<string> = ref('');
+    const artistName: Ref<string | undefined> = ref();
+    const birthday: Ref<string | undefined> = ref();
+    const sex: Ref<number | undefined> = ref();
+    const nationality: Ref<number | undefined> = ref();
+    const address: Ref<string | undefined> = ref();
+    const status: Ref<number> = ref(1);
+    const field: Ref<number | undefined> = ref();
+    const work: Ref<number | undefined> = ref();
+    const qualification: Ref<number | undefined> = ref();
+    const artistLevel: Ref<number | undefined> = ref();
+    const phoneNumber: Ref<string | undefined> = ref();
+    const email: Ref<string | undefined> = ref();
+    const facebook: Ref<string | undefined> = ref();
+    const facebookMessage: Ref<string | undefined> = ref();
+    const instagram: Ref<string | undefined> = ref();
+    const whatsapp: Ref<string | undefined> = ref();
+
+    const getListArtists = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListArtists,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+            name: fullNameKeyword.value,
+            qualification: fieldSelected.value?.id,
+            artistLevel: professionSelected.value?.id,
+            field: artistLevelSelected.value?.id,
+          },
+        })) as AxiosResponse<
+          BaseResponseBody<PaginationResponse<ArtistInfoType>>
+        >;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          userTableRowsArtist.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+        }
+      } catch (error) {}
+    };
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListArtists();
+    };
+    const getFieldOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getFieldOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        fieldOptions.value = response.data.data;
+      }
+    };
+    const getNationalityOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getNationalityOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        nationalityOptions.value = response.data.data;
+      }
+    };
+    const getArtistLevelOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getArtistLevelOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ArtistLevelType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        artistLevelOptions.value = response.data.data;
+      }
+    };
+    const getQualificationOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getQualificationOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<QualificationType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        professionOptions.value = response.data.data;
+      }
+    };
+    const getWorkOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getWorkOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<WorkType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        workOptions.value = response.data.data;
+      }
+    };
+
+    const confirmDeleteArtist = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistTitle'
+        ),
+        message: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistContent'
+        ),
+        cancel: i18n.global.t(
+          'artist.confirmActionsTitle.confirmDeleteArtistBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteArtist(id);
+      });
+    };
+    const deleteArtist = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteArtist,
+          method: 'GET',
+          params: {
+            artistId: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('artist.actionMessages.deleteArtistAccess'),
+          });
+          void getListArtists();
+        }
+      } catch (error) {}
+    };
+    onMounted(() => {
+      void getListArtists();
+      void getFieldOptions();
+      void getNationalityOptions();
+      void getArtistLevelOptions();
+      void getQualificationOptions();
+      void getWorkOptions();
+    });
+    return {
+      configImg,
+      userTableColumnsArtist,
+      userTableRowsArtist,
+      getListArtists,
+      pageIndex,
+      pageSize,
+      isOpenNewArtistDialog,
+      id,
+      artistCode,
+      fullName,
+      artistName,
+      birthday,
+      sex,
+      nationality,
+      address,
+      status,
+      field,
+      work,
+      qualification,
+      artistLevel,
+      phoneNumber,
+      email,
+      facebook,
+      facebookMessage,
+      instagram,
+      whatsapp,
+      sexOptions,
+      totalPage,
+      changePageSize,
+      fullNameKeyword,
+      fieldSelected,
+      fieldOptions,
+      professionSelected,
+      professionOptions,
+      artistLevelSelected,
+      artistLevelOptions,
+      getFieldOptions,
+      nationalityOptions,
+      getNationalityOptions,
+      workOptions,
+      getArtistLevelOptions,
+      getQualificationOptions,
+      getWorkOptions,
+      confirmDeleteArtist,
+      deleteArtist,
+    };
+  },
+});
+</script>