|
|
<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" @change="countryOptionSelected($event)" 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 value="" selected>{{ $t("userProfile.allCountries") }}</option> <option v-for="(item, index) in countryOptions" :key="index" :value="item"> {{ 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="exhibitionCardList.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 v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID"> <ExhibitionListCard :item="exhib" @toggle-favorite="updateExhibitionCardList"></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,
// countrySelect: 999,
statusList: [], statusOptions: [], statusSelect: 999, page: 1, filterList: [], countryFilterList: [], // userSaveExhibitionList: [],
exhibitionList: [], showUserExhibitionList: [], // userSaveExhibition: [],
CountryName: [], test: "", isRouterAlive: true,
countrySelect: "",
currentPage: 1, itemsPerPage: 10, total: 0, selectedCountry: [], selectedSubCategory: [], selectedStatus: [],
countryOptions: [], exhibitionCardList: [], userFavoriateList: [],
}; }, async created() {
this.fetchUserData(); await this.fetchExhibitionListCard(); await this.fetchCountryList(); this.fetchStatusList();
// 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 (value) {
// console.log("countrySelected "+ value);
// if (this.countrySelect) {
// console.log(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: {
result() { return this.total; },
pageLength() { return Math.ceil(this.result / this.itemsPerPage); }, }, methods: {
async fetchCountryList() {
await this.$axios .get( `/trending/api/Favorite/ExhibitionCountryList?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) {
const countryList = data; this.countryOptions = countryList.map((item) => {
return { id: item.CountryID, name: item.CountryName, }; });
}
} }) .catch((error) => { console.log(error); });
},
async fetchExhibitionListCard() {
await this.$axios .get( `/trending/api/Favorite/ExhibitionList?Lang=${this.$i18n.localeProperties["langQuery"]}` + `&PageIndex=${this.currentPage}` + `&PageSize=${this.itemsPerPage}` + `&CountryIDs=${JSON.stringify(this.selectedCountry)}` + `&SubCategoryIDs=${JSON.stringify(this.selectedSubCategory)}` + `&Status=${JSON.stringify(this.selectedStatus)}` ) .then((response) => { if (response && response.data && response.data.DATA && response.data.DATA.rel) { let data = response.data.DATA.rel
if (data.DataList) {
this.exhibitionCardList = []; this.total = data.Total;
data.DataList.forEach(exhib => {
exhib.IsFavorite = "Y"; this.exhibitionCardList.push(exhib);
});
}
} }) .catch((error) => { console.log(error); });
},
countryOptionSelected() {
this.currentPage = 1; this.selectedCountry = [];
if (this.countrySelect) { this.selectedCountry.push(this.countrySelect.id); }
this.updateExhibitionCardList();
},
async fetchStatusList() {
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 updateExhibitionCardList() {
await this.fetchExhibitionListCard();
},
updatePage(value) {
this.currentPage = value; window.scrollTo(0, 0);
this.fetchExhibitionListCard();
}, 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(); },
},};</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>
|
