forked from kompetenzinventar/ki-frontend
router, auth, edit, first autocomplete, bascis structure, no design
This commit is contained in:
scammo
@ -9,7 +9,7 @@
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="nickname"
|
||||
v-model="nickname"
|
||||
v-model="profile.nickname"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="pronouns"
|
||||
v-model="profile.pronouns"
|
||||
required
|
||||
/>
|
||||
<div id="emailHelp" class="form-text">
|
||||
@ -34,7 +34,7 @@
|
||||
class="form-control"
|
||||
id="freetext"
|
||||
rows="3"
|
||||
v-model="freetext"
|
||||
v-model="profile.freetext"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="col-12 col-xs-12">
|
||||
@ -45,14 +45,16 @@
|
||||
class="form-control"
|
||||
id="volunteerwork"
|
||||
rows="3"
|
||||
v-model="volunteerwork"
|
||||
v-model="profile.volunteerwork"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="skills" class="form-label">Deine Fähigkeiten: (Autocomplete)</label>
|
||||
<label for="skills" class="form-label"
|
||||
>Deine Fähigkeiten: (Autocomplete)</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
@ -61,16 +63,19 @@
|
||||
/>
|
||||
<div class="" v-if="searchSkillResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchSkillResults"
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchSkillResults"
|
||||
:key="result.id"
|
||||
@click="addSkill(result)">{{result.name}}</li>
|
||||
@click="addSkill(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="skill in skills"
|
||||
v-for="skill in profile.skills"
|
||||
:key="skill.id"
|
||||
class="badge bg-primary m-2"
|
||||
>
|
||||
@ -84,6 +89,46 @@
|
||||
</span>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
|
||||
<div
|
||||
@ -101,51 +146,109 @@ import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "profileEdit",
|
||||
created() {
|
||||
// get user profile by jwt tocken and fill the form details
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
nickname: "",
|
||||
pronouns: "",
|
||||
freetext: "",
|
||||
volunteerwork: "",
|
||||
languages: [],
|
||||
|
||||
profile: {
|
||||
nickname: "",
|
||||
pronouns: "",
|
||||
volunteerwork: "",
|
||||
freetext: "",
|
||||
created: "",
|
||||
updated: "",
|
||||
address: {
|
||||
name: "",
|
||||
street: "",
|
||||
house_number: "",
|
||||
additional: "",
|
||||
postcode: "",
|
||||
city: "",
|
||||
country: "",
|
||||
},
|
||||
skills: [],
|
||||
languages: [],
|
||||
},
|
||||
searchLanguagesText: "",
|
||||
skills: [
|
||||
{ id: 3, name: "PHP" },
|
||||
{ id: 2, name: "PHP" },
|
||||
],
|
||||
searchLanguagesResult: [],
|
||||
searchSkillsText: "",
|
||||
searchSkillResults: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const userProfile = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
);
|
||||
console.log(userProfile.data);
|
||||
this.profile.nickname = userProfile.data.profile.nickname;
|
||||
this.profile.pronouns = userProfile.data.profile.pronouns;
|
||||
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
|
||||
this.profile.freetext = userProfile.data.profile.freetext;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm() {},
|
||||
async searchSkills() {
|
||||
this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
|
||||
async submitForm() {
|
||||
try {
|
||||
const skillResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
|
||||
const formSubmitResult = await axios.post(
|
||||
`${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,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(skillResult);
|
||||
if (skillResult.status === 200) {
|
||||
this.searchSkillResults = skillResult.skills;
|
||||
console.log(formSubmitResult);
|
||||
if (formSubmitResult.status === 200) {
|
||||
// success
|
||||
} else {
|
||||
// failure
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
addSkill(skill){
|
||||
if(this.skills.includes(skill)) return false
|
||||
this.skills.push(skill)
|
||||
this.searchSkillsText = ''
|
||||
this.searchSkillResults = []
|
||||
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.skills = this.skills.filter((skill) => {
|
||||
this.profile.skills = this.profile.skills.filter((skill) => {
|
||||
if (skillId === skill.id) {
|
||||
return false;
|
||||
} else {
|
||||
@ -153,7 +256,36 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
searchLanguages() {},
|
||||
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