Skip to content
Snippets Groups Projects
Commit 901687f5 authored by AnnabelM7's avatar AnnabelM7
Browse files

Merge remote-tracking branch 'origin/Ariana' into Annabel

parents 18cf9a3c 9a083f57
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
eaa_frontend/src/components/EditProfileComponent.vue
+ 182
− 21
View file @ 901687f5
......@@ -15,18 +15,21 @@
<div class="user-details">
<h3>Kasutaja info</h3>
<div class="form-group">
<label for="firstName"><strong>Eesnimi: </strong></label>
<input v-model="editableUser.firstName" type="text" id="firstName" />
<label for="firstName"><strong>Eesnimi*: </strong></label>
<input v-model="editableUser.firstName" required type="text" id="firstName" @blur="validateWord('firstName')" placeholder="Eesnimi"/>
<span v-if="firstNameError" class="error">{{ firstNameError }}</span>
</div>
<div class="form-group">
<label for="lastName"><strong>Perekonnanimi: </strong></label>
<input v-model="editableUser.lastName" type="text" id="lastName" />
<label for="lastName"><strong>Perekonnanimi*: </strong></label>
<input v-model="editableUser.lastName" required type="text" id="lastName" @blur="validateWord('lastName')" placeholder="Perekonnanimi"/>
<span v-if="lastNameError" class="error">{{ lastNameError }}</span>
</div>
<div class="form-group">
<label for="birthDate"><strong>Sünnikuupäev: </strong></label>
<input v-model="editableUser.birthDate" type="date" id="birthDate" />
<label for="birthDate"><strong>Sünnikuupäev*: </strong></label>
<input v-model="editableUser.birthDate" required type="date" id="birthDate" />
<span v-if="birthDateError" class="error">{{ birthDateError }}</span>
</div>
<div class="form-group">
......@@ -43,52 +46,64 @@
<div class="user-contact">
<h3>Kontakt</h3>
<div class="form-group">
<label for="phoneNr"><strong>Telefon: </strong></label>
<input v-model="editableUser.phoneNr" type="text" id="phoneNr" />
<label for="phoneNr"><strong>Telefon*: </strong></label>
<input v-model="editableUser.phoneNr" required type="text" id="phoneNr" @blur="validatePhoneNr" placeholder="Telefoni number"/>
<span v-if="phoneNrError" class="error">{{ phoneNrError }}</span>
</div>
<div class="form-group">
<label for="email"><strong>Email: </strong></label>
<input v-model="editableUser.email" type="email" id="email" />
<label for="email"><strong>Email*: </strong></label>
<input v-model="editableUser.email" required type="email" id="email" @blur="validateEmail" placeholder="Email"/>
<span v-if="emailError" class="error">{{ emailError }}</span>
</div>
</div>
<div class="user-address">
<h3>Asukoha info</h3>
<div class="form-group">
<label for="county"><strong>Maakond: </strong></label>
<input v-model="editableUser.county" type="text" id="county" />
<label for="county"><strong>Maakond*: </strong></label>
<input v-model="editableUser.county" required type="text" id="county" @blur="validateWord('county')" placeholder="Maakond"/>
<span v-if="countyError" class="error">{{ countyError }}</span>
</div>
<div class="form-group">
<label for="city"><strong>Linn: </strong></label>
<input v-model="editableUser.city" type="text" id="city" />
<label for="city"><strong>Linn*: </strong></label>
<input v-model="editableUser.city" required type="text" id="city" @blur="validateWord('city')" placeholder="Linn"/>
<span v-if="cityError" class="error">{{ cityError }}</span>
</div>
<div class="form-group">
<label for="address"><strong>Aadress: </strong></label>
<input v-model="editableUser.streetName" type="text" id="streetName">
<input v-model="editableUser.streetNr" type="text" id="streetNr">
<input v-model="editableUser.postalCode" type="text" id="postalCode">
<label for="address"><strong>Aadress*: </strong></label>
<input v-model="editableUser.streetName" required type="text" id="streetName" @blur="validateWord('streetName')" placeholder="Tänav">
<span v-if="streetNameError" class="error">{{ streetNameError }}</span>
<input v-model="editableUser.streetNr" required type="text" id="streetNr" placeholder="Maja ja/või korteri number">
<span v-if="streetNrError" class="error">{{ streetNrError }}</span>
<input v-model="editableUser.postalCode" required type="text" id="postalCode" @blur="validateNumber('postalCode')" placeholder="Postiindeks">
<span v-if="postalcodeError" class="error">{{ postalcodeError }}</span>
</div>
</div>
<div class="user-tags-regions-species">
<h3>Funktsioonid</h3>
<h3>Funktsioonid*</h3>
<multiselect
v-model="editableUser.tags"
:options="tags"
:multiple="true"
:placeholder="editableUser.tags.length ? '' : 'Vali funktsioonid'"
:class="{'is-invalid': !isValidTags}"
/>
<h3>Regioonid</h3>
<div v-if="!isValidTags" class="error-message">Funktsioonid on kohustuslikud!</div>
<h3>Regioonid*</h3>
<multiselect
v-model="editableUser.regions"
:options="regions"
:multiple="true"
:placeholder="editableUser.regions.length ? '' : 'Vali regioonid'"
:class="{'is-invalid': !isValidRegions}"
/>
<div v-if="!isValidRegions" class="error-message">Piirkonnad on kohustuslikud!</div>
<h3>Liigigrupid</h3>
<div>
<span v-for="speciesItem in editableUser .species" :key="speciesItem.id">
......@@ -129,6 +144,19 @@ export default {
tags: [],
regions: [],
species: [],
phoneNrError: '',
emailError: '',
firstNameError: '',
lastNameError: '',
birthDateError: '',
countyError: '',
cityError: '',
streetNameError: '',
streetNrError: '',
postalcodeError: '',
formHasErrors: true,
isValidTags: true,
isValidRegions: true,
};
},
mounted() {
......@@ -144,6 +172,74 @@ export default {
},
},
methods: {
validatePhoneNr() {
const phoneNrPattern = /^\+?[0-9]+$/;
if (this.editableUser.phoneNr && !phoneNrPattern.test(this.editableUser.phoneNr)) {
this.phoneNrError = 'Telefoninumber võib sisaldada ainult numbreid!';
} else {
this.phoneNrError = '';
}
this.checkFormValidity();
},
validateEmail() {
if (this.editableUser.email && !this.editableUser.email.includes('@')) {
this.emailError = 'E-post peab sisaldama "@" sümbolit.';
} else {
this.emailError = '';
}
this.checkFormValidity();
},
validateNumber(field) {
const numberPattern = /^[0-9]+$/;
/*if (field === "streetNr") {
if (this.editableUser.streetNr && !numberPattern.test(this.editableUser.streetNr)) {
this.streetNrError = 'Maja number võib sisaldada ainult numbreid!';
}
} else*/ if (field === "postalCode") {
if (this.editableUser.postalCode && !numberPattern.test(this.editableUser.postalCode)) {
this.postalcodeError = 'Postiindeks võib sisaldada ainult numbreid!';
}
}
this.checkFormValidity();
},
validateWord(field) {
const wordPattern = /^[A-Za-z ]+$/;
if (field === "firstName") {
if (this.editableUser.firstName && !wordPattern.test(this.editableUser.firstName)) {
this.firstNameError = 'Eesnimi võib sisaldada ainult tähti!';
}
} else if (field === "lastName") {
if (this.editableUser.lastName && !wordPattern.test(this.editableUser.lastName)) {
this.lastNameError = 'Perekonnanimi võib sisaldada ainult tähti!';
}
} else if (field === "county") {
if (this.editableUser.county && !wordPattern.test(this.editableUser.county)) {
this.countyError = 'Maakond võib sisaldada ainult tähti!';
}
} else if (field === "city") {
if (this.editableUser.city && !wordPattern.test(this.editableUser.city)) {
this.cityError = 'Linn võib sisaldada ainult tähti!';
}
} else if (field === "streetName") {
if (this.editableUser.streetName && !wordPattern.test(this.editableUser.streetName)) {
this.streetNameError = 'Tänav võib sisaldada ainult tähti!';
}
}
this.checkFormValidity();
},
checkFormValidity() {
// Kontrollib, kas kõik nõutavad väljad on täidetud
this.formHasErrors =
this.phoneNrError !== '' ||
this.emailError !== '' ||
this.firstNameError !== '' ||
this.lastNameError !== '' ||
this.countyError !== '' ||
this.cityError !== '' ||
this.streetNameError !== '' ||
this.streetNrError !== '' ||
this.postalcodeError !== '';
},
async fetchData() {
try {
const [tagsResponse, regionsResponse] = await Promise.all([
......@@ -166,7 +262,63 @@ export default {
this.$emit('close-popup');
}
},
validateFields() {
// Reset errors
this.firstNameError = '';
this.lastNameError = '';
this.countyError = '';
this.cityError = '';
this.streetNameError = '';
this.phoneNrError = '';
this.emailError = '';
this.streetNrError = '';
this.postalcodeError = '';
this.birthDateError = '';
// Check required fields
if (!this.editableUser.firstName) {
this.firstNameError = 'Eesnimi on kohustuslik!';
}
if (!this.editableUser.lastName) {
this.lastNameError = 'Perekonnanimi on kohustuslik!';
}
if (!this.editableUser.birthDate) {
this.birthDateError = 'Sünnikuupäev on kohustuslik!';
}
if (!this.editableUser.phoneNr) {
this.phoneNrError = 'Telefoni number on kohustuslik!';
}
if (!this.editableUser.email) {
this.emailError = 'Email on kohustuslik!';
}
if (!this.editableUser.county) {
this.countyError = 'Maakond on kohustuslik!';
}
if (!this.editableUser.city) {
this.cityError = 'Linn on kohustuslik!';
}
if (!this.editableUser.streetName) {
this.streetNameError = 'Tänav on kohustuslik!';
}
if (!this.editableUser.streetNr) {
this.streetNrError = 'Maja ja/või korteri number on kohustuslik!';
}
if (!this.editableUser.postalCode) {
this.postalcodeError = 'Postiindeks on kohustuslik!';
}
this.isValidTags = this.editableUser.tags.length > 0;
this.isValidRegions = this.editableUser.regions.length;
console.log(this.editableUser.birthDate);
// Return true if no errors
return !this.firstNameError && !this.lastNameError && !this.birthDateError && !this.countyError && !this.cityError && !this.streetNameError && !this.phoneNrError && !this.emailError && !this.streetNrError && !this.postalcodeError && this.isValidTags && this.isValidRegions;
},
async saveChanges() {
if (!this.validateFields()) {
alert('Palun täitke kõik kohustuslikud väljad!');
return; // Stops the save process if validation fails
}
console.log(this.editableUser.birthDate);
try {
const response = await fetch(`http://localhost:8080/api/users/edit/${this.editableUser.id}`, {
method: 'PUT',
......@@ -221,6 +373,15 @@ export default {
this.$router.push('/login');
},
},
/*watch: {
'editableUser.birthDate': function(newValue) {
if (!newValue) {
this.birthDateError = 'Sünnikuupäev on kohustuslik!';
} else {
this.birthDateError = ''; // Clear error if valid
}
}
}*/
};
</script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment