ShowEasyFrontEnd/FrontEnd/pages/exhibition/index.vue

<template>
  <div
    class="tw-px-[30px] tw-mb-[60px] md:tw-mb-[100px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid xl:tw-grid-cols-[380px_auto] xl:tw-gap-[30px]">
    <section class="xl:tw-col-span-2 tw-mb-5 md:tw-mb-0">
      <centerMode :list="adList" v-if="adList.length"></centerMode>
    </section>
    <section class="xl:tw-col-span-2 tw-mb-[40px] xl:tw-mb-[10px]">
      <Breadcrumbs class="tw-py-[7px] md:tw-py-[10px] xl:tw-py-[13px] tw-mb-4 md:tw-mb-6 xl:tw-mb-0"></Breadcrumbs>
      <sort :results="result" :sortType="sortType" :sortBy="sortBy" @sort="updateSortBy($event)"
        @filter="$modal.show(`sidebar-filter-modal`)"></sort>
    </section>
    <section class="tw-grid tw-grid-cols-1 tw-gap-[30px] tw-auto-rows-min">
      <div class="tw-max-h-min" v-if="$vuetify.breakpoint.xl">
        <DateCard @update="updateDateFilter" :modalChecked="selectedDates" />
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <oneLevel :label="'exhibition.Show Status'" :list="statusList" @update="updateStatusFilter"></oneLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <multipleLevel :label="'Categories'" :placeholder="'Find Categories...'" :list="categoryList"
          :queryItem="categoryQueryFilter" @update="updateCategoryFilter"></multipleLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <multipleLevel :label="'Location'" :placeholder="'Find country/city ...'" :list="locationList"
          :queryItem="locationQueryFilter" @update="updateLocationFilter"></multipleLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <!-- <rating></rating> -->
      </div>
    </section>
    <section class="">
      <ExhibitionListCard v-for="(item, index) in exhibitionList" :key="index" :item="item"></ExhibitionListCard>
      <div class="tw-mt-[34px] tw-flex tw-justify-end">
        <pagination :pageLength="pageLength" @update="updatePage"></pagination>
      </div>
    </section>
    <div v-if="!$vuetify.breakpoint.xl">
      <!-- <ShowSidebarFilterModal :statusList="statuses" :locationList="locations" :categoryList="categories"
        :statusChecked="selectedStatus" :locationChecked="locationChecked" :categoryChecked="categoryChecked"
        :datesChecked="selectedDates" @updateCategoryFilter="updateCategoryFilter"
        @updateLocationFilter="updateLocationFilter" @updateStatusFilter="updateStatusFilter"
        @updateDateFilter="updateDateFilter">
      </ShowSidebarFilterModal> -->
      <ShowSidebarFilterModal :statusList="statusList" :locationList="locationList" :categoryList="categoryList"
        :statusChecked="selectedStatus" 
        :datesChecked="selectedDates" @updateCategoryFilter="updateCategoryFilter"
        @updateLocationFilter="updateLocationFilter" @updateStatusFilter="updateStatusFilter"
        @updateDateFilter="updateDateFilter">
      </ShowSidebarFilterModal>
    </div>
    <loading :isLoading="isPageLoading"></loading>
  </div>
</template>

<script>
import Breadcrumbs from "~/components/Breadcrumbs.vue";
import centerMode from "@/components/swiper/centerMode";
import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";
import DateCard from "~/components/exhibition/DateCard.vue";
import sort from "@/components/newComponent/sort/sort";
import multipleLevel from "@/components/newComponent/filter/multipleLevel";
import oneLevel from "@/components/newComponent/filter/oneLevel";
import rating from "@/components/newComponent/filter/rating.vue";
import pagination from "@/components/newComponent/pagination/pagination.vue";
import ShowSidebarFilterModal from "@/components/exhibition/ShowSidebarFilterModal.vue";
import { XIcon } from "vue-feather-icons";
import loading from "@/components/newComponent/loading/loading.vue";

export default {
  name: "ExhibitionView",
  auth: false,
  meta: {
    name: "Exhibition",
  },
  components: {
    centerMode,
    Breadcrumbs,
    DateCard,
    ExhibitionListCard,
    XIcon,
    sort,
    multipleLevel,
    oneLevel,
    rating,
    pagination,
    ShowSidebarFilterModal,
    loading,
  },
  data: () => ({

    currentPage: 1,
    itemsPerPage: 10,
    total: 0,
    adList: [],
    statusList: [],
    exhibitionList: [],
    locationList: [],

    selectedDates: [],
    selectedStatus: [],

    statusMap: new Map(),

    regionMap: new Map(),
    countryMap: new Map(),
    cityMap: new Map(),

    mainCategoryMap: new Map(),
    subCategoryMap: new Map(),

    selectedMainCategory: [],
    selectedSubCategory: [],

    selectedRegion: [],
    selectedCountry: [],
    selectedCity: [],

    favoriteSet: new Set(),

    categoryList: [],
    categoryQueryFilter: "",
    locationQueryFilter: "",
    width: undefined,
    sortType: [
      
      { name: "exhibition.Recommended", value: "Recommended" },
      { name: "exhibition.ShowDate", value: "ShowDate" },
      { name: "exhibition.ExhibitorCount", value: "ExhibitorCount" },
      { name: "exhibition.VisitorCount", value: "VisitorCount" },

    ],
    sortBy: "ShowDate",
    query: ""
  }),
  async created() {

    // console.log("created");
    this.isPageLoading = true;

    // this.getAdList();
    await this.getStatusList();
    await this.getLocationList();
    await this.getCategoryList();
    await this.getFavorite();
    await this.getQuery();
    
    if (process.client) {
      this.width = window.innerWidth;
    }
    this.$nextTick(() => {
      this.isPageLoading = false;
    });
  },
  async mounted() {

    // console.log("mounted");

    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  computed: {

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

    $route() {

      this.getQuery();

    },
  },
  methods: {
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
    getAdList() {

      this.adList = [
        {
          id: 'banner_1',
          image: require('/assets/img/banner/banner_1.png'),
          url: '/service?taiwan=taiwan'
        },
        {
          id: 'banner_2',
          image: require('/assets/img/banner/banner_2.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_3',
          image: require('/assets/img/banner/banner_3.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_4',
          image: require('/assets/img/banner/banner_4.png'),
          url: 'javascript:void(0);'
        },
        {
          id: 'banner_5',
          image: require('/assets/img/banner/banner_5.png'),
          url: 'javascript:void(0);'
        }
      ]

    },
    async getStatusList() {
      await this.$axios
        .get(
          `/trending/api/Exhibition/Statuses?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {
          if(result && result.data && result.data.DATA && result.data.DATA.rel){

            this.statusList = result.data.DATA.rel;

            this.statusList = this.statusList.map((item => {

              this.statusMap.set(item.Key, item.Value);

              return {
                title: item.Value,
                key: item.Key,
              };

            }));

          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getCategoryList() {
      await this.$axios
        .get(
          `/trending/api/Exhibition/Categories?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {

          if(result && result.data && result.data.DATA && result.data.DATA.rel){

            this.categoryList = result.data.DATA.rel;
            this.categoryList = this.categoryList.map((item) => {

              this.mainCategoryMap.set(item.CategoryID, item);

              item.SubCategoryList = item.SubCategoryList.map(

                (children) => {

                  this.subCategoryMap.set(children.CategoryID, children);

                  return {
                    title: children.CategoryName,
                    key: children.CategoryID,
                  };
                }
              );
              return {
                title: item.CategoryName,
                key: item.CategoryID,
                children: item.SubCategoryList,
              };
            });

          }

        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getLocationList() {
      await this.$axios
        .get(
          `/trending/api/Exhibition/Locations?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {

          if(result && result.data && result.data.DATA && result.data.DATA.rel){
            var vm = this;
            vm.locationList = result.data.DATA.rel;

            vm.locationList = vm.locationList.map((region) => {

              this.regionMap.set(region.RegionID, region);

              region.CountryList = region.CountryList.map((country) => {

                this.countryMap.set(country.CountryID, country);

                country.CityList = country.CityList.map((city) => {

                  this.cityMap.set(city.CityID, city);

                  return {
                    title: city.CityName,
                    key: city.CityID,
                  };
                });
                return {
                  title: country.CountryName,
                  key: country.CountryID,
                  children: country.CityList,
                };
              });
              return {
                title: region.RegionName,
                key: region.RegionID,
                children: region.CountryList,
              };
            });

            return result.data.DATA.rel;

          }

        })
        .catch((err) => {
          console.log(err);
        });
    }, 
    async getExhibitionCard() {

      await this.$axios
        .get(
          `/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
          `&PageIndex=${this.currentPage}` +
          `&PageSize=${this.itemsPerPage}` +
          `&RegionIDs=${JSON.stringify(this.selectedRegion)}` +
          `&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
          `&CityIDs=${JSON.stringify(this.selectedCity)}` +
          `&MainCategoryIDs=${JSON.stringify(this.selectedMainCategory)}` +
          `&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` +
          `&Status=${JSON.stringify(this.selectedStatus)}` +
          `&Date=${JSON.stringify(this.selectedDates)}` +
          `&Sort=${this.sortBy}` +
          `&Query=${this.query}`
        )
        .then((result) => {

          if(result && result.data && result.data.DATA && result.data.DATA.rel){
            let data = result.data.DATA.rel
            if(data.DataList.length>0){
              this.total = data.Total;
              this.exhibitionList = data.DataList;
              this.setFavorite();
            }
          }

        })
        .catch((err) => {
          console.log(err);
          this.exhibitionList = [];
        });
    },
    async getFavorite() {

      this.favoriteSet.clear();

      if (this.$auth.loggedIn) {
        await this.$axios
          .get(
            `/trending/api/Favorite/Favorites?Type=Exhibition`
          )
          .then((result) => {

            if(result && result.data && result.data.DATA && result.data.DATA.rel){

              let favoriteList = [];
              favoriteList = result.data.DATA.rel;

              favoriteList.forEach(item => {

                this.favoriteSet.add(item.ParentID);

              })
            }

          })
          .catch((err) => {
            console.log(err);
          });

      }

    },
    setFavorite() {

      if (this.exhibitionList.length > 0 && this.$auth.loggedIn) {

        for (let i = 0; i < this.exhibitionList.length; i++) {

          if (this.favoriteSet.has(this.exhibitionList[i].ExhibitionID)) {

            this.exhibitionList[i].IsFavorite = "Y";

          }

        }

      }

    },

    getNewExhibitionCard() {

      this.currentPage = 1;
      this.query = "";
      this.getExhibitionCard();

    },

    updateSortBy(data) {

      this.sortBy = data;
      this.getNewExhibitionCard();

    },
    updatePage(value) {

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

      this.getExhibitionCard();
      
    },
    updateCategoryFilter(value) {

      this.selectedMainCategory = [];
      this.selectedSubCategory = [];

      value.forEach(key => {

        if (this.mainCategoryMap.has(key)) {
          this.selectedMainCategory.push(key);
        }

        if (this.subCategoryMap.has(key)) {
          this.selectedSubCategory.push(key);
        }

      });

      this.getNewExhibitionCard();

    },

    updateLocationFilter(value) {

      this.selectedRegion = [];
      this.selectedCountry = [];
      this.selectedCity = [];

      value.forEach(key => {

        if (this.regionMap.has(key)) {
          this.selectedRegion.push(key);
        }

        if (this.countryMap.has(key)) {
          this.selectedCountry.push(key);
        }

        if (this.cityMap.has(key)) {
          this.selectedCity.push(key);
        }

      });

      this.getNewExhibitionCard();

    },
    updateStatusFilter(value) {

      this.selectedStatus = [];

      value.forEach(key => {

        if (this.statusMap.has(key)) {
          this.selectedStatus.push(key);
        }

      });

      this.getNewExhibitionCard();

    },
    updateDateFilter(value) {

      this.selectedDates = value;
      this.getNewExhibitionCard();
      
    },
    async getQuery() {

      let vm = this;

      this.selectedMainCategory = [];
      this.selectedSubCategory = [];
      this.selectedCountry = [];
      this.selectedCity = [];
      this.query = "";

      if (this.$route.query.category) {
        vm.categoryQueryFilter = vm.$route.query.category;
        this.selectedMainCategory.push(vm.$route.query.category);
      }

      if (this.$route.query.subcategory) {
        vm.categoryQueryFilter = vm.$route.query.subcategory;
        this.selectedSubCategory.push(vm.$route.query.subcategory);
      }

      if (this.$route.query.country) {
        vm.locationQueryFilter = vm.$route.query.country;
        this.selectedCountry.push(vm.$route.query.country);
      }

      if (this.$route.query.city) {
        vm.locationQueryFilter = vm.$route.query.city;
        this.selectedCity.push(vm.$route.query.city);
      }

      if (this.$route.query.q) {
        this.query = vm.$route.query.q;
      }

      this.getExhibitionCard();
      

    },
  },
};
</script>

<style scoped lang="scss">
.sort-by-text {
  max-width: 142px;

  >h3 {
    border-right: 1px solid #e5e5e5;
  }
}

.sort-by-text-sm {
  max-width: 112px;

  >h3 {
    border-right: 1px solid #e5e5e5;
  }
}
</style>

<style lang="scss">
.filter-zindex {
  z-index: 499 !important;
}

.exhibition-pagination {
  .v-pagination {
    justify-content: flex-end;
  }

  .v-pagination__navigation,
  .v-pagination__item {
    box-shadow: none;
    margin: 0;
    min-width: 28px;

    &.v-pagination__item--active {
      color: $primary-orange !important;
    }
  }
}

.v-breadcrumbs {
  padding: 0px;
}

.v-application ul {
  padding-left: 0px;
}
</style>