|
|
<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" @change="statusOptionSelected($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 focus:tw-border-primary-1 md:tw-text-[16px]"> <option value="" selected>{{ $t("userProfile.allStatus") }}</option> <option v-for="(item, index) in statusOptions" :key="index" :value="item"> {{ item.name }} </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]">
<div v-for="exhib in exhibitionCardList" :key="exhib.ExhibitionID"> <ExhibitionListCard :item="exhib" @toggle-favorite="fetchNewExhibitionCardList"></ExhibitionListCard> </div>
<div class="tw-mt-[34px] tw-flex tw-justify-end"> <pagination :pageLength="pageLength" @update="updatePage"></pagination> </div>
</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 {
firstName: "", lastName: "", userData: {}, userCompanyId: [], userCompanyList: [], userAddNewCompanyList: [],
yearOptions: [], monthOptions: [], dayOptions: [],
yearSelect: "", monthSelect: "", daySelect: "",
languageSelect: { en: "", zhtw: "", },
phoneValid: false,
isRouterAlive: true,
countrySelect: "", statusSelect: "",
currentPage: 1, itemsPerPage: 6, total: 0, selectedCountry: [], selectedSubCategory: [], selectedStatus: [],
countryOptions: [], statusOptions: [], exhibitionCardList: [],
}; }, async created() {
this.fetchUserData(); await this.fetchNewExhibitionCardList(); await this.fetchCountryList(); await this.fetchStatusList();
}, 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: {
}, 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 fetchStatusList() {
await this.$axios .get( `/trending/api/Favorite/ExhibitionStatusList?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 statusList = data; this.statusOptions = statusList.map((item) => {
return { id: item.Key, name: item.Value, }; });
}
} }) .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.selectedCountry = [];
if (this.countrySelect) { this.selectedCountry.push(this.countrySelect.id); }
this.fetchNewExhibitionCardList();
},
statusOptionSelected() {
this.selectedStatus = [];
if (this.statusSelect) { this.selectedStatus.push(this.statusSelect.id); }
this.fetchNewExhibitionCardList();
},
async fetchNewExhibitionCardList() {
this.currentPage = 1;
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>
|
