update artist information

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

@@ -72,6 +72,26 @@
         </div>
       </div>
     </div>
+    <div class="col-12 q-mt-md">
+      <div class="row">
+        <q-space></q-space>
+        <div class="col-auto">
+          <q-btn
+            to="/nghe-sy"
+            color="grey"
+            no-caps
+            :label="$t('crudActions.back')"
+          ></q-btn>
+        </div>
+        <div class="col-auto q-ml-md">
+          <q-btn
+            color="primary"
+            no-caps
+            :label="$t('crudActions.update')"
+          ></q-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

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';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const userTableColumnsBankAccount = [
+      {
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'idCard',
+        field: 'idCard',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.idCard'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'numberCard',
+        field: 'numberCard',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.numberCard'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'bankName',
+        field: 'bankName',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.bankName'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'cardType',
+        field: 'cardType',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.cardType'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'default',
+        field: 'default',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.default'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const userTableRowsBankAccount: Ref<unknown[]> = ref([]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(10);
+    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();
+    };
+
+    onMounted(() => {
+      void getListBankAccount();
+    });
+    return {
+      userTableColumnsBankAccount,
+      userTableRowsBankAccount,
+      pageIndex,
+      pageSize,
+      totalPage,
+      getListBankAccount,
+      changePageSize,
+    };
+  },
+});

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

+<template>
+  <div class="row q-col-gutter-sm flex-center">
+    <q-space></q-space>
+    <div class="col-auto">
+      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="userTableRowsBankAccount"
+        :columns="userTableColumnsBankAccount"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        hide-pagination
+      >
+        <template v-slot:body-cell-default="rowData">
+          <q-td>
+            <div align="center">
+              <q-checkbox v-model="rowData.value" />
+            </div>
+          </q-td>
+        </template>
+        <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-td>
+        </template>
+      </q-table>
+      <div class="col-12 q-mt-sm">
+        <Pagination
+          v-model:currentPage="pageIndex"
+          v-model:pageSize="pageSize"
+          :totalPage="totalPage"
+          @update:pageSize="changePageSize"
+          @update:currentPage="getListBankAccount"
+        />
+      </div>
+      <div class="col-12 q-mt-md">
+        <div class="row">
+          <q-space></q-space>
+          <div class="col-auto">
+            <q-btn
+              to="/nghe-sy"
+              color="grey"
+              no-caps
+              :label="$t('crudActions.back')"
+            ></q-btn>
+          </div>
+          <div class="col-auto q-ml-md">
+            <q-btn
+              color="primary"
+              no-caps
+              :label="$t('crudActions.update')"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./BankAccount.ts"></script>

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

+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import Pagination from 'components/pagination/index.vue';
+export default defineComponent({
+  components: {
+    Pagination,
+  },
+  setup() {
+    const userTableColumnsHotProduct = [
+      {
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'productCode',
+        field: 'productCode',
+        required: true,
+        label: i18n.global.t(
+          'artist.hotProduct.tableColumnsProduct.productCode'
+        ),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'urlEmbed',
+        field: 'urlEmbed',
+        required: true,
+        label: i18n.global.t('artist.hotProduct.tableColumnsProduct.urlEmbed'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'productImage',
+        field: 'productImage',
+        required: true,
+        label: i18n.global.t(
+          'artist.hotProduct.tableColumnsProduct.productImage'
+        ),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('artist.hotProduct.tableColumnsProduct.status'),
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('artist.bankAccount.tableColumnsBank.action'),
+        align: 'center',
+        sortable: false,
+      },
+    ];
+    const userTableRowsHotProduct: Ref<unknown[]> = ref([]);
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(10);
+    const getListHotProduct = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.getListArtist,
+      //     method: 'GET',
+      //     params: {
+      //       pageIndex: pageIndex.value,
+      //       pageSize: pageSize.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      const fakeData: unknown[] = [
+        {
+          productCode: 91239381,
+          urlEmbed: 'urlEmbel',
+          productImage: 'Image',
+          status: true,
+        },
+      ];
+      userTableRowsHotProduct.value = fakeData;
+    };
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListHotProduct();
+    };
+
+    onMounted(() => {
+      void getListHotProduct();
+    });
+    return {
+      userTableColumnsHotProduct,
+      userTableRowsHotProduct,
+      pageIndex,
+      pageSize,
+      totalPage,
+      getListHotProduct,
+      changePageSize,
+    };
+  },
+});

src/components/artist-information/hot-product/index.vue

+<template>
+  <div class="row q-col-gutter-sm flex-center">
+    <q-space></q-space>
+    <div class="col-auto">
+      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="userTableRowsHotProduct"
+        :columns="userTableColumnsHotProduct"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        hide-pagination
+      >
+        <template v-slot:body-cell-status="rowData">
+          <q-td>
+            <div align="center">
+              <q-checkbox v-model="rowData.value" />
+            </div>
+          </q-td>
+        </template>
+        <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-td>
+        </template>
+      </q-table>
+      <div class="col-12 q-mt-sm">
+        <Pagination
+          v-model:currentPage="pageIndex"
+          v-model:pageSize="pageSize"
+          :totalPage="totalPage"
+          @update:pageSize="changePageSize"
+          @update:currentPage="getListHotProduct"
+        />
+      </div>
+      <div class="col-12 q-mt-md">
+        <div class="row">
+          <q-space></q-space>
+          <div class="col-auto">
+            <q-btn
+              to="/nghe-sy"
+              color="grey"
+              no-caps
+              :label="$t('crudActions.back')"
+            ></q-btn>
+          </div>
+          <div class="col-auto q-ml-md">
+            <q-btn
+              color="primary"
+              no-caps
+              :label="$t('crudActions.update')"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./HotProduct.ts"></script>

src/i18n/vi/index.ts

@@ -22,7 +22,7 @@ export default {
     'msg-1': 'Lỗi không xác định',
     msg999: 'Lỗi hệ thống',
   },
-  emptyData: 'Không tìm thấy dữ liệu',
+  emptyData: 'Không có dữ liệu',
   crudActions: {
     add: 'Thêm mới',
     update: 'Cập nhật',
@@ -146,82 +146,82 @@ export default {
     },
   },
 
-    // khách hàng
-    customer: {
-      title: 'Danh sách khách hàng',
-      tableColumnsCustomer: {
-        stt: 'STT',
-        customerCode: 'Mã khách hàng',
-        userName: 'Tên đăng nhập',
-        fullName: 'Họ tên',
-        businessName: 'Tên doanh nghiệp',
-        taxCode: 'Mã số thuế',
-        email: 'Email',
-        ratings: 'Xếp hạng',
-        status: 'Trạng thái',
-        action: 'Chức năng',
-      },
-      statusLabel: {
-        active: 'Đang hoạt động',
-        inactive: 'Ngừng hoạt động',
-      },
-      dialogLabel: {
-        title: {
-          addCustomer: 'Thêm mới khách hàng',
-          updateCustomer: 'Cập nhật người dùng',
-        },
-        fieldLabels: {
-          userName: 'Tên đăng nhập *',
-          customerName: 'Họ tên *',
-          businessName: 'Tên doanh nghiệp *',
-          taxCode: 'Mã số thuế *',
-          email: 'Email *',
-          ratings: 'Xếp hạng *',
-          address: 'Địa chỉ *',
-          businessType: 'Loại doanh nghiệp *',
-          representative: 'Đại diện *',
-          position: 'Chức vụ *',
-          phone: 'Số điện thoại *',
-          status: 'Trạng thái',
-        },
-      },
-      toolTipMessage: {
-        updateCustomerInfo: 'Cập nhật',
-        informationCustomer: 'Thông tin',
-      },
-      crudActions: {
-        save: 'Lưu',
-        cancel: 'Đóng',
+  // khách hàng
+  customer: {
+    title: 'Danh sách khách hàng',
+    tableColumnsCustomer: {
+      stt: 'STT',
+      customerCode: 'Mã khách hàng',
+      userName: 'Tên đăng nhập',
+      fullName: 'Họ tên',
+      businessName: 'Tên doanh nghiệp',
+      taxCode: 'Mã số thuế',
+      email: 'Email',
+      ratings: 'Xếp hạng',
+      status: 'Trạng thái',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+    dialogLabel: {
+      title: {
+        addCustomer: 'Thêm mới khách hàng',
+        updateCustomer: 'Cập nhật người dùng',
       },
-      validateMessages: {
-        requireUserName: 'Vui lòng nhập Tên đăng nhập',
-        requireCustomerName: 'Vui lòng nhập Họ tên',
-        requireBusinessName: 'Vui lòng nhập Tên Doanh nghiệp',
-        requireTaxCode: 'Vui lòng nhập Mã số thuế',
-        requireEmail: 'Vui lòng nhập Email',
-        isEmail: 'Email không hợp lệ',
-        requirePhone: 'Vui lòng nhập số điện thoại',
-        isPhone: 'Số điện thoại không hợp lệ',
-        requireAddress: 'Vui lòng nhập địa chỉ',
-        requireBusinessType: 'Vui lòng nhập Loại doanh nghiệp',
-        requireRatings: 'Vui lòng nhập xếp hạng',
-        requireRepresentative: 'Vui lòng nhập giới tính',
-        requiredPosition: 'Vui lòng nhập chức vụ',
+      fieldLabels: {
+        userName: 'Tên đăng nhập *',
+        customerName: 'Họ tên *',
+        businessName: 'Tên doanh nghiệp *',
+        taxCode: 'Mã số thuế *',
+        email: 'Email *',
+        ratings: 'Xếp hạng *',
+        address: 'Địa chỉ *',
+        businessType: 'Loại doanh nghiệp *',
+        representative: 'Đại diện *',
+        position: 'Chức vụ *',
+        phone: 'Số điện thoại *',
+        status: 'Trạng thái',
       },
-      // confirmActionsTitle: {
-      //   confirmDeleteUserTitle: 'Xác nhận',
-      //   confirmDeleteUserCancelBtnLabel: 'Huỷ',
-      //   confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản',
-      //   confirmResetPasswordContent:
-      //     'Bạn có muốn reset mật khẩu của người dùng này không',
-      // },
-      // actionMessages: {
-        // addNewUserAccess: 'Thêm tài khoản thành công',
-        // deleteUserAccess: 'Xoá tài khoản thành công',
-        // updateUserAccess: 'Cập nhật thông tin tài khoản thành công',
-        // resetPasswordAccess: 'Reset mật khẩu thành công',
-      // },
     },
+    toolTipMessage: {
+      updateCustomerInfo: 'Cập nhật',
+      informationCustomer: 'Thông tin',
+    },
+    crudActions: {
+      save: 'Lưu',
+      cancel: 'Đóng',
+    },
+    validateMessages: {
+      requireUserName: 'Vui lòng nhập Tên đăng nhập',
+      requireCustomerName: 'Vui lòng nhập Họ tên',
+      requireBusinessName: 'Vui lòng nhập Tên Doanh nghiệp',
+      requireTaxCode: 'Vui lòng nhập Mã số thuế',
+      requireEmail: 'Vui lòng nhập Email',
+      isEmail: 'Email không hợp lệ',
+      requirePhone: 'Vui lòng nhập số điện thoại',
+      isPhone: 'Số điện thoại không hợp lệ',
+      requireAddress: 'Vui lòng nhập địa chỉ',
+      requireBusinessType: 'Vui lòng nhập Loại doanh nghiệp',
+      requireRatings: 'Vui lòng nhập xếp hạng',
+      requireRepresentative: 'Vui lòng nhập giới tính',
+      requiredPosition: 'Vui lòng nhập chức vụ',
+    },
+    confirmActionsTitle: {
+      confirmDeleteUserTitle: 'Xác nhận',
+      confirmDeleteUserCancelBtnLabel: 'Huỷ',
+      confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản',
+      confirmResetPasswordContent:
+        'Bạn có muốn reset mật khẩu của người dùng này không',
+    },
+    actionMessages: {
+      addNewUserAccess: 'Thêm tài khoản thành công',
+      deleteUserAccess: 'Xoá tài khoản thành công',
+      updateUserAccess: 'Cập nhật thông tin tài khoản thành công',
+      resetPasswordAccess: 'Reset mật khẩu thành công',
+    },
+  },
 
   artist: {
     tableColumnsArtist: {
@@ -265,6 +265,25 @@ export default {
         whatsapp: 'Whatsapp',
       },
     },
+    bankAccount: {
+      tableColumnsBank: {
+        idCard: 'Mã thẻ',
+        numberCard: 'Số ghi trên thẻ',
+        bankName: 'Ngân hàng',
+        cardType: 'Loại thẻ',
+        default: 'Mặc định',
+        action: 'Chức năng',
+      },
+    },
+    hotProduct: {
+      tableColumnsProduct: {
+        productCode: 'Mã sản phẩm',
+        urlEmbed: 'Url embed',
+        productImage: 'Ảnh sản phẩm',
+        status: 'Trạng thái',
+        action: 'Chức năng',
+      },
+    },
   },
   recordPerPage: 'Số bản ghi',
 };

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

@@ -20,7 +20,7 @@
             :label="$t('artist.artistInformation.tabLabel.vabAccout')"
           />
           <q-tab
-            name="bankAcount"
+            name="bankAccount"
             :label="$t('artist.artistInformation.tabLabel.bankAcount')"
           />
           <q-tab
@@ -59,13 +59,10 @@
             <VabAccount></VabAccount>
           </q-tab-panel>
           <q-tab-panel name="bankAccount">
-            <div class="text-h6">
-              {{ tab }} Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </div>
+            <BankAccount></BankAccount>
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
-            <div class="text-h6">{{ tab }}</div>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            <HotProduct></HotProduct>
           </q-tab-panel>
         </q-tab-panels>
       </q-card>

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

@@ -6,6 +6,8 @@ import routes from 'src/router/routes';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
 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 { useRoute } from 'vue-router';
 
 export type ArtistInfoType = {
@@ -34,6 +36,8 @@ export default defineComponent({
   components: {
     PersonalInformation,
     VabAccount,
+    BankAccount,
+    HotProduct,
   },
   watch: {
     tab(value) {