update

src/assets/configurations.example.ts

@@ -82,4 +82,6 @@ export enum API_PATHS {
   updateCategoryPost = 'postCategory/update',
   getListBooking = 'booking',
   getBookingDetail = 'booking/detail',
+  getArrayArtist = 'artist/arrayArtist',
+  getArrayCust = 'customer/arrayCust',
 }

src/assets/type.ts

@@ -412,3 +412,13 @@ export type ListBooking = {
   activeStatus: number;
   fee: string;
 };
+
+export type ListArrayArtist = {
+  id: number;
+  artistName: string;
+};
+
+export type ListArrayCust = {
+  id: number;
+  fullName: string;
+};

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

@@ -93,6 +93,7 @@ export default defineComponent({
     'deleteStories',
     'confirmDeleteSocialEmbedded',
     'click:openAddStoryDialog',
+    'click:openUpdateStoryDialog',
     'confirmDeleteStory',
   ],
 });

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

@@ -245,6 +245,16 @@
           <div class="flex flex-center">
             <div class="text-h6 text-weight-regular q-py-md">Story</div>
             <q-space></q-space>
+            <!-- <q-btn
+              class="q-py-md"
+              v-if="stories !== null"
+              @click="$emit('click:openUpdateStoryDialog')"
+              flat
+              color="primary"
+              icon="mdi-pencil-circle-outline"
+            >
+              <q-tooltip>Chỉnh sửa Story</q-tooltip></q-btn
+            > -->
             <q-btn
               class="q-py-md"
               v-if="stories.length"
@@ -288,7 +298,6 @@
             v-model="slideStory"
             animated
             arrows
-            navigation
             infinite
             style="height: 35rem"
           >
@@ -307,31 +316,20 @@
                   "
                   style="height: 35rem"
                 >
-                  <!-- <q-input
-                    outlined
-                    type="text"
-                    style="font-size: 30px; padding-top: 18.75rem"
-                    readonly
-                  ></q-input> -->
-                  <!-- <q-input
-                    outlined
-                    type="textarea"
-                    class="q-py-sm"
-                    :model-value="story.content"
-                    @update:model-value="$emit('update:content', $event)"
-                    readonly
-                  ></q-input> -->
-                  <div style="background: bottom; padding-top: 320px">
-                    <div
-                      style="
-                        text-align: justify;
-                        background: bottom;
-                        font-size: 30px;
-                      "
-                    >
+                  <div
+                    style="
+                      background: center bottom;
+                      text-align: justify;
+                      height: 100%;
+                      display: flex;
+                      flex-direction: column;
+                      justify-content: flex-end;
+                    "
+                  >
+                    <div style="font-size: 30px">
                       {{ story.title }}
                     </div>
-                    <div style="text-align: justify; background: bottom">
+                    <div>
                       {{ story.content }}
                     </div>
                   </div>

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpenUpdateStory"
+    @update:model-value="$emit('update:isOpenUpdateStory', $event)"
+  >
+    <q-card style="min-width: 600px" bordered>
+      <q-card-section>
+        <q-item>
+          <q-item-section>
+            <q-item-label class="text-h6 text-weight-regular">{{
+              $t('artist.dialogLabel.title.updateStory')
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-card v-if="urlFileLocal" flat>
+              <div align="center">
+                <q-img
+                  :src="imageAPI ? imageAPI : urlFileLocal"
+                  style="aspect-ratio: 16/9"
+                >
+                </q-img>
+              </div>
+            </q-card>
+
+            <UploadImage
+              @selectedFile="uploadStory"
+              class="q-mt-md"
+              :isBtn="true"
+            ></UploadImage>
+
+            <q-input
+              v-model="title"
+              label="Tiêu đề"
+              hide-bottom-space
+              type="text"
+              class="q-my-sm"
+              outlined
+              clearable
+            ></q-input>
+
+            <q-input
+              v-model="content"
+              label="Nội dung"
+              hide-bottom-space
+              type="textarea"
+              class="q-my-sm"
+              outlined
+              clearable
+            ></q-input>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          color="grey"
+          no-caps
+          style="width: 90px"
+          :label="$t('customer.crudActions.cancel')"
+          @click="$emit('click:CloseBtnUpdateStory')"
+        />
+        <q-btn
+          color="primary"
+          no-caps
+          style="width: 90px"
+          :label="$t('customer.crudActions.save')"
+          type="submit"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
+import UploadImage from '../../../upload-image/index.vue';
+import { StoriesType } from 'src/assets/type';
+import { config } from 'src/assets/configurations';
+export default defineComponent({
+  components: {
+    UploadImage,
+  },
+  props: {
+    isOpenUpdateStory: {
+      type: Boolean,
+      required: true,
+    },
+    stories: {
+      type: Object as PropType<StoriesType>,
+      requied: false,
+    },
+  },
+
+  setup(props) {
+    const configImg = config;
+    const id: Ref<number | null> = ref(null);
+    const file: Ref<File | string> = ref('');
+    const title: Ref<string> = ref('');
+    const content: Ref<string> = ref('');
+    const urlFileLocal: Ref<string> = ref('');
+    const imageAPI: Ref<string | null> = ref(null);
+    const uploadStory = (value: FileList) => {
+      urlFileLocal.value = URL.createObjectURL(value[0]);
+      file.value = value[0];
+      imageAPI.value = null;
+    };
+    watch(
+      () => props.isOpenUpdateStory,
+      (value) => {
+        if (value) {
+          id.value = props.stories?.id as number;
+          title.value = props.stories?.title as string;
+          content.value = props.stories?.content as string;
+          urlFileLocal.value = props.stories?.imageUrl as string;
+          imageAPI.value =
+            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+            configImg.API_IMAGE_ENDPOINT + props.stories?.imageUrl;
+        }
+      }
+    );
+    const ResetData = () => {
+      file.value = '';
+      title.value = '';
+      content.value = '';
+      urlFileLocal.value = '';
+    };
+
+    return {
+      uploadStory,
+      urlFileLocal,
+      file,
+      title,
+      content,
+      ResetData,
+      id,
+      configImg,
+      imageAPI,
+    };
+  },
+
+  emits: [
+    'selectedFile',
+    'update:isOpenUpdateStory',
+    'click:CloseBtnUpdateStory',
+  ],
+});
+</script>

src/i18n/vi/index.ts

@@ -413,6 +413,7 @@ export default {
     dialogLabel: {
       title: {
         addStory: 'Thêm Story',
+        updateStory: 'Chỉnh sửa Story',
         addArtist: 'Thêm nghệ sỹ',
         updateArtist: 'Cập nhật nghệ sỹ',
         addAccountBank: 'Thêm tài khoản ngân hàng',

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

@@ -100,6 +100,7 @@
             :stories="stories"
             @deleteStories="DeleteItemStories"
             @click:openAddStoryDialog="isOpenAddStory = true"
+            @click:openUpdateStoryDialog="isOpenUpdateStory = true"
             @confirmDeleteStory="deleteStory"
           ></VabAccount>
         </q-tab-panel>
@@ -170,6 +171,10 @@
       v-model:is-open-add-story="isOpenAddStory"
       @click:CloseBtnAddStory="isOpenAddStory = false"
     ></AddStory>
+    <UpdateStory
+      v-model:is-open-update-story="isOpenUpdateStory"
+      @click:CloseBtnUpdateStory="isOpenUpdateStory = false"
+    ></UpdateStory>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>

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

@@ -19,6 +19,7 @@ import EditBankAccountDialog from 'components/artist-information/bank-account/ed
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
 import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
+import UpdateStory from 'components/artist-information/VAB-account/update-story/index.vue';
 
 import {
   ArtistInfoType,
@@ -56,6 +57,7 @@ export default defineComponent({
     UpdateHotProduct,
     UploadEmbedDialog,
     AddStory,
+    UpdateStory,
   },
 
   setup() {
@@ -68,6 +70,7 @@ export default defineComponent({
     const openUpdateHotProduct: Ref<boolean> = ref(false);
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
     const isOpenAddStory: Ref<boolean> = ref(false);
+    const isOpenUpdateStory: Ref<boolean> = ref(false);
 
     // state
     const fieldOptions: Ref<FieldType[]> = ref([]);
@@ -951,6 +954,7 @@ export default defineComponent({
       confirmDeleteSocialEmbedded,
       changeEmbed,
       isOpenAddStory,
+      isOpenUpdateStory,
       addStory,
       deleteStory,
       UpdateBirtday,

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

@@ -9,7 +9,7 @@
       <q-select
         v-model="sreachArtist"
         :options="artistOptions"
-        option-label="name"
+        option-label="artistName"
         option-value="id"
         dense
         outlined
@@ -21,7 +21,7 @@
       <q-select
         v-model="sreachUserName"
         :options="customerOptions"
-        option-label="name"
+        option-label="fullName"
         option-value="id"
         dense
         outlined
@@ -235,8 +235,8 @@ import Pagination from 'components/pagination/index.vue';
 import {
   PaginationResponse,
   ListBooking,
-  ArtistInfoType,
-  CustomerType,
+  ListArrayArtist,
+  ListArrayCust,
 } from 'src/assets/type';
 import detailBooking from '../../components/detailBooking/index.vue';
 import moment from 'moment';
@@ -413,32 +413,30 @@ export default defineComponent({
       }
     };
 
-    const artistOptions: Ref<ArtistInfoType[] | null> = ref([]);
-    const customerOptions: Ref<CustomerType[] | null> = ref([]);
+    const artistOptions: Ref<ListArrayArtist[] | null> = ref([]);
+    const customerOptions: Ref<ListArrayCust[] | 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 getArrayArtist = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayArtist,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayArtist[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        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 getArrayCust = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayCust,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayCust[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        customerOptions.value = response.data.data;
+      }
+    };
 
     const getListBooking = async () => {
       try {
@@ -448,8 +446,10 @@ export default defineComponent({
           params: {
             pageIndex: pageIndex.value,
             pageSize: pageSize.value,
-            artistName: sreachArtist.value,
-            userName: sreachUserName.value,
+            artistId: sreachArtist.value,
+            custId: sreachUserName.value,
+            status: sreachStatus.value,
+            performBooking: sreachActiveStatus.value,
           },
         })) as AxiosResponse<BaseResponseBody<PaginationResponse<ListBooking>>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
@@ -480,8 +480,8 @@ export default defineComponent({
 
     onMounted(() => {
       void getListBooking();
-      // void getArtistOptions();
-      // void getCustomerOptions();
+      void getArrayArtist();
+      void getArrayCust();
     });
     return {
       changeTime,
@@ -509,6 +509,6 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .sreach {
-  width: 12rem;
+  width: 14rem;
 }
 </style>

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

@@ -19,6 +19,7 @@ import EditBankAccountDialog from 'components/artist-information/bank-account/ed
 import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
 import UpdateHotProduct from 'components/artist-information/UpdateHotProduct/index.vue';
 import AddStory from 'components/artist-information/VAB-account/add-story/index.vue';
+import UpdateStory from 'components/artist-information/VAB-account/update-story/index.vue';
 
 import {
   FieldType,
@@ -58,6 +59,7 @@ export default defineComponent({
     UpdateHotProduct,
     UploadEmbedDialog,
     AddStory,
+    UpdateStory,
   },
 
   setup() {
@@ -71,6 +73,7 @@ export default defineComponent({
     const openUpdateHotProduct: Ref<boolean> = ref(false);
     const isOpenDialogEmbed: Ref<boolean> = ref(false);
     const isOpenAddStory: Ref<boolean> = ref(false);
+    const isOpenUpdateStory: Ref<boolean> = ref(false);
 
     // state
     const fieldOptions: Ref<FieldType[]> = ref([]);
@@ -863,6 +866,7 @@ export default defineComponent({
       confirmDeleteSocialEmbedded,
       changeEmbed,
       isOpenAddStory,
+      isOpenUpdateStory,
       addStory,
       deleteStory,
       UpdateBirtday,

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

@@ -100,6 +100,7 @@
             :stories="stories"
             @deleteStories="DeleteItemStories"
             @click:openAddStoryDialog="isOpenAddStory = true"
+            @click:openUpdateStoryDialog="isOpenUpdateStory = true"
             @confirmDeleteStory="deleteStory"
           ></VabAccount>
         </q-tab-panel>
@@ -170,6 +171,10 @@
       v-model:is-open-add-story="isOpenAddStory"
       @click:CloseBtnAddStory="isOpenAddStory = false"
     ></AddStory>
+    <UpdateStory
+      v-model:is-open-update-story="isOpenUpdateStory"
+      @click:CloseBtnUpdateStory="isOpenUpdateStory = false"
+    ></UpdateStory>
     <div class="col-12 q-mt-md">
       <div class="row">
         <q-space></q-space>