update

* booking
* carousel

src/assets/type.ts

@@ -409,7 +409,8 @@ export type ListBooking = {
   fromTime: string;
   toTime: string;
   status: number;
-  activeStatus: number;
+  favoriteScore: number;
+  performStatus: number;
   fee: string;
 };
 

src/components/artist-information/VAB-account/VabAccount.ts

@@ -71,6 +71,7 @@ export default defineComponent({
     };
 
     return {
+      autoplay: ref(true),
       router,
       slide,
       slideStory,

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

@@ -42,9 +42,9 @@
             v-if="banners.length"
             v-model="slide"
             :key="banners.length"
+            :autoplay="autoplay"
             animated
             arrows
-            navigation
             infinite
             height="30rem"
             style="border: 2px solid #f1f1f1"
@@ -296,6 +296,7 @@
           <q-carousel
             v-else
             v-model="slideStory"
+            :autoplay="autoplay"
             animated
             arrows
             infinite
@@ -318,8 +319,8 @@
                 >
                   <div
                     style="
-                      background: center bottom;
-                      text-align: justify;
+                      background: bottom;
+                      text-align: start;
                       height: 100%;
                       display: flex;
                       flex-direction: column;

src/components/detailBooking/index.vue

@@ -46,11 +46,6 @@
               </div>
               <div class="col-8 fs-14">{{ detailInfoBooking.address }}</div>
 
-              <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.content') }}:
-              </div>
-              <div class="col-8 fs-14">{{ detailInfoBooking.content }}</div>
-
               <div class="col-4 fs-14 color">
                 {{ $t('listBooking.titleColumnsTable.fromTime') }}:
               </div>
@@ -66,71 +61,79 @@
               </div>
               <div class="col-8 fs-14">{{ detailInfoBooking.fee }}</div>
 
-              <!-- <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.like') }}:
+              <div class="col-4 fs-14 color">
+                {{ $t('listBooking.titleColumnsTable.favoriteScore') }}:
+              </div>
+              <div class="col-8 fs-14">
+                {{ detailInfoBooking.favoriteScore }}
               </div>
-              <div class="col-8 fs-14">{{ detailInfoBooking.like }}</div> -->
 
               <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.activeStatus') }}:
+                {{ $t('listBooking.titleColumnsTable.status') }}:
               </div>
               <div class="col-8 fs-14">
                 <q-chip
                   size="sm"
                   color="secondary"
-                  v-if="detailInfoBooking.activeStatus === 0"
+                  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
+                  >Đã nhận</q-chip
                 >
                 <q-chip size="sm" color="warning" v-else>Từ chối</q-chip>
               </div>
 
               <div class="col-4 fs-14 color">
-                {{ $t('listBooking.titleColumnsTable.status') }}:
+                {{ $t('listBooking.titleColumnsTable.performStatus') }}:
               </div>
               <div class="col-8 fs-14">
                 <q-chip
                   size="sm"
                   color="secondary"
-                  v-if="detailInfoBooking.status === 0"
+                  v-if="detailInfoBooking.performStatus === 0"
                   >Chờ nhận</q-chip
                 >
                 <q-chip
                   size="sm"
                   color="info"
-                  v-else-if="detailInfoBooking.status === 1"
+                  v-else-if="detailInfoBooking.performStatus === 1"
                   >Đã thực hiện</q-chip
                 >
                 <q-chip
                   size="sm"
                   color="warning"
-                  v-else-if="detailInfoBooking.status === 2"
+                  v-else-if="detailInfoBooking.performStatus === 2"
                   >Chưa thực hiện</q-chip
                 >
                 <q-chip
                   size="sm"
                   color="warning"
-                  v-else-if="detailInfoBooking.status === 3"
+                  v-else-if="detailInfoBooking.performStatus === 3"
                   >Hoãn lịch</q-chip
                 >
                 <q-chip
                   size="sm"
                   color="warning"
-                  v-else-if="detailInfoBooking.status === 4"
+                  v-else-if="detailInfoBooking.performStatus === 4"
                   >Hủy lịch</q-chip
                 >
                 <q-chip size="sm" color="secondary" v-else
                   >Thay đổi lịch</q-chip
                 >
               </div>
+
+              <div class="col-4 fs-14 color">
+                {{ $t('listBooking.titleColumnsTable.content') }}:
+              </div>
+              <div class="col-8 fs-14">{{ detailInfoBooking.content }}</div>
             </div>
           </div>
         </q-card-section>
+        <q-separator />
         <q-card-actions align="right">
           <q-btn
             color="grey"

src/i18n/vi/index.ts

@@ -931,9 +931,9 @@ export default {
       fromTime: 'Thời gian bắt đầu',
       toTime: 'Thời gian kết thúc',
       fee: 'Giá',
-      like: 'Số lượt thích',
+      favoriteScore: 'Số lượt thích',
       status: 'T.T Booking',
-      activeStatus: 'T.T Thực hiện',
+      performStatus: 'T.T Thực hiện',
       action: 'Chức năng',
     },
     dialogLabel: {

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

@@ -32,9 +32,9 @@
     <div class="col-2 sreach">
       <q-select
         v-model="sreachStatus"
-        :options="BookingStatus"
-        option-label="text"
-        option-value="value"
+        :options="ListStatusBooking"
+        option-label="name"
+        option-value="id"
         dense
         outlined
         :label="$t('listBooking.titleColumnsTable.status')"
@@ -43,20 +43,20 @@
     </div>
     <div class="col-2 sreach">
       <q-select
-        v-model="sreachActiveStatus"
-        :options="Status"
-        option-label="text"
-        option-value="value"
+        v-model="sreachPerformStatus"
+        :options="ListPerformStatus"
+        option-label="name"
+        option-value="id"
         dense
         outlined
-        :label="$t('listBooking.titleColumnsTable.activeStatus')"
+        :label="$t('listBooking.titleColumnsTable.performStatus')"
         clearable
       ></q-select>
     </div>
 
     <div class="col-2 sreach">
-      <!-- v-model="date[0]" -->
       <q-input
+        v-model="date[0]"
         :label="$t('listBooking.titleColumnsTable.fromTime')"
         readonly
         dense
@@ -69,8 +69,7 @@
               transition-show="scale"
               transition-hide="scale"
             >
-              <!-- v-model="date[0]" -->
-              <q-date mask="DD/MM/YYYY" no-unset>
+              <q-date v-model="date[0]" mask="DD/MM/YYYY" no-unset>
                 <div class="row items-center justify-end">
                   <q-btn
                     v-close-popup
@@ -86,8 +85,8 @@
       </q-input>
     </div>
     <div class="col-2 sreach">
-      <!-- v-model="date[1]" -->
       <q-input
+        v-model="date[1]"
         :label="$t('listBooking.titleColumnsTable.toTime')"
         readonly
         dense
@@ -100,8 +99,7 @@
               transition-show="scale"
               transition-hide="scale"
             >
-              <!-- v-model="date[1]" -->
-              <q-date mask="DD/MM/YYYY" no-unset>
+              <q-date v-model="date[1]" mask="DD/MM/YYYY" no-unset>
                 <div class="row items-center justify-end">
                   <q-btn
                     v-close-popup
@@ -167,29 +165,29 @@
 
         <template v-slot:body-cell-status="item">
           <q-td align="center">
-            <template v-for="(data, idx) in BookingStatus">
+            <template v-for="(data, idx) in ListStatusBooking">
               <q-chip
-                v-if="item.row.status === data.value"
+                v-if="item.row.status === data.id"
                 :key="`status-${idx}-${item}`"
                 size="sm"
                 label
                 :color="data.color"
-                >{{ data.text }}</q-chip
+                >{{ data.name }}</q-chip
               >
             </template>
           </q-td>
         </template>
 
-        <template v-slot:body-cell-activeStatus="item">
+        <template v-slot:body-cell-performStatus="item">
           <q-td align="center">
-            <template v-for="(data, idx) in Status">
+            <template v-for="(data, idx) in ListPerformStatus">
               <q-chip
-                v-if="item.row.activeStatus === data.value"
-                :key="`activeStatus-${idx}-${item}`"
+                v-if="item.row.performStatus === data.id"
+                :key="`performStatus-${idx}-${item}`"
                 size="sm"
                 label
                 :color="data.color"
-                >{{ data.text }}</q-chip
+                >{{ data.name }}</q-chip
               >
             </template>
           </q-td>
@@ -330,12 +328,12 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'like',
-        field: 'like',
+        name: 'favoriteScore',
+        field: 'favoriteScore',
         required: true,
-        label: i18n.global.t('listBooking.titleColumnsTable.like'),
-        headerStyle: 'text-align: center !important; width: 9%',
-        align: 'left',
+        label: i18n.global.t('listBooking.titleColumnsTable.favoriteScore'),
+        headerStyle: 'text-align: center !important; width: 7%',
+        align: 'center',
         sortable: false,
       },
       {
@@ -343,16 +341,16 @@ export default defineComponent({
         field: 'status',
         required: true,
         label: i18n.global.t('listBooking.titleColumnsTable.status'),
-        headerStyle: 'text-align: center !important; width: 7%',
+        headerStyle: 'text-align: center !important; width: 8%',
         align: 'center',
         sortable: false,
       },
       {
-        name: 'activeStatus',
-        field: 'activeStatus',
+        name: 'performStatus',
+        field: 'performStatus',
         required: true,
-        label: i18n.global.t('listBooking.titleColumnsTable.activeStatus'),
-        headerStyle: 'text-align: center !important; width: 7%',
+        label: i18n.global.t('listBooking.titleColumnsTable.performStatus'),
+        headerStyle: 'text-align: center !important; width: 8%',
         align: 'center',
         sortable: false,
       },
@@ -367,31 +365,35 @@ export default defineComponent({
       },
     ];
 
-    const BookingStatus = ref([
-      { value: 0, text: 'Chờ nhận', color: 'secondary' },
-      { value: 1, text: 'Đã nhận', color: 'info' },
-      { value: 2, text: 'Từ chối', color: 'warning' },
+    const ListStatusBooking = ref([
+      { id: 0, name: 'Chờ nhận', color: 'secondary' },
+      { id: 1, name: 'Đã nhận', color: 'info' },
+      { id: 2, name: 'Từ chối', color: 'warning' },
     ]);
 
-    const Status = ref([
-      { 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: 'warning' },
-      { value: 4, text: 'Hủy lịch', color: 'warning' },
-      { value: 5, text: 'Thay đổi lịch', color: 'secondary' },
+    const ListPerformStatus = ref([
+      { id: 0, name: 'Chờ nhận', color: 'secondary' },
+      { id: 1, name: 'Đã thực hiện', color: 'info' },
+      { id: 2, name: 'Chưa thực hiện', color: 'warning' },
+      { id: 3, name: 'Hoãn lịch', color: 'warning' },
+      { id: 4, name: 'Hủy lịch', color: 'warning' },
+      { id: 5, name: 'Thay đổi lịch', color: 'secondary' },
     ]);
 
-    const detailInfoBooking: Ref<ListBooking | null> = ref(null);
     const showDialog = ref(false);
+    const detailInfoBooking: Ref<ListBooking | null> = ref(null);
     const listBooking: Ref<unknown[]> = ref([]);
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(1);
     const sreachArtist: Ref<string | null> = ref(null);
     const sreachUserName: Ref<string | null> = ref(null);
-    const sreachStatus = ref(null);
-    const sreachActiveStatus = ref(null);
+    const sreachStatus: Ref<
+      { id: number; name: string; color: string } | undefined
+    > = ref(undefined);
+    const sreachPerformStatus: Ref<
+      { id: number; name: string; color: string } | undefined
+    > = ref(undefined);
     const changePageSize = () => {
       pageIndex.value = 1;
       void getListBooking();
@@ -449,7 +451,9 @@ export default defineComponent({
             artistId: sreachArtist.value,
             custId: sreachUserName.value,
             status: sreachStatus.value,
-            performBooking: sreachActiveStatus.value,
+            performBooking: sreachPerformStatus.value,
+            fromTime: moment(date.value[0], 'DD/MM/YYYY').format('DD/MM/YYYY'),
+            toTime: moment(date.value[1], 'DD/MM/YYYY').format('DD/MM/YYYY'),
           },
         })) as AxiosResponse<BaseResponseBody<PaginationResponse<ListBooking>>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
@@ -484,6 +488,7 @@ export default defineComponent({
       void getArrayCust();
     });
     return {
+      date,
       changeTime,
       customerOptions,
       artistOptions,
@@ -499,10 +504,10 @@ export default defineComponent({
       totalPage,
       changePageSize,
       getListBooking,
-      BookingStatus,
-      Status,
+      ListStatusBooking,
+      ListPerformStatus,
       sreachStatus,
-      sreachActiveStatus,
+      sreachPerformStatus,
     };
   },
 });