fix bug acount-bank in artist page

src/components/artist-information/bank-account/BankAccount.ts

 import { i18n } from 'src/boot/i18n';
-import { defineComponent, onMounted, Ref, ref } from 'vue';
-import Pagination from 'components/pagination/index.vue';
+import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
 import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
+import { BankAccountType } from 'src/assets/type';
 export default defineComponent({
   components: {
-    Pagination,
     AddNewBankAccountDialog,
   },
   props: {
-    bankAccounts: { type: Array, required: true },
+    bankAccounts: {
+      type: Array as PropType<BankAccountType[]>,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const userTableColumnsBankAccount = [
       {
         name: 'STT',
@@ -19,6 +21,16 @@ export default defineComponent({
         align: 'center',
         sortable: false,
       },
+      {
+        name: 'accountOwner',
+        field: 'accountOwner',
+        required: true,
+        label: i18n.global.t(
+          'artist.bankAccount.tableColumnsBank.accountOwner'
+        ),
+        align: 'center',
+        sortable: false,
+      },
       {
         name: 'accountNumber',
         field: 'accountNumber',
@@ -68,48 +80,23 @@ export default defineComponent({
         sortable: false,
       },
     ];
-    const userTableRowsBankAccount: Ref<unknown[]> = ref([]);
-    const pageIndex = ref(1);
-    const pageSize = ref(20);
-    const totalPage = ref(10);
+    const userTableRowsBankAccount: Ref<BankAccountType[]> = ref([]);
     const isOpenDialog = ref(false);
-    const getListBankAccount = () => {
-      //   const response = (await api({
-      //     url: API_PATHS.getListArtist,
-      //     method: 'GET',
-      //     params: {
-      //       pageIndex: pageIndex.value,
-      //       pageSize: pageSize.value,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-      const fakeData: unknown[] = [
-        {
-          idCard: 91239381,
-          numberCard: '123213123',
-          bankName: 'TP Bank',
-          cardType: 'Visa',
-          default: true,
-        },
-      ];
-      userTableRowsBankAccount.value = fakeData;
-    };
-    const changePageSize = () => {
-      pageIndex.value = 1;
-      void getListBankAccount();
+    const dataBankAccount: Ref<BankAccountType[]> = ref([]);
+    const showData = (info: BankAccountType, idxAcc: number) => {
+      console.log(info, 'showData');
+      console.log(idxAcc, 'showData');
     };
-
     onMounted(() => {
-      void getListBankAccount();
+      console.log(props.bankAccounts, 'bankAccount');
+      dataBankAccount.value = props.bankAccounts;
     });
     return {
       isOpenDialog,
       userTableColumnsBankAccount,
       userTableRowsBankAccount,
-      pageIndex,
-      pageSize,
-      totalPage,
-      getListBankAccount,
-      changePageSize,
+      dataBankAccount,
+      showData,
     };
   },
   emits: ['click:addBankBtn', 'confirmDeleteAccBank', 'clickEditAccBankBtn'],

src/components/artist-information/bank-account/add-new-bank-account-dialog/AddAccountBankDialog.ts

@@ -28,6 +28,7 @@ export default defineComponent({
       () => props.isOpenAddAccountBankDialog,
       (value) => {
         if (value) {
+          accountOwner.value = null;
           accountNumber.value = '';
           cardNumber.value = '';
           bank.value = null;
@@ -36,6 +37,13 @@ export default defineComponent({
         }
       }
     );
+    const accountOwnerRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.dialogLabel.validateMessages.requireAccountOwner'
+        ),
+    ];
     const accountNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -87,6 +95,7 @@ export default defineComponent({
       }
       if (!hasError) {
         context.emit('addNewBankAccount', {
+          accountOwner: accountOwner.value,
           accountNumber: accountNumber.value,
           cardNumber: cardNumber.value,
           bank: bankFilter,
@@ -102,6 +111,7 @@ export default defineComponent({
       }
     };
 
+    const accountOwner: Ref<string | null> = ref(null);
     const accountNumber: Ref<string> = ref('');
     const cardNumber: Ref<string> = ref('');
     const bank: Ref<number | null> = ref(null);
@@ -110,8 +120,10 @@ export default defineComponent({
 
     return {
       defaultStatus,
+      accountOwnerRules,
       accountNumberRules,
       cardNumberRules,
+      accountOwner,
       accountNumber,
       cardNumber,
       bank,

src/components/artist-information/bank-account/add-new-bank-account-dialog/index.vue

@@ -22,6 +22,14 @@
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
+              <q-input
+                v-model="accountOwner"
+                :label="$t('artist.dialogLabel.fieldLabels.accountOwner')"
+                :rules="accountOwnerRules"
+                hide-bottom-space
+                class="q-my-sm"
+                outlined
+              ></q-input>
               <q-input
                 v-model="accountNumber"
                 :label="$t('artist.dialogLabel.fieldLabels.accountNumber')"

src/components/artist-information/bank-account/edit-bank-account/EditBankAcc.ts

@@ -37,6 +37,7 @@ export default defineComponent({
       () => props.isOpenEditAccountBankDialog,
       (value) => {
         if (value) {
+          accountOwner.value = props.rowDataAccBank.accountOwner;
           accountNumber.value = props.rowDataAccBank.accountNumber;
           cardNumber.value = props.rowDataAccBank.cardNumber;
           bank.value = props.rowDataAccBank.bank.id;
@@ -46,6 +47,13 @@ export default defineComponent({
         }
       }
     );
+    const accountOwnerRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.dialogLabel.validateMessages.requireAccountOwner'
+        ),
+    ];
     const accountNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -83,21 +91,24 @@ export default defineComponent({
         }
       });
       let hasError = false;
-      if (
-        props.bankAccounts.filter(
-          (item) => item.accountNumber === accountNumber.value
-        ).length
-      ) {
-        hasError = true;
-        Notify.create({
-          type: 'negative',
-          message: i18n.global.t(
-            'artist.dialogLabel.validateMessages.accountNumberExits'
-          ),
-        });
+      for (let index = 0; index < props.bankAccounts.length; index++) {
+        const element = props.bankAccounts[index];
+        if (
+          element.accountNumber == accountNumber.value &&
+          index !== props.rowBankAccIdx
+        ) {
+          hasError = true;
+          Notify.create({
+            type: 'negative',
+            message: i18n.global.t(
+              'artist.dialogLabel.validateMessages.accountNumberExits'
+            ),
+          });
+        }
       }
       if (!hasError) {
         context.emit('editBankAccount', {
+          accountOwner: accountOwner.value,
           accountNumber: accountNumber.value,
           cardNumber: cardNumber.value,
           bank: bankFilter,
@@ -112,6 +123,7 @@ export default defineComponent({
         });
       }
     };
+    const accountOwner: Ref<string | null> = ref(null);
     const accountNumber: Ref<string> = ref('');
     const cardNumber: Ref<string> = ref('');
     const bank: Ref<number | null> = ref(null);
@@ -120,10 +132,12 @@ export default defineComponent({
 
     return {
       defaultStatus,
+      accountOwnerRules,
       bankNameRules,
       cardTypeRules,
       accountNumberRules,
       cardNumberRules,
+      accountOwner,
       accountNumber,
       cardNumber,
       bank,

src/components/artist-information/bank-account/edit-bank-account/index.vue

@@ -22,12 +22,20 @@
         <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
+              <q-input
+                v-model="accountOwner"
+                :label="$t('artist.dialogLabel.fieldLabels.accountOwner')"
+                :rules="accountOwnerRules"
+                hide-bottom-space
+                class="q-my-sm"
+                outlined
+              ></q-input>
               <q-input
                 v-model="accountNumber"
                 :label="$t('artist.dialogLabel.fieldLabels.accountNumber')"
                 :rules="accountNumberRules"
                 hide-bottom-space
-                type="text"
+                type="number"
                 class="q-my-sm"
                 outlined
               ></q-input>

src/components/artist-information/bank-account/index.vue

@@ -16,7 +16,7 @@
     </div>
     <div class="col-12 q-mt-sm">
       <q-table
-        :rows="bankAccounts"
+        :rows="dataBankAccount"
         :columns="userTableColumnsBankAccount"
         :no-data-label="$t('emptyData')"
         row-key="name"
@@ -40,10 +40,11 @@
         <template v-slot:body-cell-isDefault="rowData">
           <q-td>
             <div align="center">
+              <!-- @click="showData(rowData.row, rowData.rowIndex)" -->
               <q-checkbox
+                v-model="rowData.value"
                 :true-value="1"
                 :false-value="2"
-                v-model="rowData.value"
               />
             </div>
           </q-td>

src/components/artist-information/hot-product/HotProduct.ts

 import { i18n } from 'src/boot/i18n';
-import { defineComponent, onMounted, Ref, ref } from 'vue';
+import { defineComponent, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
 import { ProductType } from 'src/assets/type';
 import { HotProductStatus } from 'src/assets/enums';

src/components/customer/add-new-customer-dialog/index.vue

@@ -142,12 +142,13 @@
               <q-input
                 v-model="phone"
                 :label="$t('customer.dialogLabel.fieldLabels.phone')"
-                class="q-my-sm"
-                type="number"
                 :rules="phoneRules"
+                type="number"
+                class="q-my-sm"
                 outlined
                 hide-bottom-space
               ></q-input>
+
               <div style="padding-top: 13px; padding-left: 12px">
                 <span class="text-body1">{{
                   $t('customer.dialogLabel.fieldLabels.status')

src/components/user-management/add-new-user-dialog/AddNewUserDialog.ts

-import { defineComponent, PropType, ref, Ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';

src/i18n/vi/index.ts

@@ -412,6 +412,7 @@ export default {
         addHotProduct: 'Thêm sản phẩm nổi bật',
       },
       fieldLabels: {
+        accountOwner: 'Chủ tài khoản',
         accountNumber: 'Số tài khoản',
         cardNumber: 'Số ghi trên thẻ',
         bankName: 'Ngân hàng',
@@ -419,6 +420,7 @@ export default {
         isDefault: 'Mặc định',
       },
       validateMessages: {
+        requireAccountOwner: 'Vui lòng nhập Chủ tài khoản',
         requireAccountNumber: 'Vui lòng nhập Số tài khoản',
         accountNumberExits: 'Số tài khoản đã tồn tại',
         requireCardNumber: 'Vui lòng nhập Số ghi trên thẻ',
@@ -495,6 +497,7 @@ export default {
     },
     bankAccount: {
       tableColumnsBank: {
+        accountOwner: 'Chủ tài khoản',
         idCard: 'Số tài khoản',
         numberCard: 'Số ghi trên thẻ',
         bankName: 'Ngân hàng',

src/pages/nguoi-dung/User.ts

@@ -6,7 +6,7 @@ import { PaginationResponse, UserObject } from 'src/assets/type';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { i18n } from 'src/boot/i18n';
 import { useStore } from '../../store/index';
-import { computed, defineComponent, onMounted, ref, Ref } from 'vue';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
 import AddNewUserDialogComponent from '../../components/user-management/add-new-user-dialog/index.vue';
 import UpdateUserDialogComponent from '../../components/user-management/update-user-dialog/index.vue';
 import { GroupInfoType } from '../nhom-nguoi-dung/UserGroup';