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.
492 lines
18 KiB
492 lines
18 KiB
<template>
|
|
<div class="editPersonalInfo 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.editPersonalInfo") }}
|
|
</div>
|
|
<!-- alert -->
|
|
<div v-if="successUpdate" class="tw-flex tw-w-full tw-right-auto tw-left-auto">
|
|
<div type="success"
|
|
class="tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-mx-auto tw-flex tw-flex-row tw-w-fit tw-items-center tw-bg-success-background tw-rounded-[12px] tw-px-[12px] tw-py-[10px]">
|
|
<img src="~/assets/svg/alert_success.svg" class="tw-w-[16px] tw-mr-[10px] md:tw-w-[20px]" alt="" />
|
|
<div class="tw-hidden md:tw-block tw-text-success-default tw-font-bold tw-text-[16px] md:tw-mr-[16px]">
|
|
Awesome!
|
|
</div>
|
|
<div class="tw-text-[12px] tw-text-success-default tw-mr-[9px] md:tw-text-[16px] md:tw-mr-[16px]">
|
|
Successfully updated.
|
|
</div>
|
|
<img src="~/assets/svg/alert_close.svg" @click="successUpdate = !successUpdate" />
|
|
</div>
|
|
</div>
|
|
<div v-if="fileTooBig" class="tw-flex tw-w-full tw-right-auto tw-left-auto">
|
|
<div type="error"
|
|
class="tw-absolute tw-top-0 tw-right-0 tw-left-0 tw-mx-auto tw-flex tw-flex-row tw-w-fit tw-items-center tw-bg-error-background tw-rounded-[16px] tw-px-[12px] tw-py-[10px] tw-text-[12px]">
|
|
<img src="~/assets/svg/alert_notice.svg" class="tw-w-[16px] tw-mr-[10px] md:tw-w-[20px]" alt="" />
|
|
<div class="tw-hidden md:tw-block tw-text-error-default tw-mr-[25px] tw-text-[16px]">
|
|
Oops!
|
|
</div>
|
|
|
|
<div class="tw-text-error-default tw-mr-[8px] md:tw-text-[16px] md:tw-mr-[16px]">
|
|
Please upload an image under 2MB.
|
|
</div>
|
|
<img src="~/assets/svg/alert_close_red.svg" @click="fileTooBig = !fileTooBig" alt="" />
|
|
</div>
|
|
</div>
|
|
<!-- user picture -->
|
|
<div class="tw-flex tw-items-center tw-mb-[30px]">
|
|
<div>
|
|
<img v-if="userData.picture" :src="userData.picture"
|
|
class="tw-border tw-border-solid tw-border-neutral-300 tw-h-[64px] tw-w-[64px] tw-rounded-[50px] tw-mr-[15px] md:tw-h-[90px] md:tw-w-[90px] md:tw-mr-[30px]"
|
|
alt="" />
|
|
<div v-else
|
|
class="tw-flex tw-justify-center tw-items-center tw-bg-primary-1 tw-text-white tw-text-[32px] tw-h-[64px] tw-w-[64px] tw-rounded-[50px] tw-mr-[15px] md:tw-h-[90px] md:tw-w-[90px] md:tw-mr-[30px]">
|
|
{{ lastName.split("")[0] || "" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="tw-border tw-border-solid tw-border-primary-1 tw-text-[14px] tw-text-primary-1 tw-px-[16px] tw-py-[9px] tw-rounded-[12px] md:tw-text-[16px]"
|
|
@click="handleUploadEvent">
|
|
{{ $t("userProfile.uploadPicture") }}
|
|
</button>
|
|
<input type="file" class="d-none" ref="uploader" @change="userPictureUpload" />
|
|
</div>
|
|
</div>
|
|
<!-- form -->
|
|
<form
|
|
class="tw-grid tw-grid-cols-1 tw-gap-y-[20px] tw-mb-[58px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-mb-[50px]">
|
|
<!-- tilte -->
|
|
<div class="element md:tw-col-span-2 md:tw-max-w-[394px]">
|
|
<div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
|
|
{{ $t("userProfile.title") }}
|
|
</div>
|
|
<elementSelectWithIndex :select="{
|
|
id: 'title',
|
|
label: 'Title',
|
|
required: false,
|
|
}" :yearList="genderOptions" :default="userData.title" :validation="validation.title"
|
|
@change="userData.title = $event"></elementSelectWithIndex>
|
|
</div>
|
|
<!-- firstName -->
|
|
<div class="element">
|
|
<elementInput :input="{
|
|
id: 'firstName',
|
|
label: 'First Name',
|
|
required: true,
|
|
type: 'text',
|
|
}" :default="userData.first_name" :validation="validation.first_name"
|
|
@change="userData.first_name = $event"></elementInput>
|
|
</div>
|
|
<!-- lastName -->
|
|
<div class="element">
|
|
<elementInput :input="{
|
|
id: 'lastName',
|
|
label: 'Last Name',
|
|
required: true,
|
|
type: 'text',
|
|
}" :default="userData.last_name" :validation="validation.last_name" @change="userData.last_name = $event">
|
|
</elementInput>
|
|
</div>
|
|
<!-- email -->
|
|
<div class="element">
|
|
<elementInput :input="{
|
|
id: 'email',
|
|
label: 'userProfile.personalMail',
|
|
required: true,
|
|
type: 'email',
|
|
}" :default="userData.email" :validation="validation.email" @change="userData.email = $event">
|
|
</elementInput>
|
|
</div>
|
|
<!-- Phone -->
|
|
<div>
|
|
<div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
|
|
{{ $t("userProfile.phone") }}
|
|
</div>
|
|
<div>
|
|
<vue-country-code class="d-none" v-model="countryCode" enabledCountryCode :enabledFlags="false"
|
|
@onSelect="showCode"></vue-country-code>
|
|
<vue-phone-number-input v-model="userData.phone" color="#EF5A5A" valid-color="#EE9546" :border-radius="5"
|
|
no-flags no-example @update="getPhoneData" :translations="translateOption">
|
|
</vue-phone-number-input>
|
|
</div>
|
|
</div>
|
|
<!-- Birthday -->
|
|
<div class="md:tw-col-span-2 xl:tw-col-span-1">
|
|
<div class="tw-text-[14px] tw-text-base-primary tw-mb-[10px]">
|
|
{{ $t("userProfile.birthday")
|
|
}}<span class="tw-text-error-default">*</span>
|
|
</div>
|
|
<div class="tw-grid tw-grid-cols-3 tw-gap-[20px]">
|
|
<div class="element">
|
|
<elementSelectWithIndex :select="{
|
|
id: 'yearSelect',
|
|
required: true,
|
|
}" :yearList="yearOptions" :default="yearSelect" :validation="validation.yearSelect"
|
|
@change="yearSelect = $event"></elementSelectWithIndex>
|
|
</div>
|
|
<div class="element">
|
|
<elementSelectWithIndex :select="{
|
|
id: 'monthSelect',
|
|
required: false,
|
|
}" :yearList="monthOptions" :default="monthSelect" :validation="validation.monthSelect"
|
|
@change="monthSelect = $event"></elementSelectWithIndex>
|
|
</div>
|
|
<div class="element">
|
|
<elementSelectWithIndex :select="{
|
|
id: 'daySelect',
|
|
required: false,
|
|
}" :yearList="dayOptions" :default="daySelect" :validation="validation.daySelect"
|
|
@change="daySelect = $event"></elementSelectWithIndex>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Country -->
|
|
<div class="element md:tw-col-span-2 xl:tw-col-span-1">
|
|
<elementSelect :select="{
|
|
id: 'Country',
|
|
label: 'userProfile.countryAndRegion',
|
|
required: true,
|
|
}" :selectList="countryOptions" :default="userData.country" :validation="validation.country"
|
|
@change="userData.country = $event"></elementSelect>
|
|
</div>
|
|
<!-- language -->
|
|
<v-spacer class="tw-items-center md:tw-flex md:tw-justify-start md:tw-mt-[20px] md:tw-flex-nowrap">
|
|
<div class="tw-inline-block tw-mb-[20px] md:tw-whitespace-nowrap md:tw-mb-0">
|
|
{{ $t("userProfile.preferLanguage") }}
|
|
</div>
|
|
<v-spacer class="tw-flex md:tw-w-fit md:tw-ml-[30px]">
|
|
<v-checkbox v-model="languageSelect.en" class="mt-0" hide-details :label="$t('English')"></v-checkbox>
|
|
<v-checkbox v-model="languageSelect.zhtw" class="ms-10 mt-0" hide-details :label="$t('Chinese')">
|
|
</v-checkbox>
|
|
</v-spacer>
|
|
</v-spacer>
|
|
</form>
|
|
<!-- button -->
|
|
<div>
|
|
<button
|
|
class="tw-text-[18px] tw-bg-primary-1 tw-text-white tw-py-[12px] tw-w-full tw-rounded-[16px] tw-mb-[10px] md:tw-w-fit md:tw-px-[16px] md:tw-mr-[20px]"
|
|
@click="patchUserData()">
|
|
{{ $t("userProfile.saveButton") }}
|
|
</button>
|
|
<button
|
|
class="tw-text-[18px] tw-bg-white tw-text-primary-1 tw-py-[12px] tw-w-full tw-rounded-[16px] md:tw-w-fit md:tw-px-[16px] xl:tw-hidden">
|
|
{{ $t("Cancel") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<CropImageDialog :isCropImageDialogActive="isCropImageDialogActive" :cropImagePreview="cropImagePreview"
|
|
@close-crop-dialog="closeCropDialog" @upload-image-success="handleImageUpdate"></CropImageDialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import elementSelect from "@/components/newComponent/form/ElementSelect.vue";
|
|
import elementInput from "@/components/newComponent/form/ElementInput.vue";
|
|
import SavedExhibitions from "../../components/user/savedExhibitions.vue";
|
|
import SavedExhibitionsDialog from "../../components/user/savedExhibitionsDialog.vue";
|
|
import CropImageDialog from "../../components/user/cropImageDialog.vue";
|
|
import TwoDots from "@/components/TwoDots";
|
|
import userSidebar from "@/components/user/userSidebar.vue";
|
|
import elementSelectWithIndex from "@/components/newComponent/form/ElementSelectWithIndex.vue";
|
|
import is from "is_js";
|
|
export default {
|
|
name: "editPersonalInfo",
|
|
layout: "profile",
|
|
components: {
|
|
elementSelect,
|
|
elementInput,
|
|
SavedExhibitions,
|
|
SavedExhibitionsDialog,
|
|
CropImageDialog,
|
|
TwoDots,
|
|
userSidebar,
|
|
elementSelectWithIndex,
|
|
is,
|
|
},
|
|
data() {
|
|
return {
|
|
genderOptions: ["Mr.", "Ms."],
|
|
successUpdate: false,
|
|
fileTooBig: false,
|
|
firstName: "",
|
|
lastName: "",
|
|
countryCode: "",
|
|
userData: {},
|
|
userCompanyId: [],
|
|
propUserCompany: {},
|
|
yearOptions: [],
|
|
monthOptions: [],
|
|
dayOptions: [],
|
|
countryOptions: [],
|
|
countrySortOptions: [],
|
|
yearSelect: "",
|
|
monthSelect: "",
|
|
daySelect: "",
|
|
languageSelect: {
|
|
en: "",
|
|
zhtw: "",
|
|
},
|
|
isCropImageDialogActive: false,
|
|
cropImagePreview: "",
|
|
dateMenu: false,
|
|
translateOption: {
|
|
countrySelectorLabel: this.$t("country code"),
|
|
phoneNumberLabel: this.$t("phone number"),
|
|
},
|
|
rules: {
|
|
require: (value) => !!value || this.$t("Required."),
|
|
email: (v) =>
|
|
/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(
|
|
v
|
|
) || this.$t("Invalid email"),
|
|
checkPassword: (v) =>
|
|
(/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) &&
|
|
v.length >= 8 &&
|
|
v.length <= 20) ||
|
|
this.$t(
|
|
"Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter"
|
|
),
|
|
},
|
|
personalInfoValid: false,
|
|
phoneValid: false,
|
|
isNavActive: true,
|
|
// width: 0,
|
|
validation: {
|
|
title: true,
|
|
first_name: true,
|
|
last_name: true,
|
|
email: true,
|
|
yearSelect: true,
|
|
monthSelect: true,
|
|
daySelect: true,
|
|
country: true,
|
|
},
|
|
errors: null,
|
|
};
|
|
},
|
|
created() {
|
|
//this.fetchCountry();
|
|
this.$store.dispatch("updatePicture");
|
|
//this.fetchUserData();
|
|
},
|
|
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);
|
|
});
|
|
},
|
|
methods: {
|
|
patchUserData() {
|
|
// if (this.width < 1366) {
|
|
// this.isEditInfoDialogActive = !this.isEditInfoDialogActive;
|
|
// }
|
|
this.validators();
|
|
if (this.validators()) {
|
|
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.$auth.$storage.getUniversal("jwt").user_id
|
|
}?jwt=${this.$auth.$storage.getUniversal("jwt").token || ""
|
|
}`,
|
|
patchData
|
|
)
|
|
.then((res) => {
|
|
if (res.status == 200) {
|
|
this.$notify({
|
|
type: "success",
|
|
text: "更新成功",
|
|
});
|
|
}
|
|
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);
|
|
});
|
|
}
|
|
},
|
|
fetchUserData() {
|
|
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;
|
|
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);
|
|
});
|
|
},
|
|
handleUploadEvent() {
|
|
window.addEventListener("focus", () => { }, { once: true });
|
|
this.$refs.uploader.click();
|
|
},
|
|
userPictureUpload(e) {
|
|
const payload = new FormData();
|
|
payload.append("file", e.target.files[0]);
|
|
const fileSize = (e.target.files[0].size / 1024 / 1024).toFixed(1);
|
|
if (fileSize >= 2) {
|
|
this.fileTooBig = !this.fileTooBig;
|
|
} else {
|
|
this.$axios
|
|
.post("/users/images", payload)
|
|
.then((response) => {
|
|
this.cropImagePreview = response.data.image.url;
|
|
})
|
|
.catch((error) => console.log(error));
|
|
this.isCropImageDialogActive = !this.isCropImageDialogActive;
|
|
}
|
|
},
|
|
getPhoneData(phoneData) {
|
|
this.countryCode = phoneData.countryCode;
|
|
this.phoneValid = phoneData.isValid;
|
|
},
|
|
showCode(object) {
|
|
this.userData.country_code = object.dialCode;
|
|
},
|
|
fetchCountry() {
|
|
this.$axios
|
|
.get(`/users/countries?lang=${this.$i18n.locale.replace("-", "")}`)
|
|
.then((res) => {
|
|
this.countryOptions = res.data.result;
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
closeCropDialog() {
|
|
this.isCropImageDialogActive = !this.isCropImageDialogActive;
|
|
},
|
|
handleImageUpdate(pictureURL) {
|
|
this.userData.picture = pictureURL;
|
|
this.patchUserData();
|
|
this.closeCropDialog();
|
|
},
|
|
validators() {
|
|
if (is.empty(this.userData.first_name)) {
|
|
this.validation.first_name = false;
|
|
} else {
|
|
this.validation.first_name = true;
|
|
}
|
|
if (is.empty(this.userData.last_name)) {
|
|
this.validation.last_name = false;
|
|
} else {
|
|
this.validation.last_name = true;
|
|
}
|
|
if (is.empty(this.userData.email) || is.not.email(this.userData.email)) {
|
|
this.validation.email = false;
|
|
} else {
|
|
this.validation.email = true;
|
|
}
|
|
if (is.empty(this.yearSelect)) {
|
|
this.validation.yearSelect = false;
|
|
} else {
|
|
this.validation.yearSelect = true;
|
|
}
|
|
if (is.empty(this.monthSelect)) {
|
|
this.validation.monthSelect = false;
|
|
} else {
|
|
this.validation.monthSelect = true;
|
|
}
|
|
if (is.empty(this.daySelect)) {
|
|
this.validation.daySelect = false;
|
|
} else {
|
|
this.validation.daySelect = true;
|
|
}
|
|
if (is.null(this.userData.country) || this.userData.country == 0) {
|
|
this.validation.country = false;
|
|
} else {
|
|
this.validation.country = true;
|
|
}
|
|
this.errors = Object.entries(this.validation).filter(
|
|
(e) => e[1] == false
|
|
);
|
|
if (this.errors.length > 0) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss" scoped>
|
|
.success-alert {
|
|
position: absolute;
|
|
left: 13%;
|
|
z-index: 10;
|
|
top: -3%;
|
|
}
|
|
|
|
.success-alert-dialog {
|
|
position: absolute;
|
|
left: 13%;
|
|
z-index: 10;
|
|
top: 3%;
|
|
}
|
|
</style>
|