Compare commits
49 Commits
feature/44
...
main
Author | SHA1 | Date |
---|---|---|
|
d46aaa0f31 | |
|
81dcf5ebe7 | |
|
7433d25716 | |
|
7feee07d35 | |
|
c79ada2123 | |
|
f8e78d1cc8 | |
|
c2552f3c3a | |
|
687454afdb | |
|
a7c8774cc4 | |
|
b63e5a6c2d | |
|
1b221ab180 | |
|
e2b101eb89 | |
|
654169c383 | |
|
26edf1d4b2 | |
|
e7ff487aeb | |
|
c5bda80f11 | |
|
379ddaf5b9 | |
|
13fb15e033 | |
|
aaa0883692 | |
|
e404bef2a9 | |
|
cbbcfd0f37 | |
|
5c5f157a77 | |
|
3017c001b2 | |
|
fefe9a034d | |
|
bac8731e17 | |
|
dc883ac302 | |
|
16feb41f8a | |
|
04cb8a7217 | |
|
e3115f9944 | |
![]() |
122b13b6a2 | |
|
872d544075 | |
|
fba33d20a7 | |
|
e035fa3289 | |
|
324203216a | |
|
b270a5d56a | |
|
6ecf80f34c | |
|
016a1bd959 | |
|
4e8390cf96 | |
|
04d59d5520 | |
|
0f0d3cd861 | |
|
2b63603957 | |
|
9a51b416e5 | |
|
3ea7eb48b4 | |
|
8c8021bedc | |
|
46fcaa2db6 | |
|
2d700c77dc | |
|
c1d78fa8c1 | |
|
7c8a1bb423 | |
|
8e42c7fdbe |
|
@ -1,2 +1,11 @@
|
||||||
|
.browserslistrc
|
||||||
|
.dockerignore
|
||||||
|
.drone.yml
|
||||||
|
.editorconfig
|
||||||
.git
|
.git
|
||||||
|
.gitignore
|
||||||
|
.reuse
|
||||||
|
Dockerfile
|
||||||
|
LICENSES
|
||||||
|
README.md
|
||||||
node_modules
|
node_modules
|
||||||
|
|
119
.drone.yml
119
.drone.yml
|
@ -4,19 +4,110 @@
|
||||||
# SPDX-License-Identifier: AGPL-3.0-or-later
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
type: docker
|
type: docker
|
||||||
name: default
|
name: qa
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
- pull_request
|
||||||
|
branch:
|
||||||
|
- main
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: reuse
|
- name: reuse
|
||||||
image: fsfe/reuse:latest
|
image: fsfe/reuse
|
||||||
- name: docker-publish
|
- name: lint
|
||||||
image: plugins/docker
|
image: node:20
|
||||||
settings:
|
commands:
|
||||||
registry: registry.wtf-eg.net
|
- npm ci
|
||||||
repo: registry.wtf-eg.net/ki-frontend
|
- npm run lint
|
||||||
target: ki-frontend
|
- name: docker-build
|
||||||
auto_tag: true
|
image: plugins/docker
|
||||||
username:
|
settings:
|
||||||
from_secret: "docker_username"
|
registry: git.wtf-eg.de
|
||||||
password:
|
repo: git.wtf-eg.de/kompetenzinventar/frontend
|
||||||
from_secret: "docker_password"
|
target: ki-frontend
|
||||||
|
dry_run: true
|
||||||
|
|
||||||
|
---
|
||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: build
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
branch:
|
||||||
|
- main
|
||||||
|
|
||||||
|
depends_on:
|
||||||
|
- qa
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: docker-publish
|
||||||
|
image: plugins/docker
|
||||||
|
settings:
|
||||||
|
registry: git.wtf-eg.de
|
||||||
|
repo: git.wtf-eg.de/kompetenzinventar/frontend
|
||||||
|
target: ki-frontend
|
||||||
|
auto_tag: true
|
||||||
|
username:
|
||||||
|
from_secret: "docker_username"
|
||||||
|
password:
|
||||||
|
from_secret: "docker_password"
|
||||||
|
|
||||||
|
---
|
||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: deploy
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
branch:
|
||||||
|
- main
|
||||||
|
|
||||||
|
depends_on:
|
||||||
|
- build
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: deploy-dev
|
||||||
|
image: appleboy/drone-ssh
|
||||||
|
settings:
|
||||||
|
host:
|
||||||
|
- dev01.wtf-eg.net
|
||||||
|
username: drone_deployment
|
||||||
|
key:
|
||||||
|
from_secret: "dev01_deployment_key"
|
||||||
|
command_timeout: 2m
|
||||||
|
script:
|
||||||
|
- echo "Executing forced command..."
|
||||||
|
|
||||||
|
---
|
||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: tag-release
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- tag
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: reuse
|
||||||
|
image: fsfe/reuse
|
||||||
|
- name: lint
|
||||||
|
image: node:20
|
||||||
|
commands:
|
||||||
|
- npm ci
|
||||||
|
- npm run lint
|
||||||
|
- name: docker-publish
|
||||||
|
image: plugins/docker
|
||||||
|
settings:
|
||||||
|
registry: git.wtf-eg.de
|
||||||
|
repo: git.wtf-eg.de/kompetenzinventar/frontend
|
||||||
|
target: ki-frontend
|
||||||
|
auto_tag: true
|
||||||
|
username:
|
||||||
|
from_secret: "docker_username"
|
||||||
|
password:
|
||||||
|
from_secret: "docker_password"
|
||||||
|
|
17
Dockerfile
17
Dockerfile
|
@ -4,12 +4,25 @@
|
||||||
|
|
||||||
FROM node:14-alpine as builder
|
FROM node:14-alpine as builder
|
||||||
|
|
||||||
COPY . ./
|
COPY package.json package-lock.json ./
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
COPY .eslintrc.js .
|
||||||
|
COPY babel.config.js .
|
||||||
|
COPY public public
|
||||||
|
COPY src src
|
||||||
|
|
||||||
RUN npm ci && npm run build
|
RUN npm ci && npm run build
|
||||||
|
|
||||||
|
|
||||||
FROM nginx as ki-frontend
|
FROM nginx as ki-frontend
|
||||||
|
|
||||||
COPY --from=builder /dist/ /usr/share/nginx/html/
|
LABEL org.opencontainers.image.source=https://git.wtf-eg.de/kompetenzinventar/ki-frontend.git
|
||||||
|
LABEL org.opencontainers.image.url=https://git.wtf-eg.de/kompetenzinventar/ki-frontend
|
||||||
|
LABEL org.opencontainers.image.documentation=https://git.wtf-eg.de/kompetenzinventar/ki-frontend#docker
|
||||||
|
LABEL org.opencontainers.image.vendor="WTF Kooperative eG"
|
||||||
|
|
||||||
|
WORKDIR /usr/share/nginx/html
|
||||||
|
|
||||||
COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
|
COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=builder /dist .
|
||||||
|
|
|
@ -9,10 +9,24 @@ server {
|
||||||
|
|
||||||
#access_log /var/log/nginx/host.access.log main;
|
#access_log /var/log/nginx/host.access.log main;
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
|
||||||
|
# routes without dots serve the index.html without caching
|
||||||
location / {
|
location / {
|
||||||
root /usr/share/nginx/html;
|
add_header Cache-Control "no-cache";
|
||||||
index index.html index.htm;
|
try_files $uri $uri/index.html /index.html;
|
||||||
try_files $uri $uri/ /index.html;
|
}
|
||||||
|
|
||||||
|
# static js and css files that get replaced instead of updated
|
||||||
|
location ~ \.(js|css) {
|
||||||
|
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||||
|
try_files $uri =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# cache other static files for 30 days
|
||||||
|
location ~ \.(?!html) {
|
||||||
|
add_header Cache-Control "public, max-age=2592000";
|
||||||
|
try_files $uri =404;
|
||||||
}
|
}
|
||||||
|
|
||||||
#error_page 404 /404.html;
|
#error_page 404 /404.html;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -7,10 +7,10 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "^4.5.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@vue/cli-plugin-eslint": "^4.5.0",
|
||||||
"@vue/cli-plugin-router": "~4.5.0",
|
"@vue/cli-plugin-router": "^4.5.0",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-service": "^4.5.0",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"bootstrap": "^5.0.1",
|
"bootstrap": "^5.0.1",
|
||||||
|
@ -20,6 +20,7 @@
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
"sass": "^1.37.5",
|
"sass": "^1.37.5",
|
||||||
"sass-loader": "^10.2.0",
|
"sass-loader": "^10.2.0",
|
||||||
|
"v-tooltip": "^4.0.0-alpha.1",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.0-0",
|
"vue-router": "^4.0.0-0",
|
||||||
"vuex": "^4.0.2"
|
"vuex": "^4.0.2"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"1": "Keine Angabe",
|
"1": "Keine Angabe",
|
||||||
"2": "Grundkentnisse",
|
"2": "Grundkenntnisse",
|
||||||
"3": "Gut",
|
"3": "Gut",
|
||||||
"4": "Fließend",
|
"4": "Fließend",
|
||||||
"5": "Muttersprache"
|
"5": "Muttersprache"
|
||||||
|
|
|
@ -1,7 +1,22 @@
|
||||||
{
|
{
|
||||||
"1": "bis 6 Monate",
|
"1": {
|
||||||
"2": "bis 1 Jahr",
|
"short": "≤ 6M",
|
||||||
"3": "bis 3 Jahre",
|
"long": "bis 6 Monate"
|
||||||
"4": "bis 5 Jahre",
|
},
|
||||||
"5": "mehr als 5 Jahre"
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -5,21 +5,46 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<profile-list
|
||||||
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
|
:values="values"
|
||||||
<div class="row mb-2">
|
:type="type"
|
||||||
<div class="col">
|
:editable="true"
|
||||||
|
:show-secondary="showSecondary"
|
||||||
|
@remove-value="removeValue($event)"
|
||||||
|
@update-values="this.$emit('update-values', this.values)"
|
||||||
|
>
|
||||||
|
</profile-list>
|
||||||
|
<div v-bind="$attrs" class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
|
||||||
|
<div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
<input
|
<input
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
type="text"
|
type="text"
|
||||||
class="form-control"
|
class="form-control form-control-sm"
|
||||||
id="searchText"
|
id="searchText"
|
||||||
|
:maxlength="maxlength"
|
||||||
|
:placeholder="placeholder"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
@keyup="search()"
|
@input="search()"
|
||||||
@keyup.enter="addResult()"
|
@keyup.enter="addResult()"
|
||||||
/>
|
/>
|
||||||
|
<div v-if="searchResults">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li
|
||||||
|
class="list-group-item"
|
||||||
|
v-for="result in searchResults"
|
||||||
|
:key="result.id"
|
||||||
|
@click="addResult(result)"
|
||||||
|
>
|
||||||
|
{{ result.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-md-2">
|
||||||
<button
|
<button
|
||||||
v-if="searchText != ''"
|
v-if="searchText != ''"
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -32,36 +57,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="" v-if="searchResults">
|
|
||||||
<ul class="list-group">
|
|
||||||
<li
|
|
||||||
class="list-group-item"
|
|
||||||
v-for="result in searchResults"
|
|
||||||
:key="result.id"
|
|
||||||
@click="addResult(result)"
|
|
||||||
>
|
|
||||||
{{ result.name }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<profile-list
|
|
||||||
:values="values"
|
|
||||||
:type="type"
|
|
||||||
:editable="true"
|
|
||||||
@remove-value="removeValue($event)"
|
|
||||||
@update-values="this.$emit('update-values', this.values)"
|
|
||||||
>
|
|
||||||
</profile-list>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
import RequestMixin from "@/mixins/request.mixin"
|
import RequestMixin from '@/mixins/request.mixin'
|
||||||
import ProfileList from "@/components/ProfileList";
|
import ProfileList from '@/components/ProfileList';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AutoComplete",
|
name: 'AutoComplete',
|
||||||
mixins: [RequestMixin],
|
mixins: [RequestMixin],
|
||||||
components: {
|
components: {
|
||||||
ProfileList,
|
ProfileList,
|
||||||
|
@ -76,21 +81,33 @@ export default {
|
||||||
values: {
|
values: {
|
||||||
type: Array,
|
type: Array,
|
||||||
},
|
},
|
||||||
|
showSecondary: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
iconUrl: this.apiUrl,
|
iconUrl: this.apiUrl,
|
||||||
searchText: "",
|
searchText: '',
|
||||||
searchResults: [],
|
searchResults: [],
|
||||||
showErrorMessage: false,
|
showErrorMessage: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['currentUserId'])
|
...mapState(['currentUserId']),
|
||||||
|
maxlength() {
|
||||||
|
return this.type === 'skill' ? 50 : 25
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addResult(result = false) {
|
addResult(result = false) {
|
||||||
if (!result) result = this.searchResults[0];
|
if (!result) result = this.searchResults[0];
|
||||||
|
|
||||||
if (
|
if (
|
||||||
this.values.map((item) => item[this.type].name).includes(result.name)
|
this.values.map((item) => item[this.type].name).includes(result.name)
|
||||||
) {
|
) {
|
||||||
|
@ -101,16 +118,19 @@ export default {
|
||||||
let newValue = {
|
let newValue = {
|
||||||
profile_id: this.currentUserId,
|
profile_id: this.currentUserId,
|
||||||
};
|
};
|
||||||
if (this.type != "contacttype") {
|
|
||||||
|
if (this.type != 'contacttype') {
|
||||||
newValue.level = 1;
|
newValue.level = 1;
|
||||||
} else {
|
} else {
|
||||||
newValue.content = "";
|
newValue.content = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
newValue[this.type] = result;
|
newValue[this.type] = result;
|
||||||
changeValues.unshift(newValue);
|
changeValues.unshift(newValue);
|
||||||
this.searchText = "";
|
|
||||||
|
this.searchText = '';
|
||||||
this.searchResults = [];
|
this.searchResults = [];
|
||||||
this.$emit("update-values", changeValues);
|
this.$emit('update-values', changeValues);
|
||||||
},
|
},
|
||||||
removeValue(valueName) {
|
removeValue(valueName) {
|
||||||
const newValues = this.values.filter((value) => {
|
const newValues = this.values.filter((value) => {
|
||||||
|
@ -120,7 +140,7 @@ export default {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.$emit("update-values", newValues);
|
this.$emit('update-values', newValues);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
<div class="fw-bold text-white mb-2">Kompetenzinventar</div>
|
<div class="fw-bold text-white mb-2">Kompetenzinventar</div>
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
|
<li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
|
||||||
<li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem melden</a></li>
|
<li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ul class="pagination">
|
||||||
|
<li
|
||||||
|
class="page-item"
|
||||||
|
:class="{ active: page === current }"
|
||||||
|
v-for="page in pages"
|
||||||
|
:key="page"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="page-link pointer"
|
||||||
|
@click="onPageClicked(page)"
|
||||||
|
>
|
||||||
|
{{ page }}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Paginator',
|
||||||
|
props: {
|
||||||
|
page: Number,
|
||||||
|
current: Number,
|
||||||
|
pages: Number
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPageClicked(page) {
|
||||||
|
if (page == this.current) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('page', page)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -5,84 +5,72 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul>
|
<ul class="list-group list-group-flush">
|
||||||
<li v-for="(value, valueKey) in values" :key="value.id">
|
<li
|
||||||
<div class="row m-1">
|
class="list-group-item"
|
||||||
<div class="col">
|
v-for="(value, valueKey) in values"
|
||||||
<img
|
:key="value.id"
|
||||||
style="max-width: 64px"
|
>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-5 d-flex align-items-center">
|
||||||
|
<div
|
||||||
|
class="list-icon me-1"
|
||||||
|
:style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
|
||||||
v-if="value[type].icon_url"
|
v-if="value[type].icon_url"
|
||||||
:src="iconUrl + value[type].icon_url"
|
|
||||||
:alt="`${value[type].name} Logo`"
|
|
||||||
/>
|
/>
|
||||||
{{ value[type].name }}
|
<div>
|
||||||
|
{{ value[type].name }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-10 col-md-5">
|
||||||
<div v-if="type == 'skill'">
|
<div v-if="type == 'skill' && showSecondary">
|
||||||
<div v-if="editable">
|
<select
|
||||||
<select
|
class="form-select form-select-sm"
|
||||||
v-if="editableValues[valueKey]"
|
aria-label="Selektiere dein Level"
|
||||||
class="form-select"
|
v-model="editableValues[valueKey].level"
|
||||||
aria-label="Selektiere dein Level"
|
@input="$emit('update-values', editableValues)"
|
||||||
v-model="editableValues[valueKey].level"
|
>
|
||||||
@input="$emit('update-values', editableValues)"
|
<option
|
||||||
|
v-for="(value, key) in levelSelection"
|
||||||
|
:value="key"
|
||||||
|
:key="key"
|
||||||
>
|
>
|
||||||
<option
|
{{ value.long || value }}
|
||||||
v-for="(value, key) in levelSelection"
|
</option>
|
||||||
:value="key"
|
</select>
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
{{ value }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="type == 'language'">
|
<div v-else-if="type == 'language'">
|
||||||
<div v-if="editable">
|
<select
|
||||||
<div v-if="editable">
|
class="form-select form-select-sm"
|
||||||
<select
|
aria-label="Selektiere dein Level"
|
||||||
v-if="editableValues[valueKey]"
|
v-model="editableValues[valueKey].level"
|
||||||
class="form-select"
|
@input="$emit('update-values', editableValues)"
|
||||||
aria-label="Selektiere dein Level"
|
>
|
||||||
v-model="editableValues[valueKey].level"
|
<option
|
||||||
@input="$emit('update-values', editableValues)"
|
v-for="(value, key) in languagesSelection"
|
||||||
|
:value="key"
|
||||||
|
:key="key"
|
||||||
>
|
>
|
||||||
<option
|
{{ value }}
|
||||||
v-for="(value, key) in languagesSelection"
|
</option>
|
||||||
:value="key"
|
</select>
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
{{ value }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="type == 'contacttype'">
|
<div v-else-if="type == 'contacttype'">
|
||||||
<div v-if="editable">
|
<input
|
||||||
<input class="form-control" v-model="editableValues[valueKey].content"/>
|
class="form-control form-control-sm"
|
||||||
</div>
|
maxlength="200"
|
||||||
<div v-else>
|
v-model="editableValues[valueKey].content"
|
||||||
<span v-if="value[type].name === 'E-Mail'">
|
/>
|
||||||
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
{{ value.content }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col-2 text-end">
|
||||||
<button
|
<button
|
||||||
v-if="editable"
|
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-outline-danger"
|
class="btn btn-sm btn-light"
|
||||||
aria-label="Löschen"
|
aria-label="Löschen"
|
||||||
@click="$emit('removeValue', value[type].name)"
|
@click="$emit('removeValue', value[type].name)"
|
||||||
>
|
>
|
||||||
<i class="bi-trash"></i>
|
<i class="text-danger bi bi-x-circle"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -90,11 +78,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import levelJson from "@/assets/skill_level.json";
|
import levelJson from '@/assets/skill_level.json';
|
||||||
import languagesJson from "@/assets/language_level.json";
|
import languagesJson from '@/assets/language_level.json';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ProfileList",
|
name: 'ProfileList',
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -103,14 +91,14 @@ export default {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
editable: {
|
showSecondary: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
iconUrl: this.apiUrl,
|
iconBaseUrl: this.apiUrl,
|
||||||
levelSelection: levelJson,
|
levelSelection: levelJson,
|
||||||
languagesSelection: languagesJson,
|
languagesSelection: languagesJson,
|
||||||
editableValues: this.values,
|
editableValues: this.values,
|
||||||
|
@ -123,3 +111,13 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scope>
|
||||||
|
.list-icon {
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -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 p-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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!--
|
||||||
|
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="profile?.address?.name">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="fs-4 bi bi-person-fill text-dark mx-2"></i>
|
||||||
|
<div class="text-white">
|
||||||
|
a.k.a. {{ profile.address.name }}
|
||||||
|
</div>
|
||||||
|
</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>
|
|
@ -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>
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!--
|
||||||
|
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">
|
||||||
|
<slot name="card-body">
|
||||||
|
<div class="card-body">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -6,12 +6,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
|
import VTooltipPlugin from 'v-tooltip'
|
||||||
|
|
||||||
|
import 'v-tooltip/dist/v-tooltip.css'
|
||||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||||
import './assets/global.scss'
|
import './assets/global.scss'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(VTooltipPlugin)
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(store)
|
app.use(store)
|
||||||
|
|
||||||
|
|
|
@ -37,6 +37,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async search() {
|
async search() {
|
||||||
|
if (!this.searchText) {
|
||||||
|
this.searchResults = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
|
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -52,15 +57,16 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
const responseData = await response.json()
|
const responseData = await response.json()
|
||||||
this.searchResults = responseData[`${this.type}s`];
|
const searchResults = responseData[`${this.type}s`];
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!this.values
|
!searchResults.map((item) => item.name.toLowerCase())
|
||||||
.map((item) => item[this.type].name.toLowerCase())
|
.includes(this.searchText.toLowerCase())
|
||||||
.includes(this.searchText.toLowerCase())
|
|
||||||
) {
|
) {
|
||||||
this.searchResults.unshift({ name: this.searchText });
|
searchResults.unshift({ name: this.searchText });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.searchResults = searchResults
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error();
|
console.error();
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true;
|
||||||
|
@ -89,10 +95,11 @@ export default {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async submitFormEdit() {
|
async submitFormEdit(isProfileVisible) {
|
||||||
this.showErrorMessage = false
|
this.showErrorMessage = false
|
||||||
this.showSuccessMessage = false
|
this.showSuccessMessage = false
|
||||||
const userId = store.state.currentUserId
|
const userId = store.state.currentUserId
|
||||||
|
this.profile.visible = isProfileVisible;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const body = JSON.stringify(this.profile)
|
const body = JSON.stringify(this.profile)
|
||||||
|
|
|
@ -46,7 +46,14 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
component: Index
|
component: Index,
|
||||||
|
beforeEnter: (_to, _from, next) => {
|
||||||
|
if (store.state.token) {
|
||||||
|
next({name: 'Search'})
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
|
|
||||||
import { createStore } from 'vuex'
|
import { createStore } from 'vuex'
|
||||||
|
|
||||||
|
import profile from './profile'
|
||||||
import search from './search'
|
import search from './search'
|
||||||
|
|
||||||
const localStorageKeys = {
|
const localStorageKeys = {
|
||||||
|
@ -13,13 +14,13 @@ const localStorageKeys = {
|
||||||
|
|
||||||
export default createStore({
|
export default createStore({
|
||||||
modules: {
|
modules: {
|
||||||
|
profile,
|
||||||
search,
|
search,
|
||||||
},
|
},
|
||||||
state() {
|
state() {
|
||||||
return {
|
return {
|
||||||
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
||||||
token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
|
token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
|
||||||
currentProfile: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
|
@ -42,9 +43,6 @@ export default createStore({
|
||||||
state.token = token
|
state.token = token
|
||||||
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
|
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
|
||||||
},
|
},
|
||||||
setCurrentProfile(state, profile) {
|
|
||||||
state.currentProfile = profile
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
clear(context) {
|
clear(context) {
|
||||||
|
|
|
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -12,8 +12,10 @@ export default {
|
||||||
profiles: [],
|
profiles: [],
|
||||||
error: false,
|
error: false,
|
||||||
errorMessage: '',
|
errorMessage: '',
|
||||||
|
pages: 1,
|
||||||
query: {
|
query: {
|
||||||
search: ''
|
search: '',
|
||||||
|
page: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -40,11 +42,17 @@ export default {
|
||||||
state.errorMessage = errorMessage
|
state.errorMessage = errorMessage
|
||||||
},
|
},
|
||||||
setQuerySearch(state, search) {
|
setQuerySearch(state, search) {
|
||||||
state.query.search = search
|
state.query = {...state.query, search}
|
||||||
|
},
|
||||||
|
setPages(state, pages) {
|
||||||
|
state.pages = pages
|
||||||
|
},
|
||||||
|
setQueryPage(state, page) {
|
||||||
|
state.query = {...state.query, page}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async search({state, commit, rootState}) {
|
async search({state, commit, rootState, dispatch}) {
|
||||||
if (state.searching) {
|
if (state.searching) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -60,11 +68,13 @@ export default {
|
||||||
commit('setErrorMessage', '')
|
commit('setErrorMessage', '')
|
||||||
|
|
||||||
const url = new URL(`${window.ki.apiUrl}/users/profiles`)
|
const url = new URL(`${window.ki.apiUrl}/users/profiles`)
|
||||||
|
|
||||||
if (state.query.search) {
|
if (state.query.search) {
|
||||||
url.searchParams.append('search', state.query.search)
|
url.searchParams.append('search', state.query.search)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
url.searchParams.append('page', state.query.page)
|
||||||
|
|
||||||
const headers = {
|
const headers = {
|
||||||
Authorization: `Bearer ${rootState.token}`,
|
Authorization: `Bearer ${rootState.token}`,
|
||||||
}
|
}
|
||||||
|
@ -81,8 +91,19 @@ export default {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(response.ok)
|
||||||
|
console.log(response.status)
|
||||||
|
console.log(state.query.page)
|
||||||
|
|
||||||
clearTimeout(timeoutId)
|
clearTimeout(timeoutId)
|
||||||
|
|
||||||
|
if (!response.ok && response.status === 404 && state.query.page != 1) {
|
||||||
|
commit('setQueryPage', 1)
|
||||||
|
commit('setSearching', false)
|
||||||
|
await dispatch('search')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
commit('setError', true)
|
commit('setError', true)
|
||||||
commit('clearProfiles')
|
commit('clearProfiles')
|
||||||
|
@ -93,6 +114,7 @@ export default {
|
||||||
|
|
||||||
const responseData = await response.json()
|
const responseData = await response.json()
|
||||||
commit('setProfiles', responseData.profiles)
|
commit('setProfiles', responseData.profiles)
|
||||||
|
commit('setPages', responseData.pages)
|
||||||
commit('setSearching', false)
|
commit('setSearching', false)
|
||||||
commit('hideSpinner')
|
commit('hideSpinner')
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
id="exampleInputusername1"
|
id="exampleInputusername1"
|
||||||
v-model="username"
|
v-model="username"
|
||||||
required
|
required
|
||||||
|
autofocus
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
|
|
|
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="searchText"
|
id="searchText"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
placeholder="Nick, Fähigkeit, Sprache"
|
placeholder="Nick, Name, Fähigkeit, Sprache"
|
||||||
ref="searchTextInput"
|
ref="searchTextInput"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,12 +53,26 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="showResults">
|
<div v-else-if="showResults">
|
||||||
|
<div class="d-flex justify-content-around">
|
||||||
|
<Paginator
|
||||||
|
:pages="pages"
|
||||||
|
:current="currentPage"
|
||||||
|
@page="handlePageSelected"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<SearchResult
|
<SearchResult
|
||||||
v-for="profile in profiles"
|
v-for="profile in profiles"
|
||||||
:key="profile.user_id"
|
:key="profile.user_id"
|
||||||
class="mb-3"
|
class="mb-3"
|
||||||
:profile="profile"
|
:profile="profile"
|
||||||
/>
|
/>
|
||||||
|
<div class="d-flex justify-content-around">
|
||||||
|
<Paginator
|
||||||
|
:pages="pages"
|
||||||
|
:current="currentPage"
|
||||||
|
@page="handlePageSelected"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -67,21 +81,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import Paginator from '@/components/Paginator'
|
||||||
import SearchResult from '@/components/SearchResult'
|
import SearchResult from '@/components/SearchResult'
|
||||||
import Spinner from '@/components/Spinner'
|
import Spinner from '@/components/Spinner'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Search',
|
name: 'Search',
|
||||||
components: {
|
components: {
|
||||||
|
Paginator,
|
||||||
SearchResult,
|
SearchResult,
|
||||||
Spinner,
|
Spinner,
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
textChanged: false
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
searching: state => state.search.searching,
|
searching: state => state.search.searching,
|
||||||
profiles: state => state.search.profiles,
|
profiles: state => state.search.profiles,
|
||||||
error: state => state.search.error,
|
error: state => state.search.error,
|
||||||
showSpinner: state => state.search.showSpinner,
|
showSpinner: state => state.search.showSpinner,
|
||||||
|
pages: state => state.search.pages,
|
||||||
}),
|
}),
|
||||||
searchText: {
|
searchText: {
|
||||||
get() {
|
get() {
|
||||||
|
@ -89,6 +111,15 @@ export default {
|
||||||
},
|
},
|
||||||
set(text) {
|
set(text) {
|
||||||
this.$store.commit('search/setQuerySearch', text)
|
this.$store.commit('search/setQuerySearch', text)
|
||||||
|
this.textChanged = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currentPage: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.search.query.page
|
||||||
|
},
|
||||||
|
set(page) {
|
||||||
|
this.$store.commit('search/setQueryPage', page)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showNoResults() {
|
showNoResults() {
|
||||||
|
@ -100,25 +131,46 @@ export default {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
searching(value) {
|
searching(value) {
|
||||||
if (value) {
|
if (!value) {
|
||||||
if (this.$refs.searchTextInput) {
|
if (this.$refs.searchTextInput) {
|
||||||
this.$refs.searchTextInput.focus()
|
this.focusSearchText()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSubmit() {
|
handleSubmit() {
|
||||||
this.$router.push({ query: { query: this.searchText }})
|
if (this.textChanged === true) {
|
||||||
|
this.$store.commit('search/setQueryPage', 1)
|
||||||
|
}
|
||||||
|
this.pushState()
|
||||||
this.$store.dispatch('search/search')
|
this.$store.dispatch('search/search')
|
||||||
|
},
|
||||||
|
focusSearchText() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.searchTextInput.focus()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePageSelected(page) {
|
||||||
|
this.currentPage = page
|
||||||
|
this.pushState()
|
||||||
|
this.$store.dispatch('search/search')
|
||||||
|
},
|
||||||
|
pushState() {
|
||||||
|
this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.$route.query.query !== undefined) {
|
if (this.$route.query.query) {
|
||||||
this.searchText = this.$route.query.query
|
this.searchText = this.$route.query.query
|
||||||
this.$store.commit('search/clearProfiles')
|
this.$store.commit('search/clearProfiles')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.$route.query.page) {
|
||||||
|
this.currentPage = parseInt(this.$route.query.page, 10)
|
||||||
|
this.$store.commit('search/clearProfiles')
|
||||||
|
}
|
||||||
|
|
||||||
this.$store.dispatch('search/search')
|
this.$store.dispatch('search/search')
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,190 +5,249 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div>
|
||||||
<h1>Profil bearbeiten</h1>
|
<div class="bg-wtf py-3 mb-4">
|
||||||
<form @submit.prevent="submitFormEdit()">
|
<div class="container">
|
||||||
<div class="row">
|
<h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
|
||||||
<div class="col">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="false"
|
|
||||||
:value="false"
|
|
||||||
v-model="profile.visible"
|
|
||||||
class="mr-2"
|
|
||||||
/>
|
|
||||||
<label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="true"
|
|
||||||
:value="true"
|
|
||||||
v-model="profile.visible"
|
|
||||||
/>
|
|
||||||
<label for="true" class="m-2 fw-bold"> Öffentlich</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="visibilityHelp" class="form-text">
|
</div>
|
||||||
Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
|
<div class="container">
|
||||||
darauf zugreifen oder es in der Suche finden.
|
<form @submit.prevent="submitFormEdit(false)">
|
||||||
</div>
|
<Section title="Grunddaten">
|
||||||
<div class="row">
|
<div class="row mb-4">
|
||||||
<div class="col-6 col-xs-12">
|
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||||
<label for="nickname" class="form-label fw-bold">Nickname:</label>
|
<label class="form-label">Nickname</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="nickname"
|
id="nickname"
|
||||||
v-model="profile.nickname"
|
maxlength="25"
|
||||||
required
|
v-model="profile.nickname"
|
||||||
/>
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||||
|
<label class="form-label">Klarname (optional)</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="realname"
|
||||||
|
maxlength="25"
|
||||||
|
v-model="profile.address.name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<label class="form-label">
|
||||||
|
Pronomen
|
||||||
|
<i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="pronouns"
|
||||||
|
maxlength="25"
|
||||||
|
v-model="profile.pronouns"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="form-label">Anschrift</label>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="postcode"
|
||||||
|
maxlength="10"
|
||||||
|
placeholder="Postleitzahl"
|
||||||
|
v-model="profile.address.postcode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="city"
|
||||||
|
maxlength="25"
|
||||||
|
placeholder="Ort"
|
||||||
|
v-model="profile.address.city"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="country"
|
||||||
|
maxlength="25"
|
||||||
|
placeholder="Land"
|
||||||
|
v-model="profile.address.country"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Meine Fähigkeiten">
|
||||||
|
<template v-slot:card-body>
|
||||||
|
<auto-complete
|
||||||
|
type="skill"
|
||||||
|
:values="profile.skills"
|
||||||
|
placeholder="z.B. Python, JavaScript, Linux"
|
||||||
|
@update-values="profile.skills = $event"
|
||||||
|
></auto-complete>
|
||||||
|
</template>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Meine Sprachkenntnisse">
|
||||||
|
<template v-slot:card-body>
|
||||||
|
<auto-complete
|
||||||
|
type="language"
|
||||||
|
:values="profile.languages"
|
||||||
|
placeholder="z.B. Deutsch, Englisch, Französisch"
|
||||||
|
@update-values="profile.languages = $event"
|
||||||
|
></auto-complete>
|
||||||
|
</template>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
|
||||||
|
<template v-slot:card-body>
|
||||||
|
<auto-complete
|
||||||
|
type="skill"
|
||||||
|
label="Ich suche für mich Projekte/Aufträge in folgenden Bereichen"
|
||||||
|
:values="profile.searchtopics"
|
||||||
|
:showSecondary="false"
|
||||||
|
placeholder="z.B. Python, JavaScript, Linux"
|
||||||
|
@update-values="profile.searchtopics = $event"
|
||||||
|
></auto-complete>
|
||||||
|
</template>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
min="0"
|
||||||
|
max="168"
|
||||||
|
class="form-control">
|
||||||
|
</div>
|
||||||
|
<label for="availability" class="form-label">
|
||||||
|
Anmerkungen
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
id="availability"
|
||||||
|
rows="3"
|
||||||
|
maxlength="4000"
|
||||||
|
v-model="profile.availability_text"
|
||||||
|
></textarea>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Meine Kontaktmöglichkeiten">
|
||||||
|
<template v-slot:card-body>
|
||||||
|
<auto-complete
|
||||||
|
type="contacttype"
|
||||||
|
:values="profile.contacts"
|
||||||
|
placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
|
||||||
|
@update-values="profile.contacts = $event"
|
||||||
|
></auto-complete>
|
||||||
|
</template>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Sonstiges">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="form-label">Über mich</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
rows="3"
|
||||||
|
maxlength="4000"
|
||||||
|
v-model="profile.freetext"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="form-label">Ehrenamtliche Arbeit</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
rows="3"
|
||||||
|
maxlength="4000"
|
||||||
|
v-model="profile.volunteerwork"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
<input type="submit" class="d-none">
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-xs-12">
|
<div class="savebar bg-white border-top py-3">
|
||||||
<label for="pronouns" class="form-label fw-bold">Pronomen:</label>
|
<div class="container d-flex align-items-center justify-content-end">
|
||||||
<input
|
<div
|
||||||
type="text"
|
class="text-danger"
|
||||||
class="form-control"
|
v-if="showErrorMessage"
|
||||||
id="pronouns"
|
>
|
||||||
v-model="profile.pronouns"
|
<i class="bi bi-bug"></i>
|
||||||
/>
|
Beim Speichern ist ein Fehler aufgetreten.
|
||||||
<div for="pronouns" class="form-text">
|
</div>
|
||||||
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
|
<div
|
||||||
|
class="text-success"
|
||||||
|
v-if="showSuccessMessage"
|
||||||
|
>
|
||||||
|
<i class="bi bi-check-lg"></i>
|
||||||
|
Gespeichert
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary ms-3"
|
||||||
|
@click="submitFormEdit(false)"
|
||||||
|
>
|
||||||
|
Entwurf Speichern
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="btn btn-primary ms-3"
|
||||||
|
@click="submitFormEdit(true)"
|
||||||
|
>
|
||||||
|
Speichern und Veröffentlichen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-xs-12">
|
|
||||||
<label for="freetext" class="form-label fw-bold">Vorstellung:</label>
|
|
||||||
<textarea
|
|
||||||
class="form-control"
|
|
||||||
id="freetext"
|
|
||||||
rows="3"
|
|
||||||
v-model="profile.freetext"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-xs-12">
|
|
||||||
<label for="volunteerwork" class="form-label fw-bold"
|
|
||||||
>Ehrenamtliche Arbeit:</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control"
|
|
||||||
id="volunteerwork"
|
|
||||||
rows="3"
|
|
||||||
v-model="profile.volunteerwork"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<auto-complete
|
|
||||||
type="skill"
|
|
||||||
label="Deine Fähigkeiten"
|
|
||||||
:values="profile.skills"
|
|
||||||
@update-values="profile.skills = $event"
|
|
||||||
></auto-complete>
|
|
||||||
<auto-complete
|
|
||||||
type="language"
|
|
||||||
label="Deine Sprachen"
|
|
||||||
:values="profile.languages"
|
|
||||||
@update-values="profile.languages = $event"
|
|
||||||
></auto-complete>
|
|
||||||
<auto-complete
|
|
||||||
type="skill"
|
|
||||||
label="Ich suche"
|
|
||||||
:values="profile.searchtopics"
|
|
||||||
@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
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
class="form-control"
|
|
||||||
id="availability"
|
|
||||||
rows="3"
|
|
||||||
v-model="profile.availability"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<auto-complete
|
|
||||||
type="contacttype"
|
|
||||||
label="Kontaktmöglichkeiten"
|
|
||||||
:values="profile.contacts"
|
|
||||||
@update-values="profile.contacts = $event"
|
|
||||||
></auto-complete>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">
|
|
||||||
<label for="pzl" class="form-label fw-bold">PLZ</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="pzl"
|
|
||||||
v-model="profile.address.postcode"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<label for="city" class="form-label fw-bold">Stadt</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="city"
|
|
||||||
v-model="profile.address.city"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<label for="country" class="form-label fw-bold">Land</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="country"
|
|
||||||
v-model="profile.address.country"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
|
|
||||||
Speichern
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
class="alert alert-danger mb-4 mt-4"
|
|
||||||
role="alert"
|
|
||||||
v-if="showErrorMessage"
|
|
||||||
>
|
|
||||||
Es ist Fehler aufgetreten
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="alert alert-success mb-4 mt-4"
|
|
||||||
role="alert"
|
|
||||||
v-if="showSuccessMessage"
|
|
||||||
>
|
|
||||||
Deine Änderungen wurden erfolgreich gespeichert
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import RequestMixin from "@/mixins/request.mixin"
|
import RequestMixin from "@/mixins/request.mixin"
|
||||||
|
|
||||||
import AutoComplete from "@/components/AutoComplete";
|
import AutoComplete from "@/components/AutoComplete";
|
||||||
|
import Section from '@/components/profile/Section'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "profileEdit",
|
name: "profileEdit",
|
||||||
mixins: [RequestMixin],
|
mixins: [RequestMixin],
|
||||||
components: {
|
components: {
|
||||||
AutoComplete,
|
AutoComplete,
|
||||||
|
Section,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showErrorMessage: false,
|
showErrorMessage: false,
|
||||||
showSuccessMessage: false,
|
showSuccessMessage: false,
|
||||||
|
clearMessagesHandle: null,
|
||||||
profile: {
|
profile: {
|
||||||
visible: false,
|
visible: false,
|
||||||
nickname: "",
|
nickname: "",
|
||||||
pronouns: "",
|
pronouns: "",
|
||||||
volunteerwork: "",
|
volunteerwork: "",
|
||||||
freetext: "",
|
freetext: "",
|
||||||
availability: "",
|
availability_status: false,
|
||||||
|
availability_hours_per_week: null,
|
||||||
|
availability_text: "",
|
||||||
address: {
|
address: {
|
||||||
postcode: "",
|
postcode: "",
|
||||||
city: "",
|
city: "",
|
||||||
|
@ -199,10 +258,49 @@ export default {
|
||||||
searchtopics: [],
|
searchtopics: [],
|
||||||
contacts: [],
|
contacts: [],
|
||||||
},
|
},
|
||||||
|
pronounsTooltip: {
|
||||||
|
content: 'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
|
||||||
|
html: true
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
await this.initEditPage();
|
await this.initEditPage();
|
||||||
},
|
},
|
||||||
|
unmounted() {
|
||||||
|
this.cancelClearMessages()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancelClearMessages() {
|
||||||
|
if (this.clearMessagesHandle) {
|
||||||
|
window.clearTimeout(this.clearMessagesHandle)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scheduleClearMessages() {
|
||||||
|
this.cancelClearMessages()
|
||||||
|
this.clearMessagesHandle = window.setTimeout(() => {
|
||||||
|
this.showErrorMessage = false
|
||||||
|
this.showSuccessMessage = false
|
||||||
|
}, 2500)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
showErrorMessage(curr) {
|
||||||
|
if (curr) {
|
||||||
|
this.scheduleClearMessages()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showSuccessMessage(curr) {
|
||||||
|
if (curr) {
|
||||||
|
this.scheduleClearMessages()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.savebar {
|
||||||
|
bottom: 0;
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -5,60 +5,156 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="profile" class="container">
|
<div>
|
||||||
<h1>
|
<template v-if="error">
|
||||||
{{profile.nickname}}
|
<ViewError :isOwnProfile="isOwnProfile" :notFound="notFound" />
|
||||||
<span v-if="profile.pronouns">({{profile.pronouns}})</span>
|
</template>
|
||||||
</h1>
|
<template
|
||||||
<p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
|
v-else-if="profile"
|
||||||
<p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
|
class="container">
|
||||||
<p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
|
<ProfileHeader
|
||||||
<h3>Das kann ich:</h3>
|
class="mb-4"
|
||||||
<profile-list
|
:profile="profile" />
|
||||||
:values="profile.skills"
|
|
||||||
type="skill"
|
<Section
|
||||||
></profile-list>
|
v-if="profile.skills && profile.skills.length > 0"
|
||||||
<h3>Das suche ich:</h3>
|
title="Das kann ich">
|
||||||
<profile-list
|
<div style="margin-bottom: -.5rem;">
|
||||||
:values="profile.searchtopics"
|
<Skill
|
||||||
type="skill"
|
class="me-2 mb-2"
|
||||||
></profile-list>
|
v-for="skill in profile.skills"
|
||||||
<h3>Meine Kontaktmöglichkeiten:</h3>
|
:key="skill.skill.id"
|
||||||
<profile-list
|
:profileSkill="skill"
|
||||||
:values="profile.contacts"
|
:showLevel="true" />
|
||||||
type="contacttype"
|
</div>
|
||||||
></profile-list>
|
</Section>
|
||||||
<h3>Ich Spreche Folgende Sprachen:</h3>
|
|
||||||
<profile-list
|
<Section
|
||||||
:values="profile.languages"
|
v-if="profile.searchtopics && profile.searchtopics.length > 0"
|
||||||
type="language"
|
title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
|
||||||
></profile-list>
|
<div style="margin-bottom: -.5rem;">
|
||||||
<div v-if="profile.address">
|
<Skill
|
||||||
<h3>Meine Location:</h3>
|
class="me-2 mb-2"
|
||||||
{{profile.address.city}}<span v-if="profile.address && profile.address.postcode"> ({{profile.address.postcode}})</span>, {{profile.address.country}}
|
v-for="skill in profile.searchtopics"
|
||||||
</div>
|
: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 class="line-break-text">{{ 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>
|
||||||
|
<div class="line-break-text">{{ profile.freetext }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="profile.volunteerwork" class="lh-base">
|
||||||
|
<h5>Ehrenamtliche Arbeit</h5>
|
||||||
|
<div class="line-break-text">{{ profile.volunteerwork }}</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
import RequestMixin from '@/mixins/request.mixin'
|
import ViewError from '@/components/ViewError'
|
||||||
|
import ProfileHeader from '@/components/profile/Header'
|
||||||
import ProfileList from '@/components/ProfileList';
|
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 {
|
export default {
|
||||||
name: "profileView",
|
name: 'profileView',
|
||||||
mixins: [RequestMixin],
|
|
||||||
components: {
|
components: {
|
||||||
ProfileList,
|
Contact,
|
||||||
|
Language,
|
||||||
|
ProfileHeader,
|
||||||
|
Section,
|
||||||
|
Skill,
|
||||||
|
ViewError,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions({
|
||||||
|
loadProfile: 'profile/load',
|
||||||
|
clearStore: 'profile/clear',
|
||||||
|
})
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...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() {
|
async created() {
|
||||||
await this.initViewPage();
|
const id = parseInt(this.$route.params.memberId, 10)
|
||||||
}
|
this.loadProfile(id)
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
this.clearStore()
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.line-break-text{
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue