|
|
<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 v-else 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 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: 6,
}; }, async created() { this.fetchUserData(); await this.fetchSavedExhibition(); await this.fetchExhibition(); 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: { 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 fetchSavedExhibition() { 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 );
//this.userVisibleSavedExhibitionList = JSON.parse(JSON.stringify(this.userSaveExhibition));
} } }) .catch((error) => { console.log(error); }); },
async fetchExhibition() { 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; this.showUserExhibitionList = []; this.countryFilterList = []; this.userSavedExhib();
//Berlin示範的
// this.exhibitionList.forEach((exhib) => {
// this.exhibitionMap.set(exhib.ExhibitionID, exhib);
// })
// this.userSaveExhibition.forEach((exhib) => {
// this.showUserExhibitionList.push(this.exhibitionMap.get(exhib.ExhibitionID));
// })
}; }; }) .catch((error) => { console.log(error); }); },
async userSavedExhib(){ this.exhibitionList.forEach((exhib) => { this.userSaveExhibition.forEach((user) => { if(exhib.ExhibitionID == user.ParentID){ 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>
|
