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',
@@ -208,19 +208,19 @@ export default {
       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',
-      // },
+    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: {
@@ -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) {