update

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">
+        <div class="col-12">
           <q-carousel
             v-if="banners.length"
             v-model="slide"
@@ -46,7 +46,7 @@
             arrows
             navigation
             infinite
-            height="350px"
+            height="28rem"
             style="border: 2px solid #f1f1f1"
           >
             <q-carousel-slide
@@ -58,7 +58,7 @@
                   ? bannerInfo.url
                   : configImg.API_IMAGE_ENDPOINT + bannerInfo.bannerUrl
               "
-              style="height: 350px; aspect-ratio: 1/5"
+              style="height: 28rem; aspect-ratio: 1/5"
             >
               <template v-slot:default>
                 <div align="right">
@@ -85,7 +85,7 @@
           ></UploadImage>
           <UploadImage v-else @selectedFile="uploadBanner"> </UploadImage>
         </div>
-        <div class="col-6">
+        <div class="col-12">
           <q-editor
             :model-value="shortDescription"
             @update:model-value="$emit('update:shortDescription', $event)"
@@ -178,7 +178,7 @@
     </div>
     <div class="col-12 q-mt-sm">
       <div class="row q-col-gutter-lg q-pb-md" align="center" justify="center">
-        <div class="col-4">
+        <div class="col-4" style="width: 27.06rem; margin-left: 9.3rem">
           <div class="flex flex-center">
             <div class="text-h6 text-weight-regular q-py-md">
               Nổi bật(Embed)
@@ -209,7 +209,7 @@
             @click="$emit('openDialogUploadEmbed')"
             class="flex flex-center"
             :style="
-              socialEmbedded !== null ? 'height: 580px;' : 'height: 580px'
+              socialEmbedded !== null ? 'height: 36.25rem;' : 'height: 36.25rem'
             "
           >
             <iframe
@@ -241,7 +241,7 @@
           </div>
         </div>
 
-        <div class="col-4">
+        <div class="col-4" style="width: 27.06rem">
           <div class="flex flex-center">
             <div class="text-h6 text-weight-regular q-py-md">Story</div>
             <q-space></q-space>
@@ -258,7 +258,7 @@
           </div>
           <div
             class="flex flex-center"
-            :style="stories.length ? 'height: 580px' : 'height: 580px;'"
+            :style="stories.length ? 'height: 36.25rem' : 'height: 36.25rem;'"
             bordered
             v-if="!stories.length"
           >
@@ -290,12 +290,14 @@
             arrows
             navigation
             infinite
+            style="height: 28rem"
           >
             <q-carousel-slide
               v-for="(story, storyIdx) in stories"
               :key="storyIdx"
               :name="storyIdx"
               class="q-pa-none"
+              style="height: 28rem"
             >
               <div>
                 <q-img
@@ -330,10 +332,10 @@
           </q-carousel>
         </div>
 
-        <div class="col-4">
+        <div class="col-4" style="width: 27.06rem">
           <div class="text-h6 text-weight-regular q-py-md">Lịch</div>
           <q-date
-            style="width: 100%; height: 580px"
+            style="width: 100%; height: 36.25rem"
             :model-value="formatSchedules"
             @update:model-value="$emit('update:formatSchedules', $event)"
             multiple

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

@@ -231,8 +231,6 @@
           ></q-input>
         </div>
       </div>
-    </div>
-    <div class="col-5 q-ml-xl">
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.field') }}
@@ -286,6 +284,8 @@
           ></q-select>
         </div>
       </div>
+    </div>
+    <div class="col-5 q-ml-xl">
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.qualification') }}

src/components/detailBooking/index.vue

@@ -9,9 +9,11 @@
         <q-card-section>
           <q-item>
             <q-item-section>
-              <q-item-label class="text-h6 text-weight-regular">{{
-                $t('listBooking.dialogLabel.title')
-              }}</q-item-label>
+              <q-item-label
+                class="text-h6 text-weight-regular"
+                style="text-align: center"
+                >{{ $t('listBooking.dialogLabel.title') }}</q-item-label
+              >
             </q-item-section>
           </q-item>
         </q-card-section>
@@ -23,12 +25,16 @@
               <div class="col-4 fs-14 color">
                 {{ $t('listBooking.titleColumnsTable.bookingCode') }}:
               </div>
-              <div class="col-8 fs-14">{{ detailInfoBooking.bookingCode }}</div>
+              <div class="col-8 fs-14">
+                {{ detailInfoBooking.bookingCode }}
+              </div>
 
               <div class="col-4 fs-14 color">
                 {{ $t('listBooking.titleColumnsTable.artistName') }}:
               </div>
-              <div class="col-8 fs-14">{{ detailInfoBooking.artistName }}</div>
+              <div class="col-8 fs-14">
+                {{ detailInfoBooking.artistName }}
+              </div>
 
               <div class="col-4 fs-14 color">
                 {{ $t('listBooking.titleColumnsTable.userName') }}:
@@ -66,15 +72,61 @@
               <div class="col-8 fs-14">{{ detailInfoBooking.like }}</div> -->
 
               <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.status') }}:
+                {{ $t('listBooking.titleColumnsTable.activeStatus') }}:
+              </div>
+              <div class="col-8 fs-14">
+                <q-chip
+                  size="sm"
+                  color="secondary"
+                  v-if="detailInfoBooking.activeStatus === 0"
+                  >Chờ nhận</q-chip
+                >
+                <q-chip
+                  size="sm"
+                  color="info"
+                  v-else-if="detailInfoBooking.status === 1"
+                  >Đã thực hiện</q-chip
+                >
+                <q-chip size="sm" color="warning" v-else>Từ chối</q-chip>
               </div>
-              <div class="col-8 fs-14">{{ detailInfoBooking.status }}</div>
 
               <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.activeStatus') }}:
+                {{ $t('listBooking.titleColumnsTable.status') }}:
               </div>
               <div class="col-8 fs-14">
-                {{ detailInfoBooking.activeStatus }}
+                <q-chip
+                  size="sm"
+                  color="secondary"
+                  v-if="detailInfoBooking.status === 0"
+                  >Chờ nhận</q-chip
+                >
+                <q-chip
+                  size="sm"
+                  color="info"
+                  v-else-if="detailInfoBooking.status === 1"
+                  >Đã thực hiện</q-chip
+                >
+                <q-chip
+                  size="sm"
+                  color="warning"
+                  v-else-if="detailInfoBooking.status === 2"
+                  >Chưa thực hiện</q-chip
+                >
+                <q-chip
+                  size="sm"
+                  color="warning"
+                  v-else-if="detailInfoBooking.status === 3"
+                  >Hoãn lịch</q-chip
+                >
+                <q-chip
+                  size="sm"
+                  color="warning"
+                  v-else-if="detailInfoBooking.status === 4"
+                  >Hủy lịch</q-chip
+                >
+                <q-chip size="sm" color="secondary" v-else
+                  >Thay đổi lịch</q-chip
+                >
               </div>
             </div>
           </div>
@@ -120,6 +172,7 @@ export default defineComponent({
   },
   emits: ['update:showDialog', 'click:CloseBtn'],
 });
+3;
 </script>
 <style scoped>
 .fs-14 {

src/components/upload-image/index.vue

@@ -15,6 +15,7 @@
         :size="isBtn ? 'md' : 'md'"
       ></q-icon>
       <span>Tải lên ảnh bìa</span>
+      <div style="font-size: 12px">(kích cỡ: 1914x448)</div>
     </div>
     <input
       ref="upload"

src/pages/danh-sach-booking/index.vue

@@ -6,23 +6,93 @@
     </div>
     <q-space></q-space>
     <div class="col-2">
-      <q-input
+      <q-select
         v-model="sreachArtist"
+        :options="artistOptions"
+        option-label="name"
+        option-value="id"
         dense
         outlined
         :label="$t('listBooking.titleColumnsTable.artistName')"
         clearable
-      ></q-input>
+      ></q-select>
     </div>
     <div class="col-2">
-      <q-input
+      <q-select
         v-model="sreachUserName"
+        :options="customerOptions"
+        option-label="name"
+        option-value="id"
         dense
         outlined
         :label="$t('listBooking.titleColumnsTable.userName')"
         clearable
-      ></q-input>
+      ></q-select>
+    </div>
+
+    <div class="col-2">
+      <!-- v-model="date[0]" -->
+      <q-input
+        :label="$t('listBooking.titleColumnsTable.fromTime')"
+        readonly
+        dense
+        outlined
+      >
+        <template v-slot:append>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy
+              ref="qDateProxy"
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <!-- v-model="date[0]" -->
+              <q-date mask="DD/MM/YYYY" no-unset>
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    :label="$t('listBooking.crudActions.cancel')"
+                    color="primary"
+                    flat
+                  ></q-btn>
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
     </div>
+    <div class="col-2">
+      <!-- v-model="date[1]" -->
+      <q-input
+        :label="$t('listBooking.titleColumnsTable.toTime')"
+        readonly
+        dense
+        outlined
+      >
+        <template v-slot:append>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy
+              ref="qDateProxy"
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <!-- v-model="date[1]" -->
+              <q-date mask="DD/MM/YYYY" no-unset>
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    :label="$t('listBooking.crudActions.cancel')"
+                    color="primary"
+                    flat
+                  ></q-btn>
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+    </div>
+
     <div class="col-auto">
       <q-btn
         class="q-mr-sm"
@@ -101,25 +171,6 @@
           </q-td>
         </template>
 
-        <!-- <template v-slot:body-cell-activeStatus="rowData">
-          <q-td>
-            <div align="center">
-              <q-chip
-                :color="
-                  rowData.value === ActiveStatus.active ? 'positive' : 'orange'
-                "
-                text-color="white"
-                size="sm"
-              >
-                {{
-                  rowData.value === ActiveStatus.active
-                    ? $t('listBooking.statusLabel.activeEvent')
-                    : $t('listBooking.statusLabel.inactiveEvent')
-                }}
-              </q-chip>
-            </div>
-          </q-td>
-        </template> -->
         <template v-slot:body-cell-content="item">
           <td>
             <div class="ellipsis-3-lines">
@@ -157,8 +208,14 @@ import { AxiosResponse } from 'axios';
 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
-import { PaginationResponse, ListBooking } from 'src/assets/type';
+import {
+  PaginationResponse,
+  ListBooking,
+  ArtistInfoType,
+  CustomerType,
+} from 'src/assets/type';
 import detailBooking from '../../components/detailBooking/index.vue';
+import moment from 'moment';
 
 export default defineComponent({
   components: {
@@ -296,9 +353,9 @@ export default defineComponent({
       { value: 0, text: 'Chờ nhận', color: 'secondary' },
       { value: 1, text: 'Đã thực hiện', color: 'info' },
       { value: 2, text: 'Chưa thực hiện', color: 'warning' },
-      { value: 3, text: 'Hoãn lịch', color: 'secondary' },
-      { value: 4, text: 'Hủy lịch', color: 'info' },
-      { value: 5, text: 'Thay đổi lịch', color: 'warning' },
+      { value: 3, text: 'Hoãn lịch', color: 'warning' },
+      { value: 4, text: 'Hủy lịch', color: 'warning' },
+      { value: 5, text: 'Thay đổi lịch', color: 'secondary' },
     ]);
 
     const detailInfoBooking: Ref<ListBooking | null> = ref(null);
@@ -314,6 +371,49 @@ export default defineComponent({
       void getListBooking();
     };
 
+    const date = ref([
+      moment(new Date()).format('DD/MM/YYYY'),
+      moment(new Date()).add(7, 'days').format('DD/MM/YYYY'),
+    ]);
+    const changeTime = () => {
+      const startTime = Number(
+        moment(date.value[0], 'DD/MM/YYYY').format('YYYYMMDD')
+      );
+      const endTime = Number(
+        moment(date.value[1], 'DD/MM/YYYY').format('YYYYMMDD')
+      );
+      if (startTime > endTime) {
+        date.value = [date.value[1], date.value[0]];
+      }
+    };
+
+    const artistOptions: Ref<ArtistInfoType[] | null> = ref([]);
+    const customerOptions: Ref<CustomerType[] | null> = ref([]);
+
+    // const getArtistOptions = async () => {
+    //   const response = (await api({
+    //     url: API_PATHS.getListArtists,
+    //     method: 'GET',
+    //     params: {},
+    //   })) as AxiosResponse<BaseResponseBody<ArtistInfoType[]>>;
+    //   if (response.data.error.code === config.API_RES_CODE.OK.code) {
+    //     console.log(response, 'sss');
+    //     artistOptions.value = response.data.data;
+    //   }
+    // };
+
+    // const getCustomerOptions = async () => {
+    //   const response = (await api({
+    //     url: API_PATHS.listCustomers,
+    //     method: 'GET',
+    //     params: {},
+    //   })) as AxiosResponse<BaseResponseBody<CustomerType[]>>;
+    //   if (response.data.error.code === config.API_RES_CODE.OK.code) {
+    //     console.log(response, 'sss111');
+    //     customerOptions.value = response.data.data;
+    //   }
+    // };
+
     const getListBooking = async () => {
       try {
         const response = (await api({
@@ -354,8 +454,13 @@ export default defineComponent({
 
     onMounted(() => {
       void getListBooking();
+      // void getArtistOptions();
+      // void getCustomerOptions();
     });
     return {
+      changeTime,
+      customerOptions,
+      artistOptions,
       detailInfoBooking,
       showDialog,
       detail,

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

@@ -627,13 +627,6 @@ export default defineComponent({
         );
       }
 
-      // if (!isMobilePhone(phoneNumber.value as string)) {
-      //   hasError = true;
-      //   phoneNumberRules.value = true;
-      //   errorMessPhoneNumber.value = i18n.global.t(
-      //     'artist.artistInformation.validateMessages.isPhone'
-      //   );
-      // }
       if (!email.value || !email.value?.trim().length) {
         hasError = true;
         emailRules.value = true;
@@ -641,13 +634,6 @@ export default defineComponent({
           'artist.artistInformation.validateMessages.requireEmail'
         );
       }
-      // if (!isEmail(email.value as string)) {
-      //   hasError = true;
-      //   emailRules.value = true;
-      //   errorMessEmail.value = i18n.global.t(
-      //     'artist.artistInformation.validateMessages.isEmail'
-      //   );
-      // }
 
       // if (
       //   !phoneNumberAdminister.value ||
@@ -723,7 +709,6 @@ export default defineComponent({
             avatar: avatarUploaded.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
-
             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
             birthday: birthday.value + ' 00:00:00',
             sex: sex.value,