update artist page

src/assets/configurations.example.ts

@@ -34,4 +34,9 @@ export enum API_PATHS {
   updateUser = '/user/update',
   getListUnits = '/unit/list',
   getListArtists = '/artist',
+  getFieldOptions = '/field',
+  getNationalityOptions = '/nationality',
+  getArtistLevelOptions = '/artistLevel',
+  getQualificationOptions = '/qualification',
+  getWorkOptions = '/work',
 }

src/assets/type.ts

@@ -49,3 +49,36 @@ export type ArtistInfoType = {
   instagram: string | null;
   whatsapp: string | null;
 };
+
+export type FieldType = {
+  id: number;
+  name: string;
+  status: number;
+  description: string | null;
+  numIndex: number;
+};
+export type NationalityType = {
+  id: number;
+  name: string;
+  status: number;
+  numIndex: number;
+};
+export type ArtistLevelType = {
+  id: number;
+  name: string;
+  status: number;
+  artistLevel: number;
+  description: string | null;
+};
+export type QualificationType = {
+  id: number;
+  name: string;
+  status: number;
+  numIndex: number;
+};
+export type WorkType = {
+  id: number;
+  name: string;
+  status: number;
+  numIndex: number;
+};

src/components/CompositionComponent.vue

 <template>
   <div>
-    <p>{{ title }}</p>
+    <!-- <p>{{ title }}</p>
     <ul>
       <li v-for="todo in todos" :key="todo.id" @click="increment">
         {{ todo.id }} - {{ todo.content }}
@@ -8,25 +8,18 @@
     </ul>
     <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
     <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p> -->
   </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  computed,
-  ref,
-  toRef,
-  Ref,
-} from 'vue';
+import { defineComponent, PropType, computed, ref, toRef, Ref } from 'vue';
 import { Todo, Meta } from './models';
 
 function useClickCount() {
   const clickCount = ref(0);
   function increment() {
-    clickCount.value += 1
+    clickCount.value += 1;
     return clickCount.value;
   }
 
@@ -43,19 +36,19 @@ export default defineComponent({
   props: {
     title: {
       type: String,
-      required: true
+      required: true,
     },
     todos: {
       type: Array as PropType<Todo[]>,
-      default: () => []
+      default: () => [],
     },
     meta: {
       type: Object as PropType<Meta>,
-      required: true
+      required: true,
     },
     active: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   setup(props) {
     return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };

src/components/artist-information/add-new-artist-dialog/NewArtistDialog.ts

+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
+
+export default defineComponent({
+  props: {
+    isOpenNewArtistDialog: {
+      type: Boolean,
+      required: true,
+    },
+    artistCode: { type: String, required: true },
+    fullName: { type: String, required: true },
+    artistName: { type: String, required: true },
+    birthday: { type: String, required: true },
+    sex: { type: Number, required: true },
+    nationality: { type: String, required: true },
+    status: { type: Number, required: true },
+    address: { type: String, required: true },
+    field: { type: String, required: true },
+    work: { type: String, required: true },
+    qualification: { type: String, required: true },
+    artistLevel: { type: String, required: true },
+    phoneNumber: { type: String, required: true },
+    email: { type: String, required: true },
+    facebook: { type: String, required: true },
+    facebookMessage: { type: String, required: true },
+    instagram: { type: String, required: true },
+    whatsapp: { type: String, required: true },
+  },
+  setup() {
+    const userNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireUserName'),
+    ];
+    const customerNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireCustomerName'),
+    ];
+    const businessNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireBusinessName'),
+    ];
+    const taxCodeRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('customer.validateMessages.requireTaxCode'),
+    ];
+    const phoneRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requirePhone'),
+      (val: string) =>
+        isMobilePhone(val) ||
+        i18n.global.t('customer.validateMessages.isPhone'),
+    ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) || i18n.global.t('customer.validateMessages.isEmail'),
+    ];
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireAddress'),
+    ];
+    const businessTypeRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('customer.validateMessages.requireBusinessType'),
+    ];
+    const ratingsRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('customer.validateMessages.requireRatings'),
+    ];
+    const representativeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireRepresentative'),
+    ];
+    const positionRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requiredPosition'),
+    ];
+    return {
+      userNameRules,
+      customerNameRules,
+      businessNameRules,
+      taxCodeRules,
+      emailRules,
+      ratingsRules,
+      addressRules,
+      businessTypeRules,
+      representativeRules,
+      positionRules,
+      phoneRules,
+    };
+  },
+  emits: [
+    'update:isOpenNewArtistDialog',
+    'click:CloseBtn',
+    'update:userName',
+    'update:customerName',
+    'update:businessName',
+    'update:taxCode',
+    'update:email',
+    'update:ratings',
+    'update:address',
+    'update:businessType',
+    'update:representative',
+    'update:position',
+    'update:phone',
+    'update:status',
+    'addNewCustomer',
+  ],
+});

src/i18n/vi/index.ts

@@ -235,6 +235,12 @@ export default {
       artistLevel: 'Xếp hạng',
       action: 'Chức năng',
     },
+    dialogLabel: {
+      title: {
+        addArtist: 'Thêm mới nghệ sỹ',
+        updateArtist: 'Cập nhật nghệ sỹ',
+      },
+    },
     artistInformation: {
       tabLabel: {
         personalInformation: 'Thông tin cá nhân',

src/layouts/MainLayout.vue

@@ -18,6 +18,7 @@
             fit="contain"
             :ratio="16 / 9"
         /></q-toolbar-title>
+        <q-btn flat round dense icon="mdi-account-circle-outline" />
       </q-toolbar>
     </q-header>
 

src/pages/Index.vue

 <template>
   <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
+    <q-btn color="primary" @click="$store.dispatch('authentication/logOut')"
+      >Logout</q-btn
     >
-    </example-component>
-
-    <q-btn @click="$store.dispatch('authentication/logOut')">Logout</q-btn>
   </q-page>
 </template>
 
 <script lang="ts">
 import { Todo, Meta } from '../components/models';
-import ExampleComponent from '../components/CompositionComponent.vue';
+
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   name: 'PageIndex',
-  components: { ExampleComponent },
+
   setup() {
     const todos = ref<Todo[]>([
       {

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

 // import { route } from 'quasar/wrappers';
-import { api } from 'src/boot/axios';
-import router from 'src/router';
-import routes from 'src/router/routes';
+// import { api } from 'src/boot/axios';
+// import router from 'src/router';
+// import routes from 'src/router/routes';
 // import router from 'src/router';
 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';
+// import { useRoute } from 'vue-router';
 
 export default defineComponent({
   components: {

src/pages/khach-hang/customer.ts

@@ -220,7 +220,7 @@ export default defineComponent({
       try {
       } catch (error) {}
     };
-    const getDetailCustomer = (id: number) => {
+    const getDetailCustomer = () => {
       // gọi api chi tiết cần có id để lấy value cho từng customer
       // const response = (await api({
       //   url: ...,
@@ -239,7 +239,7 @@ export default defineComponent({
     const openUpdateCustomerDialog = (id: number) => {
       showDialogUpdate.value = true;
       console.log(id, 'iddd');
-      void getDetailCustomer(id);
+      void getDetailCustomer();
     };
 
     //Bấm nút lưu ở dialog update thì gọi api cập nhật trong hàm updateCustomer

src/pages/nghe-sy/artist.ts

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
-import { PaginationResponse, ArtistInfoType } from 'src/assets/type';
+import {
+  PaginationResponse,
+  ArtistInfoType,
+  FieldType,
+  NationalityType,
+  ArtistLevelType,
+  QualificationType,
+  WorkType,
+} from 'src/assets/type';
 import Pagination from 'components/pagination/index.vue';
+import AddNewArtistDialog from 'components/artist-information/add-new-artist-dialog/index.vue';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { API_PATHS, config } from 'src/assets/configurations';
 import { AxiosResponse } from 'axios';
 export default defineComponent({
   components: {
     Pagination,
+    AddNewArtistDialog,
   },
   setup() {
-    const dataTest = ref([]);
     const userTableColumnsArtist = [
       {
         required: true,
@@ -105,10 +114,7 @@ export default defineComponent({
     const pageSize = ref(20);
     const totalPage = ref(10);
     const fullNameKeyword = ref('');
-    const fieldOptions = ref([
-      { id: 1, text: 'Thể thao' },
-      { id: 2, text: 'Âm nhạc' },
-    ]);
+    const fieldOptions: Ref<FieldType[]> = ref([]);
     const fieldSelected: Ref<number | undefined> = ref();
     const professionOptions = ref([
       { id: 1, text: 'Chuyên nghiệp' },
@@ -121,6 +127,27 @@ export default defineComponent({
     ]);
     const artistLevelSelected: Ref<number | undefined> = ref();
 
+    const isOpenNewArtistDialog = ref(false);
+    const id: Ref<number> = ref(0);
+    const artistCode: Ref<string> = ref('');
+    const fullName: Ref<string> = ref('');
+    const artistName: Ref<string | undefined> = ref();
+    const birthday: Ref<string | undefined> = ref();
+    const sex: Ref<number | undefined> = ref();
+    const nationality: Ref<string | undefined> = ref();
+    const address: Ref<string | undefined> = ref();
+    const status: Ref<number> = ref(1);
+    const field: Ref<string | undefined> = ref();
+    const work: Ref<string | undefined> = ref();
+    const qualification: Ref<string | undefined> = ref();
+    const artistLevel: Ref<string | undefined> = ref();
+    const phoneNumber: Ref<string | undefined> = ref();
+    const email: Ref<string | undefined> = ref();
+    const facebook: Ref<string | undefined> = ref();
+    const facebookMessage: Ref<string | undefined> = ref();
+    const instagram: Ref<string | undefined> = ref();
+    const whatsapp: Ref<string | undefined> = ref();
+
     const getListArtists = async () => {
       try {
         const response = (await api({
@@ -156,8 +183,30 @@ export default defineComponent({
       pageIndex.value = 1;
       void getListArtists();
     };
+    const getFieldOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getFieldOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        fieldOptions.value = response.data.data;
+      }
+    };
+
+    // const getNationalityOptions = async () => {
+    //   const response = (await api({
+    //     url: API_PATHS.getFieldOptions,
+    //     method: 'GET',
+    //     params: {},
+    //   })) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
+    //   if (response.data.error.code === config.API_RES_CODE.OK.code) {
+    //     fieldOptions.value = response.data.data;
+    //   }
+    // };
     onMounted(() => {
       void getListArtists();
+      void getFieldOptions();
     });
     return {
       userTableColumnsArtist,
@@ -165,8 +214,27 @@ export default defineComponent({
       getListArtists,
       pageIndex,
       pageSize,
+      isOpenNewArtistDialog,
+      id,
+      artistCode,
+      fullName,
+      artistName,
+      birthday,
+      sex,
+      nationality,
+      address,
+      status,
+      field,
+      work,
+      qualification,
+      artistLevel,
+      phoneNumber,
+      email,
+      facebook,
+      facebookMessage,
+      instagram,
+      whatsapp,
       filterListArtist,
-      dataTest,
       totalPage,
       changePageSize,
       fullNameKeyword,
@@ -176,6 +244,7 @@ export default defineComponent({
       professionOptions,
       artistLevelSelected,
       artistLevelOptions,
+      getFieldOptions,
     };
   },
 });

src/pages/nghe-sy/index.vue

@@ -13,7 +13,7 @@
       <q-select
         v-model="fieldSelected"
         :options="fieldOptions"
-        option-label="text"
+        option-label="name"
         option-value="id"
         label="Lĩnh vực"
         dense
@@ -52,7 +52,12 @@
       </q-btn>
     </div>
     <div class="col-auto">
-      <q-btn color="primary" no-caps :label="$t('crudActions.add')"></q-btn>
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        @click="isOpenNewArtistDialog = true"
+      ></q-btn>
     </div>
 
     <div class="col-12 q-mt-sm">
@@ -94,6 +99,10 @@
           @update:currentPage="getListArtists"
         />
       </div>
+      <AddNewArtistDialog
+        v-model:is-open-new-artist-dialog="isOpenNewArtistDialog"
+        @click:CloseBtn="isOpenNewArtistDialog = false"
+      ></AddNewArtistDialog>
     </div>
   </div>
 </template>

src/pages/nguoi-dung/User.ts

@@ -205,9 +205,7 @@ export default defineComponent({
       } catch (error) {}
     };
 
-    const confirmDeleteUser = (item: any) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-
+    const confirmDeleteUser = (userId: number) => {
       Dialog.create({
         title: i18n.global.t(
           'userPage.confirmActionsTitle.confirmDeleteUserTitle'
@@ -220,8 +218,7 @@ export default defineComponent({
         ),
         color: 'negative',
       }).onOk(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        void deleteUser(item.row.id);
+        void deleteUser(userId);
       });
     };
 
@@ -245,10 +242,7 @@ export default defineComponent({
       } catch (error) {}
     };
 
-    const confirmResetPassword = (item: any) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      console.log(item, 'item');
-
+    const confirmResetPassword = (userId: number) => {
       Dialog.create({
         title: i18n.global.t(
           'userPage.confirmActionsTitle.confirmDeleteUserTitle'
@@ -261,8 +255,7 @@ export default defineComponent({
         ),
         color: 'negative',
       }).onOk(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        void resetPassword(item.row.id);
+        void resetPassword(userId);
       });
     };
 
@@ -288,10 +281,9 @@ export default defineComponent({
       } catch (error) {}
     };
 
-    const showDialogUpdateUser = (item: any) => {
+    const showDialogUpdateUser = (userId: number) => {
       showDialogUpdate.value = true;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      void getUserDetail(item.row.id);
+      void getUserDetail(userId);
     };
 
     const getUserDetail = async (userId: number) => {

src/pages/nguoi-dung/index.vue

@@ -57,7 +57,7 @@
               round
               color="primary"
               icon="mdi-account-edit-outline"
-              @click="showDialogUpdateUser(item)"
+              @click="showDialogUpdateUser(item.row.id)"
             >
               <q-tooltip :offset="[20, 10]">{{
                 $t('userPage.toolTipMessage.updateUserInfo')
@@ -68,7 +68,7 @@
               round
               color="primary"
               icon="mdi-account-convert-outline"
-              @click="confirmResetPassword(item)"
+              @click="confirmResetPassword(item.row.id)"
             >
               <q-tooltip :offset="[20, 10]">{{
                 $t('userPage.toolTipMessage.resetPassword')
@@ -79,7 +79,7 @@
               round
               color="primary"
               icon="delete"
-              @click="confirmDeleteUser(item)"
+              @click="confirmDeleteUser(item.row.id)"
             >
               <q-tooltip :offset="[20, 10]">{{
                 $t('userPage.toolTipMessage.deleteUser')