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.
374 lines
12 KiB
374 lines
12 KiB
<template>
|
|
<div class="saveExhibition xl:tw-max-w-[1246px] xl:tw-mx-auto">
|
|
<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 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
|
|
class="tw-text-neutrals-500 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">
|
|
{{ item.status }}
|
|
</option>
|
|
</select> -->
|
|
</div>
|
|
<div
|
|
v-if="userVisibleSavedExhibitionList.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.slice(
|
|
(this.page - 1) * 6,
|
|
this.page * 6
|
|
)"
|
|
: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 {
|
|
firstName: "",
|
|
lastName: "",
|
|
userData: {},
|
|
userCompanyId: [],
|
|
userCompanyList: [],
|
|
userAddNewCompanyList: [],
|
|
userSavedExhibitionList: [],
|
|
userVisibleSavedExhibitionList: [],
|
|
userSavedExhibitionPageLength: 0,
|
|
savedExhibitionPerPage: 6,
|
|
yearOptions: [],
|
|
monthOptions: [],
|
|
dayOptions: [],
|
|
yearSelect: "",
|
|
monthSelect: "",
|
|
daySelect: "",
|
|
languageSelect: {
|
|
en: "",
|
|
zhtw: "",
|
|
},
|
|
phoneValid: false,
|
|
countryOptions: [],
|
|
countrySelect: 999,
|
|
statusOptions: [],
|
|
statusSelect: 100,
|
|
page: 1,
|
|
filterList: [],
|
|
countryFilterList: [],
|
|
};
|
|
},
|
|
async created() {
|
|
// await this.fetchUserData();
|
|
// await this.fetchSavedExhibition();
|
|
// await this.$axios
|
|
// .get(`users/countries?lang=${this.$i18n.locale.replace("-", "")}`)
|
|
// .then((result) => {
|
|
// const initial = {
|
|
// name: this.$t("userProfile.allCountries"),
|
|
// id: 999,
|
|
// };
|
|
// this.countryOptions = result.data.result;
|
|
// this.countryOptions.splice(0, 0, initial);
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
|
|
// await this.$axios
|
|
// .get(`exhibitions/filters?lang=${this.$i18n.locale.replace("-", "")}`)
|
|
// .then((result) => {
|
|
// this.statusOptions = result.data.filters.statuses;
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// });
|
|
this.countryFilterList = this.userVisibleSavedExhibitionList;
|
|
},
|
|
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.fetchSavedExhibition();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
patchUserData() {
|
|
if (this.width < 1366) {
|
|
this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
|
|
}
|
|
this.userData.prefer_country = JSON.stringify(this.languageSelect);
|
|
if (this.$vuetify.breakpoint.name !== "xs") {
|
|
this.userData.birth_date =
|
|
this.yearSelect + "-" + this.monthSelect + "-" + this.daySelect;
|
|
if (this.userData.birth_date.length < 10) {
|
|
this.userData.birth_date = null;
|
|
}
|
|
}
|
|
const patchData = JSON.parse(JSON.stringify(this.userData));
|
|
delete patchData.LoginLog;
|
|
delete patchData.UserCompany;
|
|
delete patchData.UserSocialRelation;
|
|
delete patchData.UserExhibition;
|
|
this.$axios
|
|
.put(
|
|
`/member/users/${this.$route.params.id}?jwt=${
|
|
this.$auth.$storage.getUniversal("jwt").token || ""
|
|
}`,
|
|
patchData
|
|
)
|
|
.then((res) => {
|
|
this.successUpdate = !this.successUpdate;
|
|
setTimeout(() => {
|
|
this.successUpdate = !this.successUpdate;
|
|
}, 1000);
|
|
this.fetchUserData();
|
|
this.$auth.$storage.setUniversal("userPicture", patchData.picture);
|
|
this.$auth.$storage.setUniversal("userLastName", patchData.last_name);
|
|
this.$store.dispatch("updatePicture");
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
async fetchUserData() {
|
|
await this.$axios
|
|
.get(
|
|
`/member/users/${
|
|
this.$auth.$storage.getUniversal("jwt").user_id
|
|
}?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
|
|
)
|
|
.then((res) => {
|
|
this.userData = res.data;
|
|
console.log(this.userData.UserExhibition);
|
|
this.userCompanyId = res.data.UserCompany;
|
|
this.firstName = res.data.first_name;
|
|
this.lastName = res.data.last_name;
|
|
this.userData.phone
|
|
? (this.phoneValid = true)
|
|
: (this.phoneValid = false);
|
|
!this.userData.prefer_country &&
|
|
typeof this.userData.prefer_country === "object"
|
|
? this.userData.prefer_country
|
|
: (this.languageSelect = JSON.parse(this.userData.prefer_country));
|
|
if (
|
|
!this.userData.birth_date &&
|
|
typeof this.userData.birth_date === "object"
|
|
) {
|
|
this.yearSelect = "";
|
|
this.monthSelect = "";
|
|
this.daySelect = "";
|
|
} else {
|
|
const date = this.userData.birth_date.split("-");
|
|
this.yearSelect = date[0];
|
|
this.monthSelect = date[1];
|
|
this.daySelect = date[2];
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
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() {
|
|
// if (this.width < 1366) {
|
|
// this.isSavedExhibitionsDialogActive =
|
|
// !this.isSavedExhibitionsDialogActive;
|
|
// } else {
|
|
// this.tabs = "savedExhibitions";
|
|
// }
|
|
const exhibitionList = [];
|
|
for (let i = 0; i < this.userData.UserExhibition.length; i++) {
|
|
exhibitionList.push(this.userData.UserExhibition[i].exhibition_id);
|
|
}
|
|
if (exhibitionList.length > 0) {
|
|
await this.$axios
|
|
.get(
|
|
`/member/exhibitions?lang=${this.$i18n.locale.replace(
|
|
"-",
|
|
""
|
|
)}&exhibition_id=${[...exhibitionList]}`
|
|
)
|
|
.then((result) => {
|
|
this.userSavedExhibitionList = result.data;
|
|
console.log(this.userSavedExhibitionList);
|
|
this.userSavedExhibitionPageLength = Math.ceil(
|
|
this.userSavedExhibitionList.length / this.savedExhibitionPerPage
|
|
);
|
|
|
|
this.userSavedExhibitionList = this.userSavedExhibitionList;
|
|
for (let i = 0; i < this.userSavedExhibitionList.length; i++) {
|
|
this.userSavedExhibitionList[i].saved = true;
|
|
}
|
|
this.userVisibleSavedExhibitionList = JSON.parse(
|
|
JSON.stringify(this.userSavedExhibitionList)
|
|
);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
},
|
|
filterSavedExhibition(countryId) {
|
|
this.page = 1;
|
|
if (countryId == "999") {
|
|
this.countryFilterList = JSON.parse(
|
|
JSON.stringify(this.userSavedExhibitionList)
|
|
);
|
|
} else {
|
|
this.countryFilterList = this.userVisibleSavedExhibitionList.filter(
|
|
(item) => {
|
|
return item.country.id == countryId;
|
|
}
|
|
);
|
|
}
|
|
this.userSavedExhibitionPageLength = Math.ceil(
|
|
this.countryFilterList.length / this.savedExhibitionPerPage
|
|
);
|
|
},
|
|
|
|
async removeExhibitionRelation() {
|
|
this.page = 1;
|
|
await this.fetchUserData();
|
|
await this.fetchSavedExhibition();
|
|
this.countryFilterList = this.userVisibleSavedExhibitionList;
|
|
if (this.countrySelect.toString() !== "999") {
|
|
this.countrySelect = 999;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</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>
|