Compare commits
156 Commits
2440c5357b
...
main
Author | SHA1 | Date | |
---|---|---|---|
d2428a6f75 | |||
511750cbab | |||
5664ede980 | |||
e03064852b | |||
a159fd7b04 | |||
1cd0d4dc27 | |||
f969d2d061 | |||
b1a3852b86 | |||
958725ad73 | |||
b14c4389d6 | |||
a39970216c | |||
c3beea3814 | |||
6a4026e7cb | |||
7ceaf18d53 | |||
6dabb6ea81 | |||
062c47be14 | |||
6ef06e7b27 | |||
ceabff143b | |||
df437fad47 | |||
dcf5c81029 | |||
8582ef41e5 | |||
5167716f85 | |||
0957580308 | |||
47294f9e3e | |||
62aec412dd | |||
0d738885e8 | |||
7d19f57fb0 | |||
2a40a203cf | |||
808d155a85 | |||
5aee683180 | |||
fc352864cc | |||
cc22f6767f | |||
99fe35dee4 | |||
f6673d5819 | |||
c58c727ff9 | |||
41f079fc03 | |||
31b4e21034 | |||
acb5ab5f40 | |||
66bf9d9a98 | |||
32f9d792e4 | |||
8e395d9c16 | |||
86db7774ea | |||
b0b29c77df | |||
d2075123a2 | |||
71ca40dc61 | |||
ee6097bc10 | |||
d90bc32c53 | |||
b25e0c2ce5 | |||
bdaec983d8 | |||
4850d79f54 | |||
df8b79bc53 | |||
348b589d6b | |||
312acee0f2 | |||
f5b7fe8f12 | |||
9bf644161d | |||
4cd12bfe59 | |||
f5b7fd3dee | |||
bd4242a7e1 | |||
93c4fac780 | |||
b2b295df43 | |||
cac4ceb173 | |||
aed94f4237 | |||
efd3d5bca5 | |||
cf5eb08db6 | |||
a4891afa1d | |||
087adf71c1 | |||
83164e3f54 | |||
27f399b0f3 | |||
da20c22ba4 | |||
9a056b6977 | |||
fccf9a55b6 | |||
775cf303d1 | |||
abd1e0ee31 | |||
563f492bc3 | |||
72d6756749 | |||
d1fdde6d10 | |||
a1c758a4b6 | |||
c463c2f1ad | |||
eb5de926d0 | |||
5c4c76356a | |||
61a6115071 | |||
d46aaa0f31 | |||
81dcf5ebe7 | |||
7433d25716 | |||
7feee07d35 | |||
f728f1f72b | |||
663db94cb8 | |||
a49bd3feef | |||
6f12f577d4 | |||
872ff894b5 | |||
0b02df26e8 | |||
17e43d94c4 | |||
c79ada2123 | |||
7b0e38296f | |||
bc1a079503 | |||
cd36d39fad | |||
ba701b2ac8 | |||
9d35989ba9 | |||
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 | |||
|
c25639b40c | ||
a2048d0eb9 | |||
|
b19a770d61 | ||
|
8098c54c06 | ||
73847022e2 | |||
93cb302ca7 | |||
fcbf3ee796 | |||
|
fee786f1c8 | ||
b190a3764b | |||
a408cae686 | |||
94d2a98b96 | |||
a1546849c8 | |||
a13314327c | |||
ebb0783103 |
@ -1,2 +1,11 @@
|
|||||||
|
.browserslistrc
|
||||||
|
.dockerignore
|
||||||
|
.drone.yml
|
||||||
|
.editorconfig
|
||||||
.git
|
.git
|
||||||
|
.gitignore
|
||||||
|
.reuse
|
||||||
|
Dockerfile
|
||||||
|
LICENSES
|
||||||
|
README.md
|
||||||
node_modules
|
node_modules
|
||||||
|
129
.drone.yml
@ -4,21 +4,118 @@
|
|||||||
# 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:5.0.2-debian@sha256:7928d25ed14a1bc22758d917ebc6aecbb8bcd1a4da7aa748d7179c9011bbfb0b
|
||||||
commands:
|
- name: lint
|
||||||
- reuse lint
|
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
|
||||||
- name: docker-publish
|
commands:
|
||||||
image: plugins/docker
|
- npm ci
|
||||||
settings:
|
- npm run lint -- --no-fix
|
||||||
registry: registry.wtf-eg.net
|
- name: audit
|
||||||
repo: registry.wtf-eg.net/ki-frontend
|
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
|
||||||
target: ki-frontend
|
commands:
|
||||||
auto_tag: true
|
- npm install -g better-npm-audit
|
||||||
username:
|
- better-npm-audit audit --production --level=moderate
|
||||||
from_secret: "docker_username"
|
- name: docker-dry-run
|
||||||
password:
|
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
|
||||||
from_secret: "docker_password"
|
settings:
|
||||||
|
registry: git.wtf-eg.de
|
||||||
|
repo: git.wtf-eg.de/kompetenzinventar/frontend
|
||||||
|
target: ki-frontend
|
||||||
|
dry_run: true
|
||||||
|
when:
|
||||||
|
event:
|
||||||
|
- pull_request
|
||||||
|
|
||||||
|
---
|
||||||
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
|
name: build
|
||||||
|
|
||||||
|
trigger:
|
||||||
|
event:
|
||||||
|
- push
|
||||||
|
branch:
|
||||||
|
- main
|
||||||
|
|
||||||
|
depends_on:
|
||||||
|
- qa
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: docker-publish
|
||||||
|
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
|
||||||
|
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:1.7.5@sha256:995677e073454912f26d4c0fdd2f9df2e1f5a30d6603d3f2ece667311b6babb3
|
||||||
|
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:5.0.2-debian@sha256:7928d25ed14a1bc22758d917ebc6aecbb8bcd1a4da7aa748d7179c9011bbfb0b
|
||||||
|
- name: lint
|
||||||
|
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
|
||||||
|
commands:
|
||||||
|
- npm ci
|
||||||
|
- npm run lint -- --no-fix
|
||||||
|
- name: docker-publish
|
||||||
|
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
|
||||||
|
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"
|
||||||
|
@ -8,10 +8,13 @@ module.exports = {
|
|||||||
'eslint:recommended'
|
'eslint:recommended'
|
||||||
],
|
],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: 'babel-eslint'
|
parser: '@babel/eslint-parser'
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'vue/multi-word-component-names': 'off',
|
||||||
|
'vue/no-useless-template-attributes': 'off',
|
||||||
|
'vue/no-reserved-component-names': 'off'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
28
.reuse/dep5
@ -1,28 +0,0 @@
|
|||||||
Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
|
|
||||||
Upstream-Name: ki-frontend
|
|
||||||
Upstream-Contact: Scammo <kontakt@samuelbrinkmann.de>
|
|
||||||
Source: https://git.wtf-eg.de/kompetenzinventar/ki-frontend
|
|
||||||
|
|
||||||
Files: package.json package-lock.json
|
|
||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
|
||||||
License: AGPL-3.0-or-later
|
|
||||||
|
|
||||||
Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
|
|
||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
|
||||||
License: AGPL-3.0-or-later
|
|
||||||
|
|
||||||
Files: public/img/wtf_logo.svg src/assets/img/wtf_logo_white.svg
|
|
||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
|
||||||
License: LicenseRef-WTF
|
|
||||||
|
|
||||||
Files: src/assets/language_level.json src/assets/skill_level.json
|
|
||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
|
||||||
License: AGPL-3.0-or-later
|
|
||||||
|
|
||||||
Files: public/img/bootstrap-icons-1.5.0/*
|
|
||||||
Copyright: Copyright (c) 2019-2020 The Bootstrap Authors
|
|
||||||
License: MIT
|
|
||||||
|
|
||||||
Files: public/fonts/Lato*
|
|
||||||
Copyright: 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)
|
|
||||||
License: OFL-1.1-RFN
|
|
21
Dockerfile
@ -2,14 +2,27 @@
|
|||||||
#
|
#
|
||||||
# SPDX-License-Identifier: AGPL-3.0-or-later
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
|
||||||
FROM node:14-alpine as builder
|
FROM node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9 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:1.27-alpine@sha256:2140dad235c130ac861018a4e13a6bc8aea3a35f3a40e20c1b060d51a7efd250 as ki-frontend
|
||||||
|
|
||||||
|
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 --from=builder /dist/ /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 .
|
||||||
|
@ -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.
|
|
10
README.md
@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
# ki-frontend
|
# ki-frontend
|
||||||
|
|
||||||
[![Build Status](https://drone.wtf-eg.de/api/badges/kompetenzinventar/ki-frontend/status.svg)](https://drone.wtf-eg.de/kompetenzinventar/ki-frontend)
|
[![Build Status](https://drone.wtf-eg.de/api/badges/kompetenzinventar/ki-frontend/status.svg)](https://drone.wtf-eg.de/kompetenzinventar/ki-frontend)
|
||||||
|
[![REUSE status](https://api.reuse.software/badge/git.wtf-eg.de/kompetenzinventar/ki-frontend)](https://api.reuse.software/info/git.wtf-eg.de/kompetenzinventar/ki-frontend)
|
||||||
|
|
||||||
## Über
|
## Über
|
||||||
|
|
||||||
@ -40,6 +41,14 @@ Folgende Kanäle gibt es für die Kommunikation über das Kompetenzinventar:
|
|||||||
npm ci
|
npm ci
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Pre requirements
|
||||||
|
|
||||||
|
* Node 20
|
||||||
|
* Wenn du eine andere node version installiert hast, kannst du [nvm](https://github.com/nvm-sh/nvm) benutzen um schnell zwischen node version zu wechseln
|
||||||
|
* NPM
|
||||||
|
* (KI-backend)[https://git.wtf-eg.de/kompetenzinventar/ki-backend] muss lokal laufen
|
||||||
|
|
||||||
|
|
||||||
### Konfigurationsdatei anpassen
|
### Konfigurationsdatei anpassen
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -47,7 +56,6 @@ cp public/config.js.dev public/config.js
|
|||||||
vi public/config.js
|
vi public/config.js
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compiles and hot-reloads for development
|
||||||
```
|
```
|
||||||
npm run serve
|
npm run serve
|
||||||
|
40
REUSE.toml
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
version = 1
|
||||||
|
SPDX-PackageName = "ki-frontend"
|
||||||
|
SPDX-PackageSupplier = "Scammo <kontakt@samuelbrinkmann.de>"
|
||||||
|
SPDX-PackageDownloadLocation = "https://git.wtf-eg.de/kompetenzinventar/ki-frontend"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = ["package.json", "package-lock.json", "renovate.json"]
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
|
||||||
|
SPDX-License-Identifier = "AGPL-3.0-or-later"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = [".browserslistrc", ".dockerignore", ".eslintrc.js", ".gitignore", "REUSE.toml"]
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
|
||||||
|
SPDX-License-Identifier = "AGPL-3.0-or-later"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = "src/assets/img/wtf**"
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
|
||||||
|
SPDX-License-Identifier = "LicenseRef-WTF"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = ["src/assets/language_level.json", "src/assets/skill_level.json"]
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
|
||||||
|
SPDX-License-Identifier = "AGPL-3.0-or-later"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = "public/img/bootstrap-icons-1.5.0/**"
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "Copyright (c) 2019-2020 The Bootstrap Authors"
|
||||||
|
SPDX-License-Identifier = "MIT"
|
||||||
|
|
||||||
|
[[annotations]]
|
||||||
|
path = "public/fonts/Lato**"
|
||||||
|
precedence = "aggregate"
|
||||||
|
SPDX-FileCopyrightText = "2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)"
|
||||||
|
SPDX-License-Identifier = "OFL-1.1-RFN"
|
@ -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;
|
||||||
|
34301
package-lock.json
generated
37
package.json
@ -1,26 +1,31 @@
|
|||||||
{
|
{
|
||||||
"name": "@wtf/ki-frontend",
|
"name": "@wtf/ki-frontend",
|
||||||
"version": "0.1.0",
|
"version": "1.1.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@babel/eslint-parser": "7.25.9",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@vue/cli-plugin-babel": "5.0.8",
|
||||||
"@vue/cli-plugin-router": "~4.5.0",
|
"@vue/cli-plugin-eslint": "5.0.8",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-plugin-router": "5.0.8",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/cli-service": "5.0.8",
|
||||||
"axios": "^0.21.1",
|
"@vue/compiler-sfc": "3.5.6",
|
||||||
"babel-eslint": "^10.1.0",
|
"bootstrap": "5.3.3",
|
||||||
"bootstrap": "^5.0.1",
|
"bootstrap-icons": "1.11.3",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "3.39.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "8.57.1",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "9.30.0",
|
||||||
"sass": "^1.37.5",
|
"sass": "1.80.4",
|
||||||
"sass-loader": "^10.2.0",
|
"sass-loader": "16.0.3",
|
||||||
"vue": "^3.0.0",
|
"v-tooltip": "4.0.0-beta.17",
|
||||||
"vue-router": "^4.0.0-0"
|
"vue": "3.5.6",
|
||||||
|
"vue-router": "4.4.5",
|
||||||
|
"vuex": "4.1.0"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"sass-embedded": "1.80.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
21
renovate.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||||
|
"extends": [
|
||||||
|
"config:best-practices",
|
||||||
|
"group:linters",
|
||||||
|
"group:test",
|
||||||
|
"npm:unpublishSafe",
|
||||||
|
":disableDependencyDashboard",
|
||||||
|
":maintainLockFilesWeekly",
|
||||||
|
":pinAllExceptPeerDependencies",
|
||||||
|
":separateMultipleMajorReleases"
|
||||||
|
],
|
||||||
|
"packageRules": [
|
||||||
|
{
|
||||||
|
"matchPackageNames": [
|
||||||
|
"node"
|
||||||
|
],
|
||||||
|
"allowedVersions": "/^[1-9][02468]\\./"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
114
src/App.vue
@ -5,119 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="alert alert-success text-center mb-0" role="alert">
|
|
||||||
Willkommen beim Alpha-Test!
|
|
||||||
<a target="_blank" href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem gefunden? Bitte hier ein Issue anlegen.</a>
|
|
||||||
</div>
|
|
||||||
<header v-if="this.$route.path.includes('/s/')">
|
<header v-if="this.$route.path.includes('/s/')">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<Navbar />
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="navbar-brand" href="#">KI</a>
|
|
||||||
<button
|
|
||||||
@click="showMobileNavbar = !showMobileNavbar"
|
|
||||||
class="navbar-toggler"
|
|
||||||
type="button"
|
|
||||||
data-bs-toggle="collapse"
|
|
||||||
data-bs-target="#navbarSupportedContent"
|
|
||||||
aria-controls="navbarSupportedContent"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-label="Toggle navigation"
|
|
||||||
>
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div
|
|
||||||
class="collapse navbar-collapse"
|
|
||||||
:class="{
|
|
||||||
show: showMobileNavbar,
|
|
||||||
}"
|
|
||||||
id="navbarSupportedContent"
|
|
||||||
>
|
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<router-link
|
|
||||||
class="nav-link"
|
|
||||||
:to="{ path: `/s/search` }"
|
|
||||||
active-class="active"
|
|
||||||
>Suche</router-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<router-link
|
|
||||||
class="nav-link"
|
|
||||||
:to="{ path: `/s/profile/${memberId}` }"
|
|
||||||
active-class="active"
|
|
||||||
>Mein Profil</router-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<router-link
|
|
||||||
class="nav-link"
|
|
||||||
:to="{ path: `/s/profile-edit` }"
|
|
||||||
active-class="active"
|
|
||||||
>Bearbeiten</router-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<button class="btn btn-outline-danger" @click="logout()">
|
|
||||||
Logout
|
|
||||||
</button>
|
|
||||||
<a class="nav-link active" aria-current="page" href="#"></a>
|
|
||||||
</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>
|
|
||||||
</header>
|
</header>
|
||||||
<router-view />
|
<router-view :key="$route.fullPath" />
|
||||||
<Footer />
|
<Footer />
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Footer from '@/views/partials/Footer.vue'
|
import Footer from '@/components/Footer'
|
||||||
|
import Navbar from '@/components/Navbar'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
Footer
|
Footer,
|
||||||
},
|
Navbar,
|
||||||
data() {
|
}
|
||||||
return {
|
|
||||||
showMobileNavbar: false,
|
|
||||||
memberId: null,
|
|
||||||
searchText: "",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.memberId = localStorage.getItem("user_id");
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
this.memberId = localStorage.getItem("user_id");
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
logout() {
|
|
||||||
localStorage.clear();
|
|
||||||
this.$router.push({ path: "/" });
|
|
||||||
},
|
|
||||||
searchRedirect() {
|
|
||||||
this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -6,3 +6,18 @@
|
|||||||
|
|
||||||
@import "variables";
|
@import "variables";
|
||||||
@import "bootstrap/scss/bootstrap";
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-card{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
BIN
src/assets/img/wtf-header-bg.jpg
Normal file
After Width: | Height: | Size: 107 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@ -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"
|
||||||
|
}
|
||||||
}
|
}
|
@ -4,5 +4,15 @@
|
|||||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
$gray-100: #edefeb;
|
||||||
|
$gray-800: #344b5d;
|
||||||
|
|
||||||
$primary: #0790a9;
|
$primary: #0790a9;
|
||||||
$dark: #344b5d;
|
$dark: $gray-800;
|
||||||
|
|
||||||
|
$body-bg: $gray-100;
|
||||||
|
|
||||||
|
$link-decoration: none;
|
||||||
|
$link-hover-decoration: underline;
|
||||||
|
|
||||||
|
$spinner-animation-speed: 1s;
|
||||||
|
@ -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 bg-white">
|
||||||
|
<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 bg-white"
|
||||||
|
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"
|
||||||
@ -27,43 +52,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
aria-label="Hinzufügen"
|
aria-label="Hinzufügen"
|
||||||
@click="addResult()"
|
@click="addResult()"
|
||||||
>
|
>
|
||||||
<img
|
<i clas="bi-plus-lg"></i>
|
||||||
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
|
|
||||||
alt="Hinzufügen Icon"
|
|
||||||
/>
|
|
||||||
Hinzufügen
|
Hinzufügen
|
||||||
</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 RequestMixin from "@/mixins/request.mixin"
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
import ProfileList from "@/components/ProfileList";
|
import RequestMixin from '@/mixins/request.mixin'
|
||||||
|
import ProfileList from '@/components/ProfileList';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AutoComplete",
|
name: 'AutoComplete',
|
||||||
mixins: [RequestMixin],
|
mixins: [RequestMixin],
|
||||||
components: {
|
components: {
|
||||||
ProfileList,
|
ProfileList,
|
||||||
@ -78,18 +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: {
|
||||||
|
...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)
|
||||||
) {
|
) {
|
||||||
@ -98,18 +116,21 @@ export default {
|
|||||||
|
|
||||||
let changeValues = Object.assign(this.values);
|
let changeValues = Object.assign(this.values);
|
||||||
let newValue = {
|
let newValue = {
|
||||||
profile_id: localStorage.getItem("user_id"),
|
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) => {
|
||||||
@ -119,7 +140,7 @@ export default {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.$emit("update-values", newValues);
|
this.$emit('update-values', newValues);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
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>
|
@ -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>
|
110
src/components/Navbar.vue
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-white">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<router-link
|
||||||
|
class="navbar-brand"
|
||||||
|
:to="{ path:'/s/search' }"
|
||||||
|
>
|
||||||
|
<img class="wtf-logo wtf-logo--navbar" src="@/assets/img/wtf_logo.svg">
|
||||||
|
<span class="d-none d-sm-inline">Kompetenzinventar</span>
|
||||||
|
<span class="d-sm-none">KI</span>
|
||||||
|
</router-link>
|
||||||
|
<button
|
||||||
|
@click="toggleMobileNav"
|
||||||
|
class="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
aria-controls="navbarSupportedContent"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="collapse navbar-collapse d-lg-flex"
|
||||||
|
:class="{ show: showMobileNav }"
|
||||||
|
id="navbarSupportedContent"
|
||||||
|
>
|
||||||
|
<ul class="navbar-nav mb-2 mb-lg-0 me-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link
|
||||||
|
class="nav-link"
|
||||||
|
:to="{ path: `/s/search` }"
|
||||||
|
active-class="active"
|
||||||
|
>Suche</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link
|
||||||
|
class="nav-link"
|
||||||
|
:to="{ path: `/s/profile/${currentUserId}` }"
|
||||||
|
active-class="active"
|
||||||
|
>Mein Profil</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<router-link
|
||||||
|
class="nav-link"
|
||||||
|
:to="{ path: `/s/profile-edit` }"
|
||||||
|
active-class="active"
|
||||||
|
>Bearbeiten</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<button class="btn btn-danger w-100" @click="logout()">
|
||||||
|
<i class="bi bi-box-arrow-right"></i>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import RequestMixin from '@/mixins/request.mixin'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Navbar',
|
||||||
|
mixins: [RequestMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showMobileNav: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['currentUserId'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleMobileNav() {
|
||||||
|
this.showMobileNav = !this.showMobileNav
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
this.$store.dispatch('clear')
|
||||||
|
this.$router.push({ path: '/' });
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.wtf-logo--navbar {
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
50
src/components/Paginator.vue
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!--
|
||||||
|
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"
|
||||||
|
:class="{ 'bg-white': page !== current }"
|
||||||
|
@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,87 +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 bg-white"
|
||||||
<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)"
|
||||||
>
|
>
|
||||||
<img
|
<i class="text-danger bi bi-x-circle"></i>
|
||||||
src="/img/bootstrap-icons-1.5.0/trash.svg"
|
|
||||||
alt="Löschen Icon"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -93,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,
|
||||||
@ -106,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,
|
||||||
@ -126,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>
|
||||||
|
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 bg-white">
|
||||||
|
<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
@ -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>
|
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
@ -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
@ -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>
|
79
src/components/profile/Header.vue
Normal file
@ -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>
|
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>
|
28
src/components/profile/Section.vue
Normal file
@ -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 bg-white">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -5,12 +5,18 @@
|
|||||||
import { createApp } from 'vue/dist/vue.esm-bundler'
|
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 VTooltipPlugin from 'v-tooltip'
|
||||||
|
|
||||||
|
import 'v-tooltip/dist/v-tooltip.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.config.globalProperties.apiUrl = window.ki.apiUrl
|
app.config.globalProperties.apiUrl = window.ki.apiUrl
|
||||||
|
|
||||||
|
@ -2,90 +2,125 @@
|
|||||||
//
|
//
|
||||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
|
||||||
import axios from "axios";
|
import store from '@/store'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
async submitLogin() {
|
async submitLogin() {
|
||||||
this.showErrorMessage = false;
|
this.showErrorMessage = false;
|
||||||
try {
|
try {
|
||||||
const loginResult = await axios.post(
|
const data = JSON.stringify({
|
||||||
`${this.apiUrl}/users/login`,
|
username: this.username,
|
||||||
{
|
password: this.password,
|
||||||
username: this.username,
|
})
|
||||||
password: this.password,
|
|
||||||
}
|
const response = await fetch(`${this.apiUrl}/users/login`, {
|
||||||
);
|
method: 'POST',
|
||||||
if (loginResult.status === 200) {
|
headers: {
|
||||||
this.showErrorMessage = false;
|
'Content-Type': 'application/json',
|
||||||
//success login
|
},
|
||||||
localStorage.setItem("token", loginResult.data.token);
|
body: data
|
||||||
localStorage.setItem("user_id", loginResult.data.user_id);
|
})
|
||||||
this.$router.push({ path: "/s/search" });
|
|
||||||
} else {
|
if (!response.ok) {
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
store.commit('setCurrentUserId', parseInt(responseData.user_id, 10))
|
||||||
|
store.commit('setToken', responseData.token)
|
||||||
|
this.$router.push({ path: '/s/search' });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async search() {
|
async search() {
|
||||||
|
if (!this.searchText) {
|
||||||
|
this.searchResults = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const request = await axios.get(
|
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
|
||||||
`${this.apiUrl}/${this.type}s?search=${this.searchText}`,
|
|
||||||
{
|
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${store.state.token}`,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
if (request.status === 200) {
|
|
||||||
this.searchResults = request.data[`${this.type}s`];
|
if (!response.ok) {
|
||||||
if (
|
console.error();
|
||||||
!this.values
|
this.showErrorMessage = true;
|
||||||
.map((item) => item[this.type].name.toLowerCase())
|
return
|
||||||
.includes(this.searchText.toLowerCase())
|
|
||||||
) {
|
|
||||||
this.searchResults.unshift({ name: this.searchText });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
const searchResults = responseData[`${this.type}s`];
|
||||||
|
|
||||||
|
if (
|
||||||
|
!searchResults.map((item) => item.name.toLowerCase())
|
||||||
|
.includes(this.searchText.toLowerCase())
|
||||||
|
) {
|
||||||
|
searchResults.unshift({ name: this.searchText });
|
||||||
|
}
|
||||||
|
|
||||||
|
this.searchResults = searchResults
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error();
|
console.error();
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async initEditPage() {
|
async initEditPage() {
|
||||||
|
const userId = store.state.currentUserId
|
||||||
|
const url = `${this.apiUrl}/users/${userId}/profile`
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const userProfile = await axios.get(
|
const response = await fetch(url, {
|
||||||
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
|
headers: {
|
||||||
{
|
Authorization: `Bearer ${store.state.token}`
|
||||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.profile = userProfile.data.profile;
|
|
||||||
|
if (!response.ok) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
|
||||||
|
this.profile = responseData.profile;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async submitFormEdit() {
|
async submitFormEdit(isProfileVisible) {
|
||||||
|
this.showErrorMessage = false
|
||||||
|
this.showSuccessMessage = false
|
||||||
|
const userId = store.state.currentUserId
|
||||||
|
this.profile.visible = isProfileVisible;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const formSubmitResult = await axios.post(
|
const body = JSON.stringify(this.profile)
|
||||||
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
|
const response = await fetch(
|
||||||
this.profile,
|
`${this.apiUrl}/users/${userId}/profile`,
|
||||||
{
|
{
|
||||||
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${store.state.token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
|
body
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
if (formSubmitResult.status === 200) {
|
|
||||||
// success
|
if (!response.ok) {
|
||||||
this.showSuccessMessage = true;
|
this.showErrorMessage = true
|
||||||
} else {
|
return
|
||||||
// failure
|
|
||||||
this.showErrorMessage = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.showSuccessMessage = true
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true;
|
||||||
@ -93,31 +128,46 @@ export default {
|
|||||||
},
|
},
|
||||||
async initViewPage() {
|
async initViewPage() {
|
||||||
try {
|
try {
|
||||||
const userProfile = await axios.get(
|
const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
|
||||||
`${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
|
headers: { Authorization: `Bearer ${store.state.token}` },
|
||||||
{
|
|
||||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.profile = userProfile.data.profile;
|
|
||||||
|
if (!response.ok) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
store.commit('setCurrentProfile', responseData.profile)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async submitSearch() {
|
async submitSearch() {
|
||||||
this.showErrorMessage = false;
|
this.showErrorMessage = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let url = `${this.apiUrl}/users/profiles`;
|
const url = new URL(`${this.apiUrl}/users/profiles`)
|
||||||
|
|
||||||
if (this.searchText != "") {
|
if (this.searchText != "") {
|
||||||
url += `?nickname=${this.searchText}`;
|
url.searchParams.append('nickname', this.searchText)
|
||||||
}
|
}
|
||||||
const result = await axios.get(url, {
|
|
||||||
|
const response = await fetch(url, {
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${store.state.token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
this.searchResults = result.data.profiles;
|
|
||||||
this.searchTotal = result.data.total;
|
if (!response.ok) {
|
||||||
|
this.showErrorMessage = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
|
||||||
|
this.searchResults = responseData.profiles;
|
||||||
|
this.searchTotal = responseData.total;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
this.showErrorMessage = true;
|
this.showErrorMessage = true;
|
||||||
|
@ -3,6 +3,9 @@
|
|||||||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
import store from '@/store'
|
||||||
|
|
||||||
import Index from '@/views/Index.vue'
|
import Index from '@/views/Index.vue'
|
||||||
import Search from '@/views/Search.vue'
|
import Search from '@/views/Search.vue'
|
||||||
import Edit from '@/views/profile/Edit.vue'
|
import Edit from '@/views/profile/Edit.vue'
|
||||||
@ -16,9 +19,9 @@ const routes = [
|
|||||||
template: "<router-view/>",
|
template: "<router-view/>",
|
||||||
},
|
},
|
||||||
beforeEnter: (to, from, next) => {
|
beforeEnter: (to, from, next) => {
|
||||||
if(localStorage.getItem('token') !== null){
|
if (store.state.token){
|
||||||
next()
|
next()
|
||||||
}else{
|
} else {
|
||||||
next({path: '/', query: {url: to.fullPath, access: false}})
|
next({path: '/', query: {url: to.fullPath, access: false}})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -43,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()
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
53
src/store/index.js
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
|
||||||
|
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)),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
clearCurrentUserId(state) {
|
||||||
|
state.currentUserId = null
|
||||||
|
localStorage.removeItem(localStorageKeys.currentUserId)
|
||||||
|
},
|
||||||
|
setCurrentUserId(state, currentUserId) {
|
||||||
|
state.currentUserId = currentUserId
|
||||||
|
localStorage.setItem(
|
||||||
|
localStorageKeys.currentUserId,
|
||||||
|
JSON.stringify(currentUserId)
|
||||||
|
)
|
||||||
|
},
|
||||||
|
clearToken(state) {
|
||||||
|
state.token = null
|
||||||
|
localStorage.removeItem(localStorageKeys.token)
|
||||||
|
},
|
||||||
|
setToken(state, token) {
|
||||||
|
state.token = token
|
||||||
|
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
clear(context) {
|
||||||
|
context.commit('clearCurrentUserId')
|
||||||
|
context.commit('clearToken')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
122
src/store/search.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
// 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: '',
|
||||||
|
pages: 1,
|
||||||
|
query: {
|
||||||
|
search: '',
|
||||||
|
page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 = {...state.query, search}
|
||||||
|
},
|
||||||
|
setPages(state, pages) {
|
||||||
|
state.pages = pages
|
||||||
|
},
|
||||||
|
setQueryPage(state, page) {
|
||||||
|
state.query = {...state.query, page}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async search({state, commit, rootState, dispatch}) {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
url.searchParams.append('page', state.query.page)
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(response.ok)
|
||||||
|
console.log(response.status)
|
||||||
|
console.log(state.query.page)
|
||||||
|
|
||||||
|
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) {
|
||||||
|
commit('setError', true)
|
||||||
|
commit('clearProfiles')
|
||||||
|
commit('setSearching', false)
|
||||||
|
commit('hideSpinner')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
commit('setProfiles', responseData.profiles)
|
||||||
|
commit('setPages', responseData.pages)
|
||||||
|
commit('setSearching', false)
|
||||||
|
commit('hideSpinner')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -5,48 +5,52 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="bg-wtf">
|
||||||
<h1>WTF Kompetenzinventar</h1>
|
<div class="container pt-5">
|
||||||
<form @submit.prevent="submitLogin()">
|
<div class="text-center mb-5">
|
||||||
<div class="mb-3">
|
<img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
|
||||||
<label for="exampleInputusername1" class="form-label"
|
<h1 class="text-white">Kompetenzinventar</h1>
|
||||||
>Benutzername:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="username"
|
|
||||||
class="form-control"
|
|
||||||
id="exampleInputusername1"
|
|
||||||
v-model="username"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-3">
|
<form @submit.prevent="submitLogin()" class="card bg-white login-form">
|
||||||
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
|
<div class="card-body">
|
||||||
<input
|
<div class="mb-3">
|
||||||
type="password"
|
<label for="exampleInputusername1" class="form-label" >
|
||||||
class="form-control"
|
WTF-Benutzername:
|
||||||
id="exampleInputPassword1"
|
</label>
|
||||||
v-model="password"
|
<input
|
||||||
required
|
type="username"
|
||||||
/>
|
class="form-control"
|
||||||
</div>
|
id="exampleInputusername1"
|
||||||
<button type="submit" class="btn btn-primary mb-4">Login</button>
|
v-model="username"
|
||||||
</form>
|
required
|
||||||
<a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
|
autofocus
|
||||||
<div
|
/>
|
||||||
class="alert alert-danger mb-4 mt-4"
|
</div>
|
||||||
role="alert"
|
<div class="mb-3">
|
||||||
v-if="showErrorMessage"
|
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
|
||||||
>
|
<input
|
||||||
Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
|
type="password"
|
||||||
<a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
|
class="form-control"
|
||||||
|
id="exampleInputPassword1"
|
||||||
|
v-model="password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Login</button>
|
||||||
|
<a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
|
||||||
|
<div
|
||||||
|
class="alert alert-danger mt-3 mb-0"
|
||||||
|
role="alert"
|
||||||
|
v-if="showErrorMessage"
|
||||||
|
>
|
||||||
|
Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
|
||||||
Das Login gilt nur für WTF eG Mitglieder. Du kannst dein LDAP Passwort
|
|
||||||
hier ändern.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RequestMixin from "@/mixins/request.mixin"
|
import RequestMixin from "@/mixins/request.mixin"
|
||||||
|
|
||||||
@ -62,3 +66,19 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wtf-logo--index {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -5,85 +5,182 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="content">
|
||||||
<h1>Suche</h1>
|
<div class="bg-wtf text-white pt-3 pb-4">
|
||||||
<form @submit.prevent="submitSearch()">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
|
||||||
<div class="col">
|
<div class="card mx-auto bg-white">
|
||||||
<input
|
<div class="card-body">
|
||||||
type="text"
|
<form @submit.prevent="handleSubmit">
|
||||||
class="form-control"
|
<fieldset class="d-flex" :disabled="searching">
|
||||||
id="searchText"
|
<div class="flex-grow-1 me-3">
|
||||||
v-model="searchText"
|
<input
|
||||||
/>
|
type="text"
|
||||||
</div>
|
class="form-control"
|
||||||
<div class="col">
|
id="searchText"
|
||||||
<button type="submit" class="btn btn-primary mb-4">
|
v-model="searchText"
|
||||||
Suche starten
|
placeholder="Nick, Name, Fähigkeit, Sprache"
|
||||||
</button>
|
ref="searchTextInput"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
<div
|
|
||||||
class="alert alert-danger mb-4 mt-4"
|
|
||||||
role="alert"
|
|
||||||
v-if="showErrorMessage"
|
|
||||||
>
|
|
||||||
Bei der Suche ist ein Fehler aufgetreten
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="searchTotal == 0">
|
<div class="container pt-4 pb-3">
|
||||||
Es wurde kein Suchergebnis gefunden.
|
<div class="text-center" v-if="showSpinner">
|
||||||
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div
|
||||||
<div class="row">
|
class="fs-2 text-danger text-center"
|
||||||
<div
|
role="alert"
|
||||||
class="col-4 p-2"
|
v-if="error"
|
||||||
v-for="result in searchResults"
|
>
|
||||||
:key="result.user_id"
|
<div class="fs-1 mb-3">Kernel panic :/</div>
|
||||||
>
|
Bei der Suche ist ein Fehler aufgetreten.
|
||||||
<router-link
|
</div>
|
||||||
class="text-decoration-none"
|
<div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
|
||||||
:to="{ path: `/s/profile/${result.user_id}` }"
|
<div class="fs-1 mb-3">nullptr :/</div>
|
||||||
>
|
Es wurde kein Suchergebnis gefunden.
|
||||||
<div class="card">
|
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<h5 class="card-title">
|
<div v-else-if="showResults">
|
||||||
{{ result.nickname
|
<div class="d-flex justify-content-around">
|
||||||
}}<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
|
<Paginator
|
||||||
</h5>
|
:pages="pages"
|
||||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
:current="currentPage"
|
||||||
<p class="card-text" v-if="result.skills">
|
@page="handlePageSelected"
|
||||||
Fähigkeiten:
|
/>
|
||||||
<span v-for="skill in result.skills" :key="skill.skill.name"
|
</div>
|
||||||
>{{ skill.skill.name }}
|
<SearchResult
|
||||||
</span>
|
v-for="profile in profiles"
|
||||||
</p>
|
:key="profile.user_id"
|
||||||
</div>
|
class="mb-3"
|
||||||
</div>
|
:profile="profile"
|
||||||
</router-link>
|
/>
|
||||||
|
<div class="d-flex justify-content-around">
|
||||||
|
<Paginator
|
||||||
|
:pages="pages"
|
||||||
|
:current="currentPage"
|
||||||
|
@page="handlePageSelected"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RequestMixin from "@/mixins/request.mixin"
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import Paginator from '@/components/Paginator'
|
||||||
|
import SearchResult from '@/components/SearchResult'
|
||||||
|
import Spinner from '@/components/Spinner'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Search",
|
name: 'Search',
|
||||||
mixins: [RequestMixin],
|
components: {
|
||||||
|
Paginator,
|
||||||
|
SearchResult,
|
||||||
|
Spinner,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showErrorMessage: false,
|
textChanged: false
|
||||||
searchText: "",
|
}
|
||||||
searchResults: null,
|
},
|
||||||
searchTotal: 0,
|
computed: {
|
||||||
};
|
...mapState({
|
||||||
|
searching: state => state.search.searching,
|
||||||
|
profiles: state => state.search.profiles,
|
||||||
|
error: state => state.search.error,
|
||||||
|
showSpinner: state => state.search.showSpinner,
|
||||||
|
pages: state => state.search.pages,
|
||||||
|
}),
|
||||||
|
searchText: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.search.query.search
|
||||||
|
},
|
||||||
|
set(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() {
|
||||||
|
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() {
|
||||||
|
if (this.textChanged === true) {
|
||||||
|
this.$store.commit('search/setQueryPage', 1)
|
||||||
|
}
|
||||||
|
this.pushState()
|
||||||
|
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) this.searchText = this.$route.query.query;
|
if (this.$route.query.query) {
|
||||||
this.submitSearch();
|
this.searchText = this.$route.query.query
|
||||||
},
|
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')
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -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 bg-white">
|
||||||
|
<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,58 +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 RequestMixin from "@/mixins/request.mixin"
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
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 {
|
export default {
|
||||||
name: "profileView",
|
name: 'profileView',
|
||||||
mixins: [RequestMixin],
|
|
||||||
components: {
|
components: {
|
||||||
ProfileList,
|
Contact,
|
||||||
|
Language,
|
||||||
|
ProfileHeader,
|
||||||
|
Section,
|
||||||
|
Skill,
|
||||||
|
ViewError,
|
||||||
},
|
},
|
||||||
data() {
|
methods: {
|
||||||
return {
|
...mapActions({
|
||||||
profile: null
|
loadProfile: 'profile/load',
|
||||||
};
|
clearStore: 'profile/clear',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
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>
|
||||||
|