You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
832 lines
23 KiB
832 lines
23 KiB
<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() {
|
|
this.isPageLoading = true;
|
|
this.getAdList();
|
|
this.getStatusList();
|
|
this.getLocationList();
|
|
this.getCategoryList();
|
|
this.getFavorite();
|
|
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() {
|
|
|
|
// console.table(this.$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);'
|
|
}
|
|
]
|
|
|
|
},
|
|
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;
|
|
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() {
|
|
|
|
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.category;
|
|
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);
|
|
}
|
|
|
|
|
|
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}`
|
|
)
|
|
.then((result) => {
|
|
|
|
if (result.data.DATA.rel) {
|
|
this.exhibitionList = result.data.DATA.rel;
|
|
this.setFavorite();
|
|
}
|
|
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
this.exhibitionList = [];
|
|
});
|
|
},
|
|
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.category;
|
|
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);
|
|
}
|
|
|
|
},
|
|
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>
|