create page information-artist

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

+<template>
+  <div>My component</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  // name: 'ComponentName'
+})
+</script>

src/components/artist-information/personal-information/PersonalInformation.ts

+import { defineComponent } from 'vue';
+export default defineComponent({});

src/components/artist-information/personal-information/index.vue

+<template>
+  <div class="row q-col-gutter-sm">
+    <q-space></q-space>
+    <div class="col-5">
+      <div class="row flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.id') }}
+        </div>
+        <div class="col-8">00106</div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.artistCode') }}
+        </div>
+        <div class="col-8">00156</div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.fullName') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Son Tung"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.stageName') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Son Tung"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.birthday') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="01/01/1992"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.sex') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Nam"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.nationality') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Việt Nam"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.address') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Tây hồ - Hoàn Kiếm - Hà Nội"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.status') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Hoạt Động"></q-select>
+        </div>
+      </div>
+    </div>
+    <q-space></q-space>
+    <div class="col-5">
+      <div class="row flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.field') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Âm nhạc"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.work') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Ca sỹ"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.professionalism') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Chuyên nghiệp"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.rating') }}
+        </div>
+        <div class="col-8">
+          <q-select outlined dense label="Xếp hạng"></q-select>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.phoneNumber') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="0961051368"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.email') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="thanhdatwg@gmail.com"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.facebook') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="abc"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.facebookMessage') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Son Tung"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.instagram') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Son Tung"></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.whatsapp') }}
+        </div>
+        <div class="col-8">
+          <q-input outlined dense label="Son Tung"></q-input>
+        </div>
+      </div>
+    </div>
+    <q-space></q-space>
+  </div>
+</template>
+
+<script lang="ts" src="./PersonalInformation.ts"></script>

src/components/pagination/index.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     },
     maxPages: {
       type: Number,
-      default: 6,
+      default: 5,
     },
     pageSize: {
       type: Number,

src/i18n/vi/index.ts

@@ -129,6 +129,7 @@ export default {
       updateUserInfo: 'Cập nhật',
       resetPassword: 'Reset mật khẩu',
       deleteUser: 'Xoá',
+      informationUser: 'Thông tin',
     },
   },
   managingUnit: {
@@ -143,7 +144,6 @@ export default {
       action: 'Chức năng',
     },
   },
-
   artist: {
     tableColumnsArtist: {
       artistName: 'Tên nghệ sỹ',
@@ -157,6 +157,35 @@ export default {
       ratings: 'Xếp hạng',
       action: 'Chức năng',
     },
+    artistInformation: {
+      tabLabel: {
+        personalInformation: 'Thông tin cá nhân',
+        vabAccout: 'Tài khoản VAB',
+        bankAcount: 'Tài khoản ngân hàng thụ hưởng',
+        hotProduct: 'Sản phẩm nổi bật',
+      },
+      titleDataField: {
+        id: 'ID',
+        artistCode: 'Mã nghệ sỹ',
+        fullName: 'Họ tên',
+        stageName: 'Nghệ danh',
+        birthday: 'Ngày sinh',
+        sex: 'Giới tính',
+        nationality: 'Quốc tịch',
+        address: 'Địa chỉ',
+        status: 'Trạng thái',
+        field: 'Lĩnh vực',
+        work: 'Công việc',
+        professionalism: 'Độ chuyên',
+        rating: 'Xếp hạng',
+        phoneNumber: 'Số điện thoại',
+        email: 'Email',
+        facebook: 'FB Page',
+        facebookMessage: 'FB Message',
+        instagram: 'Instagram',
+        whatsapp: 'Whatsapp',
+      },
+    },
   },
   recordPerPage: 'Số bản ghi',
 };

src/pages/don-vi-chu-quan/ManagingUnit.ts

@@ -11,14 +11,14 @@ export default defineComponent({
   },
   setup() {
     const managingUnitTableColumns = [
-      //   {
-      //     name: 'index',
-      //     field: 'index',
-      //     required: true,
-      //     label: 'STT',
-      //     align: 'center',
-      //     sortable: false,
-      //   },
+      {
+        name: 'index',
+        field: 'index',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
       {
         name: 'unitCode',
         field: 'unitCode',

src/pages/nghe-sy/artist.ts

@@ -6,7 +6,7 @@ export default defineComponent({
     Pagination,
   },
   setup() {
-    const dataTest = ref([])
+    const dataTest = ref([]);
     const userTableColumnsArtist = [
       {
         required: true,
@@ -92,22 +92,22 @@ export default defineComponent({
     const pageSize = ref(20);
     const totalPage = ref(10);
     const fullNameKeyword = ref('');
-    const fieldOptionsMusic = ref([
+    const fieldOptions = ref([
       { id: 1, text: 'Thể thao' },
       { id: 2, text: 'Âm nhạc' },
     ]);
-    const fieldSelectedMusic: Ref<number | undefined> = ref();
-    const fieldOptionsDoChuyen = ref([
-        { id: 1, text: 'Chuyên nghiệp' },
-        { id: 2, text: 'Nghiệp dư' },
-      ]);
-      const fieldSelectedDoChuyen: Ref<number | undefined> = ref();
-      const fieldOptionsRatings = ref([
-        { id: 1, text: 'VIP_1' },
-        { id: 2, text: 'VIP_2' },
-      ]);
-      const fieldSelectedRatings: Ref<number | undefined> = ref();
-      const getListArtist = () => {
+    const fieldSelected: Ref<number | undefined> = ref();
+    const professionOptions = ref([
+      { id: 1, text: 'Chuyên nghiệp' },
+      { id: 2, text: 'Nghiệp dư' },
+    ]);
+    const professionSelected: Ref<number | undefined> = ref();
+    const ratingOptions = ref([
+      { id: 1, text: 'VIP_1' },
+      { id: 2, text: 'VIP_2' },
+    ]);
+    const ratingSelected: Ref<number | undefined> = ref();
+    const getListArtist = () => {
       //   const response = (await api({
       //     url: API_PATHS.getListArtist,
       //     method: 'GET',
@@ -118,6 +118,7 @@ export default defineComponent({
       //   })) as AxiosResponse<BaseResponseBody<unknown>>;
       const fakeData: unknown[] = [
         {
+          id: 1,
           artistCode: '0001',
           fullName: 'Nguyễn Tùng Dương',
           stageName: 'Tùng Dương',
@@ -125,43 +126,46 @@ export default defineComponent({
           linhvuc: 'Âm nhạc',
           work: 'Ca sĩ',
           dochuyen: 'Chuyên nghiệp',
-          ratings: 'VIP_1'
+          ratings: 'VIP_1',
         },
       ];
       userTableRowsArtist.value = fakeData;
     };
     const filterListArtist = () => {
-        //   const response = (await api({
-        //     url: API_PATHS.filterListArtist,
-        //     method: 'GET',
-        //     params: {
-        //       unitName: fullNameKeyword.value,
-        //       fieldName: fieldSelected.value,
-        //     },
-        //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+      //   const response = (await api({
+      //     url: API_PATHS.filterListArtist,
+      //     method: 'GET',
+      //     params: {
+      //       unitName: fullNameKeyword.value,
+      //       fieldName: fieldSelected.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
       // userTableRowsArtist.value =  userTableRowsArtist.value.filter((item: unknown) => item.fullName = fullNameKeyword)
     };
-      const changePageSize = () => {
-        pageIndex.value = 1;
-        void getListArtist();
-      };
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListArtist();
+    };
     onMounted(() => {
       void getListArtist();
     });
-    return { userTableColumnsArtist, userTableRowsArtist, getListArtist,
-        pageIndex,
-        pageSize,
-        filterListArtist,
-        dataTest,
-        totalPage,
-        changePageSize,
-        fullNameKeyword,
-        fieldSelectedMusic,
-        fieldOptionsMusic, 
-        fieldSelectedDoChuyen,
-        fieldOptionsDoChuyen,
-        fieldSelectedRatings,
-        fieldOptionsRatings,
-     };
+    return {
+      userTableColumnsArtist,
+      userTableRowsArtist,
+      getListArtist,
+      pageIndex,
+      pageSize,
+      filterListArtist,
+      dataTest,
+      totalPage,
+      changePageSize,
+      fullNameKeyword,
+      fieldSelected,
+      fieldOptions,
+      professionSelected,
+      professionOptions,
+      ratingSelected,
+      ratingOptions,
+    };
   },
 });

src/pages/nghe-sy/index.vue

@@ -11,19 +11,19 @@
     </div>
     <div class="col-2" dense outlined>
       <q-select
-        v-model="fieldSelectedMusic"
-        :options="fieldOptionsMusic"
+        v-model="fieldSelected"
+        :options="fieldOptions"
         option-label="text"
         option-value="id"
+        label="Lĩnh vực"
         dense
         outlined
-        label="Lĩnh vực"
       ></q-select>
     </div>
     <div class="col-2" dense outlined>
       <q-select
-        v-model="fieldSelectedDoChuyen"
-        :options="fieldOptionsDoChuyen"
+        v-model="professionSelected"
+        :options="professionOptions"
         option-label="text"
         option-value="id"
         dense
@@ -33,8 +33,8 @@
     </div>
     <div class="col-2" dense outlined>
       <q-select
-        v-model="fieldSelectedRatings"
-        :options="fieldOptionsRatings"
+        v-model="ratingSelected"
+        :options="ratingOptions"
         option-label="text"
         option-value="id"
         dense
@@ -62,7 +62,28 @@
         :no-data-label="$t('emptyData')"
         row-key="name"
         separator="cell"
+        hide-pagination
       >
+        <template v-slot:body-cell-action="item">
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn
+              :to="`/nghe-sy/thong-tin-nghe-sy/${item.row.id}`"
+              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-account-edit-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

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

+<template>
+  <div class="q-mt-sm row q-col-gutter-sm">
+    <div class="col-12" width="100%">
+      <q-card>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab
+            name="information"
+            :label="$t('artist.artistInformation.tabLabel.personalInformation')"
+          />
+          <q-tab
+            name="vabAccount"
+            :label="$t('artist.artistInformation.tabLabel.vabAccout')"
+          />
+          <q-tab
+            name="bankAcount"
+            :label="$t('artist.artistInformation.tabLabel.bankAcount')"
+          />
+          <q-tab
+            name="hotProduct"
+            :label="$t('artist.artistInformation.tabLabel.hotProduct')"
+          />
+        </q-tabs>
+
+        <q-separator />
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="information">
+            <PersonalInformation></PersonalInformation>
+          </q-tab-panel>
+          <q-tab-panel name="vabAccount">
+            <div class="text-h6">Alarms</div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </q-tab-panel>
+          <q-tab-panel name="bankAcount">
+            <div class="text-h6">Movies</div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </q-tab-panel>
+          <q-tab-panel name="hotProduct">
+            <div class="text-h6">Movies</div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./informationArtist.ts"></script>

src/pages/thong-tin-nghe-sy/informationArtist.ts

+import { defineComponent, ref } from 'vue';
+import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
+export default defineComponent({
+  components: {
+    PersonalInformation,
+  },
+  setup() {
+    const tab = ref('information');
+    return { tab };
+  },
+});

src/router/routes.ts

@@ -7,6 +7,7 @@ export enum Pages {
   cmsUser = 'nguoi-dung',
   managingUnit = 'don-vi-chu-quan',
   artist = 'nghe-sy',
+  informationArtist = 'thong-tin-nghe-sy',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -44,6 +45,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/nghe-sy/index.vue'),
         name: Pages.artist,
       },
+      {
+        path: '/nghe-sy/thong-tin-nghe-sy/:id',
+        component: () => import('pages/thong-tin-nghe-sy/index.vue'),
+        name: Pages.informationArtist,
+      },
     ],
   },