|
|
<template> <div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto"> <router-view v-if="isRouterAlive" /> <div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start"> <userSidebar :userData="userData" :firstName="firstName" :lastName="lastName" class="tw-hidden xl:tw-block" > </userSidebar> <!-- <div class="xl:tw-hidden"></div> --> <div class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]" > <div class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]" > <two-dots class="tw-mr-[30px]"></two-dots >{{ $t("userProfile.savedExhibitions") }} </div> <div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]"> {{ $t("userProfile.savedExhibitionsFilter") }} </div> <div> <select v-model="countrySelect" class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none tw-mr-[20px] focus:tw-border-primary-1 md:tw-text-[16px]" > <option v-for="(item, index) in countryOptions" :key="index" :value="item.id" > {{ item.name }} </option> </select> <select v-model="statusSelect" class="tw-text-neutrals-500 tw-w-[196px] tw-border tw-border-solid tw-border-neutrals-200 tw-rounded-[10px] tw-px-[15px] tw-py-[9px] tw-head-body tw-outline-none focus:tw-border-primary-1 md:tw-text-[16px]" > <option v-for="(item, index) in statusOptions" :key="index" :value="item.Key"> {{ item.Value }} </option> </select> </div> <div v-if="showUserExhibitionList.length == 0" class="tw-mt-[80px] md:tw-mt-[90px]" > <img class="tw-flex tw-mx-auto tw-w-[160px]" src="~/assets/img/savedExhibitionEmpty.png" alt="" /> <div class="tw-text-[16px] tw-text-neutrals-800 tw-w-fit tw-mx-auto tw-mb-[50px] md:tw-mb-[60px]" > {{ $t("userProfile.noSavedExhibitions") }} </div> <nuxt-link :to="localePath('/')" class="tw-flex tw-text-[16px] tw-w-fit tw-bg-primary-1 tw-text-white tw-px-[16px] tw-py-[9px] tw-rounded-[12px] tw-mx-auto tw-mb-[37px] md:tw-mb-0" > {{ $t("Explore with ShowEasy") }} </nuxt-link> </div>
<div class="tw-mt-[20px] md:tw-mt-[30px]">
<!-- <ExhibitionListCard v-for="(exhibition, index) in countryFilterList" :key="index" class="tw-mb-[20px]" :item="exhibition" @toggle-favorite="removeExhibitionRelation($event)" > </ExhibitionListCard> -->
<div v-for="list in exhibitionCardList" :key="list"> <ExhibitionListCard :item="list"></ExhibitionListCard> </div>
<!-- <ExhibitionListCard v-for="(item, index) in exhibitionCardList" :key="index" class="tw-mb-[20px]" :item="item" > @toggle-favorite="removeExhibitionRelation($event)" </ExhibitionListCard> -->
<!-- <ExhibitionListCard v-for="item in exhibitionCardList" :key="item"></ExhibitionListCard> -->
<div class="tw-mt-[34px] tw-flex tw-justify-end"> <pagination :pageLength="pageLength" @update="updatePage"></pagination> </div>
<!-- <v-pagination v-model="page" class="tw-mt-[28px]"
:length="userSavedExhibitionPageLength" ></v-pagination> --> </div> </div> </div> </div></template><script>import TwoDots from "@/components/TwoDots";import ExhibitionListCard from "~/components/exhibition/ExhibitionListCard.vue";import userSidebar from "@/components/user/userSidebar.vue";import elementSelect from "@/components/newComponent/form/ElementSelect.vue";import pagination from "@/components/newComponent/pagination/pagination.vue";
export default { name: "saveExhibition", layout: "profile",
components: { TwoDots, ExhibitionListCard, userSidebar, elementSelect, pagination, }, data() { return { test:false, firstName: "", lastName: "", userData: {}, userCompanyId: [], userCompanyList: [], userAddNewCompanyList: [], userSavedExhibitionList: [], userVisibleSavedExhibitionList: [], userSavedExhibitionPageLength: 0, savedExhibitionPerPage: 6, yearOptions: [], monthOptions: [], dayOptions: [], yearSelect: "", monthSelect: "", daySelect: "", languageSelect: { en: "", zhtw: "", }, phoneValid: false, countryList:[], countryOptions: [], countrySelect: 999, statusList:[], statusOptions: [], statusSelect: 999, page: 1, filterList: [], countryFilterList: [], userSaveExhibitionList: [], exhibitionList: [], exhibitionMap: new Map(), showUserExhibitionList: [], userSaveExhibition: [], CountryName:[], test:"", isRouterAlive: true, currentPage: 1, perPageItems: 600000,
exhibitionMap: new Map(), exhibitionCardList: [], userFavoriateList: [],
}; }, async created() { this.fetchUserData(); // await this.fetchExhibition();
// await this.fetchUserFavoriateExhibition();
await this.fetchFavoriate(); await this.fetchAllExhibition(); this.setUserExhibitionCard();
// await this.userSavedExhib();
// await this.filterSavedExhibition();
// //await this.showUserExhibitionList();
// this.$axios
// .get(`/trending/api/location/countries?RegionID&Lang=${this.$i18n.localeProperties["langQuery"]}`)
// .then((response) => {
// //console.log(JSON.stringify(response));
// if(response && response.data && response.data.DATA && response.data.DATA.rel){
// let data = response.data.DATA.rel
// if(data){
// this.countryList = data;
// //console.log(this.countryList);
// this.countryOptions = this.countryList.map((item) => {
// return {
// id: item.CountryID,
// name: item.CountryName,
// };
// });
// const initial = {
// name: this.$t("userProfile.allCountries"),
// id: 999,
// };
// this.countryOptions.splice(0, 0, initial);
// }
// }
// })
// .catch((error) => {
// console.log(error);
// });
// this.$axios
// .get(`/trending/api/exhibition/statuses?Lang=${this.$i18n.localeProperties["langQuery"]}`)
// .then((response) => {
// //console.log(JSON.stringify(response));
// if(response && response.data && response.data.DATA && response.data.DATA.rel){
// let data = response.data.DATA.rel
// if(data){
// this.statusList = data;
// this.statusOptions = this.statusList.map((item) => {
// return {
// id:"",
// Key: item.Key,
// Value: item.Value,
// };
// });
// const initial = {
// id: 999,
// Key: 999,
// Value: this.$t("userProfile.allStatus"),
// };
// this.statusOptions.splice(0, 0, initial);
// }
// }
// })
// .catch((error) => {
// console.log(error);
// });
// this.countryFilterList = this.showUserExhibitionList;
}, mounted() { this.yearOptions = Array.from(new Array(103), (val, index) => (index + 1920).toString() ); this.monthOptions = Array.from(new Array(13), (val, index) => { if (index < 10 && index > 0) { return "0" + index.toString(); } if (index >= 10) { return index.toString(); } }); this.dayOptions = Array.from(new Array(32), (val, index) => { if (index < 10 && index > 0) { return "0" + index.toString(); } if (index >= 10) { return index.toString(); } }); this.$nextTick(() => { window.addEventListener("resize", this.onResize); }); }, watch: { countrySelect: { handler: function () { if (this.countrySelect) { this.filterSavedExhibition(this.countrySelect,this.statusSelect); //this.fetchSavedExhibition();
//this.fetchExhibition();
} }, }, statusSelect: { handler: function () { if (this.statusSelect) { this.filterSavedExhibition(this.countrySelect,this.statusSelect); //this.fetchSavedExhibition();
//this.fetchExhibition();
} }, }, }, computed: { pageLength() { return Math.ceil(this.userSaveExhibition.length / this.perPageItems); }, }, methods: {
async fetchFavoriate() {
await this.$axios .get( `/trending/api/Favorite/Favorites?Type=Exhibition` ) .then((response) => { if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){
this.userFavoriateList = data;
} } }) .catch((error) => { console.log(error); });
},
async fetchAllExhibition() {
await this.$axios .get( `/trending/api/Exhibition/Cards?PageIndex=${this.currentPage}&PageSize=${this.perPageItems}&RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Query&Lang=${this.$i18n.localeProperties["langQuery"]}` ) .then((response) => { if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){
console.table(data);
data.DataList.forEach(exhib => {
this.exhibitionMap.set(exhib.ExhibitionID, exhib);
});
// this.setUserExhibitionCard();
}; }; }) .catch((error) => { console.log(error); });
},
setUserExhibitionCard() {
this.userFavoriateList.forEach( fav => {
if(this.exhibitionMap.has(fav.ParentID)) {
this.exhibitionCardList.push(this.exhibitionMap.get(fav.ParentID));
}
});
console.log("mdfkkkkkkkuuuu"); console.table(this.exhibitionCardList);
},
updatePage(value) { this.currentPage = value; this.fetchExhibition(); }, patchUserData() { // if (this.width < 1366) {
// this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
// }
if(this.$vuetify.breakpoint.name !== "xs"){ this.userData.BirthDate = this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;
if(this.userData.BirthDate.length < 10){ this.userData.BirthDate = null;
} }
if(this.languageSelect.en == true){ this.userData.LanguageID = "en-US";
}else if(this.languageSelect.zhtw == true){ this.userData.LanguageID = "zh-TW";
}else{ this.userData.LanguageID = "null";
}
const patchData = JSON.parse(JSON.stringify(this.userData)); // delete patchData.LoginLog;
// delete patchData.UserCompany;
// delete patchData.UserSocialRelation;
// delete patchData.UserExhibition;
this.$axios .post( `/trending/api/Members/Member`, patchData ) .then((response) => { //console.log(JSON.stringify(response));
this.successUpdate = !this.successUpdate; setTimeout(() => { this.successUpdate = !this.successUpdate; }, 1000); this.fetchUserData(); //this.$auth.$storage.setUniversal("userPicture", patchData.MemberPicture);
// this.$auth.$storage.setUniversal(
// "userLastName",
// patchData.LastName
// );
// this.$store.dispatch("updatePicture");
}) .catch((error) => { console.log(error); }); },
fetchUserData() { this.$axios .get( `/trending/api/Members/Info` ) .then((response) => { //console.log(JSON.stringify(response));
if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){ this.userData = data; this.firstName = this.userData.FirstName; this.lastName = this.userData.LastName; this.userData.Phone ? (this.phoneValid = true): (this.phoneValid = false); if(this.userData.ArgumentID == "en-US"){ this.languageSelect.en = true;
}else if(this.userData.ArgumentID == "zh-TW"){ this.languageSelect.zhtw = true;
}else{ this.languageSelect.en = ""; this.languageSelect.zhtw = "";
}
if ( this.userData.BirthDate && typeof this.userData.BirthDate === "object"
){ this.yearSelect = ""; this.monthSelect = ""; this.daySelect = "";
}else{ const space = this.userData.BirthDate.split("T"); const date = space[0].split("-"); this.yearSelect = date[0]; this.monthSelect = date[1]; this.daySelect = date[2];
} } } }) .catch((error) => { console.log(error); }); },
handleImageUpdate(pictureURL) { this.userData.picture = pictureURL; this.patchUserData(); this.closeCropDialog(); },
logout() { this.$auth.$storage.removeUniversal("jwt"); this.$auth.$storage.removeUniversal("userPicture"); this.$auth.$storage.removeUniversal("userLastName"); this.$auth.$storage.removeUniversal("userBeforePath");
if (window.innerWidth < 1024) { this.$router.push(this.localePath("/")); } else { this.$router.push(this.localePath("/user")); } this.$auth.logout(); },
async fetchUserFavoriateExhibition() { this.$axios .get( `/trending/api/Favorite/Favorites?Type=Exhibition` ) .then((response) => { if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){ //console.log("data:" + JSON.stringify(data));
this.userSaveExhibition = data;
this.userSaveExhibition = this.userSaveExhibition.map((item) => { return{ ParentID: item.ParentID, }; });
this.userSavedExhibitionPageLength = Math.ceil( this.userSaveExhibition.length / this.savedExhibitionPerPage );
console.table(this.userSaveExhibition);
//this.userVisibleSavedExhibitionList = JSON.parse(JSON.stringify(this.userSaveExhibition));
} } }) .catch((error) => { console.log(error); }); },
async fetchExhibition() { await this.$axios .get( `/trending/api/Exhibition/Cards?PageIndex=${this.currentPage}&PageSize=${this.perPageItems}&RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Query&Lang=${this.$i18n.localeProperties["langQuery"]}` ) .then((response) => { if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){
this.exhibitionList = data.DataList; this.exhibitionList.forEach(exhibition => {
this.exhibitionMap.set(exhibition.ExhibitionID, exhibition);
});
console.log("All exhibitions " + this.exhibitionMap.size); console.table(this.exhibitionMap);
// this.exhibitionList = data.DataList;
// this.showUserExhibitionList = [];
// this.countryFilterList = [];
// this.userSavedExhib();
//Berlin示範的
// this.exhibitionList.forEach((exhib) => {
// this.exhibitionMap.set(exhib.ExhibitionID, exhib);
// })
console.log("holy shit size"); console.log(this.userSaveExhibition);
this.userSaveExhibition.forEach((exhib) => {
if (this.exhibitionMap.has(exhib.ExhibitionID)) {
this.testArr.push(this.exhibitionMap.get(exhib.ExhibitionID));
}
})
console.log("mdfk"); console.table(this.testArr);
}; }; }) .catch((error) => { console.log(error); }); },
// userSavedExhib(){
// this.exhibitionList.forEach(exhib => {
// // console.log(exhib.ExhibitionID);
// this.userSaveExhibition.forEach(user => {
// // console.log(user.ParentID);
// // if(exhib.ExhibitionID === user.ParentID){
// console.log(exhib.ExhibitionID);
// // exhib.IsFavorite = 'Y';
// // this.showUserExhibitionList.push(exhib);
// // }
// })
// });
// // this.countryFilterList = JSON.parse(
// // JSON.stringify(this.showUserExhibitionList));
// },
filterSavedExhibition(countryId, selectId) { this.countryFilterList = []; this.currentPage = 1; //const country = countryId;
if (countryId == "999" && selectId == "999") { this.countryFilterList = JSON.parse( JSON.stringify(this.showUserExhibitionList) ); } else if(countryId == "999" && selectId !== "999"){ this.showUserExhibitionList.forEach((item) => { if(item.ExhibStatus == selectId){ this.countryFilterList.push(item); } }); }else if(countryId !== "999" && selectId == "999"){ this.showUserExhibitionList.forEach((item) => { if(item.CountryID == countryId){ this.countryFilterList.push(item); } }); }else { this.showUserExhibitionList.forEach((item) => { if(item.CountryID == countryId && item.ExhibStatus == selectId){ this.countryFilterList.push(item); } });
// this.userSavedExhibitionPageLength = Math.ceil(
// this.countryFilterList.length / this.savedExhibitionPerPage
// );
}; },
async removeExhibitionRelation() { this.countryFilterList = []; this.exhibitionList = []; this.userSaveExhibition = [];
this.page = 1; this.fetchUserData(); await this.fetchSavedExhibition(); await this.fetchExhibition(); //this.countryFilterList = this.showUserExhibitionList;
if (this.countrySelect.toString() !== "999") { this.countrySelect = 999; } if (this.statusSelect.toString() !== "999") { this.statusSelect = 999; } this.$forceUpdate(); }, },};</script>
<style scoped lang="scss">select { background-image: url("~/assets/svg/dropdownarrow.svg"); width: auto; height: auto; background-position: right 12px center; background-repeat: no-repeat;}</style>
|
