Compare commits
16 Commits
fcbf3ee796
...
availabili
| Author | SHA1 | Date | |
|---|---|---|---|
0f0d3cd861
|
|||
| 2b63603957 | |||
|
9a51b416e5
|
|||
|
3ea7eb48b4
|
|||
| 8c8021bedc | |||
|
46fcaa2db6
|
|||
|
2d700c77dc
|
|||
|
c1d78fa8c1
|
|||
|
7c8a1bb423
|
|||
| 8e42c7fdbe | |||
| c25639b40c | |||
| a2048d0eb9 | |||
| b19a770d61 | |||
| 8098c54c06 | |||
|
73847022e2
|
|||
|
93cb302ca7
|
@ -20,3 +20,6 @@ steps:
|
||||
from_secret: "docker_username"
|
||||
password:
|
||||
from_secret: "docker_password"
|
||||
when:
|
||||
branch:
|
||||
- main
|
||||
|
||||
@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
|
||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
License: AGPL-3.0-or-later
|
||||
|
||||
Files: src/assets/img/wtf_logo*
|
||||
Files: src/assets/img/wtf*
|
||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
License: LicenseRef-WTF
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) <year> <copyright holders>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -15,6 +15,7 @@
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"bootstrap": "^5.0.1",
|
||||
"bootstrap-icons": "^1.5.0",
|
||||
"core-js": "^3.6.5",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
@ -2854,6 +2855,15 @@
|
||||
"@popperjs/core": "^2.10.1"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
||||
@ -17155,6 +17165,12 @@
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"bootstrap-icons": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"bootstrap": "^5.0.1",
|
||||
"bootstrap-icons": "^1.5.0",
|
||||
"core-js": "^3.6.5",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
SPDX-License-Identifier: MIT
|
||||
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
|
||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 548 B |
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
||||
<path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 238 B |
@ -1 +0,0 @@
|
||||
SPDX-License-Identifier: MIT
|
||||
@ -1,3 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 331 B |
@ -1 +0,0 @@
|
||||
SPDX-License-Identifier: MIT
|
||||
@ -1,4 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 573 B |
@ -1 +0,0 @@
|
||||
SPDX-License-Identifier: MIT
|
||||
@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<Footer />
|
||||
</template>
|
||||
<script>
|
||||
import Footer from '@/components/Footer.vue'
|
||||
import Navbar from '@/components/Navbar.vue'
|
||||
import Footer from '@/components/Footer'
|
||||
import Navbar from '@/components/Navbar'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
@ -7,6 +7,13 @@
|
||||
@import "variables";
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
||||
.bg-wtf {
|
||||
background-image: url(../assets/img/wtf-header-bg.jpg);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
BIN
src/assets/img/wtf-header-bg.jpg
Normal file
BIN
src/assets/img/wtf-header-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
@ -1,7 +1,22 @@
|
||||
{
|
||||
"1": "bis 6 Monate",
|
||||
"2": "bis 1 Jahr",
|
||||
"3": "bis 3 Jahre",
|
||||
"4": "bis 5 Jahre",
|
||||
"5": "mehr als 5 Jahre"
|
||||
"1": {
|
||||
"short": "≤ 6M",
|
||||
"long": "bis 6 Monate"
|
||||
},
|
||||
"2":{
|
||||
"short": "≤ 1J",
|
||||
"long": "bis 1 Jahr"
|
||||
},
|
||||
"3": {
|
||||
"short": "≤ 3J",
|
||||
"long": "bis 3 Jahre"
|
||||
},
|
||||
"4": {
|
||||
"short": "≤ 5J",
|
||||
"long": "bis 5 Jahre"
|
||||
},
|
||||
"5": {
|
||||
"short": "> 5J",
|
||||
"long": "mehr als 5 Jahre"
|
||||
}
|
||||
}
|
||||
@ -14,3 +14,5 @@ $body-bg: $gray-100;
|
||||
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$spinner-animation-speed: 1s;
|
||||
|
||||
@ -27,10 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
aria-label="Hinzufügen"
|
||||
@click="addResult()"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
|
||||
alt="Hinzufügen Icon"
|
||||
/>
|
||||
<i clas="bi-plus-lg"></i>
|
||||
Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
37
src/components/Avatar.vue
Normal file
37
src/components/Avatar.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="avatar bg-dark">
|
||||
{{ avatarLetters }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: String
|
||||
},
|
||||
computed: {
|
||||
avatarLetters() {
|
||||
return this.name.substr(0, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar {
|
||||
align-items: center;
|
||||
border-radius: .25rem;
|
||||
color: white;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
height: 2.5rem;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -26,11 +26,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div
|
||||
class="collapse navbar-collapse"
|
||||
class="collapse navbar-collapse d-lg-flex"
|
||||
:class="{ show: showMobileNav }"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0 me-auto">
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
class="nav-link"
|
||||
@ -55,30 +55,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
>Bearbeiten</router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-outline-danger" @click="logout()">
|
||||
<button class="btn btn-danger w-100" @click="logout()">
|
||||
<i class="bi bi-box-arrow-right"></i>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" @submit.prevent="searchRedirect()">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
v-model="searchText"
|
||||
type="search"
|
||||
placeholder="Profile durchsuchen"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-outline-primary"
|
||||
type="submit"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/search.svg"
|
||||
alt="Suche Icon"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -95,7 +80,6 @@ export default {
|
||||
mixins: [RequestMixin],
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
showMobileNav: false
|
||||
}
|
||||
},
|
||||
@ -110,9 +94,6 @@ export default {
|
||||
this.$store.dispatch('clear')
|
||||
this.$router.push({ path: '/' });
|
||||
},
|
||||
searchRedirect() {
|
||||
this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
{{ value.long || value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -82,10 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
aria-label="Löschen"
|
||||
@click="$emit('removeValue', value[type].name)"
|
||||
>
|
||||
<img
|
||||
src="/img/bootstrap-icons-1.5.0/trash.svg"
|
||||
alt="Löschen Icon"
|
||||
/>
|
||||
<i class="bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,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,
|
||||
|
||||
54
src/components/SearchResult.vue
Normal file
54
src/components/SearchResult.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
class="text-decoration-none d-flex"
|
||||
:to="{ path: `/s/profile/${profile.user_id}` }"
|
||||
>
|
||||
<div class="card w-100">
|
||||
<div class="card-body d-flex">
|
||||
<div class="d-flex align-items-center justify-content-center me-3">
|
||||
<Avatar :name="profile.nickname"/>
|
||||
</div>
|
||||
<div class="text-body">
|
||||
<h5 class="card-title mb-1 lh-1">
|
||||
{{ profile.nickname}}
|
||||
<span v-if="profile.pronouns"> ({{ profile.pronouns }})</span>
|
||||
</h5>
|
||||
<small
|
||||
class="card-text lh-1 text-dark"
|
||||
v-if="profile.skills && profile.skills.length > 0"
|
||||
>
|
||||
Top-Fähigkeiten: {{ topSkills }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<script>
|
||||
import Avatar from '@/components/Avatar'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar,
|
||||
},
|
||||
props: {
|
||||
profile: Object
|
||||
},
|
||||
computed: {
|
||||
topSkills() {
|
||||
return this.profile.skills.slice(0, 5).map(s => s.skill.name).join(', ')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.card:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
9
src/components/Spinner.vue
Normal file
9
src/components/Spinner.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<!--
|
||||
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="spinner-grow" role="status"></div>
|
||||
</template>
|
||||
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">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -7,6 +7,7 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from '@/store'
|
||||
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import './assets/global.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
@ -46,7 +46,14 @@ const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Index',
|
||||
component: Index
|
||||
component: Index,
|
||||
beforeEnter: (_to, _from, next) => {
|
||||
if (store.state.token) {
|
||||
next({name: 'Search'})
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@ -4,17 +4,23 @@
|
||||
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
import profile from './profile'
|
||||
import search from './search'
|
||||
|
||||
const localStorageKeys = {
|
||||
currentUserId: 'ki_current_user_id',
|
||||
token: 'ki_token',
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
modules: {
|
||||
profile,
|
||||
search,
|
||||
},
|
||||
state() {
|
||||
return {
|
||||
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
||||
token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
|
||||
currentProfile: null
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
@ -37,9 +43,6 @@ export default createStore({
|
||||
state.token = token
|
||||
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
|
||||
},
|
||||
setCurrentProfile(state, profile) {
|
||||
state.currentProfile = profile
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
clear(context) {
|
||||
120
src/store/profile.js
Normal file
120
src/store/profile.js
Normal file
@ -0,0 +1,120 @@
|
||||
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state() {
|
||||
return {
|
||||
loading: false,
|
||||
showSpinner: false,
|
||||
profileId: null,
|
||||
profile: null,
|
||||
isOwnProfile: false,
|
||||
error: false,
|
||||
notFound: false
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setProfileId(state, profileId) {
|
||||
state.profileId = profileId
|
||||
},
|
||||
clearProfileId(state) {
|
||||
state.profileId = null
|
||||
},
|
||||
setProfile(state, profile) {
|
||||
state.profile = profile
|
||||
},
|
||||
clearProfile(state) {
|
||||
state.profile = null
|
||||
},
|
||||
setLoading(state) {
|
||||
state.loading = true
|
||||
},
|
||||
setNotLoading(state) {
|
||||
state.loading = false
|
||||
},
|
||||
setError(state) {
|
||||
state.error = true
|
||||
},
|
||||
clearError(state) {
|
||||
state.error = false
|
||||
},
|
||||
showSpinner(state) {
|
||||
state.showSpinner = true
|
||||
},
|
||||
hideSpinner(state) {
|
||||
state.showSpinner = false
|
||||
},
|
||||
setNotFound(state, notFound) {
|
||||
state.notFound = notFound
|
||||
},
|
||||
setIsOwnProfile(state, isOwnProfile) {
|
||||
state.isOwnProfile = isOwnProfile
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
onError({commit, dispatch}) {
|
||||
commit('setError')
|
||||
dispatch('clear')
|
||||
},
|
||||
onNotFound({commit, dispatch}) {
|
||||
dispatch('onError')
|
||||
commit('setNotFound', true)
|
||||
},
|
||||
clear({commit}) {
|
||||
commit('clearProfileId')
|
||||
commit('clearProfile')
|
||||
commit('hideSpinner')
|
||||
commit('setNotLoading')
|
||||
},
|
||||
async load({state, commit, dispatch, rootState}, profileId) {
|
||||
if (state.loading) {
|
||||
return
|
||||
}
|
||||
|
||||
commit('setProfileId', profileId)
|
||||
commit('setIsOwnProfile', rootState.currentUserId === profileId)
|
||||
commit('setLoading')
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
commit('showSpinner')
|
||||
commit('clearProfile')
|
||||
}, 0)
|
||||
|
||||
commit('clearError')
|
||||
commit('setNotFound', false)
|
||||
|
||||
const url = new URL(`${window.ki.apiUrl}/users/${profileId}/profile`)
|
||||
const headers = {
|
||||
Authorization: `Bearer ${rootState.token}`
|
||||
}
|
||||
|
||||
let response
|
||||
|
||||
try {
|
||||
response = await fetch(url, {headers})
|
||||
} catch {
|
||||
dispatch('onError')
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
if (response.status === 404) {
|
||||
dispatch('onNotFound')
|
||||
return
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
dispatch('onError')
|
||||
return
|
||||
}
|
||||
|
||||
const responseData = await response.json()
|
||||
commit('setProfile', responseData.profile)
|
||||
commit('hideSpinner')
|
||||
commit('setNotLoading')
|
||||
}
|
||||
}
|
||||
}
|
||||
100
src/store/search.js
Normal file
100
src/store/search.js
Normal file
@ -0,0 +1,100 @@
|
||||
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state() {
|
||||
return {
|
||||
searching: false,
|
||||
showSpinner: false,
|
||||
searched: false,
|
||||
profiles: [],
|
||||
error: false,
|
||||
errorMessage: '',
|
||||
query: {
|
||||
search: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setSearching(state, searching) {
|
||||
state.searching = searching
|
||||
},
|
||||
showSpinner(state) {
|
||||
state.showSpinner = true
|
||||
},
|
||||
hideSpinner(state) {
|
||||
state.showSpinner = false
|
||||
},
|
||||
clearProfiles(state) {
|
||||
state.profiles = []
|
||||
},
|
||||
setProfiles(state, profiles) {
|
||||
state.profiles = profiles
|
||||
},
|
||||
setError(state, error) {
|
||||
state.error = error
|
||||
},
|
||||
setErrorMessage(state, errorMessage) {
|
||||
state.errorMessage = errorMessage
|
||||
},
|
||||
setQuerySearch(state, search) {
|
||||
state.query.search = search
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async search({state, commit, rootState}) {
|
||||
if (state.searching) {
|
||||
return
|
||||
}
|
||||
|
||||
commit('setSearching', true)
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
commit('showSpinner')
|
||||
commit('clearProfiles')
|
||||
}, 100)
|
||||
|
||||
commit('setError', false)
|
||||
commit('setErrorMessage', '')
|
||||
|
||||
const url = new URL(`${window.ki.apiUrl}/users/profiles`)
|
||||
|
||||
if (state.query.search) {
|
||||
url.searchParams.append('search', state.query.search)
|
||||
}
|
||||
|
||||
const headers = {
|
||||
Authorization: `Bearer ${rootState.token}`,
|
||||
}
|
||||
|
||||
let response
|
||||
|
||||
try {
|
||||
response = await fetch(url, {headers})
|
||||
} catch {
|
||||
commit('setError', true)
|
||||
commit('clearProfiles')
|
||||
commit('setSearching', false)
|
||||
commit('hideSpinner')
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(timeoutId)
|
||||
|
||||
if (!response.ok) {
|
||||
commit('setError', true)
|
||||
commit('clearProfiles')
|
||||
commit('setSearching', false)
|
||||
commit('hideSpinner')
|
||||
return
|
||||
}
|
||||
|
||||
const responseData = await response.json()
|
||||
commit('setProfiles', responseData.profiles)
|
||||
commit('setSearching', false)
|
||||
commit('hideSpinner')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,12 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bg-wtf">
|
||||
<div class="container pt-5">
|
||||
<div class="text-center mb-5">
|
||||
<img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
|
||||
<h1>Kompetenzinventar</h1>
|
||||
<h1 class="text-white">Kompetenzinventar</h1>
|
||||
</div>
|
||||
<form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
|
||||
<form @submit.prevent="submitLogin()" class="card bg-white login-form">
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputusername1" class="form-label" >
|
||||
WTF-Benutzername:
|
||||
@ -21,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
id="exampleInputusername1"
|
||||
v-model="username"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@ -42,9 +45,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
>
|
||||
Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
|
||||
@ -62,6 +68,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@ -5,88 +5,135 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="bg-wtf text-white pt-3 pb-4">
|
||||
<div class="container">
|
||||
<h1>Suche</h1>
|
||||
<form @submit.prevent="submitSearch()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
|
||||
<div class="card mx-auto bg-white">
|
||||
<div class="card-body">
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<fieldset class="d-flex" :disabled="searching">
|
||||
<div class="flex-grow-1 me-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="searchText"
|
||||
v-model="searchText"
|
||||
placeholder="Nick, Fähigkeit, Sprache"
|
||||
ref="searchTextInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary mb-4">
|
||||
Suche starten
|
||||
<div class="">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi-search"></i>
|
||||
<span class="d-none d-md-inline"> Suchen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div
|
||||
class="alert alert-danger mb-4 mt-4"
|
||||
role="alert"
|
||||
v-if="showErrorMessage"
|
||||
>
|
||||
Bei der Suche ist ein Fehler aufgetreten
|
||||
</div>
|
||||
<div v-if="searchTotal == 0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container pt-4 pb-3">
|
||||
<div class="text-center" v-if="showSpinner">
|
||||
<Spinner />
|
||||
</div>
|
||||
<div
|
||||
class="fs-2 text-danger text-center"
|
||||
role="alert"
|
||||
v-if="error"
|
||||
>
|
||||
<div class="fs-1 mb-3">Kernel panic :/</div>
|
||||
Bei der Suche ist ein Fehler aufgetreten.
|
||||
</div>
|
||||
<div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
|
||||
<div class="fs-1 mb-3">nullptr :/</div>
|
||||
Es wurde kein Suchergebnis gefunden.
|
||||
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-4 p-2"
|
||||
v-for="result in searchResults"
|
||||
:key="result.user_id"
|
||||
>
|
||||
<router-link
|
||||
class="text-decoration-none"
|
||||
:to="{ path: `/s/profile/${result.user_id}` }"
|
||||
>
|
||||
<div class="card search-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ result.nickname}}
|
||||
<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
|
||||
</h5>
|
||||
<p
|
||||
class="card-text"
|
||||
v-if="result.skills && result.skills.length > 0"
|
||||
>
|
||||
Fähigkeiten:
|
||||
<span v-for="(skill, index) in result.skills" :key="index"
|
||||
>
|
||||
{{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-else-if="showResults">
|
||||
<SearchResult
|
||||
v-for="profile in profiles"
|
||||
:key="profile.user_id"
|
||||
class="mb-3"
|
||||
:profile="profile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RequestMixin from "@/mixins/request.mixin";
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import SearchResult from '@/components/SearchResult'
|
||||
import Spinner from '@/components/Spinner'
|
||||
|
||||
export default {
|
||||
name: "Search",
|
||||
mixins: [RequestMixin],
|
||||
data() {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
searchText: "",
|
||||
searchResults: null,
|
||||
searchTotal: 0,
|
||||
};
|
||||
name: 'Search',
|
||||
components: {
|
||||
SearchResult,
|
||||
Spinner,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searching: state => state.search.searching,
|
||||
profiles: state => state.search.profiles,
|
||||
error: state => state.search.error,
|
||||
showSpinner: state => state.search.showSpinner,
|
||||
}),
|
||||
searchText: {
|
||||
get() {
|
||||
return this.$store.state.search.query.search
|
||||
},
|
||||
set(text) {
|
||||
this.$store.commit('search/setQuerySearch', text)
|
||||
}
|
||||
},
|
||||
showNoResults() {
|
||||
return !this.searching && (!this.profiles || this.profiles.length === 0)
|
||||
},
|
||||
showResults() {
|
||||
return !this.error && this.profiles && this.profiles.length > 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searching(value) {
|
||||
if (!value) {
|
||||
if (this.$refs.searchTextInput) {
|
||||
this.focusSearchText()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$router.push({ query: { query: this.searchText }})
|
||||
this.$store.dispatch('search/search')
|
||||
},
|
||||
focusSearchText() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchTextInput.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.query) this.searchText = this.$route.query.query;
|
||||
this.submitSearch();
|
||||
},
|
||||
if (this.$route.query.query !== undefined) {
|
||||
this.searchText = this.$route.query.query
|
||||
this.$store.commit('search/clearProfiles')
|
||||
}
|
||||
|
||||
this.$store.dispatch('search/search')
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -98,17 +98,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
@update-values="profile.searchtopics = $event"
|
||||
></auto-complete>
|
||||
|
||||
<div class="col-12 col-xs-12">
|
||||
<label for="availability" class="form-label fw-bold"
|
||||
>Ich bin für Anfragen verfügbar:</label
|
||||
>
|
||||
<Section title="Verfügbarkeit">
|
||||
<div class="form-check mb-3">
|
||||
<input
|
||||
v-model="profile.availability_status"
|
||||
class="form-check-input me-2"
|
||||
type="checkbox"
|
||||
id="availability_status">
|
||||
<label class="form-check-label" for="availability_status">
|
||||
Ich bin aktuell verfügbar
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-3" v-if="profile.availability_status">
|
||||
<label class="form-label">
|
||||
Stunden pro Woche
|
||||
</label>
|
||||
<input
|
||||
v-model="profile.availability_hours_per_week"
|
||||
type="number"
|
||||
class="form-control">
|
||||
</div>
|
||||
<label for="availability" class="form-label">
|
||||
Anmerkungen
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="availability"
|
||||
rows="3"
|
||||
v-model="profile.availability"
|
||||
v-model="profile.availability_text"
|
||||
></textarea>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<auto-complete
|
||||
type="contacttype"
|
||||
@ -171,12 +190,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
import RequestMixin from "@/mixins/request.mixin"
|
||||
|
||||
import AutoComplete from "@/components/AutoComplete";
|
||||
import Section from '@/components/profile/Section'
|
||||
|
||||
export default {
|
||||
name: "profileEdit",
|
||||
mixins: [RequestMixin],
|
||||
components: {
|
||||
AutoComplete,
|
||||
Section,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -188,7 +209,9 @@ export default {
|
||||
pronouns: "",
|
||||
volunteerwork: "",
|
||||
freetext: "",
|
||||
availability: "",
|
||||
availability_status: false,
|
||||
availability_hours_per_week: null,
|
||||
availability_text: "",
|
||||
address: {
|
||||
postcode: "",
|
||||
city: "",
|
||||
|
||||
@ -5,60 +5,153 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div v-if="profile" class="container">
|
||||
<h1>
|
||||
{{profile.nickname}}
|
||||
<span v-if="profile.pronouns">({{profile.pronouns}})</span>
|
||||
</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>Das kann ich:</h3>
|
||||
<profile-list
|
||||
:values="profile.skills"
|
||||
type="skill"
|
||||
></profile-list>
|
||||
<h3>Das suche ich:</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>
|
||||
<div v-if="profile.address">
|
||||
<h3>Meine Location:</h3>
|
||||
{{profile.address.city}}<span v-if="profile.address && profile.address.postcode"> ({{profile.address.postcode}})</span>, {{profile.address.country}}
|
||||
<div>
|
||||
<template v-if="error">
|
||||
<ViewError :isOwnProfile="isOwnProfile" :notFound="notFound" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="profile"
|
||||
class="container">
|
||||
<ProfileHeader
|
||||
class="mb-4"
|
||||
:profile="profile" />
|
||||
|
||||
<Section
|
||||
v-if="profile.skills && profile.skills.length > 0"
|
||||
title="Das kann ich">
|
||||
<div style="margin-bottom: -.5rem;">
|
||||
<Skill
|
||||
class="me-2 mb-2"
|
||||
v-for="skill in profile.skills"
|
||||
:key="skill.skill.id"
|
||||
:profileSkill="skill"
|
||||
:showLevel="true" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
v-if="profile.searchtopics && profile.searchtopics.length > 0"
|
||||
title="Das suche ich">
|
||||
<div style="margin-bottom: -.5rem;">
|
||||
<Skill
|
||||
class="me-2 mb-2"
|
||||
v-for="skill in profile.searchtopics"
|
||||
:key="skill.skill.id"
|
||||
:profileSkill="skill"
|
||||
:showLevel="false" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
v-if="profile.languages && profile.languages.length > 0"
|
||||
title="Ich spreche diese Sprachen">
|
||||
<div style="margin-bottom: -.5rem;">
|
||||
<Language
|
||||
class="me-2 mb-2"
|
||||
v-for="language in profile.languages"
|
||||
:key="language.language.id"
|
||||
:profileLanguage="language"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Verfügbarkeit">
|
||||
<div class="d-flex align-items-center">
|
||||
<div v-if="profile.availability_status">
|
||||
<i class="bi bi-check-square me-1"></i>
|
||||
ja
|
||||
</div>
|
||||
<div v-else>
|
||||
<i class="bi bi-x-square me-1"></i>
|
||||
nein
|
||||
</div>
|
||||
<span
|
||||
class="ms-3"
|
||||
v-if="profile.availability_status && profile.availability_hours_per_week">
|
||||
({{ profile.availability_hours_per_week }} Stunden pro Woche)
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="profile.availability_text" class="mt-3">
|
||||
<label class="form-label fw-bold">
|
||||
Anmerkungen
|
||||
</label>
|
||||
<div>{{ profile.availability_text }}</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
v-if="profile.contacts && profile.contacts.length > 0"
|
||||
title="Meine Kontaktmöglichkeiten"
|
||||
>
|
||||
<div style="margin-bottom: -.5rem;">
|
||||
<Contact
|
||||
class="me-2 mb-2"
|
||||
v-for="profileContact in profile.contacts"
|
||||
:key="profileContact.id"
|
||||
:profileContact="profileContact"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
v-if="profile.volunteerwork || profile.freetext"
|
||||
title="Sonstiges">
|
||||
<div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
|
||||
<h5>Über mich</h5>
|
||||
{{ profile.freetext }}
|
||||
</div>
|
||||
<div v-if="profile.volunteerwork" class="lh-base">
|
||||
<h5>Ehrentamtliche Arbeit</h5>
|
||||
{{ profile.volunteerwork }}
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
import RequestMixin from '@/mixins/request.mixin'
|
||||
|
||||
import ProfileList from '@/components/ProfileList';
|
||||
import ViewError from '@/components/ViewError'
|
||||
import ProfileHeader from '@/components/profile/Header'
|
||||
import Section from '@/components/profile/Section'
|
||||
import Contact from '@/components/profile/Contact'
|
||||
import Language from '@/components/profile/Language'
|
||||
import Skill from '@/components/Skill'
|
||||
|
||||
export default {
|
||||
name: "profileView",
|
||||
mixins: [RequestMixin],
|
||||
name: 'profileView',
|
||||
components: {
|
||||
ProfileList,
|
||||
Contact,
|
||||
Language,
|
||||
ProfileHeader,
|
||||
Section,
|
||||
Skill,
|
||||
ViewError,
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
loadProfile: 'profile/load',
|
||||
clearStore: 'profile/clear',
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
profile: 'currentProfile'
|
||||
profile: state => state.profile.profile,
|
||||
error: state => state.profile.error,
|
||||
notFound: state => state.profile.notFound,
|
||||
isOwnProfile: state => state.profile.isOwnProfile,
|
||||
showSpinner: state => state.profile.showSpinner
|
||||
})
|
||||
},
|
||||
async created() {
|
||||
await this.initViewPage();
|
||||
}
|
||||
const id = parseInt(this.$route.params.memberId, 10)
|
||||
this.loadProfile(id)
|
||||
},
|
||||
unmounted() {
|
||||
this.clearStore()
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user