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="ads" v-if="ads.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="statuses" @update="updateStatusFilter"></oneLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <multipleLevel :label="'Categories'" :placeholder="'Find Categories...'" :list="categories"
          :queryItem="categoryQueryFilter" @update="updateCategoryFilter"></multipleLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <multipleLevel :label="'Location'" :placeholder="'Find country/city ...'" :list="locations"
          :queryItem="locationQueryFilter" @update="updateLocationFilter"></multipleLevel>
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <!-- <rating></rating> -->
      </div>
    </section>
    <!-- <section class="">
      <ExhibitionListCard v-for="(item, index) in renderList" :key="index" :item="item"
        @toggle-favorite="onToggleFavorite"></ExhibitionListCard>
      <div class="tw-mt-[34px] tw-flex tw-justify-end">
        <pagination :pageLength="pageLength" @update="updatePage"></pagination>
      </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>
    </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,
  },
  async asyncData({ route, $auth, $axios, i18n }) {
    let isPageLoading = true;
    let langQuery = "?lang=" + i18n.localeProperties["langQuery"];
    let keyword = route.query.q;
    let data;
    // ({ data } = await $axios.get("/exhibitions/filters" + langQuery));
    let statuses;
    if (data) {
      statuses = data.filters.statuses.map((item) => {
        return {
          key: item.Key,
          title: item.Value,
        };
      });
    }
    // ({ data } = await $axios.get(
    //   `/t/exhibitions/locations${langQuery}&sort=true`
    // ));
    let locations;
    if (data) {
      locations = data.sort_results.map((item) => {
        item.country_list = item.country_list.map((country) => {
          country.city_list = country.city_list.map((city) => {
            return {
              title: city.city_name,
              key: city.city_name,
            };
          });
          return {
            title: country.country_name,
            key: country.country_name,
            children: country.city_list,
          };
        });
        return {
          title: item.region_name,
          key: item.region_name,
          children: item.country_list,
        };
      });
    }
    // ({ data } = await $axios.get(
    //   `/t/exhibitions/categories${langQuery}&sort=true`
    // ));
    let categories;
    if (data) {
      categories = data.sort_results.map((item) => {
        item.subcategories_list = item.subcategories_list.map((children) => {
          return {
            title: children.subcategory_name,
            key: children.subcategory_name,
          };
        });
        return {
          title: item.category_name,
          key: item.category_name,
          children: item.subcategories_list,
        };
      });
    }
    if (keyword) {
      langQuery = langQuery + "&q=" + keyword;
    }
    try {
      data = {
        exhibitions: [],
        ads: [],
      };
      // ({ data } = await $axios
      //   .get("/exhibitions" + langQuery)
      //   .then()
      //   .catch((err) => {
      //     console.log(err);
      //   }));
    } catch (e) {
      data = {
        exhibitions: [],
        ads: [],
      };
      console.log(e);
    }
    // console.log(data.exhibitions);
    // let exhibitionList = data.exhibitions; // exhibitionApi2CardType();

    let userSavedList = [];
    if ($auth.loggedIn) {
      // await $axios
      //   .get(
      //     `/member/users/${$auth.$storage.getUniversal("jwt").user_id}?jwt=${
      //       $auth.$storage.getUniversal("jwt").token
      //     }`
      //   )
      //   .then((res) => {
      //     userSavedList = res.data.UserExhibition; //.map(item=>item.exhibition_id)
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    }
    // userSavedList = userSavedList.map((item) => item.exhibition_id);
    // for (let i = 0; i < exhibitionList.length; i++) {
    //   if (userSavedList.includes(exhibitionList[i].id)) {
    //     exhibitionList[i].saved = true;
    //   } else {
    //     exhibitionList[i].saved = false;
    //   }
    // }

    let ads = data.ads;
    return {
      statuses: statuses,
      // categories: categories,
      // locations: locations,
      // rating: rating,
      isPageLoading: isPageLoading,
      // exhibitionList: exhibitionList,
      ads: ads,
      langQuery: langQuery,
    };
  },
  data: () => ({
    page: 1,
    perPage: 10,
    adList: [],
    exhibitionList: [],
    categoryChecked: [],
    locationChecked: [],
    ratingChecked: [],
    locations: [],

    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(),

    categories: [],
    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",
  }),
  async created() {

    // to Fred
    // addjust async/sync orders

    this.isPageLoading = true;
    await this.getQuery();
    // this.getAdList();
    await this.getStatusList();
    await this.getLocationList();
    await this.getCategoryList();
    await this.getFavorite();
    await this.getExhibitionCard();
    // this.getQuery();
    // await this.getUnsortLocationList();
    // await this.getUnsortCategoryList();
    // await this.getQuery();
    // if (this.$route.query.hasOwnProperty("q")) {
    //   this.sortType.splice(0, 0, {
    //     name: "ShowEasy Recommended",
    //     value: "ShowEasy Recommended",
    //   });
    //   this.sortBy = "ShowEasy Recommended";
    // }
    // let userSavedList = [];
    // if (this.$auth.loggedIn) {
    //   // await this.$axios
    //   //   .get(
    //   //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
    //   //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
    //   //   )
    //   //   .then((res) => {
    //   //     userSavedList = res.data.UserExhibition;
    //   //   })
    //   //   .catch((err) => {
    //   //     console.log(err);
    //   //   });
    //   // this.$store.dispatch("updatePicture");
    //   // this.$nextTick(() => {
    //   //   this.$forceUpdate();
    //   // });
    // }
    // userSavedList = userSavedList.map((item) => item.exhibition_id);
    // for (let i = 0; i < this.exhibitionList.length; i++) {
    //   if (userSavedList.includes(this.exhibitionList[i].id)) {
    //     this.exhibitionList[i].saved = true;
    //   } else {
    //     this.exhibitionList[i].saved = false;
    //   }
    // }
    if (process.client) {
      this.width = window.innerWidth;
    }
    this.$nextTick(() => {
      this.isPageLoading = false;
    });
  },
  async mounted() {
    // let userSavedList = [];
    // if (this.$auth.loggedIn) {
    //   // await this.$axios
    //   //   .get(
    //   //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
    //   //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
    //   //   )
    //   //   .then((res) => {
    //   //     userSavedList = res.data.UserExhibition;
    //   //   })
    //   //   .catch((err) => {
    //   //     console.log(err);
    //   //   });
    //   // this.$store.dispatch("updatePicture");
    //   // this.$nextTick(() => {
    //   //   this.$forceUpdate();
    //   // });
    // }
    // userSavedList = userSavedList.map((item) => item.exhibition_id);
    // for (let i = 0; i < this.exhibitionList.length; i++) {
    //   if (userSavedList.includes(this.exhibitionList[i].id)) {
    //     this.exhibitionList[i].saved = true;
    //   } else {
    //     this.exhibitionList[i].saved = false;
    //   }
    // }
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
    this.fetchUser();
  },
  computed: {
    result() {
      // return this.exhibitionsFilter.length;
      return this.exhibitionList.length;
    },
    pageLength() {
      return Math.ceil(this.result / this.perPage);
    },
    // renderList() {
    //   return this.sliceRenderList(this.exhibitionsFilter);
    // },
  },
  watch: {
    page() {
      // window.scrollTo(0, 0);
    },
    $route() {

      this.getQuery();

    },
  },
  methods: {
    onResize() {
      if (process.client) {
        this.width = window.innerWidth;
      }
    },
    async fetchUser() {
      let userSavedList = [];
      if (this.$auth.loggedIn) {
        // await this.$axios
        //   .get(
        //     `/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
        //     }?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
        //   )
        //   .then((res) => {
        //     userSavedList = res.data.UserExhibition;
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
      }
      userSavedList = userSavedList.map((item) => item.exhibition_id);
      for (let i = 0; i < this.exhibitionList.length; i++) {
        if (userSavedList.includes(this.exhibitionList[i].id)) {
          this.exhibitionList[i].saved = true;
        } else {
          this.exhibitionList[i].saved = false;
        }
      }
    },
    getAdList() {

      this.ads = [
        {
          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() {
      this.$axios
        .get(
          `/trending/api/Exhibition/Statuses?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {
          if (result.data.DATA.rel) {
            this.statuses = result.data.DATA.rel;
            this.statuses = this.statuses.map((item => {

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

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

            }));

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

          if (result.data.DATA.rel) {

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

            this.categories = this.categories.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() {
      this.$axios
        .get(
          `/trending/api/Exhibition/Locations?Lang=${this.$i18n.localeProperties["langQuery"]}`
        )
        .then((result) => {

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

            vm.locations = vm.locations.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() {

      // to Fred
      // should add q=? to api
      
      this.$axios
        .get(
          `/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
          `&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`
        )
        .then((result) => {

          if (result.data.DATA.rel) {
            this.exhibitionList = result.data.DATA.rel;
            this.setFavorite();
          }

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

      this.favoriteSet.clear();

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

            if (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";

          }

        }

      }


    },
    updateSortBy(data) {

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

    },
    updatePage(value) {
      this.page = value;
    },
    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.getExhibitionCard();

    },
    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.getExhibitionCard();

    },
    updateStatusFilter(value) {

      this.selectedStatus = [];

      value.forEach(key => {

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

      });

      this.getExhibitionCard();

    },
    updateDateFilter(value) {

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

      let vm = this;
      
      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);
        console.log(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.q) {
        console.log(vm.$route.query.q);
      }

    },
    sortServiceList(data) {
      switch (this.sortBy) {
        case "ShowEasy Recommended":
          return data;
        case "Exhibitor Numbers":
          function Exhibitors(a, b) {
            if (
              Number(a.exhibitors ? a.exhibitors.replace(/[^0-9]/gi, "") : "") <
              Number(b.exhibitors ? b.exhibitors.replace(/[^0-9]/gi, "") : "")
            )
              return 1;
            if (
              Number(a.exhibitors ? a.exhibitors.replace(/[^0-9]/gi, "") : "") >
              Number(b.exhibitors ? b.exhibitors.replace(/[^0-9]/gi, "") : "")
            )
              return -1;
            return 0;
          }
          return data.sort(Exhibitors);
        case "Visitor Numbers":
          function Visitor(a, b) {
            if (
              Number(a.visitors ? a.visitors.replace(/[^0-9]/gi, "") : "") <
              Number(b.visitors ? b.visitors.replace(/[^0-9]/gi, "") : "")
            )
              return 1;
            if (
              Number(a.visitors ? a.visitors.replace(/[^0-9]/gi, "") : "") >
              Number(b.visitors ? b.visitors.replace(/[^0-9]/gi, "") : "")
            )
              return -1;
            return 0;
          }
          return data.sort(Visitor);
        case "Show Dates":
          function Date(a, b) {
            if (a.startdate.replace(/-/g, "") < b.startdate.replace(/-/g, ""))
              return 1;
            if (a.startdate.replace(/-/g, "") > b.startdate.replace(/-/g, ""))
              return -1;
            return 0;
          }
          return data.sort(Date);
        default:
          return data;
      }
    },
    sliceRenderList(data) {
      return data.slice(
        (this.page - 1) * this.perPage,
        this.page * this.perPage
      );
    },
  },
};
</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>