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.
449 lines
12 KiB
449 lines
12 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" @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>
|
|
<loading :isLoading="isPageLoading"></loading>
|
|
</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";
|
|
import loading from "@/components/newComponent/loading/loading.vue";
|
|
|
|
export default {
|
|
name: "saveExhibition",
|
|
layout: "profile",
|
|
|
|
components: {
|
|
TwoDots,
|
|
ExhibitionListCard,
|
|
userSidebar,
|
|
elementSelect,
|
|
pagination,
|
|
loading
|
|
},
|
|
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: [],
|
|
|
|
isPageLoading: false,
|
|
|
|
|
|
};
|
|
},
|
|
async created() {
|
|
this.isPageLoading = true,
|
|
this.fetchUserData();
|
|
await this.fetchNewExhibitionCardList();
|
|
await this.fetchCountryList();
|
|
await this.fetchStatusList();
|
|
this.$nextTick(()=>{
|
|
this.isPageLoading = false;
|
|
});
|
|
},
|
|
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>
|