forked from kompetenzinventar/ki-frontend
Profil ansehen Technisch Abgeschlossen
This commit is contained in:
scammo
parent
95e1c14afe
commit
b911c52375
@ -79,44 +79,23 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="value in values" :key="value.id">
|
||||
<img
|
||||
style="max-width: 64px"
|
||||
v-if="value[type].icon_url"
|
||||
:src="iconUrl + value[type].icon_url"
|
||||
:alt="`${value[type].name} Logo`"
|
||||
/>
|
||||
{{ value[type].name }}
|
||||
<span v-if="value.level">({{ value.level }})</span>
|
||||
<span v-if="value.content">{{ value.content }}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-warning m-2"
|
||||
aria-label="Bearbeiten"
|
||||
@click="editValue(value)"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/pencil.svg"
|
||||
alt="Bearbeiten Icon"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-danger m-2"
|
||||
aria-label="Löschen"
|
||||
@click="removeValue(value[type].id)"
|
||||
>
|
||||
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<profile-list
|
||||
:values="values"
|
||||
:type="type"
|
||||
:editable="true"
|
||||
@edit-value="editValue($event)"
|
||||
@remove-value="removeValue($event)"
|
||||
></profile-list>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
|
||||
export default {
|
||||
name: "AutoComplete",
|
||||
components: {
|
||||
ProfileList,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
@ -186,11 +165,11 @@ export default {
|
||||
},
|
||||
editSelectedResult() {
|
||||
this.values.map((item) => {
|
||||
if(item[this.type].name == this.selectedResult.name){
|
||||
if (item[this.type].name == this.selectedResult.name) {
|
||||
if (this.type != "contacttype") {
|
||||
item.level = this.level
|
||||
item.level = this.level;
|
||||
} else {
|
||||
item.content = this.contactContent
|
||||
item.content = this.contactContent;
|
||||
}
|
||||
}
|
||||
return item;
|
||||
|
||||
66
src/components/ProfileList.vue
Normal file
66
src/components/ProfileList.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="value in values" :key="value.id">
|
||||
<img
|
||||
style="max-width: 64px"
|
||||
v-if="value[type].icon_url"
|
||||
:src="iconUrl + value[type].icon_url"
|
||||
:alt="`${value[type].name} Logo`"
|
||||
/>
|
||||
{{ value[type].name }}
|
||||
<span v-if="value.level">({{ value.level }})</span>
|
||||
<span v-if="value.content">:
|
||||
<span v-if="value[type].name === 'E-Mail'">
|
||||
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ value.content }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<button
|
||||
v-if="this.editable"
|
||||
type="button"
|
||||
class="btn btn-outline-warning m-2"
|
||||
aria-label="Bearbeiten"
|
||||
@click="this.$emit('editValue', value)"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/pencil.svg"
|
||||
alt="Bearbeiten Icon"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="this.editable"
|
||||
type="button"
|
||||
class="btn btn-outline-danger m-2"
|
||||
aria-label="Löschen"
|
||||
@click="this.$emit('removeValue', value[type].id)"
|
||||
>
|
||||
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "ProfileList",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
values: {
|
||||
type: Array,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iconUrl: process.env.VUE_APP_API_URL
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -28,7 +28,7 @@ const routes = [
|
||||
component: Search
|
||||
},
|
||||
{
|
||||
path: 'profile/:member',
|
||||
path: 'profile/:memberId',
|
||||
name: 'ProfileMember',
|
||||
component: View
|
||||
},
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
class="form-control"
|
||||
id="searchText"
|
||||
v-model="searchText"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
@ -29,7 +28,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Search",
|
||||
@ -43,21 +41,18 @@ export default {
|
||||
async submitSearch() {
|
||||
this.showErrorMessage = false;
|
||||
try {
|
||||
const loginResult = await axios.post(
|
||||
`${process.env.VUE_APP_API_URL}/search`,
|
||||
// Beispiel Hafte Daten
|
||||
const result = await this.axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/users/profiles`,
|
||||
{
|
||||
searchText: this.searchText,
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (loginResult.status === 200) {
|
||||
//success login
|
||||
this.router.push({ path: "s/search" });
|
||||
} else {
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
console.log(result)
|
||||
|
||||
} catch (error) {
|
||||
console.error();
|
||||
console.error(error);
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="pzl" class="form-label fw-bold">PZL</label>
|
||||
<label for="pzl" class="form-label fw-bold">PLZ</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
@ -150,6 +150,7 @@
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import AutoComplete from "@/components/AutoComplete";
|
||||
|
||||
export default {
|
||||
name: "profileEdit",
|
||||
components: {
|
||||
|
||||
@ -1,11 +1,59 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Profil Ansehen</h1>
|
||||
|
||||
<div v-if="profile" class="container">
|
||||
<h1>{{profile.nickname}}({{profile.pronouns}})</h1>
|
||||
<p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
|
||||
<p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
|
||||
<p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
|
||||
<h3>Meine Skills:</h3>
|
||||
<profile-list
|
||||
:values="profile.skills"
|
||||
type="skill"
|
||||
></profile-list>
|
||||
<h3>Ich Suche:</h3>
|
||||
<profile-list
|
||||
:values="profile.searchtopics"
|
||||
type="skill"
|
||||
></profile-list>
|
||||
<h3>Meine Kontaktmöglichkeiten:</h3>
|
||||
<profile-list
|
||||
:values="profile.contacts"
|
||||
type="contacttype"
|
||||
></profile-list>
|
||||
<h3>Ich Spreche Folgende Sprachen:</h3>
|
||||
<profile-list
|
||||
:values="profile.languages"
|
||||
type="language"
|
||||
></profile-list>
|
||||
<h3>Meine Location:</h3>
|
||||
{{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ProfileList from "@/components/ProfileList";
|
||||
|
||||
export default {
|
||||
name: 'profileView'
|
||||
}
|
||||
name: "profileView",
|
||||
components: {
|
||||
ProfileList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
profile: null
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
console.log(this.$route.params.memberId)
|
||||
try {
|
||||
const userProfile = await this.axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/users/${this.$route.params.memberId}/profile`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
);
|
||||
this.profile = userProfile.data.profile;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user