update code

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

 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm" style="max-height: 750px">
     <div class="col-12 text-uppercase text-weight-medium">Tài khoản VAB</div>
     <br />
     <div class="col-auto flex flex-center justify-start">
@@ -34,7 +34,7 @@
     </div>
     <div class="col-12 q-mt-sm">
       <div class="row q-col-gutter-lg">
-        <div class="col-7" style="height: 100%">
+        <div class="col-12" style="height: 100%">
           <q-carousel
             v-if="banners.length"
             v-model="slide"
@@ -43,12 +43,15 @@
             arrows
             navigation
             infinite
+            height="600px"
+            style="border: 2px solid #f1f1f1"
           >
             <q-carousel-slide
               v-for="(bannerInfo, bannerIdx) in banners"
               :key="bannerIdx"
               :name="bannerIdx"
               :img-src="bannerInfo.bannerUrl || bannerInfo.url"
+              style="height: 500px; aspect-ratio: 1/5"
             >
               <template v-slot:default>
                 <div align="right">
@@ -70,7 +73,7 @@
           ></UploadImage>
           <UploadImage v-else @selectedFile="uploadBanner"></UploadImage>
         </div>
-        <div class="col-5">
+        <div class="col-12">
           <q-editor
             :model-value="shortDescription"
             @update:model-value="$emit('update:shortDescription', $event)"
@@ -88,12 +91,6 @@
                   list: 'only-icons',
                   options: ['left', 'center', 'right', 'justify'],
                 },
-                {
-                  label: $q.lang.editor.align,
-                  icon: $q.iconSet.editor.align,
-                  fixedLabel: true,
-                  options: ['left', 'center', 'right', 'justify'],
-                },
               ],
               [
                 'bold',
@@ -195,7 +192,7 @@
           </div>
           <q-card
             class="my-card q-mt-sm flex flex-center"
-            style="height: 300px"
+            :style="socialEmbedded !== null ? 'height: 83%;' : 'height: 90.5%'"
             bordered
           >
             <iframe
@@ -233,8 +230,8 @@
             >
           </div>
           <q-card
-            class="my-card flex q-mt-xs flex-center"
-            style="height: 100%"
+            class="my-card flex q-mt-sm flex-center"
+            :style="stories.length ? 'height: 100%' : 'height: 90.6%;'"
             bordered
             v-if="!stories.length"
           >
@@ -254,16 +251,20 @@
             arrows
             navigation
             infinite
-            style="height: 100%"
           >
             <q-carousel-slide
               v-for="(story, storyIdx) in stories"
               :key="storyIdx"
               :name="storyIdx"
               class="q-pt-sm"
+              style="height: 230px"
             >
               <q-card class="my-card">
-                <q-img fit="contain" :src="story.imageUrl" />
+                <q-img
+                  fit="contain"
+                  style="max-height: 230px"
+                  :src="story.imageUrl"
+                />
                 <q-icon
                   name="mdi-close-circle"
                   color="red"

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

@@ -3,6 +3,7 @@ import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';
 import UploadImage from '../../upload-image/index.vue';
+import moment from 'moment';
 export default defineComponent({
   props: {
     id: { type: Number, required: true },
@@ -36,6 +37,7 @@ export default defineComponent({
     UploadImage,
   },
   setup(_, context) {
+    const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'))
     const selectedFile = (value: FileList) => {
       // console.log(value);
       // console.log(URL.createObjectURL(value[0]));
@@ -144,6 +146,12 @@ export default defineComponent({
       console.log('object');
       context.emit('deleteAvatar');
     };
+    const selectDatePicker =(value:string) =>{
+      context.emit('UpdateBirtday',fomatDatePicker(value))
+    }
+    const fomatDatePicker=(value:string)=>{
+      return moment(value).format('DD/MM/YYYY')
+    }
     return {
       artistCodeRules,
       fullNameRules,
@@ -162,6 +170,9 @@ export default defineComponent({
       uploadBanner,
       selectedFile,
       deleteAvatar,
+      BirthdayDatePicker,
+      selectDatePicker,
+      fomatDatePicker
     };
   },
   emits: [
@@ -187,5 +198,6 @@ export default defineComponent({
     'addNewArtist',
     'SetAvatar',
     'deleteAvatar',
+    'UpdateBirtday'
   ],
 });

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

@@ -92,11 +92,24 @@
             @update:model-value="$emit('update:birthday', $event)"
             :rules="birthdayRules"
             class="q-my-sm"
-            type="date"
+            readonly
             outlined
             dense
             hide-bottom-space
           >
+            <template v-slot:default>
+              <q-menu
+                transition-show="flip-right"
+                transition-hide="flip-left"
+                auto-close
+              >
+                <q-date
+                  v-model="BirthdayDatePicker"
+                  first-day-of-week="1"
+                  @update:model-value="selectDatePicker($event)"
+                ></q-date>
+              </q-menu>
+            </template>
           </q-input>
         </div>
       </div>

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

@@ -60,6 +60,7 @@
               :work-options="workOptions"
               @SetAvatar="setAvatar($event)"
               @deleteAvatar="deleteAvatar"
+              @UpdateBirtday="UpdateBirtday($event)"
             ></PersonalInformation>
           </q-tab-panel>
           <q-tab-panel name="vabAccount">

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

@@ -406,7 +406,10 @@ export default defineComponent({
     //     });
     //   } catch (error) {}
     // };
-
+    const UpdateBirtday = (value: string) => {
+      // console.log(value);
+      birthday.value = value;
+    };
     const updateInformationArtist = async () => {
       try {
         const response = (await api({
@@ -417,7 +420,8 @@ export default defineComponent({
             avatar: avatar.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
-            birthday: birthday.value,
+             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+            birthday: birthday.value + ' 00:00:00',
             sex: sex.value,
             address: address.value,
             phoneNumber: phoneNumber.value,
@@ -558,6 +562,7 @@ export default defineComponent({
       isOpenAddStory,
       addStory,
       deleteStory,
+      UpdateBirtday,
     };
   },
 });