Profil ansehen Technisch Abgeschlossen

This commit is contained in:
scammo 2021-07-26 17:10:28 +02:00
parent 95e1c14afe
commit b911c52375
6 changed files with 147 additions and 58 deletions

View File

@ -79,44 +79,23 @@
</li> </li>
</ul> </ul>
</div> </div>
<ul> <profile-list
<li v-for="value in values" :key="value.id"> :values="values"
<img :type="type"
style="max-width: 64px" :editable="true"
v-if="value[type].icon_url" @edit-value="editValue($event)"
:src="iconUrl + value[type].icon_url" @remove-value="removeValue($event)"
:alt="`${value[type].name} Logo`" ></profile-list>
/>
{{ 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>
</div> </div>
</template> </template>
<script> <script>
import ProfileList from "@/components/ProfileList";
export default { export default {
name: "AutoComplete", name: "AutoComplete",
components: {
ProfileList,
},
props: { props: {
type: { type: {
type: String, type: String,
@ -186,11 +165,11 @@ export default {
}, },
editSelectedResult() { editSelectedResult() {
this.values.map((item) => { this.values.map((item) => {
if(item[this.type].name == this.selectedResult.name){ if (item[this.type].name == this.selectedResult.name) {
if (this.type != "contacttype") { if (this.type != "contacttype") {
item.level = this.level item.level = this.level;
} else { } else {
item.content = this.contactContent item.content = this.contactContent;
} }
} }
return item; return item;

View 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>

View File

@ -28,7 +28,7 @@ const routes = [
component: Search component: Search
}, },
{ {
path: 'profile/:member', path: 'profile/:memberId',
name: 'ProfileMember', name: 'ProfileMember',
component: View component: View
}, },

View File

@ -9,7 +9,6 @@
class="form-control" class="form-control"
id="searchText" id="searchText"
v-model="searchText" v-model="searchText"
required
/> />
</div> </div>
<div class="col"> <div class="col">
@ -29,7 +28,6 @@
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
export default { export default {
name: "Search", name: "Search",
@ -43,21 +41,18 @@ export default {
async submitSearch() { async submitSearch() {
this.showErrorMessage = false; this.showErrorMessage = false;
try { try {
const loginResult = await axios.post( const result = await this.axios.get(
`${process.env.VUE_APP_API_URL}/search`, `${process.env.VUE_APP_API_URL}/users/profiles`,
// Beispiel Hafte Daten
{ {
searchText: this.searchText, headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
} }
); );
if (loginResult.status === 200) { console.log(result)
//success login
this.router.push({ path: "s/search" });
} else {
this.showErrorMessage = true;
}
} catch (error) { } catch (error) {
console.error(); console.error(error);
this.showErrorMessage = true; this.showErrorMessage = true;
} }
}, },

View File

@ -101,7 +101,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label for="pzl" class="form-label fw-bold">PZL</label> <label for="pzl" class="form-label fw-bold">PLZ</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -150,6 +150,7 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import AutoComplete from "@/components/AutoComplete"; import AutoComplete from "@/components/AutoComplete";
export default { export default {
name: "profileEdit", name: "profileEdit",
components: { components: {

View File

@ -1,11 +1,59 @@
<template> <template>
<div class="container"> <div v-if="profile" class="container">
<h1>Profil Ansehen</h1> <h1>{{profile.nickname}}({{profile.pronouns}})</h1>
<p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
</div> <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> </template>
<script> <script>
import ProfileList from "@/components/ProfileList";
export default { 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> </script>