udpate code

src/assets/type.ts

@@ -31,6 +31,7 @@ export type UserObject = {
 export type ArtistInfoType = {
   id: number;
   account: string;
+  avatar: string | null;
   artistCode: string;
   fullName: string;
   artistName: string | null;

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

-import { defineComponent } from 'vue';
+import { defineComponent, ref, Ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';
+import UploadImage from '../../upload-image/index.vue';
 export default defineComponent({
   props: {
     id: { type: Number, required: true },
+    
     artistCode: { type: String, required: true },
+    avatar: { type: String, required: true },
     fullName: { type: String, required: true },
     artistName: { type: String, required: true },
     birthday: { type: String, required: true },
@@ -30,6 +33,9 @@ export default defineComponent({
     artistLevelOptions: { type: Array, required: true },
     workOptions: { type: Array, required: true },
   },
+  components: {
+    UploadImage,
+  },
   setup() {
     const artistCodeRules = [
       (val?: string) =>
@@ -120,6 +126,18 @@ export default defineComponent({
           'artist.artistInformation.validateMessages.requireArtistLevel'
         ),
     ];
+    
+    const selectedFile = (value: FileList) =>{
+      console.log(value);
+      console.log(URL.createObjectURL(value[0]));
+    }
+    const upload = ref(null);
+    const uploadBanner = () => {
+      // eslint-disable-next-line
+      // @ts-ignore
+      // eslint-disable-next-line
+      upload.value?.click();
+    };
     return {
       artistCodeRules,
       fullNameRules,
@@ -134,11 +152,16 @@ export default defineComponent({
       workRules,
       qualificationRules,
       artistLevelRules,
+      upload,
+      uploadBanner,
+      selectedFile,
+    
     };
   },
   emits: [
     'update:artistCode',
     'update:fullName',
+    'update:avatar',
     'update:artistName',
     'update:birthday',
     'update:email',

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

@@ -2,12 +2,31 @@
   <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="row q-mt-sm flex-center">
         <div class="col-3 text-weight-medium">
-          {{ $t('artist.artistInformation.titleDataField.id') }}
-        </div>
-        <div class="col-8">{{ id }}</div>
-      </div> -->
+          <q-card style="max-width: 65%" @click="uploadBanner">
+            <!--  -->
+            <div align="center" class="flex flex-center q-py-xs">
+              <q-icon name="mdi-plus-circle-outline" :size="'xs'"></q-icon>
+              <div class="q-mt-xs">{{ $t('uploadImage.uploadBanner') }}</div>
+            </div>
+            <input
+              ref="upload"
+              hidden
+              @change="selectedFile($event.target.files)"
+              type="file"
+              accept="image/png, image/jpeg"
+            />
+            <!-- / @change="$emit('selectedFile', $event.target.files)" -->
+          </q-card>
+        </div>
+        <div class="col-8 flex flex-center">
+          <div style="width: 100%">
+            <q-img :src="avatar" style="max-width: 120px"></q-img>
+          </div>
+        </div>
+        <!-- @selectedFile="uploadAvatar" -->
+      </div>
       <div class="row q-mt-sm flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.artistCode') }}
@@ -15,8 +34,8 @@
         <div class="col-8">
           <q-input
             :model-value="artistCode"
-            :rules="artistCodeRules"
             @update:model-value="$emit('update:artistCode', $event)"
+            :rules="artistCodeRules"
             outlined
             dense
             hide-bottom-space
@@ -132,6 +151,9 @@
           ></q-input>
         </div>
       </div>
+    </div>
+    <q-space></q-space>
+    <div class="col-5">
       <div class="row q-mt-xs flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.field') }}
@@ -184,22 +206,6 @@
           ></q-select>
         </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
-            :model-value="status"
-            @update:model-value="$emit('update:status', $event)"
-            outlined
-            dense
-          ></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.qualification') }}
@@ -329,28 +335,6 @@
         </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="$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 class="col-1"></div>
-      </div>
-    </div> -->
   </div>
 </template>
 

src/i18n/vi/index.ts

@@ -468,7 +468,7 @@ export default {
   },
   recordPerPage: 'Số bản ghi',
   uploadImage: {
-    uploadBanner: 'Tải lên Banner',
+    uploadBanner: 'Tải lên',
     uploadEmbed: 'Tải lên Embed',
     titleEmbedDialog: 'Thay đổi Embed',
   },

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

@@ -36,6 +36,7 @@
             <PersonalInformation
               :id="id"
               v-model:artist-code="artistCode"
+              :avatar="avatar"
               v-model:full-name="fullName"
               v-model:artist-name="artistName"
               v-model:birthday="birthday"

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

@@ -79,6 +79,7 @@ export default defineComponent({
     ]);
     // const status: Ref<boolean | number> = ref(true);
     const id: Ref<number> = ref(0);
+    const avatar: Ref<string | null> = ref(null)
     const account: Ref<string> = ref('');
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
@@ -149,6 +150,9 @@ export default defineComponent({
       console.log(response, 'Artist Detail Info');
       const ArtistInformation = response.data.data;
       id.value = ArtistInformation.id;
+      // avatar.value = ArtistInformation.avatar
+      
+      avatar.value='https://lh3.googleusercontent.com/proxy/cL5mHGDvQFU8xR-Gn60kKHN9otMevrqQ0wRv3_fEQi4030JNccyLBSBmJoyL3KOYhObYR5WPnRZr8FwphGhYenMklss0tYuiIzhE2BrnNeUJJ76_ztQizomVS3RsPP8'
       account.value = ArtistInformation.account;
       artistCode.value = ArtistInformation.artistCode;
       fullName.value = ArtistInformation.fullName;
@@ -493,6 +497,7 @@ export default defineComponent({
       getBankOptions,
       getTypeCardOptions,
       rowDataAccBank,
+      avatar
     };
   },
 });