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] 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" :defaultOptionMsg="$t('All Categories')" @change="updateCategory">
      </ElementSelect>
    </div>
    <UserServiceItem v-for="(item, index) in renderList" :key="index" :info="item" @contact-us="activeContactUs"
      @upload-remittance-slip="activeUploadSlip"></UserServiceItem>
    <div v-if="renderList.length < 1 && searchQuery.length < 0" 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 === "All"
        ? $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="renderList.length < 1 && searchQuery.length > 0"
      class="tw-mb-[60px] tw-py-[60px] tw-pl-[10px] md:tw-body-2">
      {{ $t("Sorry, we couldn't find anything for ") + searchQuery }}
    </div>
    <div class="tw-flex tw-justify-end" v-if="renderList.length > 0">
      <pagination :pageLength="pageLength" @update="updateCurrentPage"></pagination>
    </div>
    <ContactUsModal :ContactUs="contactUs"></ContactUsModal>
    <UploadRemittanceSlipModal></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
    }
  },
  data() {
    return {
      apiUrl: process.env.SERVICE_CONSOLE,
      bookingType: [
        this.$t("booking.All"),
        this.$t("booking.Unpaid"),
        this.$t("booking.Processing"),
        this.$t("booking.Completed"),
        this.$t("booking.Cancelled"),
      ],
      previewImage:[],
      currentType: "All",
      filterList: ["All categories"],
      categoryList: [],
      categories: [],
      emptyImg: require("~/assets/img/companyEmpty.png"),
      contactUs: {
        Phone: "info@showeasy.com",
        Mail: "+886-2-2725-5000",
      },
      swiperOption: {
        slidesPerView: 3,
        breakpoints: {
          768: {
            slidesPerView: 5,
          },
        },
      },
      apiEndPoint: process.env.SERVICE_CONSOLE,
      perPageItems: 6,
      currentPage: 1,
      selectedCategory: 0,
      bookingList: [],
    };
  },
  mounted() {
    this.getUserOrderList();
    this.fetchCategory();
  },
  // watch: {
  //   searchQuery: {
  //     handler: function () {
  //       this.
  //     },
  //   },
  // },
  computed: {
    bookingFilter() {
      const categoryList = this.filterByCategory(
        this.bookingList,
        this.selectedCategory
      );
      const tabList = this.filterByTab(categoryList, this.currentType);
      const searchList = this.filterByQuery(tabList, this.searchQuery);
      return searchList;
    },
    renderList() {
      for (let i in this.bookingList) {
        this.getServiceData(this.bookingList[i],i);
      }
      return this.sliceRenderList(this.bookingFilter);
    },
    result() {
      return this.bookingFilter.length;
    },
    pageLength() {
      return Math.ceil(this.result / this.perPageItems);
    },
  },
  methods: {
    slideClicked(swiper) {
      this.currentType = this.bookingType[swiper.clickedIndex];
    },
    activeContactUs() {
      this.$modal.show("ContactUs");
    },
    activeUploadSlip() {
      this.$modal.show("UploadRemittanceSlip");
    },
    fetchCategory() {
      this.$axios
        .get(
          `${this.apiEndPoint}/services-category?lang_code=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {
          this.categories = result.data;
          this.categories = this.categories.map((item) => {
            return {
              id: item.ids["0"],
              name: item.lang_text,
            };
          });
          this.categories.splice(0, 0, null);
          this.getCategoryList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCategoryList() {
      const userCategory = [
        ...new Set(
          this.bookingList.map((item) => {
            return item.categoryId;
          })
        ),
      ];
      this.bookingList = this.bookingList.map((item) => {
        item.categoryName =(this.categories[item.categoryId] && this.categories[item.categoryId].name )  ? this.categories[item.categoryId].name : "";
        return item;
      });
      for (const index of userCategory) {
        this.categoryList.push(this.categories[index]);
      }
    },
    updateCategory(categoryId) {
      this.selectedCategory = Number(categoryId);
    },
    filterByCategory(data, categoryId) {
      if (categoryId === 0) return data;
      return data.filter((item) => item.categoryId === categoryId);
    },
    filterByTab(data, type) {
      switch (type) {
        case "All":
          this.currentPage = 1;
          return data;
        case "Unpaid":
          this.currentPage = 1;
          return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 0);
        case "Completed":
          this.currentPage = 1;
          return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === 2);
        case "Cancelled":
          this.currentPage = 1;
          return data.filter((item) => item.order_payment[item.order_payment.length-1].payment_status === -1);
        case "Processing":
          this.currentPage = 1;
          return data.filter(
            (item) =>
              item.order_payment[item.order_payment.length-1].payment_status !== -1 &&
              item.order_payment[item.order_payment.length-1].payment_status !== 2 &&
              item.order_payment[item.order_payment.length-1].payment_status !== 0
          );
        default:
          return data;
      }
    },
    updateCurrentPage(value) {
      this.currentPage = value;
    },
    sliceRenderList(data) {
      return data.slice(
        (this.currentPage - 1) * this.perPageItems,
        this.currentPage * this.perPageItems
      );
    },
    filterByQuery(data, query) {
      if (query.length < 1) return data;
      return data.filter((item) => {
        return (
            item.service_name.toLowerCase().includes(query.toLowerCase()) ||
            item.order_display_id.toLowerCase().includes(query.toLowerCase()) ||
            item.partnerName.toLowerCase().includes(query.toLowerCase()) ||
            item.categoryName.toLowerCase().includes(query.toLowerCase())
        );
      });
    },
    async getUserOrderList() {
      this.$axios
        .get(
          `/order?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
        )
        .then(async (response) => {
          this.bookingList = response.data;
        })
        .catch((error) => console.log(error));
    },
    async getServiceData(object,i) {
      this.$axios
        .get(
          `${this.apiUrl}/user-services/content?service_id=${object.service_id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&currency=${object.currency}`
        )
        .then((res) => {
          this.bookingList[i].preview_image = res.data.preview_image
        })
        .catch((error) => console.log(error));
    },
  },
};
</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>