ShowEasyFrontEnd/FrontEnd/components/user/bookingListContent.vue

<template>
  <div>
    <Swiper class="swiper tw-mb-[15px] md:tw-mb-[30px]" :options="swiperOption" @click="slideClicked">
      <SwiperSlide v-for="(item, index) in bookingType" :key="index"
        :class="['tw-transition-all tw-delay-75 tw-ease-in-out', currentType === item
          ? 'tw-flex tw-justify-center tw-py-[13px] tw-border-b-2 tw-border-solid tw-border-0 tw-border-primary-1 tw-text-primary-1 tw-cursor-pointer'
          : 'tw-flex tw-justify-center tw-py-[13px] tw-border-b tw-border-base-disable hover:tw-border-b-2 tw-border-solid tw-border-0 tw-border-transparent hover:tw-text-primary-1 tw-cursor-pointer']">
        {{ item }}
      </SwiperSlide>
    </Swiper>
    <h4 class="t14 tw-font-bold md:t16 tw-mb-[10px]">{{ $t("Filter") }}</h4>
    <div class="element tw-w-fit md:tw-w-fit tw-mb-[15px] md:tw-mb-[30px]">
      <ElementSelect :select="{
        required: false,
      }" :selectList="categoryList" :default="0" @change="categorySelected" :defaultOptionMsg="$t('All Categories')">
      </ElementSelect>
    </div>
    <UserServiceItem v-for="(item, index) in bookingList" :key="index" :info="item" @contact-us="activeContactUs"
      @upload-remittance-slip="activeUploadSlip"></UserServiceItem>
    <!-- <div v-if="bookingList.length < 1" class="tw-mt-[5px] tw-mb-[60px]">
      <div class="tw-flex tw-justify-center tw-mt-[60px] tw-mb-[30px]">
        <img :src="emptyImg" alt="" class="tw-h-[142px] tw-w-[160px]" />
      </div>
      <div class="tw-text-center tw-body-3 tw-text-neutrals-800 tw-mb-[30px]">
        {{
        currentType === "全部"
        ? $t(`No Bookings yet ...`)
        : $t(`You don't have any ${currentType} bookings`)
        }}
      </div>
      <div class="tw-flex tw-justify-center tw-mb-[30px]">
        <button
          class="tw-transition tw-justify-center tw-items-center tw-btn-md tw-text-white tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-xl tw-w-fit tw-h-fit">
          {{ $t("Explore with ShowEasy") }}
        </button>
      </div>
    </div> -->
    <!-- <div v-if="bookingList.length < 1"
      class="tw-mb-[60px] tw-py-[60px] tw-pl-[10px] md:tw-body-2">
       {{ $t("Sorry, we couldn't find anything for ") + searchQuery }}
      {{ $t("Sorry, we couldn't find anything for ") }}

    </div> -->

    <div class="tw-flex tw-justify-end">
      <pagination :pageLength="pageLength" @update="updatePage"></pagination>
    </div>

    <ContactUsModal :ContactUs="contactUs"></ContactUsModal>
    <UploadRemittanceSlipModal :uploadBookingID="uploadBookingID"></UploadRemittanceSlipModal>
  </div>
</template>
<script>
import ElementSelect from "@/components/user/userSelect.vue";
import UserServiceItem from "./userServiceItem.vue";
import pagination from "@/components/newComponent/pagination/pagination.vue";
import ContactUsModal from "@/components/booking/Modal/ContactUsModal.vue";
import UploadRemittanceSlipModal from "@/components/booking/Modal/UploadRemittanceSlipModal.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    ElementSelect,
    UserServiceItem,
    Swiper,
    SwiperSlide,
    pagination,
    ContactUsModal,
    UploadRemittanceSlipModal,
  },
  props: {
    searchQuery: {
      type: String,
    },
    width: {
      type: Number
    },
    userData: {
      type: Object
    },
    searchValue: {
      type: String
    }
  },
  data() {
    return {

      bookingType: [
        this.$t("booking.All"),
        this.$t("booking.Awaiting Confirmation"),
        this.$t("booking.Processing"),
        this.$t("booking.Completed"),
        this.$t("booking.Cancelled"),
      ],
      currentType: "All",

      emptyImg: require("~/assets/img/companyEmpty.png"),
      contactUs: {
        Phone: "info@showeasy.com",
        Mail: "+886-2-2725-5000",
      },
      swiperOption: {
        slidesPerView: 3,
        breakpoints: {
          768: {
            slidesPerView: 5,
          },
        },
      },

      currentPage: 1,
      itemsPerPage: 6,
      total: 0,
      categoryValue: "",
      bookingList: [],
      bookingStatus: [],
      subCategoryIDs: [],
      uploadBookingID: "",
      categoryList: [],
      query: "",

    };
  },
  mounted() {
    this.fetchCategory();
  },
  
  watch: {
    searchValue: {
      handler: function () {
        this.query = this.searchValue;
        this.fetchNewBookingList();
        
      },
    },



  },
  async created() {

    await this.fetchNewBookingList();

  },
  computed: {

    result() {
      return this.total;
    },

    pageLength() {
      return Math.ceil(this.result / this.itemsPerPage);
    },

  },

  methods: {

    categorySelected(value) {
      
      this.subCategoryIDs = [];

      if (this.categoryValue != 0) {
        this.subCategoryIDs.push(value);
      } 

      this.fetchNewBookingList();

    },
    slideClicked(swiper) {
      this.currentType = this.bookingType[swiper.clickedIndex];
      if (this.currentType == "0") {
        this.bookingStatus = [];
      } else if (this.currentType == "訂單確認中") {
        this.bookingStatus = ["01"];
      } else if (this.currentType == "訂單處理中") {
        this.bookingStatus = ["02"];
      } else if (this.currentType == "訂單完成") {
        this.bookingStatus = ["03"];
      } else if (this.currentType == "訂單取消") {
        this.bookingStatus = ["04"];
      } else {
        this.bookingStatus = [];
      }

      this.fetchNewBookingList();

    },
    activeContactUs() {
      this.$modal.show("ContactUs");
    },
    activeUploadSlip(bookingid) {
      this.uploadBookingID = bookingid;
      this.$modal.show("UploadRemittanceSlip");
    },
    fetchCategory() {
      this.$axios
        .get(`/trending/api/BookingOnline/BookingCategoryList?Lang=${this.$i18n.localeProperties["langQuery"]}`)
        .then((response) => {
          //console.log(JSON.stringify(response));
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel
            if (data) {
              this.categoryList = data;
              this.categoryList = this.categoryList.map((item) => {
                return {
                  id: item.CategoryID,
                  name: item.CategoryName,
                };
              });

            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    async getBookingList() {

      await this.$axios

        .get(`/trending/api/BookingOnline/BookingCardList?` +
          `&PageIndex=${this.currentPage}` +
          `&PageSize=${this.itemsPerPage}` +
          `&SubCategoryIDs=${JSON.stringify(this.subCategoryIDs)}` +
          `&BookingStatuses=${JSON.stringify(this.bookingStatus)}` +
          `&PaymentStatuses` +
          `&Query=${this.query}` +
          `&Lang=${this.$i18n.localeProperties["langQuery"]}`)

        .then((response) => {
          if (response && response.data && response.data.DATA && response.data.DATA.rel) {
            let data = response.data.DATA.rel;

            if (data.DataList) {
              this.total = data.Total;
              this.bookingList = data.DataList;
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    async fetchNewBookingList() {

      this.currentPage = 1;

      await this.getBookingList();

    },

    updatePage(value) {

      this.currentPage = value;
      window.scrollTo(0, 0);

      this.getBookingList();

    },

  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

:deep() {

  // .v-pagination__navigation{
  //   background-color: #e5e5e5;
  // }
  .v-pagination>li>.v-pagination__item {
    background-color: inherit;
  }

  .v-pagination__navigation {
    background-color: inherit !important;
  }

  .v-pagination__navigation--disabled {
    opacity: 0;
  }
}
</style>