update edit acc bank

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

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

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

+import { defineComponent, PropType } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+import { BankAccountType } from 'src/assets/type';
+import { Notify } from 'quasar';
+
+export default defineComponent({
+  props: {
+    isOpenEditAccountBankDialog: {
+      type: Boolean,
+      required: true,
+    },
+    bankAccounts: {
+      type: Array as PropType<BankAccountType[]>,
+      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(props, context) {
+    const accountNumberRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.dialogLabel.validateMessages.requireAccountNumber'
+        ),
+    ];
+    const cardNumberRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('artist.dialogLabel.validateMessages.requireCardNumber'),
+    ];
+    const bankNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('artist.dialogLabel.validateMessages.requireBankName'),
+    ];
+    const cardTypeRules = [
+      (val: number | undefined) =>
+        val !== undefined ||
+        i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
+    ];
+    const confirmEditAccBank = () => {
+      if (
+        props.isDefault === 1 &&
+        props.bankAccounts.filter((item) => item.isDefault === 1).length
+      ) {
+        Notify.create({
+          type: 'negative',
+          message: i18n.global.t(
+            'artist.dialogLabel.validateMessages.errorIsDefault'
+          ),
+        });
+      } else {
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'artist.dialogLabel.validateMessages.addAccess'
+          ),
+        });
+        context.emit('editBankAccount');
+      }
+    };
+    return {
+      defaultStatus,
+      bankNameRules,
+      cardTypeRules,
+      accountNumberRules,
+      cardNumberRules,
+      confirmEditAccBank,
+    };
+  },
+  emits: [
+    'update:isOpenEditAccountBankDialog',
+    'click:CloseBtn',
+    'editBankAccount',
+    'update:accountNumber',
+    'update:cardNumber',
+    'update:bankName',
+    'update:cardType',
+    'update:isDefault',
+  ],
+});

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpenEditAccountBankDialog"
+    @update:model-value="$emit('update:isOpenEditAccountBankDialog', $event)"
+  >
+    <q-card style="min-width: 500px" bordered>
+      <q-form greedy @submit.prevent="confirmEditAccBank">
+        <q-card-section>
+          <q-item style="padding-top: 0; padding-bottom: 0">
+            <q-item-section>
+              <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>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                :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
+                :model-value="cardNumber"
+                @update:model-value="$emit('update:cardNumber', $event)"
+                :label="$t('artist.dialogLabel.fieldLabels.cardNumber')"
+                :rules="cardNumberRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></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
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></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
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-input>
+
+              <div class="flex">
+                <div class="flex flex-center text-body1 q-ml-xs">Mặc định</div>
+                <!-- :label="$t('artist.dialogLabel.fieldLabels.isDefault')" -->
+                <q-checkbox
+                  :model-value="isDefault"
+                  :true-value="1"
+                  :false-value="2"
+                  @update:model-value="$emit('update:isDefault', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            color="primary"
+            :label="$t('userPage.crudActions.save')"
+          />
+          <q-btn
+            color="grey"
+            :label="$t('userPage.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./EditBankAcc.ts"></script>

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

@@ -42,7 +42,13 @@
                 @click="$emit('confirmDeleteAccBank', item.rowIndex)"
               >
               </q-btn>
-              <q-btn flat round color="primary" icon="mdi-circle-edit-outline">
+              <q-btn
+                @click="$emit('clickEditAccBankBtn', item.row, item.rowIndex)"
+                flat
+                round
+                color="primary"
+                icon="mdi-circle-edit-outline"
+              >
               </q-btn>
             </div>
           </q-td>

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

@@ -81,10 +81,14 @@
               :bank-accounts="bankAccounts"
               @confirmDeleteAccBank="confirmDeleteAccBank"
               @click:addBankBtn="openDialogAddAccBank"
+              @clickEditAccBankBtn="openDialogEditAccBank"
             ></BankAccount>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
-            <HotProduct  @click:addHotProduct="openAddHotProduct = true" :products="products" ></HotProduct>
+            <HotProduct
+              @click:addHotProduct="openAddHotProduct = true"
+              :products="products"
+            ></HotProduct>
           </q-tab-panel>
         </q-tab-panels>
       </q-card>
@@ -100,13 +104,28 @@
       @addNewBankAccount="addAccBank"
       @click:CloseBtn="isOpenAddAccountBankDialog = false"
     ></AddNewBankAccountDialog>
+    <EditBankAccountDialog
+      v-model:is-open-edit-account-bank-dialog="isOpenEditAccountBankDialog"
+      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"
+      :bank-accounts="bankAccounts"
+      @editBankAccount="editAccBank"
+      @click:CloseBtn="isOpenEditAccountBankDialog = false"
+    ></EditBankAccountDialog>
     <UploadEmbedDialog
       v-model:is-open-dialog-embed="isOpenDialogEmbed"
       v-model:social-embedded="socialEmbedded"
       @uploadEmbed="isOpenDialogEmbed = false"
       @click:CloseBtn="isOpenDialogEmbed = false"
     ></UploadEmbedDialog>
-    <AddHotProductDialog  v-model:status="status"  v-model:open-add-hot-product="openAddHotProduct"  @click:CloseBtnAddHotProduct="openAddHotProduct = false"></AddHotProductDialog>
+    <AddHotProductDialog
+      v-model:status="status"
+      v-model:open-add-hot-product="openAddHotProduct"
+      @click:CloseBtnAddHotProduct="openAddHotProduct = false"
+    ></AddHotProductDialog>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

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

@@ -5,6 +5,7 @@ import BankAccount from '../../components/artist-information/bank-account/index.
 import HotProduct from '../../components/artist-information/hot-product/index.vue';
 import AddHotProductDialog from '../../components/artist-information/AddHotProduct/index.vue';
 import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
+import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { API_PATHS, config } from 'src/assets/configurations';
@@ -39,6 +40,7 @@ export default defineComponent({
     AddNewBankAccountDialog,
     UploadEmbedDialog,
     AddHotProductDialog,
+    EditBankAccountDialog,
   },
   watch: {
     tab(value) {
@@ -59,6 +61,7 @@ export default defineComponent({
       console.log('askdaskdkasds');
     };
     const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
+    const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
     const openAddHotProduct: Ref<boolean> = ref(false);
 
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
@@ -148,6 +151,7 @@ export default defineComponent({
     const bankName: Ref<string | null | undefined> = ref();
     const cardType: Ref<number | undefined> = ref();
     const isDefault: Ref<number | undefined> = ref(1);
+    const rowBankAccIdx: Ref<number> = ref(0);
 
     const getInformationArtist = async () => {
       const response = (await api({
@@ -296,6 +300,39 @@ export default defineComponent({
       banners.value.push(value);
       console.log(banners.value);
     };
+    const openDialogEditAccBank = (
+      itemData: BankAccountType,
+      itemIdx: number
+    ) => {
+      console.log(itemData, 'rowData');
+      accountNumber.value = itemData.accountNumber;
+      cardNumber.value = itemData.cardNumber;
+      bankName.value = itemData.bankName;
+      cardType.value = itemData.cardType;
+      isDefault.value = itemData.isDefault;
+      rowBankAccIdx.value = itemIdx;
+      console.log(rowBankAccIdx.value);
+
+      isOpenEditAccountBankDialog.value = true;
+    };
+    const editAccBank = () => {
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].accountNumber = accountNumber.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].cardNumber = cardNumber.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].bankName = bankName.value as string;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].cardType = cardType.value as number;
+      bankAccounts.value[
+        rowBankAccIdx.value
+      ].isDefault = isDefault.value as number;
+      isOpenEditAccountBankDialog.value = false;
+    };
 
     onMounted(() => {
       void getInformationArtist();
@@ -342,7 +379,6 @@ export default defineComponent({
       getWorkOptions,
       bankAccounts,
       products,
-
       account,
       banners,
       shortDescription,
@@ -368,6 +404,10 @@ export default defineComponent({
       typeBankOptions,
       cardBank,
       typeCard,
+      isOpenEditAccountBankDialog,
+      openDialogEditAccBank,
+      editAccBank,
+      rowBankAccIdx,
     };
   },
 });