update

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

@@ -30,77 +30,79 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-12">
+            <div class="col-6">
               <div class="row flex-center">
                 <div>
-                  <q-card style="margin-bottom: 8px" v-if="image !== null">
+                  <q-card class="q-mb-sm" v-if="image !== null">
                     <q-img
-                      :src="image"
-                      style="height: 268px; width: 350px"
                       @click="uploadAvatar"
-                    >
-                    </q-img>
+                      :src="image"
+                      style="height: 380px; width: 350px; cursor: pointer"
+                    ></q-img>
                     <q-icon
                       name="mdi-close-circle"
                       color="red"
-                      style="position: absolute; right: 0; font-size: 18px"
+                      style="
+                        position: absolute;
+                        right: 0;
+                        font-size: 18px;
+                        cursor: pointer;
+                      "
                       @click="deleteAvatar"
                     ></q-icon>
                   </q-card>
-                  <q-card v-else style="margin-bottom: 8px">
-                    <q-img
-                      src="~/assets/noavatar.png"
-                      style="height: 268px; width: 350px"
-                    ></q-img>
-                  </q-card>
-
-                  <q-card @click="uploadAvatar">
-                    <div align="center" class="flex flex-center q-py-xs">
+                  <div
+                    @click="uploadAvatar"
+                    v-else
+                    class="q-mb-sm"
+                    style="
+                      height: 380px;
+                      width: 350px;
+                      border: 2px dashed #5d319e;
+                      border-radius: 4px;
+                      cursor: pointer;
+                    "
+                  >
+                    <div
+                      style="
+                        height: 380px;
+                        width: 350px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                      "
+                    >
                       <q-icon
                         style="color: #5d319e"
-                        name="mdi-plus-circle-outline"
-                        :size="'xs'"
+                        name="mdi-cloud-upload"
+                        size="xl"
                       ></q-icon>
-                      <div class="q-mt-xs">
-                        {{ $t('post.uploadImg') }}
+                      Tải ảnh lên
                     </div>
                   </div>
-
+                  <div>
                     <input
                       ref="upload"
                       hidden
-                      type="file"
                       @change="selectedFile($event.target.files)"
+                      type="file"
                       accept="image/png, image/jpeg"
                     />
-                  </q-card>
                   </div>
                 </div>
-
-              <div class="q-ml-md q-mt-lg q-mr-md">
-                <q-select
-                  :model-value="category"
-                  @update:model-value="$emit('update:category', $event)"
-                  :label="$t('post.dialogLabel.postLabels.category')"
-                  :rules="categoryRules"
-                  :options="categoryOptions"
-                  map-options
-                  option-value="id"
-                  option-label="name"
-                  type="text"
-                  class="q-my-sm"
-                  outlined
-                ></q-select>
+              </div>
             </div>
 
+            <div class="col-6">
               <q-tabs
                 v-model="tab"
                 dense
-                class="text-grey"
+                align="left"
                 active-color="primary"
                 indicator-color="primary"
-                align="left"
                 narrow-indicator
+                :breakpoint="0"
               >
                 <q-tab
                   v-for="(info, index) in languageOptions"
@@ -116,23 +118,49 @@
                   v-for="(info, index) in languageOptions"
                   :key="`${info.language.id}-${index}`"
                   :name="info.language.code"
+                  class="q-pt-none; q-pa-none"
                 >
                   <q-input
                     v-model="info.name"
                     :label="$t('post.dialogLabel.postLabels.name')"
                     type="text"
-                    class="q-my-sm"
                     outlined
+                    lazy-rules
                     :rules="nameRules"
                     clearable
                   ></q-input>
                 </q-tab-panel>
               </q-tab-panels>
+              <q-select
+                :model-value="category"
+                @update:model-value="$emit('update:category', $event)"
+                :label="$t('post.dialogLabel.postLabels.category')"
+                :rules="categoryRules"
+                :options="categoryOptions"
+                map-options
+                class="q-py-sm"
+                option-value="id"
+                option-label="name"
+                type="text"
+                outlined
+              ></q-select>
+              <div class="q-pt-md">
+                <span class="text-body1">{{
+                  $t('post.dialogLabel.postLabels.status')
+                }}</span
+                ><q-toggle
+                  :model-value="status"
+                  :true-value="1"
+                  :false-value="2"
+                  @update:model-value="$emit('update:status', $event)"
+                />
+              </div>
+            </div>
 
+            <div class="col-12 q-mt-md">
               <q-tabs
                 v-model="tabContent"
                 dense
-                class="text-grey"
                 active-color="primary"
                 indicator-color="primary"
                 align="left"
@@ -148,12 +176,12 @@
               </q-tabs>
 
               <q-separator />
-
               <q-tab-panels v-model="tabContent" animated>
                 <q-tab-panel
                   v-for="(info, index) in languageOptions"
                   :key="`${info.language.id}-${index}`"
                   :name="info.language.code"
+                  class="q-pt-none; q-pa-none"
                 >
                   <q-editor
                     v-model="info.content"
@@ -252,18 +280,6 @@
                   />
                 </q-tab-panel>
               </q-tab-panels>
-
-              <div class="q-pl-md">
-                <span class="text-body1">{{
-                  $t('post.dialogLabel.postLabels.status')
-                }}</span
-                ><q-toggle
-                  :model-value="status"
-                  :true-value="1"
-                  :false-value="2"
-                  @update:model-value="$emit('update:status', $event)"
-                />
-              </div>
             </div>
           </div>
 

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

@@ -37,7 +37,7 @@
     </div>
     <div class="col-12 q-mt-sm">
       <div class="row q-col-gutter-lg">
-        <div class="col-6" style="height: 100%">
+        <div class="col-6">
           <q-carousel
             v-if="banners.length"
             v-model="slide"
@@ -79,8 +79,7 @@
             </q-carousel-slide>
           </q-carousel>
           <UploadImage
-            v-if="banners.length"
-            class="q-mt-sm"
+            v-if="banners.length !== null"
             :isBtn="true"
             @selectedFile="uploadBanner"
           ></UploadImage>
@@ -178,12 +177,7 @@
       </div>
     </div>
     <div class="col-12 q-mt-sm">
-      <div
-        class="row q-col-gutter-lg"
-        style="margin-bottom: 111px"
-        align="center"
-        justify="center"
-      >
+      <div class="row q-col-gutter-lg q-pb-md" align="center" justify="center">
         <div class="col-4">
           <div class="flex flex-center">
             <div class="text-h6 text-weight-regular q-py-md">
@@ -214,7 +208,7 @@
           <div
             @click="$emit('openDialogUploadEmbed')"
             class="flex flex-center"
-            :style="socialEmbedded !== null ? 'height: 100%;' : 'height: 100%'"
+            :style="socialEmbedded !== null ? 'height: 85%;' : 'height: 85%'"
           >
             <iframe
               v-if="socialEmbedded !== null"
@@ -231,6 +225,7 @@
                 border: 2px dashed #5d319e;
                 border-radius: 5px;
                 cursor: pointer;
+                flex-direction: column;
               "
               class="flex flex-center"
             >
@@ -261,7 +256,7 @@
           </div>
           <div
             class="flex flex-center"
-            :style="stories.length ? 'height: 100%' : 'height: 100%;'"
+            :style="stories.length ? 'height: 85%' : 'height: 85%;'"
             bordered
             v-if="!stories.length"
           >
@@ -275,6 +270,7 @@
                 border: 2px dashed #5d319e;
                 border-radius: 5px;
                 cursor: pointer;
+                flex-direction: column;
               "
             >
               <q-icon
@@ -318,6 +314,7 @@
                   "
                   @click="deleteStory(storyIdx)"
                 ></q-icon>
+              </div>
               <q-input
                 type="textarea"
                 class="q-px-sm"
@@ -325,7 +322,6 @@
                 @update:model-value="$emit('update:content', $event)"
                 readonly
               ></q-input>
-              </div>
             </q-carousel-slide>
           </q-carousel>
         </div>
@@ -333,7 +329,7 @@
         <div class="col-4">
           <div class="text-h6 text-weight-regular q-py-md">Lịch</div>
           <q-date
-            style="width: 100%; height: 100%"
+            style="width: 100%; height: 85%"
             :model-value="formatSchedules"
             @update:model-value="$emit('update:formatSchedules', $event)"
             multiple

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

@@ -5,6 +5,7 @@ import moment from 'moment';
 import { FieldType, NationalityType } from 'src/assets/type';
 export default defineComponent({
   props: {
+    hidden_img: { type: Boolean, required: true },
     id: { type: Number, required: true },
     artistCode: { type: String, required: true },
     avatar: { type: String, required: true },
@@ -59,10 +60,13 @@ export default defineComponent({
   setup(_, context) {
     const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
     const selectedFile = (value: FileList) => {
+      if (value.length !== 0) {
         context.emit('SetAvatar', {
           file: value[0],
           url: URL.createObjectURL(value[0]),
         });
+        context.emit('update:hidden_img', false);
+      }
     };
 
     const upload = ref(null);
@@ -170,6 +174,7 @@ export default defineComponent({
     'update:works',
     'update:qualification',
     'update:artistLevel',
+    'update:hidden_img',
     'update:status',
     'addNewArtist',
     'SetAvatar',

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

@@ -12,7 +12,7 @@
               <q-img
                 @click="uploadBanner"
                 :src="avatar"
-                style="height: 265px; width: 195px; cursor: pointer"
+                style="height: 263px; width: 195px; cursor: pointer"
               ></q-img>
               <q-icon
                 name="mdi-close-circle"
@@ -31,7 +31,7 @@
               v-else
               class="q-mb-sm"
               style="
-                height: 265px;
+                height: 263px;
                 width: 195px;
                 border: 2px dashed #5d319e;
                 border-radius: 4px;
@@ -54,24 +54,23 @@
                 ></q-icon>
                 Tải ảnh lên
               </div>
-              <q-img
-                @click="uploadBanner"
-                style="height: 265px; width: 195px"
-              ></q-img>
             </div>
             <div>
               <input
                 ref="upload"
                 hidden
-                @change="selectedFile($event.target.files)"
                 type="file"
                 accept="image/png, image/jpeg"
+                @change="selectedFile($event.target.files)"
               />
             </div>
+            <div v-if="hidden_img" style="color: #c10015; font-size: 12px">
+              Không được để trống
             </div>
           </div>
         </div>
-      <div class="row q-mt-sm flex-center">
+      </div>
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.artistCode') }}
           <span style="color: red">*</span>
@@ -83,13 +82,14 @@
             @update:model-value="$emit('update:artistCode', $event)"
             :error="artistCodeRules"
             :error-message="errorMessArtistCode"
+            class="q-my-sm"
             outlined
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.fullName') }}
           <span style="color: red">*</span>
@@ -100,13 +100,14 @@
             @update:model-value="$emit('update:fullName', $event)"
             :error="fullNameRules"
             :error-message="errorMessFullName"
+            class="q-my-sm"
             outlined
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.artistName') }}
           <span style="color: red">*</span>
@@ -117,13 +118,14 @@
             @update:model-value="$emit('update:artistName', $event)"
             :error="artistNameRules"
             :error-message="errorMessArtistName"
+            class="q-my-sm"
             outlined
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.birthday') }}
           <span style="color: red">*</span>
@@ -207,12 +209,11 @@
             class="q-my-sm"
             outlined
             hide-bottom-space
-            clearable
             dense
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-xs q-mb-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.address') }}
           <span style="color: red">*</span>
@@ -225,13 +226,14 @@
             :error-message="errorMessAddress"
             outlined
             hide-bottom-space
+            class="q-my-sm"
             dense
           ></q-input>
         </div>
       </div>
     </div>
     <div class="col-5 q-ml-xl">
-      <div class="row q-mt-xs flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.field') }}
           <span style="color: red">*</span>
@@ -332,7 +334,7 @@
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.phoneNumber') }}
           <span style="color: red">*</span>
@@ -344,13 +346,14 @@
             :error="phoneNumberRules"
             :error-message="errorMessPhoneNumber"
             mask="##########"
+            class="q-my-sm"
             outlined
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.email') }}
           <span style="color: red">*</span>
@@ -362,13 +365,14 @@
             :error="emailRules"
             :error-message="errorMessEmail"
             outlined
+            class="q-my-sm"
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
 
-      <div class="row q-mt-sm flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{
             $t('artist.artistInformation.titleDataField.phoneNumberAdminister')
@@ -382,13 +386,14 @@
             :error="phoneNumberAdministerRules"
             :error-message="errorMessPhoneNumberAdminister"
             mask="##########"
+            class="q-my-sm"
             outlined
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.emailAdminister') }}
           <span style="color: red">*</span>
@@ -400,13 +405,14 @@
             :error="emailAdministerRules"
             :error-message="errorMessEmailAdminister"
             outlined
+            class="q-my-sm"
             dense
             hide-bottom-space
           ></q-input>
         </div>
       </div>
 
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.facebook') }}
         </div>
@@ -415,11 +421,12 @@
             :model-value="facebook"
             @update:model-value="$emit('update:facebook', $event)"
             outlined
+            class="q-my-sm"
             dense
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.facebookMessage') }}
         </div>
@@ -428,11 +435,12 @@
             :model-value="facebookMessage"
             @update:model-value="$emit('update:facebookMessage', $event)"
             outlined
+            class="q-my-sm"
             dense
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.instagram') }}
         </div>
@@ -441,11 +449,12 @@
             :model-value="instagram"
             @update:model-value="$emit('update:instagram', $event)"
             outlined
+            class="q-my-sm"
             dense
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.whatsapp') }}
         </div>
@@ -454,6 +463,7 @@
             :model-value="whatsapp"
             @update:model-value="$emit('update:whatsapp', $event)"
             outlined
+            class="q-my-sm"
             dense
           ></q-input>
         </div>

src/components/units-manager/add-update-unit-dialog/index.vue

@@ -213,6 +213,7 @@
                 </q-td>
               </template>
             </q-table>
+            <div v-if="check_artistList">Không được để trống</div>
           </div>
 
           <!-- ngân hàng -->
@@ -502,6 +503,7 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    check_artistList: { type: Boolean, required: true },
     isUpdate: { type: Boolean, default: false },
     fieldsOptions: { type: Array, required: true },
     fields: { type: Number, required: true },
@@ -846,6 +848,7 @@ export default defineComponent({
     'update:address',
     'update:status',
     'update:artistList',
+    'update:check_artistList',
     'addNewUnit',
   ],
 });

src/components/upload-image/index.vue

 <template>
-  <q-card @click="uploadBanner">
+  <div @click="uploadBanner">
     <div
-      align="center"
-      :class="{
-        'full-height full-width flex flex-center ': isBtn,
-      }"
+      style="
+        border: 2px dashed #5d319e;
+        border-radius: 5px;
+        cursor: pointer;
+        flex-direction: column;
+      "
+      class="flex flex-center"
     >
       <q-icon
         style="color: #5d319e"
         name="mdi-cloud-upload"
         :size="isBtn ? 'md' : 'md'"
       ></q-icon>
-      <span>{{ $t('uploadImage.uploadBanner') }}</span>
+      <span>Tải lên ảnh bìa</span>
     </div>
     <input
       ref="upload"
@@ -20,7 +23,7 @@
       accept="image/png, image/jpeg"
       @change="$emit('selectedFile', $event.target.files)"
     />
-  </q-card>
+  </div>
 </template>
 
 <script lang="ts" src="./UploadImage.ts"></script>

src/pages/bai-viet/index.vue

@@ -121,6 +121,7 @@
     </div>
 
     <AddUpdatePostDialog
+      v-if="addPostDialogIsOpened"
       v-model:isOpened="addPostDialogIsOpened"
       v-model:name="name"
       v-model:category="category"

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

@@ -61,6 +61,7 @@
             v-model:facebook-message="facebookMessage"
             v-model:instagram="instagram"
             v-model:whatsapp="whatsapp"
+            v-model:hidden_img="hidden_img"
             :errorMessPhoneNumber="errorMessPhoneNumber"
             :errorMessEmail="errorMessEmail"
             :errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"

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

@@ -119,6 +119,7 @@ export default defineComponent({
     const facebookMessage: Ref<string | null | undefined> = ref();
     const instagram: Ref<string | null | undefined> = ref();
     const whatsapp: Ref<string | null | undefined> = ref();
+    const hidden_img = ref(false);
 
     // state sử dụng trong tab vab account
     const banners: Ref<BannerType[]> = ref([]);
@@ -654,6 +655,10 @@ export default defineComponent({
 
     const checkValidate = () => {
       let hasError = false;
+      if (!avatarFile.value) {
+        hasError = true;
+        hidden_img.value = true;
+      }
       if (!artistCode.value || !artistCode.value?.trim().length) {
         hasError = true;
         artistCodeRules.value = true;
@@ -856,6 +861,7 @@ export default defineComponent({
       void getTypeCardOptions();
     });
     return {
+      hidden_img,
       tab,
       getInformationArtist,
       id,

src/pages/don-vi-chu-quan/index.vue

@@ -142,6 +142,7 @@
       v-model:representative="unitRepresentative"
       v-model:status="unitStatus"
       v-model:artistList="unitArtistList"
+      v-model:check_artistList="check_artistList"
       isUpdate
       @addNewUnit="addNewUnit"
     />
@@ -158,6 +159,7 @@
       v-model:representative="unitRepresentative"
       v-model:status="unitStatus"
       v-model:artistList="unitArtistList"
+      v-model:check_artistList="check_artistList"
       @addNewUnit="updateNewUnit"
     />
   </div>
@@ -291,6 +293,7 @@ export default defineComponent({
     const unitStatus: Ref<number> = ref(UnitStatus.active);
     const unitArtistList: Ref<unknown[]> = ref([]);
     const unitId: Ref<number | undefined> = ref(undefined);
+    const check_artistList = ref(false);
 
     const getListUnits = async () => {
       try {
@@ -443,6 +446,12 @@ export default defineComponent({
 
     //add
     const addNewUnit = async () => {
+      let hasError = false;
+      if (unitArtistList.value.length !== 0) {
+        hasError = true;
+        check_artistList.value = true;
+      }
+      if (hasError === false) {
         const data = {
           name: unitName.value,
           code: unitCode.value,
@@ -470,6 +479,7 @@ export default defineComponent({
           });
           void getListUnits();
         }
+      }
     };
 
     onMounted(() => {
@@ -477,6 +487,7 @@ export default defineComponent({
       void getFieldOptions();
     });
     return {
+      check_artistList,
       getDetailUnit,
       addUnitDialogIsOpened,
       updateUnitDialogIsOpened,

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

@@ -117,6 +117,7 @@ export default defineComponent({
     const facebookMessage: Ref<string | null | undefined> = ref();
     const instagram: Ref<string | null | undefined> = ref();
     const whatsapp: Ref<string | null | undefined> = ref();
+    const hidden_img = ref(false);
 
     // state sử dụng trong tab vab account
     const banners: Ref<BannerType[]> = ref([]);
@@ -590,6 +591,10 @@ export default defineComponent({
     };
     const checkValidate = () => {
       let hasError = false;
+      if (!avatarFile.value) {
+        hasError = true;
+        hidden_img.value = true;
+      }
       if (!artistCode.value || !artistCode.value?.trim().length) {
         hasError = true;
         artistCodeRules.value = true;
@@ -766,6 +771,7 @@ export default defineComponent({
 
     const deleteAvatar = () => {
       avatar.value = null;
+      avatarFile.value = null;
     };
     const confirmChangeIsDefault = (item: changeIsDefault) => {
       if (item.isDefault === 2) {
@@ -782,6 +788,7 @@ export default defineComponent({
       void getTypeCardOptions();
     });
     return {
+      hidden_img,
       tab,
       id,
       route,

src/pages/them-nghe-sy/index.vue

@@ -61,6 +61,7 @@
             v-model:facebook-message="facebookMessage"
             v-model:instagram="instagram"
             v-model:whatsapp="whatsapp"
+            v-model:hidden_img="hidden_img"
             :errorMessPhoneNumber="errorMessPhoneNumber"
             :errorMessEmail="errorMessEmail"
             :errorMessPhoneNumberAdminister="errorMessPhoneNumberAdminister"