forked from kompetenzinventar/ki-frontend
implement profile view
This commit is contained in:
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
{{ value.long || value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -90,11 +90,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import levelJson from "@/assets/skill_level.json";
|
||||
import languagesJson from "@/assets/language_level.json";
|
||||
import levelJson from '@/assets/skill_level.json';
|
||||
import languagesJson from '@/assets/language_level.json';
|
||||
|
||||
export default {
|
||||
name: "ProfileList",
|
||||
name: 'ProfileList',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
|
||||
81
src/components/Skill.vue
Normal file
81
src/components/Skill.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="skill rounded me-2">
|
||||
<div class="skill__left px-2">
|
||||
<div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
|
||||
</div>
|
||||
<div class="skill__right d-flex align-items-center rounded-end px-2">
|
||||
<div>
|
||||
<div class="skill__name fw-bold me-1">
|
||||
{{ profileSkill.skill.name }}
|
||||
</div>
|
||||
<small class="skill__level" v-if="showLevel" :title="levelTitle">
|
||||
{{ level }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import levels from '@/assets/skill_level.json';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
profileSkill: Object,
|
||||
showLevel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
levels
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconUrl() {
|
||||
return `url("${window.ki.apiUrl}/${this.profileSkill.skill.icon_url}")`
|
||||
},
|
||||
level() {
|
||||
return levels[this.profileSkill.level].short
|
||||
},
|
||||
levelTitle() {
|
||||
return levels[this.profileSkill.level].long
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.skill {
|
||||
align-items: stretch;
|
||||
border: 1px solid #acacac;
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.skill__icon {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.skill__right {
|
||||
background-color: #edefeb;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.skill__name,
|
||||
.skill__level {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
39
src/components/ViewError.vue
Normal file
39
src/components/ViewError.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container text-center py-5">
|
||||
<template v-if="notFound">
|
||||
<div v-if="isOwnProfile">
|
||||
<div class="fs-1 lh-1">nullptr :/</div>
|
||||
<div class="fs-3 mb-4">Du hast noch kein Profil</div>
|
||||
<router-link :to="{ name: 'ProfileEdit' }" class="btn btn-primary" >
|
||||
Jetzt Profil erstellen
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="fs-1 mb-3">nullptr :/</div>
|
||||
<div class="mb-3">
|
||||
Profil nicht gefunden
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="fs-1 mb-3">Kernel panic :/</div>
|
||||
Das Profil konnte nicht geladen werden
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isOwnProfile: Boolean,
|
||||
notFound: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
39
src/components/profile/Contact.vue
Normal file
39
src/components/profile/Contact.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="contact rounded d-inline-flex align-items-center">
|
||||
<div class="contact__left px-2">
|
||||
{{ profileContact.contacttype.name }}
|
||||
</div>
|
||||
<div class="contact__right d-flex align-items-center rounded-end px-2">
|
||||
{{ profileContact.content }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
profileContact: Object,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.contact {
|
||||
align-items: stretch;
|
||||
border: 1px solid #acacac;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.contact__right {
|
||||
background-color: #edefeb;
|
||||
color: #202020;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
71
src/components/profile/Header.vue
Normal file
71
src/components/profile/Header.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bg-wtf py-3">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<Avatar class="me-3" :name="profile.nickname" />
|
||||
<div class="text-white fs-3">
|
||||
<span class="fs-3">{{ profile.nickname }}</span>
|
||||
<span v-if="profile.pronouns" class="fs-5">
|
||||
({{ profile.pronouns }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="location">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fs-4 bi bi-geo-alt-fill text-dark mx-2"></i>
|
||||
<div class="text-white">
|
||||
{{ location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from '@/components/Avatar'
|
||||
|
||||
export default {
|
||||
name: 'ProfileHeader',
|
||||
components: {
|
||||
Avatar
|
||||
},
|
||||
props: {
|
||||
profile: Object
|
||||
},
|
||||
computed: {
|
||||
location() {
|
||||
if (!this.profile.address) {
|
||||
return
|
||||
}
|
||||
|
||||
const parts = []
|
||||
|
||||
if (this.profile.address.postcode) {
|
||||
parts.push(this.profile.address.postcode)
|
||||
}
|
||||
|
||||
if (this.profile.address.city) {
|
||||
parts.push(this.profile.address.city)
|
||||
}
|
||||
|
||||
if (this.profile.address.country) {
|
||||
parts.push(this.profile.address.country)
|
||||
}
|
||||
|
||||
return parts.join(', ')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
</style>
|
||||
69
src/components/profile/Language.vue
Normal file
69
src/components/profile/Language.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="language rounded me-2">
|
||||
<div class="language__left px-2">
|
||||
<div class="language__icon" :style="{ backgroundImage: iconUrl }"></div>
|
||||
</div>
|
||||
<div class="language__right d-flex align-items-center rounded-end px-2">
|
||||
<div>
|
||||
<div class="language__name me-1">{{ profileLanguage.language.name }}</div>
|
||||
<small class="language__level">{{ level }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import levels from '@/assets/language_level.json';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
profileLanguage: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
levels
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconUrl() {
|
||||
return `url("${window.ki.apiUrl}/${this.profileLanguage.language.icon_url}")`
|
||||
},
|
||||
level() {
|
||||
return levels[this.profileLanguage.level]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.language {
|
||||
align-items: stretch;
|
||||
border: 1px solid #acacac;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.language__icon {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.language__right {
|
||||
background-color: #edefeb;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.language__name {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
26
src/components/profile/Section.vue
Normal file
26
src/components/profile/Section.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container mb-5">
|
||||
<h3 class="text-center">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<div class="card w-100">
|
||||
<div class="card-body lh-1">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user