update fix-bug

src/components/add-update-banner/index.vue

@@ -57,6 +57,7 @@
                   <q-card @click="uploadAvatar">
                     <div align="center" class="flex flex-center q-py-xs">
                       <q-icon
+                        style="color: #5d319e"
                         name="mdi-plus-circle-outline"
                         :size="'xs'"
                       ></q-icon>

src/components/add-update-post/index.vue

@@ -57,6 +57,7 @@
                   <q-card @click="uploadAvatar">
                     <div align="center" class="flex flex-center q-py-xs">
                       <q-icon
+                        style="color: #5d319e"
                         name="mdi-plus-circle-outline"
                         :size="'xs'"
                       ></q-icon>

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

@@ -212,7 +212,11 @@
               align="center"
               class="flex flex-center q-py-xs"
             >
-              <q-icon name="mdi-plus-circle-outline" size="xl"></q-icon>
+              <q-icon
+                style="color: #5d319e"
+                name="mdi-plus-circle-outline"
+                size="xl"
+              ></q-icon>
               <div class="q-mt-xs">{{ $t('uploadImage.uploadEmbed') }}</div>
             </div>
           </q-card>
@@ -227,7 +231,7 @@
               @click="$emit('click:openAddStoryDialog')"
               flat
               round
-              color="primary"
+              style="color: #5d319e"
               icon="mdi-plus-circle-outline"
               class="q-mr-md"
             >
@@ -245,7 +249,11 @@
               align="center"
               class="flex flex-center q-py-xs"
             >
-              <q-icon name="mdi-plus-circle-outline" size="xl"></q-icon>
+              <q-icon
+                style="color: #5d319e"
+                name="mdi-plus-circle-outline"
+                size="xl"
+              ></q-icon>
               <div class="q-mt-xs">{{ $t('uploadImage.uploadStory') }}</div>
             </div>
           </q-card>

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

@@ -21,6 +21,8 @@ export default defineComponent({
     artistLevel: { type: Number, required: true },
     phoneNumber: { type: String, required: true },
     email: { type: String, required: true },
+    phoneNumberAdminister: { type: String, required: true },
+    emailAdminister: { type: String, required: true },
     facebook: { type: String, required: true },
     facebookMessage: { type: String, required: true },
     instagram: { type: String, required: true },
@@ -36,6 +38,8 @@ export default defineComponent({
     artistNameRules: { type: Boolean, required: true },
     birthdayRules: { type: Boolean, required: true },
     emailRules: { type: Boolean, required: true },
+    emailAdministerRules: { type: Boolean, required: true },
+    phoneNumberAdministerRules: { type: Boolean, required: true },
     addressRules: { type: Boolean, required: true },
     phoneNumberRules: { type: Boolean, required: true },
     sexRules: { type: Boolean, required: true },
@@ -46,6 +50,8 @@ export default defineComponent({
     artistLevelRules: { type: Boolean, required: true },
     errorMessPhoneNumber: { type: String, required: true },
     errorMessEmail: { type: String, required: true },
+    errorMessPhoneNumberAdminister: { type: String, required: true },
+    errorMessEmailAdminister: { type: String, required: true },
   },
   components: {
     UploadImage,
@@ -144,6 +150,8 @@ export default defineComponent({
     };
   },
   emits: [
+    'update:emailAdminister',
+    'update:phoneNumberAdminister',
     'update:artistCode',
     'update:fullName',
     'update:avatar',

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

@@ -9,8 +9,8 @@
         <div class="col-3 text-weight-medium"></div>
         <div class="col-8 flex flex-center">
           <div>
-            <q-card style="margin-bottom: 8px" v-if="avatar !== null">
-              <q-img :src="avatar" style="height: 180px; width: 135px"></q-img>
+            <q-card class="q-mb-sm" v-if="avatar !== null">
+              <q-img :src="avatar" style="height: 240px; width: 185px"></q-img>
               <q-icon
                 name="mdi-close-circle"
                 color="red"
@@ -18,15 +18,19 @@
                 @click="deleteAvatar"
               ></q-icon>
             </q-card>
-            <q-card v-else style="margin-bottom: 8px">
+            <q-card v-else class="q-mb-sm">
               <q-img
                 src="~/assets/noavatar.png"
-                style="height: 180px; width: 135px"
+                style="height: 240px; width: 185px"
               ></q-img>
             </q-card>
             <q-card @click="uploadBanner">
               <div align="center" class="flex flex-center q-py-xs">
-                <q-icon name="mdi-plus-circle-outline" :size="'xs'"></q-icon>
+                <q-icon
+                  style="color: #5d319e"
+                  name="mdi-plus-circle-outline"
+                  :size="'xs'"
+                ></q-icon>
                 <div class="q-mt-xs">{{ $t('uploadImage.uploadBanner') }}</div>
               </div>
               <input
@@ -337,6 +341,45 @@
           ></q-input>
         </div>
       </div>
+
+      <div class="row q-mt-sm flex-center">
+        <div class="col-3 text-weight-medium">
+          {{
+            $t('artist.artistInformation.titleDataField.phoneNumberAdminister')
+          }}
+          <span style="color: red">*</span>
+        </div>
+        <div class="col-8">
+          <q-input
+            :model-value="phoneNumberAdminister"
+            @update:model-value="$emit('update:phoneNumberAdminister', $event)"
+            :error="phoneNumberAdministerRules"
+            :error-message="errorMessPhoneNumberAdminister"
+            mask="##########"
+            outlined
+            dense
+            hide-bottom-space
+          ></q-input>
+        </div>
+      </div>
+      <div class="row q-mt-md flex-center">
+        <div class="col-3 text-weight-medium">
+          {{ $t('artist.artistInformation.titleDataField.emailAdminister') }}
+          <span style="color: red">*</span>
+        </div>
+        <div class="col-8">
+          <q-input
+            :model-value="emailAdminister"
+            @update:model-value="$emit('update:emailAdminister', $event)"
+            :error="emailAdministerRules"
+            :error-message="errorMessEmailAdminister"
+            outlined
+            dense
+            hide-bottom-space
+          ></q-input>
+        </div>
+      </div>
+
       <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.facebook') }}

src/components/update-info-vab/update-info-vab-dialog/index.vue

@@ -42,7 +42,6 @@
                     </q-img>
                     <q-icon
                       name="mdi-close-circle"
-                      color="red"
                       style="position: absolute; right: 0; font-size: 18px"
                       @click="deleteAvatar"
                     ></q-icon>
@@ -57,6 +56,7 @@
                   <q-card @click="uploadAvatar">
                     <div align="center" class="flex flex-center q-py-xs">
                       <q-icon
+                        style="color: #5d319e"
                         name="mdi-plus-circle-outline"
                         :size="'xs'"
                       ></q-icon>

src/components/upload-image/index.vue

@@ -13,6 +13,7 @@
       }"
     >
       <q-icon
+        style="color: #5d319e"
         name="mdi-plus-circle-outline"
         :size="isBtn ? 'sm' : 'xl'"
       ></q-icon>

src/i18n/vi/index.ts

@@ -482,8 +482,13 @@ export default {
         facebookMessage: 'FB Message',
         instagram: 'Instagram',
         whatsapp: 'Whatsapp',
+        phoneNumberAdminister: 'Số điện thoại quản lý',
+        emailAdminister: 'Email quản lý',
       },
       validateMessages: {
+        requireEmailAdminister: 'Vui lòng nhập Email người quản lý',
+        requirePhoneNumberAdminister:
+          'Vui lòng nhập Số điện thoại người quản lý',
         requireProducCode: 'Vui lòng nhập Mã sản phẩm',
         requireUrlembed: 'Vui lòng nhập Url Embed',
         requireArtistCode: 'Vui lòng nhập Mã nghệ sỹ',

src/pages/cap-nhat-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-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="information"
-            :label="$t('artist.artistInformation.tabLabel.personalInformation')"
-          >
-            <!-- <template v-slot:default>
+          <!-- <template v-slot:default>
               <q-icon
                 style="position: absolute; top: 5px; right: -16px"
                 name="mdi-alert"
                 color="red"
               ></q-icon>
             </template> -->
-          </q-tab>
-          <q-tab
-            name="vabAccount"
-            :label="$t('artist.artistInformation.tabLabel.vabAccout')"
-          />
-          <q-tab
-            name="bankAccount"
-            :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
-              :id="id"
-              v-model:artist-code="artistCode"
-              :avatar="avatar"
-              v-model:full-name="fullName"
-              v-model:artist-name="artistName"
-              v-model:birthday="birthday"
-              v-model:sex="sex"
-              v-model:nationality="nationality"
-              v-model:status="status"
-              v-model:address="address"
-              v-model:fields="fields"
-              v-model:works="works"
-              v-model:qualification="qualification"
-              v-model:artist-level="artistLevel"
-              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"
-              :errorMessPhoneNumber="errorMessPhoneNumber"
-              :errorMessEmail="errorMessEmail"
-              :artistCodeRules="artistCodeRules"
-              :fullNameRules="fullNameRules"
-              :artistNameRules="artistNameRules"
-              :birthdayRules="birthdayRules"
-              :emailRules="emailRules"
-              :addressRules="addressRules"
-              :phoneNumberRules="phoneNumberRules"
-              :sexRules="sexRules"
-              :nationalityRules="nationalityRules"
-              :fieldRules="fieldRules"
-              :workRules="workRules"
-              :qualificationRules="qualificationRules"
-              :artistLevelRules="artistLevelRules"
-              :sex-options="sexOptions"
-              :field-options="fieldOptions"
-              :nationality-options="nationalityOptions"
-              :profession-options="professionOptions"
-              :artist-level-options="artistLevelOptions"
-              :work-options="workOptions"
-              @SetAvatar="setAvatar($event)"
-              @deleteAvatar="deleteAvatar"
-              @UpdateBirtday="UpdateBirtday($event)"
-            ></PersonalInformation>
-          </q-tab-panel>
-          <q-tab-panel name="vabAccount">
-            <VabAccount
-              v-model:account="account"
-              v-model:short-description="shortDescription"
-              v-model:format-schedules="formatSchedules"
-              @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
-              @selectedFile="selectedFile"
-              @deleteBanner="banners.splice($event, 1)"
-              @openDialogUploadEmbed="isOpenDialogEmbed = true"
-              :id="route.params.id"
-              :social-embedded="socialEmbedded"
-              :banners="banners"
-              :stories="stories"
-              @deleteStories="DeleteItemStories"
-              @click:openAddStoryDialog="isOpenAddStory = true"
-              @confirmDeleteStory="deleteStory"
-            ></VabAccount>
-          </q-tab-panel>
-          <q-tab-panel name="bankAccount">
-            <BankAccount
-              :bank-accounts="bankAccounts"
-              @confirmDeleteAccBank="confirmDeleteAccBank"
-              @confirmChangeIsDefault="confirmChangeIsDefault($event)"
-              @click:addBankBtn="isOpenAddAccountBankDialog = true"
-              @clickEditAccBankBtn="openDialogEditAccBank"
-            ></BankAccount>
-          </q-tab-panel>
-          <q-tab-panel name="hotProduct">
-            <HotProduct
-              :products="products"
-              @deleteRow="confirmDeleteRow($event)"
-              @reset="resetOldData"
-              :DataInsertHotProduct="DataInsertHotProduct"
-              @click:addHotProduct="openAddHotProduct = true"
-              @click:openUpadateHotProduct="openUpdateHotProduct = true"
-              @setDataUpdate="SetProduct($event)"
-            ></HotProduct>
-          </q-tab-panel>
-        </q-tab-panels>
-      </q-card>
+        </q-tab>
+        <q-tab
+          name="vabAccount"
+          :label="$t('artist.artistInformation.tabLabel.vabAccout')"
+        />
+        <q-tab
+          name="bankAccount"
+          :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
+            :id="id"
+            v-model:artist-code="artistCode"
+            :avatar="avatar"
+            v-model:full-name="fullName"
+            v-model:artist-name="artistName"
+            v-model:birthday="birthday"
+            v-model:sex="sex"
+            v-model:nationality="nationality"
+            v-model:status="status"
+            v-model:address="address"
+            v-model:fields="fields"
+            v-model:works="works"
+            v-model:qualification="qualification"
+            v-model:artist-level="artistLevel"
+            v-model:phone-number="phoneNumber"
+            v-model:email="email"
+            v-model:phone-number-administer="phoneNumberAdminister"
+            v-model:email-administer="emailAdminister"
+            v-model:facebook="facebook"
+            v-model:facebook-message="facebookMessage"
+            v-model:instagram="instagram"
+            v-model:whatsapp="whatsapp"
+            :errorMessPhoneNumber="errorMessPhoneNumber"
+            :errorMessEmail="errorMessEmail"
+            :errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"
+            :errorMessEmailAdminister="errorMessEmailAdminister"
+            :artistCodeRules="artistCodeRules"
+            :fullNameRules="fullNameRules"
+            :artistNameRules="artistNameRules"
+            :birthdayRules="birthdayRules"
+            :emailRules="emailRules"
+            :addressRules="addressRules"
+            :phoneNumberRules="phoneNumberRules"
+            :emailAdministerRules="emailAdministerRules"
+            :phoneNumberAdministerRules="phoneNumberAdministerRules"
+            :sexRules="sexRules"
+            :nationalityRules="nationalityRules"
+            :fieldRules="fieldRules"
+            :workRules="workRules"
+            :qualificationRules="qualificationRules"
+            :artistLevelRules="artistLevelRules"
+            :sex-options="sexOptions"
+            :field-options="fieldOptions"
+            :nationality-options="nationalityOptions"
+            :profession-options="professionOptions"
+            :artist-level-options="artistLevelOptions"
+            :work-options="workOptions"
+            @SetAvatar="setAvatar($event)"
+            @deleteAvatar="deleteAvatar"
+            @UpdateBirtday="UpdateBirtday($event)"
+          ></PersonalInformation>
+        </q-tab-panel>
+        <q-tab-panel name="vabAccount">
+          <VabAccount
+            v-model:account="account"
+            v-model:short-description="shortDescription"
+            v-model:format-schedules="formatSchedules"
+            @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
+            @selectedFile="selectedFile"
+            @deleteBanner="banners.splice($event, 1)"
+            @openDialogUploadEmbed="isOpenDialogEmbed = true"
+            :id="route.params.id"
+            :social-embedded="socialEmbedded"
+            :banners="banners"
+            :stories="stories"
+            @deleteStories="DeleteItemStories"
+            @click:openAddStoryDialog="isOpenAddStory = true"
+            @confirmDeleteStory="deleteStory"
+          ></VabAccount>
+        </q-tab-panel>
+        <q-tab-panel name="bankAccount">
+          <BankAccount
+            :bank-accounts="bankAccounts"
+            @confirmDeleteAccBank="confirmDeleteAccBank"
+            @confirmChangeIsDefault="confirmChangeIsDefault($event)"
+            @click:addBankBtn="isOpenAddAccountBankDialog = true"
+            @clickEditAccBankBtn="openDialogEditAccBank"
+          ></BankAccount>
+        </q-tab-panel>
+        <q-tab-panel name="hotProduct">
+          <HotProduct
+            :products="products"
+            @deleteRow="confirmDeleteRow($event)"
+            @reset="resetOldData"
+            :DataInsertHotProduct="DataInsertHotProduct"
+            @click:addHotProduct="openAddHotProduct = true"
+            @click:openUpadateHotProduct="openUpdateHotProduct = true"
+            @setDataUpdate="SetProduct($event)"
+          ></HotProduct>
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
     <AddNewBankAccountDialog
       v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
@@ -183,7 +187,7 @@
             :label="$t('crudActions.back')"
           ></q-btn>
         </div>
-        <div class="col-auto q-mx-md">
+        <div class="col-auto q-mr-lg q-ml-sm">
           <q-btn
             color="primary"
             no-caps

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

@@ -113,6 +113,8 @@ export default defineComponent({
     const works: Ref<WorkType[]> = ref([]);
     const phoneNumber: Ref<string | null> = ref(null);
     const email: Ref<string | null> = ref(null);
+    const emailAdminister: Ref<string | null> = ref(null);
+    const phoneNumberAdminister: Ref<string | null> = ref(null);
     const facebook: Ref<string | null> = ref(null);
     const facebookMessage: Ref<string | null | undefined> = ref();
     const instagram: Ref<string | null | undefined> = ref();
@@ -145,6 +147,8 @@ export default defineComponent({
     const emailRules = ref(false);
     const addressRules = ref(false);
     const phoneNumberRules = ref(false);
+    const phoneNumberAdministerRules = ref(false);
+    const emailAdministerRules = ref(false);
     const sexRules = ref(false);
     const nationalityRules = ref(false);
     const fieldRules = ref(false);
@@ -159,6 +163,16 @@ export default defineComponent({
         'artist.artistInformation.validateMessages.requirePhoneNumber'
       )
     );
+    const errorMessEmailAdminister = ref(
+      i18n.global.t(
+        'artist.artistInformation.validateMessages.requireEmailAdminister'
+      )
+    );
+    const errorMessPhoneNumberAdminister = ref(
+      i18n.global.t(
+        'artist.artistInformation.validateMessages.requirePhoneNumberAdminister'
+      )
+    );
     watch(
       () => fields.value,
       (value) => {
@@ -231,6 +245,22 @@ export default defineComponent({
         }
       }
     );
+    watch(
+      () => phoneNumberAdminister.value,
+      (value) => {
+        if (value) {
+          phoneNumberAdministerRules.value = false;
+        }
+      }
+    );
+    watch(
+      () => emailAdminister.value,
+      (value) => {
+        if (value) {
+          emailAdministerRules.value = false;
+        }
+      }
+    );
     watch(
       () => sex.value,
       (value) => {
@@ -307,6 +337,8 @@ export default defineComponent({
       status.value = ArtistInformation.status;
       phoneNumber.value = ArtistInformation.phoneNumber;
       email.value = ArtistInformation.email;
+      // phoneNumberAdminister.value = ArtistInformation.phoneNumberAdminister;
+      // emailAdminister.value = ArtistInformation.emailAdminister;
       facebook.value = ArtistInformation.facebook;
       facebookMessage.value = ArtistInformation.facebookMessage;
       instagram.value = ArtistInformation.instagram;
@@ -675,6 +707,23 @@ export default defineComponent({
       //     'artist.artistInformation.validateMessages.isEmail'
       //   );
       // }
+      if (
+        !phoneNumberAdminister.value ||
+        !phoneNumberAdminister.value?.trim().length
+      ) {
+        hasError = true;
+        phoneNumberAdministerRules.value = true;
+        errorMessPhoneNumberAdminister.value = i18n.global.t(
+          'artist.artistInformation.validateMessages.requirePhoneNumberAdminister'
+        );
+      }
+      if (!emailAdminister.value || !emailAdminister.value?.trim().length) {
+        hasError = true;
+        emailAdministerRules.value = true;
+        errorMessEmailAdminister.value = i18n.global.t(
+          'artist.artistInformation.validateMessages.requireEmailAdminister'
+        );
+      }
 
       if (artistLevel.value === null) {
         hasError = true;
@@ -744,6 +793,8 @@ export default defineComponent({
             address: address.value,
             phoneNumber: phoneNumber.value,
             email: email.value,
+            // phoneNumberAdminister: phoneNumberAdminister.value,
+            // emailAdminister: emailAdminister.value,
             facebook: facebook.value,
             facebookMessage: facebookMessage.value,
             instagram: instagram.value,
@@ -900,6 +951,12 @@ export default defineComponent({
       errorMessEmail,
       errorMessPhoneNumber,
       confirmChangeIsDefault,
+      phoneNumberAdminister,
+      phoneNumberAdministerRules,
+      emailAdminister,
+      emailAdministerRules,
+      errorMessEmailAdminister,
+      errorMessPhoneNumberAdminister,
     };
   },
 });

src/pages/login/Login.ts

@@ -51,6 +51,7 @@ export const Login = defineComponent({
     };
 
     return {
+      isPwd: ref(true),
       usernameInputRules,
       passwordInputRules,
       user_name,

src/pages/login/index.vue

 <template>
   <q-page class="row items-center justify-evenly">
     <q-card class="login-card">
-      <q-card-section class="text-h5 text-center">{{
-        $t('loginPage.pageTitle')
-      }}</q-card-section>
+      <q-card-section class="text-center"
+        ><img src="icons/logo_cms_2.png" />
+      </q-card-section>
+      <q-separator inset />
       <q-card-section>
         <q-form autofocus @submit="onSubmit" @reset="resetForm">
           <q-input
@@ -14,18 +15,33 @@
             :rules="usernameInputRules"
             class="q-my-sm"
             :disable="loggingIn"
-          />
+          >
+            <template v-slot:prepend>
+              <q-icon name="mdi-account" />
+            </template>
+          </q-input>
 
           <q-input
             filled
-            type="password"
             v-model="password"
             :label="`${$t('loginPage.passwordInputLabel')} *`"
             lazy-rules
             :rules="passwordInputRules"
             class="q-my-sm"
+            :type="isPwd ? 'password' : 'text'"
             :disable="loggingIn"
-          />
+          >
+            <template v-slot:append>
+              <q-icon
+                :name="isPwd ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="isPwd = !isPwd"
+              />
+            </template>
+            <template v-slot:prepend>
+              <q-icon name="mdi-lock" />
+            </template>
+          </q-input>
 
           <div>
             <q-btn

src/pages/nghe-sy/index.vue

@@ -89,9 +89,9 @@
           </q-td>
         </template>
         <template v-slot:body-cell-avatar="avatar">
-          <q-td style="padding: 0; height: 100%; text-align: center">
+          <q-td style="padding: auto; height: 100%; text-align: center">
             <q-img
-              style="width: 7rem; height: 5rem"
+              style="width: 9rem"
               fit="contain"
               :ratio="16 / 9"
               :src="

src/pages/them-nghe-sy/AddArtist.ts

@@ -111,6 +111,8 @@ export default defineComponent({
     const works: Ref<WorkType[]> = ref([]);
     const phoneNumber: Ref<string | null> = ref(null);
     const email: Ref<string | null> = ref(null);
+    const emailAdminister: Ref<string | null> = ref(null);
+    const phoneNumberAdminister: Ref<string | null> = ref(null);
     const facebook: Ref<string | null> = ref(null);
     const facebookMessage: Ref<string | null | undefined> = ref();
     const instagram: Ref<string | null | undefined> = ref();
@@ -143,6 +145,8 @@ export default defineComponent({
     const emailRules = ref(false);
     const addressRules = ref(false);
     const phoneNumberRules = ref(false);
+    const phoneNumberAdministerRules = ref(false);
+    const emailAdministerRules = ref(false);
     const sexRules = ref(false);
     const nationalityRules = ref(false);
     const fieldRules = ref(false);
@@ -157,6 +161,16 @@ export default defineComponent({
         'artist.artistInformation.validateMessages.requirePhoneNumber'
       )
     );
+    const errorMessEmailAdminister = ref(
+      i18n.global.t(
+        'artist.artistInformation.validateMessages.requireEmailAdminister'
+      )
+    );
+    const errorMessPhoneNumberAdminister = ref(
+      i18n.global.t(
+        'artist.artistInformation.validateMessages.requirePhoneNumberAdminister'
+      )
+    );
     watch(
       () => fields.value,
       (value) => {
@@ -225,6 +239,22 @@ export default defineComponent({
         }
       }
     );
+    watch(
+      () => phoneNumberAdminister.value,
+      (value) => {
+        if (value) {
+          phoneNumberAdministerRules.value = false;
+        }
+      }
+    );
+    watch(
+      () => emailAdminister.value,
+      (value) => {
+        if (value) {
+          emailAdministerRules.value = false;
+        }
+      }
+    );
     watch(
       () => sex.value,
       (value) => {
@@ -613,6 +643,23 @@ export default defineComponent({
       //     'artist.artistInformation.validateMessages.isEmail'
       //   );
       // }
+      if (
+        !phoneNumberAdminister.value ||
+        !phoneNumberAdminister.value?.trim().length
+      ) {
+        hasError = true;
+        phoneNumberAdministerRules.value = true;
+        errorMessPhoneNumberAdminister.value = i18n.global.t(
+          'artist.artistInformation.validateMessages.requirePhoneNumberAdminister'
+        );
+      }
+      if (!emailAdminister.value || !emailAdminister.value?.trim().length) {
+        hasError = true;
+        emailAdministerRules.value = true;
+        errorMessEmailAdminister.value = i18n.global.t(
+          'artist.artistInformation.validateMessages.requireEmailAdminister'
+        );
+      }
 
       if (artistLevel.value === null) {
         hasError = true;
@@ -677,6 +724,8 @@ export default defineComponent({
             address: address.value,
             phoneNumber: phoneNumber.value,
             email: email.value,
+            // phoneNumberAdminister: phoneNumberAdminister.value,
+            // emailAdminister: emailAdminister.value,
             facebook: facebook.value,
             facebookMessage: facebookMessage.value,
             instagram: instagram.value,
@@ -827,6 +876,12 @@ export default defineComponent({
       errorMessEmail,
       errorMessPhoneNumber,
       confirmChangeIsDefault,
+      phoneNumberAdminister,
+      phoneNumberAdministerRules,
+      emailAdminister,
+      emailAdministerRules,
+      errorMessEmailAdminister,
+      errorMessPhoneNumberAdminister,
     };
   },
 });

src/pages/them-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-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="information"
-            :label="$t('artist.artistInformation.tabLabel.personalInformation')"
-          >
-            <!-- <template v-slot:default>
+          <!-- <template v-slot:default>
               <q-icon
                 style="position: absolute; top: 5px; right: -16px"
                 name="mdi-alert"
                 color="red"
               ></q-icon>
             </template> -->
-          </q-tab>
-          <q-tab
-            name="vabAccount"
-            :label="$t('artist.artistInformation.tabLabel.vabAccout')"
-          />
-          <q-tab
-            name="bankAccount"
-            :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
-              :id="id"
-              v-model:artist-code="artistCode"
-              :avatar="avatar"
-              v-model:full-name="fullName"
-              v-model:artist-name="artistName"
-              v-model:birthday="birthday"
-              v-model:sex="sex"
-              v-model:nationality="nationality"
-              v-model:status="status"
-              v-model:address="address"
-              v-model:fields="fields"
-              v-model:works="works"
-              v-model:qualification="qualification"
-              v-model:artist-level="artistLevel"
-              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"
-              :errorMessPhoneNumber="errorMessPhoneNumber"
-              :errorMessEmail="errorMessEmail"
-              :artistCodeRules="artistCodeRules"
-              :fullNameRules="fullNameRules"
-              :artistNameRules="artistNameRules"
-              :birthdayRules="birthdayRules"
-              :emailRules="emailRules"
-              :addressRules="addressRules"
-              :phoneNumberRules="phoneNumberRules"
-              :sexRules="sexRules"
-              :nationalityRules="nationalityRules"
-              :fieldRules="fieldRules"
-              :workRules="workRules"
-              :qualificationRules="qualificationRules"
-              :artistLevelRules="artistLevelRules"
-              :sex-options="sexOptions"
-              :field-options="fieldOptions"
-              :nationality-options="nationalityOptions"
-              :profession-options="professionOptions"
-              :artist-level-options="artistLevelOptions"
-              :work-options="workOptions"
-              @SetAvatar="setAvatar($event)"
-              @deleteAvatar="deleteAvatar"
-              @UpdateBirtday="UpdateBirtday($event)"
-            ></PersonalInformation>
-          </q-tab-panel>
-          <q-tab-panel name="vabAccount">
-            <VabAccount
-              v-model:account="account"
-              v-model:short-description="shortDescription"
-              v-model:format-schedules="formatSchedules"
-              @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
-              @selectedFile="selectedFile"
-              @deleteBanner="banners.splice($event, 1)"
-              @openDialogUploadEmbed="isOpenDialogEmbed = true"
-              :id="route.params.id"
-              :social-embedded="socialEmbedded"
-              :banners="banners"
-              :stories="stories"
-              @deleteStories="DeleteItemStories"
-              @click:openAddStoryDialog="isOpenAddStory = true"
-              @confirmDeleteStory="deleteStory"
-            ></VabAccount>
-          </q-tab-panel>
-          <q-tab-panel name="bankAccount">
-            <BankAccount
-              :bank-accounts="bankAccounts"
-              @confirmDeleteAccBank="confirmDeleteAccBank"
-              @confirmChangeIsDefault="confirmChangeIsDefault($event)"
-              @click:addBankBtn="isOpenAddAccountBankDialog = true"
-              @clickEditAccBankBtn="openDialogEditAccBank"
-            ></BankAccount>
-          </q-tab-panel>
-          <q-tab-panel name="hotProduct">
-            <HotProduct
-              :products="products"
-              @deleteRow="confirmDeleteRow($event)"
-              @reset="resetOldData"
-              :DataInsertHotProduct="DataInsertHotProduct"
-              @click:addHotProduct="openAddHotProduct = true"
-              @click:openUpadateHotProduct="openUpdateHotProduct = true"
-              @setDataUpdate="SetProduct($event)"
-            ></HotProduct>
-          </q-tab-panel>
-        </q-tab-panels>
-      </q-card>
+        </q-tab>
+        <q-tab
+          name="vabAccount"
+          :label="$t('artist.artistInformation.tabLabel.vabAccout')"
+        />
+        <q-tab
+          name="bankAccount"
+          :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
+            :id="id"
+            v-model:artist-code="artistCode"
+            :avatar="avatar"
+            v-model:full-name="fullName"
+            v-model:artist-name="artistName"
+            v-model:birthday="birthday"
+            v-model:sex="sex"
+            v-model:nationality="nationality"
+            v-model:status="status"
+            v-model:address="address"
+            v-model:fields="fields"
+            v-model:works="works"
+            v-model:qualification="qualification"
+            v-model:artist-level="artistLevel"
+            v-model:phone-number="phoneNumber"
+            v-model:email="email"
+            v-model:phone-number-administer="phoneNumberAdminister"
+            v-model:email-administer="emailAdminister"
+            v-model:facebook="facebook"
+            v-model:facebook-message="facebookMessage"
+            v-model:instagram="instagram"
+            v-model:whatsapp="whatsapp"
+            :errorMessPhoneNumber="errorMessPhoneNumber"
+            :errorMessEmail="errorMessEmail"
+            :errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"
+            :errorMessEmailAdminister="errorMessEmailAdminister"
+            :artistCodeRules="artistCodeRules"
+            :fullNameRules="fullNameRules"
+            :artistNameRules="artistNameRules"
+            :birthdayRules="birthdayRules"
+            :emailRules="emailRules"
+            :addressRules="addressRules"
+            :phoneNumberRules="phoneNumberRules"
+            :emailAdministerRules="emailAdministerRules"
+            :phoneNumberAdministerRules="phoneNumberAdministerRules"
+            :sexRules="sexRules"
+            :nationalityRules="nationalityRules"
+            :fieldRules="fieldRules"
+            :workRules="workRules"
+            :qualificationRules="qualificationRules"
+            :artistLevelRules="artistLevelRules"
+            :sex-options="sexOptions"
+            :field-options="fieldOptions"
+            :nationality-options="nationalityOptions"
+            :profession-options="professionOptions"
+            :artist-level-options="artistLevelOptions"
+            :work-options="workOptions"
+            @SetAvatar="setAvatar($event)"
+            @deleteAvatar="deleteAvatar"
+            @UpdateBirtday="UpdateBirtday($event)"
+          ></PersonalInformation>
+        </q-tab-panel>
+        <q-tab-panel name="vabAccount">
+          <VabAccount
+            v-model:account="account"
+            v-model:short-description="shortDescription"
+            v-model:format-schedules="formatSchedules"
+            @confirmDeleteSocialEmbedded="confirmDeleteSocialEmbedded"
+            @selectedFile="selectedFile"
+            @deleteBanner="banners.splice($event, 1)"
+            @openDialogUploadEmbed="isOpenDialogEmbed = true"
+            :id="route.params.id"
+            :social-embedded="socialEmbedded"
+            :banners="banners"
+            :stories="stories"
+            @deleteStories="DeleteItemStories"
+            @click:openAddStoryDialog="isOpenAddStory = true"
+            @confirmDeleteStory="deleteStory"
+          ></VabAccount>
+        </q-tab-panel>
+        <q-tab-panel name="bankAccount">
+          <BankAccount
+            :bank-accounts="bankAccounts"
+            @confirmDeleteAccBank="confirmDeleteAccBank"
+            @confirmChangeIsDefault="confirmChangeIsDefault($event)"
+            @click:addBankBtn="isOpenAddAccountBankDialog = true"
+            @clickEditAccBankBtn="openDialogEditAccBank"
+          ></BankAccount>
+        </q-tab-panel>
+        <q-tab-panel name="hotProduct">
+          <HotProduct
+            :products="products"
+            @deleteRow="confirmDeleteRow($event)"
+            @reset="resetOldData"
+            :DataInsertHotProduct="DataInsertHotProduct"
+            @click:addHotProduct="openAddHotProduct = true"
+            @click:openUpadateHotProduct="openUpdateHotProduct = true"
+            @setDataUpdate="SetProduct($event)"
+          ></HotProduct>
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
     <AddNewBankAccountDialog
       v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
@@ -183,7 +187,7 @@
             :label="$t('crudActions.back')"
           ></q-btn>
         </div>
-        <div class="col-auto q-mx-md">
+        <div class="col-auto q-mr-lg q-ml-sm">
           <q-btn
             color="primary"
             no-caps