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.
541 lines
16 KiB
541 lines
16 KiB
<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>
|
|
|
|
<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";
|
|
export default {
|
|
name: "saveExhibition",
|
|
layout: "profile",
|
|
|
|
components: {
|
|
TwoDots,
|
|
ExhibitionListCard,
|
|
userSidebar,
|
|
elementSelect,
|
|
},
|
|
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,
|
|
};
|
|
},
|
|
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();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
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) => {
|
|
//console.log(JSON.stringify(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?RegionIDs&CountryIDs&CityIDs&MainCategoryIDs&SubCategoryIDs&Status&Date&Sort&Query&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.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(){
|
|
console.log("in");
|
|
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.page = 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>
|