funktionalität edit
This commit is contained in:
scammo
@ -20,7 +20,6 @@
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="profile.pronouns"
|
||||
required
|
||||
/>
|
||||
<div id="emailHelp" class="form-text">
|
||||
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
|
||||
@ -49,86 +48,61 @@
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="skills" class="form-label"
|
||||
>Deine Fähigkeiten: (Autocomplete)</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="searchSkillsText"
|
||||
@keyup="searchSkills()"
|
||||
/>
|
||||
<div class="" v-if="searchSkillResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchSkillResults"
|
||||
:key="result.id"
|
||||
@click="addSkill(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<auto-complete
|
||||
type="skill"
|
||||
label="Deine Fähigkeiten (Autocomplete)"
|
||||
:values="profile.skills"
|
||||
@update-values="profile.skills = $event"
|
||||
></auto-complete>
|
||||
<auto-complete
|
||||
type="language"
|
||||
label="Deine Sprachen (Autocomplete)"
|
||||
:values="profile.languages"
|
||||
@update-values="profile.languages = $event"
|
||||
></auto-complete>
|
||||
<auto-complete
|
||||
type="skill"
|
||||
label="Ich Suche"
|
||||
:values="profile.searchtopics"
|
||||
@update-values="profile.searchtopics = $event"
|
||||
></auto-complete>
|
||||
|
||||
<auto-complete
|
||||
type="contacttype"
|
||||
label="Kontaktmöglichkeiten"
|
||||
:values="profile.contacts"
|
||||
@update-values="profile.contacts = $event"
|
||||
></auto-complete>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="pzl" class="form-label">PZL</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.postcode"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="skill in profile.skills"
|
||||
:key="skill.id"
|
||||
class="badge bg-primary m-2"
|
||||
>
|
||||
{{ skill.name }}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
aria-label="Close"
|
||||
@click="removeSkill(skill.id)"
|
||||
></button>
|
||||
</span>
|
||||
<div class="col">
|
||||
<label for="pzl" class="form-label">Stadt</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.city"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="skills" class="form-label"
|
||||
>Deine Sprachen: (Autocomplete)</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="searchLanguagesText"
|
||||
@keyup="searchLanguages()"
|
||||
/>
|
||||
<div class="" v-if="searchLanguagesResult">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchLanguagesResult"
|
||||
:key="result.id"
|
||||
@click="addLanguage(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col">
|
||||
<label for="pzl" class="form-label">Land</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.country"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="language in profile.languages"
|
||||
:key="language.id"
|
||||
class="badge bg-primary m-2"
|
||||
>
|
||||
{{ language.name }}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
aria-label="Close"
|
||||
@click="removeLanguage(language.id)"
|
||||
></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
|
||||
<div
|
||||
@ -143,36 +117,30 @@
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
import AutoComplete from "@/components/AutoComplete";
|
||||
export default {
|
||||
name: "profileEdit",
|
||||
components: {
|
||||
AutoComplete,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
|
||||
profile: {
|
||||
nickname: "",
|
||||
pronouns: "",
|
||||
volunteerwork: "",
|
||||
freetext: "",
|
||||
created: "",
|
||||
updated: "",
|
||||
address: {
|
||||
name: "",
|
||||
street: "",
|
||||
house_number: "",
|
||||
additional: "",
|
||||
postcode: "",
|
||||
city: "",
|
||||
country: "",
|
||||
},
|
||||
skills: [],
|
||||
languages: [],
|
||||
searchtopics: [],
|
||||
contacts: [],
|
||||
},
|
||||
searchLanguagesText: "",
|
||||
searchLanguagesResult: [],
|
||||
searchSkillsText: "",
|
||||
searchSkillResults: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
@ -190,6 +158,11 @@ export default {
|
||||
this.profile.pronouns = userProfile.data.profile.pronouns;
|
||||
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
|
||||
this.profile.freetext = userProfile.data.profile.freetext;
|
||||
this.profile.skills = userProfile.data.profile.skills;
|
||||
this.profile.languages = userProfile.data.profile.languages;
|
||||
this.profile.searchtopics = userProfile.data.profile.searchtopics;
|
||||
this.profile.contacts = userProfile.data.profile.contacts;
|
||||
this.profile.address = userProfile.data.profile.address;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
@ -201,14 +174,7 @@ export default {
|
||||
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
{
|
||||
nickname: this.profile.nickname,
|
||||
pronouns: this.profile.pronouns,
|
||||
volunteerwork: this.profile.volunteerwork,
|
||||
freetext: this.profile.freetext,
|
||||
skills: this.profile.skills,
|
||||
languages: this.profile.languages,
|
||||
},
|
||||
this.profile,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
@ -225,67 +191,7 @@ export default {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
async searchSkills() {
|
||||
try {
|
||||
const skillResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
|
||||
);
|
||||
if (skillResult.status === 200) {
|
||||
this.searchSkillResults = skillResult.data.skills;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
addSkill(skill) {
|
||||
console.log(this.profile.skills.map((item) => item.id));
|
||||
if (this.profile.skills.map((item) => item.id).includes(skill.id))
|
||||
return false;
|
||||
this.profile.skills.push(skill);
|
||||
this.searchSkillsText = "";
|
||||
this.searchSkillResults = [];
|
||||
},
|
||||
removeSkill(skillId) {
|
||||
this.profile.skills = this.profile.skills.filter((skill) => {
|
||||
if (skillId === skill.id) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
async searchLanguages() {
|
||||
try {
|
||||
const languageResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/languages?search=${this.searchLanguagesText}`
|
||||
);
|
||||
if (languageResult.status === 200) {
|
||||
this.searchLanguagesResult = languageResult.data.languages;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
|
||||
addLanguage(language) {
|
||||
if (this.profile.languages.map((item) => item.id).includes(language.id))
|
||||
return false;
|
||||
this.profile.languages.push(language);
|
||||
this.searchLanguagesText = "";
|
||||
this.searchLanguagesResult = [];
|
||||
},
|
||||
removeLanguage(languageId) {
|
||||
this.profile.languages = this.profile.languages.filter((language) => {
|
||||
if (languageId === language.id) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user