create add account bank

src/assets/type.ts

@@ -116,16 +116,16 @@ export type StoriesType = {
 };
 
 export type BankAccountType = {
-  id: number;
-  isDefault: number;
-  nameInCard: string;
-  status: number;
   accountNumber: string;
-  accountOwner: string;
-  bankName: string;
-  branchName: string;
   cardNumber: string;
+  bankName: string;
   cardType: number;
+  isDefault: number;
+  id: number;
+  nameInCard: string | null;
+  status: number;
+  accountOwner: string | null;
+  branchName: string | null;
 };
 
 export type ProductType = {

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

@@ -111,4 +111,5 @@ export default defineComponent({
       changePageSize,
     };
   },
+  emits: ['click:addBankBtn'],
 });

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

@@ -3,59 +3,56 @@ import { i18n } from 'src/boot/i18n';
 
 export default defineComponent({
   props: {
-    isOpenDialog: {
+    isOpenAddAccountBankDialog: {
       type: Boolean,
       required: true,
     },
+    accountNumber: { type: String, required: true },
+    cardNumber: { type: String, required: true },
+    bankName: { type: String, required: true },
+    cardType: { type: Number, required: true },
+    isDefault: { type: Number, required: true },
   },
   setup() {
-    const idCard = ref('');
-    const numberCard = ref('');
-    const bankName: Ref<number | undefined> = ref();
-    const cardType: Ref<number | undefined> = ref();
-    const defaultStatus: Ref<boolean> = ref(false);
-    const bankOptions = ref([
-      { id: 1, text: 'TP Bank' },
-      { id: 2, text: 'MB Bank' },
-      { id: 3, text: 'BIDV' },
-    ]);
-    const cardTypeOptions = ref([
-      { id: 1, text: 'ATM' },
-      { id: 2, text: 'Visa' },
-    ]);
-    const idCardRules = [
+    const accountNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
-        i18n.global.t('userPage.validateMessages.requireUserName'),
+        i18n.global.t(
+          'artist.dialogLabel.validateMessages.requireAccountNumber'
+        ),
     ];
-    const numberCardRules = [
+    const cardNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
-        i18n.global.t('userPage.validateMessages.requireUserName'),
+        i18n.global.t('artist.dialogLabel.validateMessages.requireCardNumber'),
     ];
     const bankNameRules = [
-      (val: number | undefined) =>
-        val !== undefined ||
-        i18n.global.t('userPage.validateMessages.requireUserName'),
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('artist.dialogLabel.validateMessages.requireBankName'),
     ];
     const cardTypeRules = [
       (val: number | undefined) =>
         val !== undefined ||
-        i18n.global.t('userPage.validateMessages.requireUserName'),
+        i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     return {
-      idCard,
-      numberCard,
-      bankName,
-      cardType,
       defaultStatus,
-      bankOptions,
-      cardTypeOptions,
       bankNameRules,
       cardTypeRules,
-      idCardRules,
-      numberCardRules,
+      accountNumberRules,
+      cardNumberRules,
     };
   },
-  emits: ['update:isOpenDialog', 'click:CloseBtn', 'addNewBankAccount'],
+  emits: [
+    'update:isOpenAddAccountBankDialog',
+    'click:CloseBtn',
+    'addNewBankAccount',
+    'update:accountNumber',
+    'update:cardNumber',
+    'update:bankName',
+    'update:cardType',
+    'update:isDefault',
+    'click:addAccountBankBtn',
+  ],
 });

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

 <template>
   <q-dialog
     persistent
-    :model-value="isOpenDialog"
-    @update:model-value="$emit('update:isOpenDialog', $event)"
+    :model-value="isOpenAddAccountBankDialog"
+    @update:model-value="$emit('update:isOpenAddAccountBankDialog', $event)"
   >
     <q-card style="min-width: 500px" bordered>
       <q-form greedy @submit.prevent="$emit('addNewBankAccount')">
         <q-card-section>
-          <q-item>
+          <q-item style="padding-top: 0; padding-bottom: 0">
             <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('userPage.dialogLabel.title.addUser')
-              }}</q-item-label>
+              <q-item-label
+                ><div class="text-h6 text-weight-regular" align="center">
+                  {{ $t('artist.dialogLabel.title.addAccountBank') }}
+                </div></q-item-label
+              >
             </q-item-section>
           </q-item>
         </q-card-section>
@@ -19,59 +21,56 @@
 
         <q-card-section>
           <div class="row q-col-gutter-sm">
-            <div class="col-6">
+            <div class="col-12">
               <q-input
-                v-model="idCard"
-                :label="$t('userPage.dialogLabel.fieldLabels.userName')"
-                :rules="idCardRules"
+                :model-value="accountNumber"
+                @update:model-value="$emit('update:accountNumber', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.accountNumber')"
+                :rules="accountNumberRules"
                 hide-bottom-space
                 type="text"
                 class="q-my-sm"
                 outlined
               ></q-input>
               <q-input
-                v-model="numberCard"
-                :label="$t('userPage.dialogLabel.fieldLabels.password')"
-                type="password"
-                class="q-my-sm"
-                outlined
-                :rules="numberCardRules"
+                :model-value="cardNumber"
+                @update:model-value="$emit('update:cardNumber', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.cardNumber')"
+                :rules="cardNumberRules"
                 hide-bottom-space
-              ></q-input>
-              <q-select
-                v-model="bankName"
-                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                type="text"
                 class="q-my-sm"
-                :options="bankOptions"
-                option-value="id"
-                option-label="text"
                 outlined
-                map-options
+              ></q-input>
+              <q-input
+                :model-value="bankName"
+                @update:model-value="$emit('update:bankName', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.bankName')"
                 :rules="bankNameRules"
                 hide-bottom-space
-              ></q-select>
-              <q-select
-                v-model="cardType"
-                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                type="text"
                 class="q-my-sm"
-                :options="cardTypeOptions"
-                option-value="id"
-                option-label="text"
                 outlined
-                map-options
+              ></q-input>
+              <q-input
+                :model-value="cardType"
+                @update:model-value="$emit('update:cardType', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.cardType')"
                 :rules="cardTypeRules"
                 hide-bottom-space
-              ></q-select>
-              <q-select
-                v-model="defaultStatus"
-                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                type="text"
                 class="q-my-sm"
-                option-value="id"
-                option-label="text"
                 outlined
-                map-options
+              ></q-input>
+              <q-input
+                :model-value="isDefault"
+                @update:model-value="$emit('update:isDefault', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.isDefault')"
                 hide-bottom-space
-              ></q-select>
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-input>
             </div>
           </div>
         </q-card-section>
@@ -80,6 +79,7 @@
             type="submit"
             color="primary"
             :label="$t('userPage.crudActions.save')"
+            @click="$emit('click:addAccountBankBtn')"
           />
           <q-btn
             color="black"

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

@@ -3,7 +3,7 @@
     <q-space></q-space>
     <div class="col-auto">
       <q-btn
-        @click="isOpenDialog"
+        @click="$emit('click:addBankBtn')"
         color="primary"
         no-caps
         style="width: 100px"
@@ -30,20 +30,10 @@
         <template v-slot:body-cell-action>
           <q-td style="padding: 0" class="flex flex-center">
             <q-btn flat round color="primary" icon="mdi-information-outline">
-              <!-- <q-tooltip :offset="[20, 10]">{{
-                $t('userPage.toolTipMessage.informationUser')
-              }}</q-tooltip> -->
             </q-btn>
             <q-btn flat round color="primary" icon="mdi-minus-circle-outline">
-              <!-- <q-tooltip :offset="[20, 10]">{{
-                $t('userPage.toolTipMessage.updateUserInfo')
-              }}</q-tooltip> -->
-            </q-btn>
-            <q-btn flat round color="primary" icon="mdi-lock-outline">
-              <!-- <q-tooltip :offset="[20, 10]">{{
-                $t('userPage.toolTipMessage.updateUserInfo')
-              }}</q-tooltip> -->
             </q-btn>
+            <q-btn flat round color="primary" icon="mdi-lock-outline"> </q-btn>
           </q-td>
         </template>
       </q-table>
@@ -77,10 +67,10 @@
         </div>
       </div> -->
     </div>
-    <AddNewBankAccountDialog
+    <!-- <AddNewBankAccountDialog
       v-model:is-open-dialog="isOpenDialog"
       @click:CloseBtn="!isOpenDialog"
-    ></AddNewBankAccountDialog>
+    ></AddNewBankAccountDialog> -->
   </div>
 </template>
 

src/i18n/vi/index.ts

@@ -358,6 +358,20 @@ export default {
       title: {
         addArtist: 'Thêm nghệ sỹ',
         updateArtist: 'Cập nhật nghệ sỹ',
+        addAccountBank: 'Thêm tài khoản ngân hàng',
+      },
+      fieldLabels: {
+        accountNumber: 'Mã thẻ',
+        cardNumber: 'Số ghi trên thẻ',
+        bankName: 'Ngân hàng',
+        cardType: 'Loại thẻ',
+        isDefault: 'Mặc định',
+      },
+      validateMessages: {
+        requireAccountNumber: 'Vui lòng nhập mã thẻ',
+        requireCardNumber: 'Vui lòng nhập số ghi trên thẻ',
+        requireBankName: 'Vui lòng chọn ngân hàng',
+        requireCardType: 'Vui lòng chọn loại thẻ',
       },
     },
     confirmActionsTitle: {

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -71,7 +71,10 @@
             ></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">
-            <BankAccount :bank-accounts="bankAccounts"></BankAccount>
+            <BankAccount
+              :bank-accounts="bankAccounts"
+              @click:addBankBtn="isOpenAddAccountBankDialog = true"
+            ></BankAccount>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
             <HotProduct :products="products"></HotProduct>
@@ -79,6 +82,16 @@
         </q-tab-panels>
       </q-card>
     </div>
+    <AddNewBankAccountDialog
+      v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
+      v-model:account-number="accountNumber"
+      v-model:card-number="cardNumber"
+      v-model:bank-name="bankName"
+      v-model:card-type="cardType"
+      v-model:is-default="isDefault"
+      @click:addAccountBankBtn="addAccBank"
+      @click:CloseBtn="isOpenAddAccountBankDialog = false"
+    ></AddNewBankAccountDialog>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -3,6 +3,7 @@ import PersonalInformation from '../../components/artist-information/personal-in
 import VabAccount from '../../components/artist-information/VAB-account/index.vue';
 import BankAccount from '../../components/artist-information/bank-account/index.vue';
 import HotProduct from '../../components/artist-information/hot-product/index.vue';
+import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { useRoute } from 'vue-router';
@@ -26,6 +27,7 @@ export default defineComponent({
     VabAccount,
     BankAccount,
     HotProduct,
+    AddNewBankAccountDialog,
   },
   watch: {
     tab(value) {
@@ -42,7 +44,10 @@ export default defineComponent({
 
   setup() {
     const tab = ref('information');
-
+    const clickBtn = () => {
+      console.log('askdaskdkasds');
+    };
+    const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
     const fieldOptions: Ref<FieldType[]> = ref([]);
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
     const professionOptions: Ref<QualificationType[]> = ref([]);
@@ -96,6 +101,14 @@ export default defineComponent({
     const stories: Ref<StoriesType[]> = ref([]);
     const route = useRoute();
 
+    //state accountBank
+
+    const accountNumber: Ref<string | null | undefined> = ref();
+    const cardNumber: Ref<string | null | undefined> = ref();
+    const bankName: Ref<string | null | undefined> = ref();
+    const cardType: Ref<number | undefined> = ref();
+    const isDefault: Ref<number | undefined> = ref();
+
     const getInformationArtist = async () => {
       const response = (await api({
         url: API_PATHS.getDetailArtist,
@@ -183,6 +196,18 @@ export default defineComponent({
         workOptions.value = response.data.data;
       }
     };
+
+    const addAccBank = () => {
+      const newAccount = {
+        accountNumber: accountNumber.value,
+        cardNumber: cardNumber.value,
+        bankName: bankName.value,
+        cardType: cardType.value,
+        isDefault: isDefault.value,
+      };
+      bankAccounts.value.push(newAccount as BankAccountType);
+      isOpenAddAccountBankDialog.value = false;
+    };
     onMounted(() => {
       void getInformationArtist();
       void getFieldOptions();
@@ -232,6 +257,14 @@ export default defineComponent({
       banners,
       shortDescription,
       stories,
+      isOpenAddAccountBankDialog,
+      clickBtn,
+      accountNumber,
+      cardNumber,
+      bankName,
+      cardType,
+      isDefault,
+      addAccBank,
     };
   },
 });