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" @change="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="datesChecked" />
      </div>
      <div v-if="$vuetify.breakpoint.xl">
        <oneLevel :label="'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"
        @toggle-favorite="onToggleFavorite"></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="statusesChecked" :locationChecked="locationChecked" :categoryChecked="categoryChecked"
        :datesChecked="datesChecked" @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: [],
    datesChecked: [],
    statusesChecked: [],
    categoryChecked: [],
    locationChecked: [],
    ratingChecked: [],
    selectedStatusJson: "",
    locations: [],

    statusMap: new Map(),

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

    selectedRegionJson: "",
    selectedCountryJson: "",
    selectedCityJson: "",

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

    selectedMainCategoryJson: "",
    selectedSubCategoryJson: "",

    categories: [],
    unsortRegionList: [],
    unsortCountryList: [],
    unsortCityList: [],
    unsortCategoryList: [],
    unsortSubcategoryList: [],
    categoryQueryFilter: "",
    locationQueryFilter: "",
    width: undefined,
    sortType: [
      { name: "Show Dates", value: "Show Dates" },
      { name: "Exhibitor Numbers", value: "Exhibitor Numbers" },
      { name: "Visitor Numbers", value: "Visitor Numbers" },
    ],
    sortBy: "Show Dates",
  }),
  async created() {
    this.getAdList();
    this.getStatusList();
    this.getLocationList();
    this.getCategoryList();
    this.getExhibitionCard();
    // 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;
    },
    // exhibitionsFilter() {
    //   const copyData = JSON.parse(JSON.stringify(this.exhibitionList));
    //   const statusList = this.filterByStatus(copyData, this.statusesChecked);
    //   const locationList = this.filterByLocation(
    //     statusList,
    //     this.locationChecked
    //   );
    //   const categoryList = this.filterByCategory(
    //     locationList,
    //     this.categoryChecked
    //   );
    //   const dateList = this.filterByDate(categoryList, this.datesChecked);
    //   const sortedList = this.sortServiceList(dateList);
    //   return sortedList;
    // },
    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;
        }
      }
    },
    async onToggleFavorite(obj) {
      this.exhibitionList.findIndex((i) => {
        if (i.id == obj.id) {
          i.saved = obj.saved;
        }
      });
    },
    getAdList() {

      this.ads = [{
        image: require('/assets/img/thems/Frame33.png')
      },{
        image: require('/assets/img/thems/Frame33.png')
      },{
        image: require('/assets/img/thems/Frame33.png')
      }]

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

          if (result.data.DATA.rel) {
            var vm = this;
            debugger
            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);
        });
    },
    getExhibitionCard() {
      this.$axios
        .get(
          `/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
          `&RegionIDs=${this.selectedRegionJson}` +
          `&CountryIDs=${this.selectedCountryJson}` +
          `&CityIDs=${this.selectedCityJson}` +
          `&MainCategoryIDs=${this.selectedMainCategoryJson}` +
          `&SubCategoryIDs=${this.selectedSubCategoryJson}` +
          `&Status=${this.selectedStatusJson}` +
          `&Date`
        )
        .then((result) => {

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

        })
        .catch((err) => {
          console.log(err);
          this.exhibitionList = [];
        });
    },
    // async getQuery() {
    //   this.locationQueryFilter = "";
    //   this.categoryQueryFilter = "";
    //   this.datesChecked = [];
    //   if (this.$route.query.hasOwnProperty("country")) {
    //     this.locationQueryFilter =
    //       this.unsortCountryList[Number(this.$route.query.country)];
    //   }
    //   if (this.$route.query.hasOwnProperty("city")) {
    //     this.locationQueryFilter =
    //       this.unsortCityList[Number(this.$route.query.city)];
    //   }
    //   if (this.$route.query.hasOwnProperty("region")) {
    //     this.locationQueryFilter =
    //       this.unsortRegionList[Number(this.$route.query.region)];
    //   }
    //   if (this.$route.query.hasOwnProperty("category")) {
    //     this.categoryQueryFilter =
    //       this.unsortCategoryList[Number(this.$route.query.category)];
    //   }
    //   if (this.$route.query.hasOwnProperty("subcategory")) {
    //     this.categoryQueryFilter =
    //       this.unsortSubcategoryList[Number(this.$route.query.subcategory)];
    //   }
    //   if (this.$route.query.hasOwnProperty("startdate")) {
    //     this.datesChecked.push(this.$route.query.startdate);
    //   }
    //   if (this.$route.query.hasOwnProperty("enddate")) {
    //     this.datesChecked.push(this.$route.query.enddate);
    //   }
    // },
    updateSortBy(data) {
      this.sortBy = data;
    },
    updatePage(value) {
      this.page = value;
    },
    updateCategoryFilter(value) {

      var SelectedMainCategoryArray = [];
      var SelectedSubCategoryArray = [];

      this.selectedMainCategoryJson = "";
      this.selectedSubCategoryJson = "";

      value.forEach(key => {

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

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

      });

      this.selectedMainCategoryJson = JSON.stringify(SelectedMainCategoryArray);
      this.selectedSubCategoryJson = JSON.stringify(SelectedSubCategoryArray);

      this.getExhibitionCard();

    },
    filterByCategory(data, categories) {
      if (categories.length > 0) {
        return data.filter((item) => {
          let findItem = false;
          if (item.subcategories) {
            for (const cate of item.subcategories) {
              if (categories.includes(cate.name)) {
                findItem = true;
              }
            }
          }
          if (item.categories) {
            for (const cate of item.categories) {
              if (categories.includes(cate.name)) {
                findItem = true;
              }
            }
          }
          return findItem;
        });
      } else {
        return data;
      }
    },
    updateLocationFilter(value) {

      var SelectedRegionArray = [];
      var SelectedCountryArray = [];
      var SelectedCityArray = [];

      this.selectedRegionJson = "";
      this.selectedCountryJson = "";
      this.selectedCityJson = "";

      value.forEach(key => {

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

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

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

      });

      this.selectedRegionJson = JSON.stringify(SelectedRegionArray);
      this.selectedCountryJson = JSON.stringify(SelectedCountryArray);
      this.selectedCityJson = JSON.stringify(SelectedCityArray);

      this.getExhibitionCard();

    },
    filterByLocation(data, locations) {
      if (locations.length > 0) {
        return data.filter(
          (item) =>
            locations.includes(item.region ? item.region.name : null) ||
            locations.includes(item.city ? item.city.name : null) ||
            locations.includes(item.country ? item.country.name : null)
        );
      } else {
        return data;
      }
    },
    updateStatusFilter(value) {

      var SelectedStatusArray = [];
      this.selectedStatusJson = "";

      value.forEach(key => {

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

      });

      this.selectedStatusJson = JSON.stringify(SelectedStatusArray);

      this.getExhibitionCard();
    },
    filterByStatus(data, status) {
      if (status.length > 0) {
        return data.filter((item) => status.includes(Number(item.status.id)));
      } else {
        return data;
      }
    },
    updateDateFilter(value) {
      this.datesChecked = value;
      console.log("update");

      this.getExhibitionCard();
    },
    filterByDate(data, dates) {
      let start = null;
      let end = null;
      if (dates.length === 2) {
        start = dates[0];
        end = dates[1];
      }
      if (dates.length === 1) {
        start = dates[0];
      }
      if (end) {
        return data.filter(
          (item) =>
            item.startdate.replace(/-/g, "") > start.replace(/-/g, "") &&
            item.startdate.replace(/-/g, "") < end.replace(/-/g, "") &&
            item.enddate.replace(/-/g, "") > start.replace(/-/g, "") &&
            item.enddate.replace(/-/g, "") < end.replace(/-/g, "")
        );
      } else if (start) {
        return data.filter(
          (item) => item.startdate.replace(/-/g, "") > start.replace(/-/g, "")
        );
      } else {
        return data;
      }
    },
    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>