done cap-nhat-thong-tin-nghe-sy feature

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

 import { defineComponent } from 'vue';
-export default defineComponent({});
+export default defineComponent({
+  props: {
+    id: { type: Number, required: true },
+    artistCode: { type: String, required: true },
+    fullName: { type: String, required: true },
+    stageName: { type: String, default: '' },
+    birthday: { type: String, default: '' },
+    sex: { type: Number, required: true },
+    nationality: { type: String, default: '' },
+    address: { type: String, default: '' },
+    status: { type: Number, required: true },
+    field: { type: String, default: '' },
+    work: { type: String, default: '' },
+    professionalism: { type: String, default: '' },
+    rating: { type: String, default: '' },
+    phoneNumber: { type: String, default: '' },
+    email: { type: String, default: '' },
+    facebook: { type: String, default: '' },
+    facebookMessage: { type: String, default: '' },
+    instagram: { type: String, default: '' },
+    whatsapp: { type: String, default: '' },
+  },
+  emits: [
+    'update:fullName',
+    'update:stageName',
+    'update:birthday',
+    'update:sex',
+    'update:nationality',
+    'update:address',
+    'update:status',
+    'update:field',
+    'update:work',
+    'update:professionalism',
+    'update:rating',
+    'update:phoneNumber',
+    'update:email',
+    'update:facebook',
+    'update:facebookMessage',
+    'update:instagram',
+    'update:whatsapp',
+  ],
+});

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

 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm q-mt-md">
     <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 class="col-8">{{ id }}</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 class="col-8">{{ artistCode }}</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>
+          <q-input
+            :model-value="fullName"
+            @update:model-value="$emit('update:fullName', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -27,7 +32,12 @@
           {{ $t('artist.artistInformation.titleDataField.stageName') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="Son Tung"></q-input>
+          <q-input
+            :model-value="stageName"
+            @update:model-value="$emit('update:stageName', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -35,7 +45,12 @@
           {{ $t('artist.artistInformation.titleDataField.birthday') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="01/01/1992"></q-select>
+          <q-select
+            :model-value="birthday"
+            @update:model-value="$emit('update:birthday', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -43,7 +58,12 @@
           {{ $t('artist.artistInformation.titleDataField.sex') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Nam"></q-select>
+          <q-select
+            :model-value="sex"
+            @update:model-value="$emit('update:sex', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -51,7 +71,12 @@
           {{ $t('artist.artistInformation.titleDataField.nationality') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Việt Nam"></q-select>
+          <q-select
+            :model-value="nationality"
+            @update:model-value="$emit('update:nationality', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -59,7 +84,12 @@
           {{ $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>
+          <q-input
+            :model-value="address"
+            @update:model-value="$emit('update:address', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-md flex-center">
@@ -67,7 +97,12 @@
           {{ $t('artist.artistInformation.titleDataField.status') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Hoạt Động"></q-select>
+          <q-select
+            :model-value="status"
+            @update:model-value="$emit('update:status', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
     </div>
@@ -78,7 +113,12 @@
           {{ $t('artist.artistInformation.titleDataField.field') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Âm nhạc"></q-select>
+          <q-select
+            :model-value="field"
+            @update:model-value="$emit('update:field', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -86,7 +126,12 @@
           {{ $t('artist.artistInformation.titleDataField.work') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Ca sỹ"></q-select>
+          <q-select
+            :model-value="work"
+            @update:model-value="$emit('update:work', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -94,7 +139,12 @@
           {{ $t('artist.artistInformation.titleDataField.professionalism') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Chuyên nghiệp"></q-select>
+          <q-select
+            :model-value="professionalism"
+            @update:model-value="$emit('update:professionalism', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -102,7 +152,12 @@
           {{ $t('artist.artistInformation.titleDataField.rating') }}
         </div>
         <div class="col-8">
-          <q-select outlined dense label="Xếp hạng"></q-select>
+          <q-select
+            :model-value="rating"
+            @update:model-value="$emit('update:rating', $event)"
+            outlined
+            dense
+          ></q-select>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -110,7 +165,12 @@
           {{ $t('artist.artistInformation.titleDataField.phoneNumber') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="0961051368"></q-input>
+          <q-input
+            :model-value="phoneNumber"
+            @update:model-value="$emit('update:phoneNumber', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -118,7 +178,12 @@
           {{ $t('artist.artistInformation.titleDataField.email') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="thanhdatwg@gmail.com"></q-input>
+          <q-input
+            :model-value="email"
+            @update:model-value="$emit('update:email', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -126,7 +191,12 @@
           {{ $t('artist.artistInformation.titleDataField.facebook') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="abc"></q-input>
+          <q-input
+            :model-value="facebook"
+            @update:model-value="$emit('update:facebook', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -134,7 +204,12 @@
           {{ $t('artist.artistInformation.titleDataField.facebookMessage') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="Son Tung"></q-input>
+          <q-input
+            :model-value="facebookMessage"
+            @update:model-value="$emit('update:facebookMessage', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -142,7 +217,12 @@
           {{ $t('artist.artistInformation.titleDataField.instagram') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="Son Tung"></q-input>
+          <q-input
+            :model-value="instagram"
+            @update:model-value="$emit('update:instagram', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
       <div class="row q-mt-sm flex-center">
@@ -150,11 +230,28 @@
           {{ $t('artist.artistInformation.titleDataField.whatsapp') }}
         </div>
         <div class="col-8">
-          <q-input outlined dense label="Son Tung"></q-input>
+          <q-input
+            :model-value="whatsapp"
+            @update:model-value="$emit('update:whatsapp', $event)"
+            outlined
+            dense
+          ></q-input>
         </div>
       </div>
     </div>
     <q-space></q-space>
+    <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="Quay lại"></q-btn>
+        </div>
+        <div class="col-auto q-ml-md">
+          <q-btn color="primary" no-caps label="Cập nhật"></q-btn>
+        </div>
+        <div class="col-1"></div>
+      </div>
+    </div>
   </div>
 </template>
 

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

@@ -33,18 +33,38 @@
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="information">
-            <PersonalInformation></PersonalInformation>
+            <PersonalInformation
+              :id="id"
+              :artist-code="artistCode"
+              v-model:full-name="fullName"
+              v-model:stage-name="stageName"
+              v-model:birthday="birthday"
+              v-model:sex="sex"
+              v-model:nationality="nationality"
+              v-model:address="address"
+              v-model:status="status"
+              v-model:field="field"
+              v-model:work="work"
+              v-model:professionalism="professionalism"
+              v-model:rating="rating"
+              v-model:phone-number="phoneNumber"
+              v-model:email="email"
+              v-model:facebook="facebook"
+              v-model:facebook-message="facebookMessage"
+              v-model:instagram="instagram"
+              v-model:whatsapp="whatsapp"
+            ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">
-            <div class="text-h6">Alarms</div>
+            <div class="text-h6">{{ tab }}</div>
             Lorem ipsum dolor sit amet consectetur adipisicing elit.
           </q-tab-panel>
-          <q-tab-panel name="bankAcount">
-            <div class="text-h6">Movies</div>
+          <q-tab-panel name="bankAccount">
+            <div class="text-h6">{{ tab }}</div>
             Lorem ipsum dolor sit amet consectetur adipisicing elit.
           </q-tab-panel>
           <q-tab-panel name="hotProduct">
-            <div class="text-h6">Movies</div>
+            <div class="text-h6">{{ tab }}</div>
             Lorem ipsum dolor sit amet consectetur adipisicing elit.
           </q-tab-panel>
         </q-tab-panels>
@@ -53,4 +73,4 @@
   </div>
 </template>
 
-<script lang="ts" src="./informationArtist.ts"></script>
+<script lang="ts" src="./updateInformationArtist.ts"></script>

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 router from 'src/router';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
+import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
+import { useRoute } from 'vue-router';
+
+export type ArtistInfoType = {
+  id: number;
+  artistCode: string;
+  fullName: string;
+  stageName: string | null;
+  birthday: string | null;
+  sex: number;
+  nationality: string;
+  address: string | null;
+  status: number;
+  field: string | null;
+  work: string | null;
+  professionalism: string | null;
+  rating: string | null;
+  phoneNumber: string | null;
+  email: string | null;
+  facebook: string | null;
+  facebookMessage: string | null;
+  instagram: string | null;
+  whatsapp: string | null;
+};
+
+export default defineComponent({
+  components: {
+    PersonalInformation,
+  },
+  watch: {
+    tab(value) {
+      if (value === 'information') {
+        console.log('information');
+      } else if (value === 'vabAccount') {
+        console.log('vabAccount');
+        // console.log(this.$router.currentRoute.value.params, 'asdasd');
+      } else if (value === 'bankAccount') {
+        console.log('bankAccount');
+      } else console.log('hotProduct');
+    },
+  },
+
+  setup() {
+    const tab = ref('information');
+
+    const id: Ref<number> = ref(0);
+    const artistCode: Ref<string> = ref('');
+    const fullName: Ref<string> = ref('');
+    const stageName: 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 professionalism: Ref<string | undefined> = ref();
+    const rating: 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 route = useRoute();
+    const getInformationArtist = () => {
+      // const response = await api({
+      //   // url: API_PATHS.
+      //   method: 'GET',
+      //   params: {
+      //     id: route.params.id,
+      //   },
+      // });
+      const fakeData = {
+        id: 1,
+        artistCode: '0001',
+        fullName: 'Sơn Tùng',
+        stageName: 'SonTungMTP',
+        birthday: '04/02/1999',
+        sex: 1,
+        nationality: 'Việt Nam',
+        address: '',
+        status: 1,
+        field: 'Âm nhạc',
+        work: 'Ca sỹ',
+        professionalism: 'Chuyên nghiệp',
+        rating: 'Vip_1',
+        phoneNumber: '09999999999',
+        email: 'sontung@gmail.com',
+        facebook: '',
+        facebookMessage: '',
+        instagram: '',
+        whatsapp: '',
+      };
+
+      artistCode.value = fakeData.artistCode;
+      fullName.value = fakeData.fullName;
+      stageName.value = fakeData.stageName;
+      birthday.value = fakeData.birthday;
+      sex.value = fakeData.sex;
+      nationality.value = fakeData.nationality;
+      address.value = fakeData.address;
+      status.value = fakeData.status;
+      field.value = fakeData.field;
+      work.value = fakeData.work;
+      professionalism.value = fakeData.professionalism;
+      rating.value = fakeData.rating;
+      phoneNumber.value = fakeData.phoneNumber;
+      email.value = fakeData.email;
+      facebook.value = fakeData.facebook;
+      facebookMessage.value = fakeData.facebookMessage;
+      instagram.value = fakeData.instagram;
+      whatsapp.value = fakeData.whatsapp;
+    };
+    onMounted(() => {
+      console.log('Information');
+      void getInformationArtist();
+    });
+    return {
+      tab,
+      getInformationArtist,
+      id,
+      artistCode,
+      fullName,
+      stageName,
+      birthday,
+      sex,
+      nationality,
+      address,
+      status,
+      field,
+      work,
+      professionalism,
+      rating,
+      phoneNumber,
+      email,
+      facebook,
+      facebookMessage,
+      instagram,
+      whatsapp,
+    };
+  },
+});

src/pages/nghe-sy/index.vue

@@ -66,18 +66,18 @@
       >
         <template v-slot:body-cell-action="item">
           <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
-              :to="`/nghe-sy/thong-tin-nghe-sy/${item.row.id}`"
               flat
               round
               color="primary"
-              icon="mdi-information-outline"
+              icon="mdi-account-edit-outline"
+              :to="`/nghe-sy/cap-nhat-thong-tin-nghe-sy/${item.row.id}`"
             >
-              <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>

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,7 +7,7 @@ export enum Pages {
   cmsUser = 'nguoi-dung',
   managingUnit = 'don-vi-chu-quan',
   artist = 'nghe-sy',
-  informationArtist = 'thong-tin-nghe-sy',
+  informationArtist = 'cap-nhat-thong-tin-nghe-sy',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -46,8 +46,8 @@ const routes: RouteRecordRaw[] = [
         name: Pages.artist,
       },
       {
-        path: '/nghe-sy/thong-tin-nghe-sy/:id',
-        component: () => import('pages/thong-tin-nghe-sy/index.vue'),
+        path: '/nghe-sy/cap-nhat-thong-tin-nghe-sy/:id',
+        component: () => import('pages/cap-nhat-thong-tin-nghe-sy/index.vue'),
         name: Pages.informationArtist,
       },
     ],