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>
    <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.id,
          title: item.status,
        };
      });
    }
    // ({ 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,
    exhibitionList: [],
    datesChecked: [],
    statusesChecked: [],
    categoryChecked: [],
    locationChecked: [],
    ratingChecked: [],
    locations: [],
    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() {
    await this.getLocationList();
    await this.getCategoryList();
    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;
    },
    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;
        }
      });
    },
    async getUnsortLocationList() {
      await this.$axios
        .get(
          `/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=false`
        )
        .then((result) => {
          this.unsortRegionList = result.data.region_name_list;
          this.unsortCountryList = result.data.country_name_list;
          this.unsortCityList = result.data.city_name_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getUnsortCategoryList() {
      await this.$axios
        .get(
          `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=false`
        )
        .then((result) => {
          this.unsortCategoryList = result.data.category_name_list;
          this.unsortSubcategoryList = result.data.subcategory_name_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getCategoryList() {
      await this.$axios
        .get(
          `/t/exhibitions/categories?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
        )
        .then((result) => {
          this.categories = result.data.sort_results;
          this.categories = this.categories.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,
            };
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getLocationList() {
      await this.$axios
        .get(
          `/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=true`
        )
        .then((result) => {
          var vm = this;
          vm.locations = result.data.sort_results;
          vm.locations = vm.locations.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,
            };
          });
          return result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    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) {
      this.categoryChecked = value;
    },
    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) {
      this.locationChecked = value;
    },
    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) {
      this.statusesChecked = value;
    },
    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;
    },
    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>