Compare commits

..

176 Commits

Author SHA1 Message Date
bdd4ac19b5 Merge pull request 'chore(deps): update dependency vue-router to v4.5.0' () from renovate/vue-router-4.x into main
Reviewed-on: 
2025-01-08 15:16:32 +01:00
832df8a04c Merge pull request 'chore(deps): lock file maintenance' () from renovate/lock-file-maintenance into main
Reviewed-on: 
2025-01-08 14:23:33 +01:00
5fe6d9d974 chore(deps): lock file maintenance 2025-01-07 21:39:15 +00:00
07e02997d8 chore(deps): update dependency vue-router to v4.5.0 2025-01-07 21:38:21 +00:00
c991dbdacc Merge pull request 'chore(deps): update vue monorepo to v3.5.13' () from renovate/vue-monorepo into main
Reviewed-on: 
2025-01-07 21:57:07 +01:00
6adbcd7064 Merge pull request 'chore(deps): update plugins/docker docker tag to v20.18.6' () from renovate/plugins-docker-20.x into main
Reviewed-on: 
2025-01-07 21:54:04 +01:00
e1bacd71b0 Merge pull request 'chore(deps): update dependency eslint-plugin-vue to v9.32.0' () from renovate/linters into main
Reviewed-on: 
2025-01-07 21:49:20 +01:00
61164255d4 Merge pull request 'chore(deps): update dependency sass-embedded to v1.83.1' () from renovate/sass-embedded-1.x into main
Reviewed-on: 
2025-01-07 21:47:16 +01:00
6206ba8b99 Merge pull request 'chore(deps): update nginx:1.27-alpine docker digest to 4efa432' () from renovate/nginx-1.27-alpine into main
Reviewed-on: 
2025-01-07 21:45:10 +01:00
3fb08043f0 Merge pull request 'chore(deps): update dependency sass-loader to v16.0.4' () from renovate/sass-loader-16.x into main
Reviewed-on: 
2025-01-07 21:11:09 +01:00
3fee765662 Merge pull request 'chore(deps): update node.js to v20.18.1' () from renovate/node-20.x into main
Reviewed-on: 
2025-01-07 21:10:35 +01:00
1713fb5a68 chore(deps): update nginx:1.27-alpine docker digest to 4efa432 2025-01-07 19:38:44 +00:00
49f0349e85 chore(deps): update dependency sass-embedded to v1.83.1 2025-01-07 18:38:05 +00:00
063e63dbef chore(deps): update dependency eslint-plugin-vue to v9.32.0 2025-01-07 18:37:55 +00:00
e242beb5a3 chore(deps): update dependency sass-loader to v16.0.4 2025-01-07 18:37:39 +00:00
64a808f81d Merge pull request 'chore(deps): update dependency sass to v1.83.1' () from renovate/sass-1.x into main
Reviewed-on: 
2025-01-07 18:56:29 +01:00
7d69279774 chore(deps): update node.js to v20.18.1 2025-01-07 17:41:58 +00:00
01f86ff159 chore(deps): update dependency sass to v1.83.1 2025-01-07 01:37:31 +00:00
3bef514b4e chore(deps): update plugins/docker docker tag to v20.18.6 2024-12-25 03:37:08 +00:00
c9c5bbe89f chore(deps): update vue monorepo to v3.5.13 2024-12-08 19:37:40 +00:00
d2428a6f75 Merge pull request 'chore(deps): update fsfe/reuse docker tag to v5' () from renovate/fsfe-reuse-5.x into main
Reviewed-on: 
2024-11-18 13:27:00 +01:00
511750cbab chore(deps): update fsfe/reuse docker tag to v5 2024-11-14 10:36:45 +00:00
5664ede980 Merge pull request 'chore(deps): update linters' () from renovate/linters into main
Reviewed-on: 
2024-11-04 16:33:32 +01:00
e03064852b chore(deps): update linters 2024-11-04 16:30:45 +01:00
a159fd7b04 Merge pull request 'chore(deps): update dependency core-js to v3.39.0' () from renovate/core-js-3.x into main
Reviewed-on: 
2024-11-04 16:29:53 +01:00
1cd0d4dc27 Merge pull request 'chore(deps): update dependency sass-loader to v16.0.3' () from renovate/sass-loader-16.x into main
Reviewed-on: 
2024-11-04 16:29:29 +01:00
f969d2d061 chore(deps): update dependency sass-loader to v16.0.3 2024-11-04 00:39:22 +00:00
b1a3852b86 chore(deps): update dependency core-js to v3.39.0 2024-11-03 00:40:10 +00:00
958725ad73 Merge pull request 'chore(deps): update node.js to v20.18.0' () from renovate/node-20.x into main
Reviewed-on: 
2024-10-29 11:05:26 +01:00
b14c4389d6 Merge pull request 'chore(deps): update dependency sass to v1.80.4' () from renovate/sass-1.x into main
Reviewed-on: 
2024-10-28 22:19:13 +01:00
a39970216c Merge pull request 'chore(deps): update dependency sass-embedded to v1.80.4' () from renovate/sass-embedded-1.x into main
Reviewed-on: 
2024-10-28 22:09:58 +01:00
c3beea3814 chore(deps): update dependency sass-embedded to v1.80.4 2024-10-26 23:50:20 +00:00
6a4026e7cb chore(deps): update dependency sass to v1.80.4 2024-10-26 23:43:20 +00:00
7ceaf18d53 Merge pull request 'chore(deps): update dependency sass-embedded to v1.79.4' () from renovate/sass-embedded-1.x into main
Reviewed-on: 
2024-10-14 18:47:04 +02:00
6dabb6ea81 Merge pull request 'chore(deps): update nginx:1.27-alpine docker digest to 2140dad' () from renovate/nginx-1.27-alpine into main
Reviewed-on: 
2024-10-14 18:03:19 +02:00
062c47be14 Merge pull request 'chore(deps): update dependency sass-loader to v16.0.2' () from renovate/sass-loader-16.x into main
Reviewed-on: 
2024-10-14 18:01:54 +02:00
6ef06e7b27 Merge pull request 'chore(deps): update linters' () from renovate/linters into main
Reviewed-on: 
2024-10-14 18:01:35 +02:00
ceabff143b chore(deps): update linters 2024-10-14 06:47:58 +00:00
df437fad47 chore(deps): update node.js to v20.18.0 2024-10-05 01:36:13 +00:00
dcf5c81029 chore(deps): update nginx:1.27-alpine docker digest to 2140dad 2024-10-03 06:36:00 +00:00
8582ef41e5 chore(deps): update dependency sass-embedded to v1.79.4 2024-10-01 03:36:23 +00:00
5167716f85 chore(deps): update dependency sass-loader to v16.0.2 2024-09-20 12:59:29 +00:00
0957580308 Merge pull request 'chore(deps): update vue monorepo to v3.5.6' () from renovate/vue-monorepo into main
Reviewed-on: 
2024-09-19 21:38:42 +02:00
47294f9e3e Merge pull request 'chore(deps): update dependency eslint to v8.57.1' () from renovate/linters into main
Reviewed-on: 
2024-09-19 20:15:33 +02:00
62aec412dd chore(deps): update dependency eslint to v8.57.1 2024-09-19 15:36:14 +00:00
0d738885e8 chore(deps): update vue monorepo to v3.5.6 2024-09-19 08:36:14 +00:00
7d19f57fb0 Merge pull request 'chore(deps): update dependency vue-router to v4.4.5' () from renovate/vue-router-4.x into main
Reviewed-on: 
2024-09-16 16:17:04 +02:00
2a40a203cf chore(deps): update dependency vue-router to v4.4.5 2024-09-16 07:36:00 +00:00
808d155a85 Merge pull request 'chore(deps): update vue monorepo to v3.5.4' () from renovate/vue-monorepo into main
Reviewed-on: 
2024-09-13 12:15:15 +02:00
5aee683180 chore(deps): update vue monorepo to v3.5.4 2024-09-13 09:36:13 +00:00
fc352864cc Merge pull request 'chore(deps): update dependency sass-embedded to v1.78.0' () from renovate/sass-embedded-1.x into main
Reviewed-on: 
2024-09-10 13:10:05 +02:00
cc22f6767f Merge pull request 'chore(deps): update dependency sass to v1.78.0' () from renovate/sass-1.x into main
Reviewed-on: 
2024-09-10 12:58:15 +02:00
99fe35dee4 Merge pull request 'Speedup CI runs' () from ci-speedup into main
Reviewed-on: 
2024-09-10 12:53:34 +02:00
f6673d5819 Merge pull request 'chore(deps): update nginx:1.27-alpine docker digest to a5127da' () from renovate/nginx-1.27-alpine into main
Reviewed-on: 
2024-09-10 12:48:34 +02:00
c58c727ff9 chore(deps): update dependency sass to v1.78.0 2024-09-10 10:36:03 +00:00
41f079fc03
Switch to alpine image of Node.js in CI 2024-09-10 12:30:19 +02:00
31b4e21034
Only run Docker dry-run on Pull Requests 2024-09-10 12:27:33 +02:00
acb5ab5f40 Merge pull request 'chore(deps): update node.js to 2d07db0' () from renovate/node-20.17.0-alpine into main
Reviewed-on: 
2024-09-10 12:18:44 +02:00
66bf9d9a98 Merge pull request 'chore(deps): update node.js to 48db4f6' () from renovate/node-20.17.0 into main
Reviewed-on: 
2024-09-10 12:18:30 +02:00
32f9d792e4 Merge pull request 'chore(deps): update dependency eslint-plugin-vue to v9.28.0' () from renovate/linters into main
Reviewed-on: 
2024-09-10 12:16:22 +02:00
8e395d9c16 chore(deps): update nginx:1.27-alpine docker digest to a5127da 2024-09-07 15:35:54 +00:00
86db7774ea chore(deps): update node.js to 2d07db0 2024-09-07 10:35:52 +00:00
b0b29c77df chore(deps): update dependency sass-embedded to v1.78.0 2024-09-06 23:36:17 +00:00
d2075123a2 chore(deps): update node.js to 48db4f6 2024-09-06 04:35:47 +00:00
71ca40dc61 chore(deps): update dependency eslint-plugin-vue to v9.28.0 2024-09-06 02:36:06 +00:00
ee6097bc10 Merge pull request 'chore(deps): update node.js to 4bc7ea5' () from renovate/node-20.17.0 into main
Reviewed-on: 
2024-09-05 11:30:02 +02:00
d90bc32c53 chore(deps): update node.js to 4bc7ea5 2024-09-05 06:35:44 +00:00
b25e0c2ce5 Merge pull request 'Run linter in CI without fixing issues' () from lint-no-fix into main
Reviewed-on: 
2024-08-28 15:22:13 +02:00
bdaec983d8
Run linter in CI without fixing issues 2024-08-28 15:00:45 +02:00
4850d79f54 Merge pull request 'chore(deps): update fsfe/reuse docker tag to v4' () from renovate/fsfe-reuse-4.x into main
Reviewed-on: 
2024-08-27 18:42:00 +02:00
df8b79bc53
Specify license for REUSE.toml 2024-08-27 18:36:30 +02:00
348b589d6b
Convert .reuse/dep5 to REUSE.toml 2024-08-27 18:32:07 +02:00
312acee0f2 Merge pull request 'chore(deps): lock file maintenance' () from renovate/lock-file-maintenance into main
Reviewed-on: 
2024-08-27 11:42:27 +02:00
f5b7fe8f12 chore(deps): lock file maintenance 2024-08-26 00:36:14 +00:00
9bf644161d Merge pull request 'chore(deps): update plugins/docker docker tag to v20.18.4' () from renovate/plugins-docker-20.x into main
Reviewed-on: 
2024-08-22 19:46:33 +02:00
4cd12bfe59 chore(deps): update plugins/docker docker tag to v20.18.4 2024-08-22 15:36:04 +00:00
f5b7fd3dee chore(deps): update fsfe/reuse docker tag to v4 2024-08-22 14:36:29 +00:00
bd4242a7e1 Merge pull request 'chore(deps): update dependency sass-loader to v16' () from renovate/sass-loader-16.x into main
Reviewed-on: 
2024-08-22 15:52:51 +02:00
93c4fac780
chore(deps): Add optional (preferred) dependency 2024-08-22 15:48:05 +02:00
b2b295df43 Merge pull request 'chore(deps): update dependency eslint to v8' () from renovate/major-8-linters into main
Reviewed-on: 
2024-08-22 15:40:54 +02:00
cac4ceb173 chore(deps): update dependency sass-loader to v16 2024-08-22 13:36:33 +00:00
aed94f4237 chore(deps): update dependency eslint to v8 2024-08-22 12:36:22 +00:00
efd3d5bca5 Merge pull request 'chore(deps): update plugins/docker docker tag to v20.18.3' () from renovate/plugins-docker-20.x into main
Reviewed-on: 
2024-08-22 13:56:10 +02:00
cf5eb08db6 Merge pull request 'chore(deps): update node.js to v20.17.0' () from renovate/node-20.x into main
Reviewed-on: 
2024-08-22 13:44:57 +02:00
a4891afa1d chore(deps): update plugins/docker docker tag to v20.18.3 2024-08-22 11:36:05 +00:00
087adf71c1 chore(deps): update node.js to v20.17.0 2024-08-22 11:35:56 +00:00
83164e3f54 Merge pull request 'chore(deps): update nginx docker tag to v1.27' () from renovate/nginx-1.x into main
Reviewed-on: 
2024-08-22 13:21:20 +02:00
27f399b0f3 Merge pull request 'chore(deps): update linters' () from renovate/linters into main
Reviewed-on: 
2024-08-22 13:12:38 +02:00
da20c22ba4 chore(deps): update nginx docker tag to v1.27 2024-08-22 10:36:17 +00:00
9a056b6977 chore(deps): update linters 2024-08-22 10:36:06 +00:00
fccf9a55b6 Merge pull request 'chore(deps): pin dependencies' () from renovate/pin-dependencies into main
Reviewed-on: 
2024-08-22 11:56:38 +02:00
775cf303d1 chore(deps): pin dependencies 2024-08-22 09:36:14 +00:00
abd1e0ee31 Merge pull request 'chore: Configure Renovate' () from renovate/configure into main
Reviewed-on: 
2024-08-22 11:26:15 +02:00
563f492bc3
Disable Dependency Dashboard because of external issues 2024-08-21 22:12:43 +02:00
72d6756749
Update Renovate config 2024-08-21 22:01:01 +02:00
d1fdde6d10 Add renovate.json 2024-08-21 19:35:10 +00:00
a1c758a4b6 Merge pull request 'Upgrade dependencies' () from upgrade-dependencies into main
Reviewed-on: 
2024-08-21 20:28:45 +02:00
c463c2f1ad
Use Bootstrap classes 2024-08-21 20:25:28 +02:00
eb5de926d0
chore(deps): Update dependencies 2024-08-21 19:49:40 +02:00
5c4c76356a
Merge remote-tracking branch 'origin/main' into upgrade-dependencies 2024-08-21 19:40:45 +02:00
61a6115071
Pin Docker images in CI 2024-08-21 19:33:50 +02:00
d46aaa0f31 Merge pull request 'Fix Dockerfile' () from fix-dockerfile into main
Reviewed-on: 
2024-04-23 23:07:43 +02:00
81dcf5ebe7
Try to build Docker image for Pull Requests 2024-04-23 22:48:01 +02:00
7433d25716
Add missing trailing slash 2024-04-23 22:47:54 +02:00
7feee07d35 Merge pull request '♻️ Optimize Dockerfile' () from optimize-dockerfile into main
Reviewed-on: 
Reviewed-by: srsh <srsh@noreply.git.wtf-eg.de>
2024-04-23 22:26:14 +02:00
f728f1f72b Merge branch 'main' into feature/upgrade-dependencies 2024-02-21 20:21:57 +01:00
663db94cb8 ISSUE-72| Move audit to qa in drone 2024-02-21 09:42:31 +01:00
a49bd3feef ISSUE-72| Update more deps 2024-02-21 06:40:53 +01:00
6f12f577d4 ISSUE-72| Update more deps 2024-02-21 06:31:13 +01:00
872ff894b5 ISSUE-72| Update coreks 2024-02-20 21:07:53 +01:00
0b02df26e8 ISSUE-72| Update eslint 2024-02-20 21:01:15 +01:00
17e43d94c4 ISSUE-72| Update eslint 2024-02-20 20:58:50 +01:00
c79ada2123 ISSUE-58| Move profile visiblity ()
Move switch profile visibility button to save bar
Rename Save button to save as draft and offer save and publish

Fixes 

Reviewed-on: 
Reviewed-by: srsh <srsh@noreply.git.wtf-eg.de>
Co-authored-by: Nikolai Gotzmann <self@ngotzmann.net>
Co-committed-by: Nikolai Gotzmann <self@ngotzmann.net>
2024-02-20 20:26:54 +01:00
7b0e38296f Add pre requirements to readme 2024-02-11 15:09:35 +01:00
bc1a079503 KI-frontend update
* Add better npm audit to pipeline
* pipeline will fail if vulneralabity is found higher then moderate
2024-02-11 11:52:11 +01:00
cd36d39fad KI Frontend update| Update vue-compiler-sfc 2024-02-11 10:06:03 +01:00
ba701b2ac8 KI Frontend update| Update sass 2024-02-11 10:02:50 +01:00
9d35989ba9 Updating ki-frontend
* Frontend works with node 20
* vue dependencies are updated
2024-02-11 09:48:56 +01:00
Mic Szillat
f8e78d1cc8 ♻️ Optimize Dockerfile
- add all non-essential files to .dockerignore
- improve cachability by layers
- re-order lines to reduce layer generation
2024-01-12 18:42:27 +01:00
c2552f3c3a Merge pull request 'Push image to Gitea registry' () from gitea-registry into main
Reviewed-on: 
2023-12-10 18:47:54 +01:00
687454afdb
Push image to Gitea registry 2023-12-04 20:09:52 +01:00
a7c8774cc4 Merge pull request 'Add labels to Docker images' () from docker-labels into main
Reviewed-on: 
2023-11-16 11:18:44 +01:00
b63e5a6c2d Merge pull request 'Rewrite Drone config' () from drone-config into main
Reviewed-on: 
2023-11-16 11:18:35 +01:00
1b221ab180 Merge pull request 'Improve SPA cacheing' () from nginx-cacheing into main
Reviewed-on: 
2023-11-13 16:51:10 +01:00
e2b101eb89
Add labels to Docker images 2023-11-07 14:54:40 +01:00
654169c383
Rewrite Drone config
- Split PR and "push to main" actions
- Deploy latest main to dev system
- Build image for Git tags
2023-11-06 23:33:33 +01:00
26edf1d4b2
Improve SPA cacheing 2023-11-06 18:35:05 +01:00
e7ff487aeb Merge pull request '"Problem melden"-Link korrigiert' () from brain-patch-1 into main
Reviewed-on: 
2023-10-27 15:12:55 +02:00
c5bda80f11 Merge pull request 'Klarnamen in der Suche berücksichtigen' () from zeitschlag/ki-frontend:feature/48-search-address-name into main
Reviewed-on: 
2023-10-27 15:12:06 +02:00
379ddaf5b9 Change placeholder (kompetenzinventar/ki-doku#48) 2023-04-20 18:14:07 +02:00
13fb15e033 Fix link for new issues 2022-07-20 18:26:39 +02:00
aaa0883692 Merge pull request 'add tag trigger' (!77) from feature/tag-trigger into main
Reviewed-on: #77
2022-02-28 19:32:33 +01:00
e404bef2a9
add tag trigger 2022-02-28 19:32:04 +01:00
cbbcfd0f37 Merge pull request 'add address.name to frontend' (!76) from feature/realname into main
Reviewed-on: #76
2022-01-26 22:03:08 +01:00
5c5f157a77
add address.name to frontend 2022-01-25 21:04:17 +01:00
3017c001b2 Merge pull request 'Paginierung' (!74) from feature/pagination into main
Reviewed-on: #74
2022-01-24 19:46:59 +01:00
fefe9a034d Merge pull request 'Aktualisierung NPM Pakete' (!75) from fix/npm-update into main
Reviewed-on: #75
2022-01-24 19:11:50 +01:00
bac8731e17
add pagination 2022-01-23 20:14:52 +01:00
dc883ac302
update npm packages 2022-01-23 19:56:14 +01:00
16feb41f8a kompetenzinventar/ki-doku#18 line-break new text (!72)
Co-authored-by: scammo <samuel.brinkmann@googlemail.com>
Reviewed-on: #72
Reviewed-by: weeman <weeman@noreply.git.wtf-eg.de>
Co-authored-by: scammo <scammo@noreply.git.wtf-eg.de>
Co-committed-by: scammo <scammo@noreply.git.wtf-eg.de>
2022-01-17 14:44:13 +01:00
04cb8a7217 Merge pull request '#64 "Ich Suche" besser definiert' (#71) from profile-page into main
Reviewed-on: #71
2022-01-14 13:10:10 +01:00
e3115f9944 Merge branch 'main' into profile-page 2022-01-14 13:09:46 +01:00
scammo
122b13b6a2 #64 ich besser definiert 2022-01-14 12:53:23 +01:00
872d544075 Merge pull request 'Fix typo for language levels' (#67) from zeitschlag/ki-frontend:typo into main
Reviewed-on: #67
2021-12-17 20:41:45 +01:00
fba33d20a7 Fix typo for language levels 2021-12-17 18:29:54 +01:00
e035fa3289
extend skill length to 50 2021-11-22 20:14:45 +01:00
324203216a
fix typo 2021-11-22 18:48:13 +01:00
b270a5d56a Merge pull request 'Weitere Arbeiten Profilseite' (#53) from profile-page into main
Reviewed-on: #53
2021-10-25 14:15:38 +02:00
6ecf80f34c
improve profile page #36 2021-10-24 18:16:19 +02:00
016a1bd959 Merge pull request 'Profile bearbeiten Ansicht' (#52) from feature/profile-view into main
Reviewed-on: #52
2021-10-18 20:47:23 +02:00
4e8390cf96
update profile edit view 2021-10-18 20:45:18 +02:00
04d59d5520 Merge pull request 'Verfügbarkeit: Status, Stunden pro Woche und Text' (#50) from availability into main
Reviewed-on: #50
2021-10-11 18:57:38 +02:00
0f0d3cd861
implement advanced availability logic 2021-10-11 18:55:19 +02:00
2b63603957 Merge pull request 'fix profile display' (#49) from fix/48-profile into main
Reviewed-on: #49
2021-10-11 09:43:07 +02:00
9a51b416e5
run drone only for main branch 2021-10-10 19:59:07 +02:00
3ea7eb48b4
fix profile display 2021-10-10 19:41:45 +02:00
8c8021bedc Merge pull request 'Verschiedenes seit Freitag' (#47) from freitag into main
Reviewed-on: #47
2021-10-04 17:42:09 +02:00
46fcaa2db6
implement profile view 2021-10-03 20:05:08 +02:00
2d700c77dc
redirect users with token #38 2021-10-03 20:05:07 +02:00
c1d78fa8c1
implement seach view autofocus #41 2021-10-03 20:05:07 +02:00
7c8a1bb423
add login page name field autofocus #42 2021-10-03 20:05:06 +02:00
8e42c7fdbe Merge pull request 'Suchparameter in URL' (#46) from feature/44-suchparameter-in-url into main
Reviewed-on: #46
2021-09-27 18:02:23 +02:00
scammo
c25639b40c Suchparameter in URL 2021-09-27 17:50:01 +02:00
a2048d0eb9 Merge pull request 'Überarbeitung Suchansicht' (#37) from feature-search into main
Reviewed-on: #37
2021-09-23 16:57:31 +02:00
scammo
b19a770d61 no more search in navbar 2021-09-23 16:57:09 +02:00
scammo
8098c54c06 Merge branch 'feature-search' of git.wtf-eg.de:kompetenzinventar/ki-frontend into feature-search 2021-09-22 00:09:27 +02:00
73847022e2
implement search layout #32 #33 #35 2021-09-22 00:01:17 +02:00
93cb302ca7
implement search layout #32 #33 #35 2021-09-21 23:58:42 +02:00
fcbf3ee796 Merge branch 'sonntag' into main 2021-09-20 16:45:54 +02:00
scammo
fee786f1c8 bessere anzeige search 2021-09-20 16:44:44 +02:00
b190a3764b Merge pull request 'Sonntagsarbeiten' (#30) from sonntag into main
Reviewed-on: #30
2021-09-20 11:15:20 +02:00
a408cae686
introduce vuex 2021-09-19 17:31:46 +02:00
94d2a98b96
apply navbar style #15 2021-09-19 16:38:43 +02:00
a1546849c8
apply login view design #29 2021-09-19 16:01:45 +02:00
a13314327c
replace axios by fetch #13 2021-09-19 15:55:18 +02:00
ebb0783103
add reuse compliance #5 2021-09-19 13:04:03 +02:00
51 changed files with 12330 additions and 24722 deletions

View File

@ -1,2 +1,11 @@
.browserslistrc
.dockerignore
.drone.yml
.editorconfig
.git
.gitignore
.reuse
Dockerfile
LICENSES
README.md
node_modules

View File

@ -4,21 +4,118 @@
# SPDX-License-Identifier: AGPL-3.0-or-later
kind: pipeline
type: docker
name: default
name: qa
trigger:
event:
- push
- pull_request
branch:
- main
steps:
- name: reuse
image: fsfe/reuse:latest
commands:
- reuse lint
- name: docker-publish
image: plugins/docker
settings:
registry: registry.wtf-eg.net
repo: registry.wtf-eg.net/ki-frontend
target: ki-frontend
auto_tag: true
username:
from_secret: "docker_username"
password:
from_secret: "docker_password"
- name: reuse
image: fsfe/reuse:5.0.2-debian@sha256:7928d25ed14a1bc22758d917ebc6aecbb8bcd1a4da7aa748d7179c9011bbfb0b
- name: lint
image: node:20.18.1-alpine@sha256:e44837841abf6177b308a7c627c8fd7820c1ae6ed09ffa4d60d700e5fbba1b1a
commands:
- npm ci
- npm run lint -- --no-fix
- name: audit
image: node:20.18.1-alpine@sha256:e44837841abf6177b308a7c627c8fd7820c1ae6ed09ffa4d60d700e5fbba1b1a
commands:
- npm install -g better-npm-audit
- better-npm-audit audit --production --level=moderate
- name: docker-dry-run
image: plugins/docker:20.18.6@sha256:59c993e3c4e6c097a0e2d274419aac0d7d8e929773f0ba1af44078e54389834f
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.6@sha256:59c993e3c4e6c097a0e2d274419aac0d7d8e929773f0ba1af44078e54389834f
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.1-alpine@sha256:e44837841abf6177b308a7c627c8fd7820c1ae6ed09ffa4d60d700e5fbba1b1a
commands:
- npm ci
- npm run lint -- --no-fix
- name: docker-publish
image: plugins/docker:20.18.6@sha256:59c993e3c4e6c097a0e2d274419aac0d7d8e929773f0ba1af44078e54389834f
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"

View File

@ -8,10 +8,13 @@ module.exports = {
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
parser: '@babel/eslint-parser'
},
rules: {
'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'
}
}

View File

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

View File

@ -2,14 +2,27 @@
#
# SPDX-License-Identifier: AGPL-3.0-or-later
FROM node:14-alpine as builder
FROM node:20.18.1-alpine@sha256:e44837841abf6177b308a7c627c8fd7820c1ae6ed09ffa4d60d700e5fbba1b1a 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
FROM nginx as ki-frontend
FROM nginx:1.27-alpine@sha256:4efa432b751239898e576a2178702fb156fc483f6d456e0ad5899b3bf5c0445a 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 --from=builder /dist .

View File

@ -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.

View File

@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
# 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
@ -40,6 +41,14 @@ Folgende Kanäle gibt es für die Kommunikation über das Kompetenzinventar:
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
```
@ -47,7 +56,6 @@ cp public/config.js.dev public/config.js
vi public/config.js
```
### Compiles and hot-reloads for development
```
npm run serve

40
REUSE.toml Normal file
View 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"

View File

@ -9,10 +9,24 @@ server {
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/html;
# routes without dots serve the index.html without caching
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache";
try_files $uri $uri/index.html /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;

34293
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,26 +1,31 @@
{
"name": "@wtf/ki-frontend",
"version": "0.1.0",
"version": "1.1.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"bootstrap": "^5.0.1",
"core-js": "^3.6.5",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"sass": "^1.37.5",
"sass-loader": "^10.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"@babel/eslint-parser": "7.25.9",
"@vue/cli-plugin-babel": "5.0.8",
"@vue/cli-plugin-eslint": "5.0.8",
"@vue/cli-plugin-router": "5.0.8",
"@vue/cli-service": "5.0.8",
"@vue/compiler-sfc": "3.5.13",
"bootstrap": "5.3.3",
"bootstrap-icons": "1.11.3",
"core-js": "3.39.0",
"eslint": "8.57.1",
"eslint-plugin-vue": "9.32.0",
"sass": "1.83.1",
"sass-loader": "16.0.4",
"v-tooltip": "4.0.0-beta.17",
"vue": "3.5.13",
"vue-router": "4.5.0",
"vuex": "4.1.0"
},
"optionalDependencies": {
"sass-embedded": "1.83.1"
}
}

View File

@ -1 +0,0 @@
SPDX-License-Identifier: MIT

View File

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

(image error) Size: 548 B

View File

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

(image error) Size: 238 B

View File

@ -1 +0,0 @@
SPDX-License-Identifier: MIT

View File

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

(image error) Size: 331 B

View File

@ -1 +0,0 @@
SPDX-License-Identifier: MIT

View File

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

(image error) Size: 573 B

View File

@ -1 +0,0 @@
SPDX-License-Identifier: MIT

21
renovate.json Normal file
View 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]\\./"
}
]
}

View File

@ -5,119 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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/')">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>
<Navbar />
</header>
<router-view />
<router-view :key="$route.fullPath" />
<Footer />
</template>
<script>
import Footer from '@/views/partials/Footer.vue'
import Footer from '@/components/Footer'
import Navbar from '@/components/Navbar'
export default {
name: "App",
name: 'App',
components: {
Footer
},
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 } } );
},
},
Footer,
Navbar,
}
};
</script>

View File

@ -6,3 +6,18 @@
@import "variables";
@import "bootstrap/scss/bootstrap";
.bg-wtf {
background-image: url(../assets/img/wtf-header-bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.btn-primary {
color: #fff !important;
}
.search-card{
height: 100%;
}

Binary file not shown.

After

(image error) Size: 107 KiB

View File

Before

(image error) Size: 19 KiB

After

(image error) Size: 19 KiB

View File

@ -1,6 +1,6 @@
{
"1": "Keine Angabe",
"2": "Grundkentnisse",
"2": "Grundkenntnisse",
"3": "Gut",
"4": "Fließend",
"5": "Muttersprache"

View File

@ -1,7 +1,22 @@
{
"1": "bis 6 Monate",
"2": "bis 1 Jahr",
"3": "bis 3 Jahre",
"4": "bis 5 Jahre",
"5": "mehr als 5 Jahre"
"1": {
"short": "≤ 6M",
"long": "bis 6 Monate"
},
"2":{
"short": "≤ 1J",
"long": "bis 1 Jahr"
},
"3": {
"short": "≤ 3J",
"long": "bis 3 Jahre"
},
"4": {
"short": "≤ 5J",
"long": "bis 5 Jahre"
},
"5": {
"short": "> 5J",
"long": "mehr als 5 Jahre"
}
}

View File

@ -4,5 +4,15 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
$gray-100: #edefeb;
$gray-800: #344b5d;
$primary: #0790a9;
$dark: #344b5d;
$dark: $gray-800;
$body-bg: $gray-100;
$link-decoration: none;
$link-hover-decoration: underline;
$spinner-animation-speed: 1s;

View File

@ -5,21 +5,46 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div>
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
<div class="row mb-2">
<div class="col">
<profile-list
:values="values"
:type="type"
: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
autocomplete="off"
type="text"
class="form-control"
class="form-control form-control-sm"
id="searchText"
:maxlength="maxlength"
:placeholder="placeholder"
v-model="searchText"
@keyup="search()"
@input="search()"
@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 class="col">
<div class="col-md-2">
<button
v-if="searchText != ''"
type="button"
@ -27,43 +52,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
aria-label="Hinzufügen"
@click="addResult()"
>
<img
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
alt="Hinzufügen Icon"
/>
<i clas="bi-plus-lg"></i>
Hinzufügen
</button>
</div>
</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>
</template>
<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 {
name: "AutoComplete",
name: 'AutoComplete',
mixins: [RequestMixin],
components: {
ProfileList,
@ -78,18 +81,33 @@ export default {
values: {
type: Array,
},
showSecondary: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: "",
},
},
data() {
return {
iconUrl: this.apiUrl,
searchText: "",
searchText: '',
searchResults: [],
showErrorMessage: false,
};
},
computed: {
...mapState(['currentUserId']),
maxlength() {
return this.type === 'skill' ? 50 : 25
}
},
methods: {
addResult(result = false) {
if (!result) result = this.searchResults[0];
if (
this.values.map((item) => item[this.type].name).includes(result.name)
) {
@ -98,18 +116,21 @@ export default {
let changeValues = Object.assign(this.values);
let newValue = {
profile_id: localStorage.getItem("user_id"),
profile_id: this.currentUserId,
};
if (this.type != "contacttype") {
if (this.type != 'contacttype') {
newValue.level = 1;
} else {
newValue.content = "";
newValue.content = '';
}
newValue[this.type] = result;
changeValues.unshift(newValue);
this.searchText = "";
this.searchText = '';
this.searchResults = [];
this.$emit("update-values", changeValues);
this.$emit('update-values', changeValues);
},
removeValue(valueName) {
const newValues = this.values.filter((value) => {
@ -119,7 +140,7 @@ export default {
return true;
}
});
this.$emit("update-values", newValues);
this.$emit('update-values', newValues);
},
},
};

37
src/components/Avatar.vue Normal file
View 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>

View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="fw-bold text-white mb-2">Kompetenzinventar</div>
<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/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>
</div>
</div>

110
src/components/Navbar.vue Normal file
View 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>

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

View File

@ -5,87 +5,72 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<ul>
<li v-for="(value, valueKey) in values" :key="value.id">
<div class="row m-1">
<div class="col">
<img
style="max-width: 64px"
<ul class="list-group list-group-flush">
<li
class="list-group-item bg-white"
v-for="(value, valueKey) in values"
:key="value.id"
>
<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"
:src="iconUrl + value[type].icon_url"
:alt="`${value[type].name} Logo`"
/>
{{ value[type].name }}
<div>
{{ value[type].name }}
</div>
</div>
<div class="col">
<div v-if="type == 'skill'">
<div v-if="editable">
<select
v-if="editableValues[valueKey]"
class="form-select"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
<div class="col-10 col-md-5">
<div v-if="type == 'skill' && showSecondary">
<select
class="form-select form-select-sm"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
>
<option
v-for="(value, key) in levelSelection"
:value="key"
:key="key"
>
<option
v-for="(value, key) in levelSelection"
:value="key"
:key="key"
>
{{ value }}
</option>
</select>
</div>
<div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
{{ value.long || value }}
</option>
</select>
</div>
<div v-else-if="type == 'language'">
<div v-if="editable">
<div v-if="editable">
<select
v-if="editableValues[valueKey]"
class="form-select"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
<select
class="form-select form-select-sm"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
>
<option
v-for="(value, key) in languagesSelection"
:value="key"
:key="key"
>
<option
v-for="(value, key) in languagesSelection"
:value="key"
:key="key"
>
{{ value }}
</option>
</select>
</div>
</div>
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
{{ value }}
</option>
</select>
</div>
<div v-else-if="type == 'contacttype'">
<div v-if="editable">
<input class="form-control" v-model="editableValues[valueKey].content"/>
</div>
<div v-else>
<span v-if="value[type].name === 'E-Mail'">
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
</span>
<span v-else>
{{ value.content }}
</span>
</div>
<input
class="form-control form-control-sm"
maxlength="200"
v-model="editableValues[valueKey].content"
/>
</div>
</div>
<div class="col">
<div class="col-2 text-end">
<button
v-if="editable"
type="button"
class="btn btn-outline-danger"
class="btn btn-sm btn-light"
aria-label="Löschen"
@click="$emit('removeValue', value[type].name)"
>
<img
src="/img/bootstrap-icons-1.5.0/trash.svg"
alt="Löschen Icon"
/>
<i class="text-danger bi bi-x-circle"></i>
</button>
</div>
</div>
@ -93,11 +78,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</ul>
</template>
<script>
import levelJson from "@/assets/skill_level.json";
import languagesJson from "@/assets/language_level.json";
import levelJson from '@/assets/skill_level.json';
import languagesJson from '@/assets/language_level.json';
export default {
name: "ProfileList",
name: 'ProfileList',
props: {
type: {
type: String,
@ -106,14 +91,14 @@ export default {
type: Array,
required: true,
},
editable: {
showSecondary: {
type: Boolean,
default: false,
},
default: true
}
},
data() {
return {
iconUrl: this.apiUrl,
iconBaseUrl: this.apiUrl,
levelSelection: levelJson,
languagesSelection: languagesJson,
editableValues: this.values,
@ -126,3 +111,13 @@ export default {
},
};
</script>
<style scope>
.list-icon {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 32px;
width: 32px;
}
</style>

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

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

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

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

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

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

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

View File

@ -5,12 +5,18 @@
import { createApp } from 'vue/dist/vue.esm-bundler'
import App from './App.vue'
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'
const app = createApp(App)
app.use(VTooltipPlugin)
app.use(router)
app.use(store)
app.config.globalProperties.apiUrl = window.ki.apiUrl

View File

@ -2,90 +2,125 @@
//
// SPDX-License-Identifier: AGPL-3.0-or-later
import axios from "axios";
import store from '@/store'
export default {
methods: {
async submitLogin() {
this.showErrorMessage = false;
try {
const loginResult = await axios.post(
`${this.apiUrl}/users/login`,
{
username: this.username,
password: this.password,
}
);
if (loginResult.status === 200) {
this.showErrorMessage = false;
//success login
localStorage.setItem("token", loginResult.data.token);
localStorage.setItem("user_id", loginResult.data.user_id);
this.$router.push({ path: "/s/search" });
} else {
this.showErrorMessage = true;
const data = JSON.stringify({
username: this.username,
password: this.password,
})
const response = await fetch(`${this.apiUrl}/users/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: data
})
if (!response.ok) {
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) {
console.error(error);
this.showErrorMessage = true;
}
},
async search() {
if (!this.searchText) {
this.searchResults = []
return
}
try {
const request = await axios.get(
`${this.apiUrl}/${this.type}s?search=${this.searchText}`,
{
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
Authorization: `Bearer ${store.state.token}`,
},
}
);
if (request.status === 200) {
this.searchResults = request.data[`${this.type}s`];
if (
!this.values
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase())
) {
this.searchResults.unshift({ name: this.searchText });
}
if (!response.ok) {
console.error();
this.showErrorMessage = true;
return
}
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) {
console.error();
this.showErrorMessage = true;
}
},
async initEditPage() {
const userId = store.state.currentUserId
const url = `${this.apiUrl}/users/${userId}/profile`
try {
const userProfile = await axios.get(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
const response = await fetch(url, {
headers: {
Authorization: `Bearer ${store.state.token}`
},
}
);
this.profile = userProfile.data.profile;
if (!response.ok) {
return
}
const responseData = await response.json()
this.profile = responseData.profile;
} catch (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 {
const formSubmitResult = await axios.post(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
this.profile,
const body = JSON.stringify(this.profile)
const response = await fetch(
`${this.apiUrl}/users/${userId}/profile`,
{
method: 'POST',
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
Authorization: `Bearer ${store.state.token}`,
'Content-Type': 'application/json',
},
body
}
);
if (formSubmitResult.status === 200) {
// success
this.showSuccessMessage = true;
} else {
// failure
this.showErrorMessage = true;
if (!response.ok) {
this.showErrorMessage = true
return
}
this.showSuccessMessage = true
} catch (error) {
console.error(error);
this.showErrorMessage = true;
@ -93,31 +128,46 @@ export default {
},
async initViewPage() {
try {
const userProfile = await axios.get(
`${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
headers: { Authorization: `Bearer ${store.state.token}` },
}
);
this.profile = userProfile.data.profile;
if (!response.ok) {
return
}
const responseData = await response.json()
store.commit('setCurrentProfile', responseData.profile)
} catch (error) {
console.error(error);
}
},
async submitSearch() {
this.showErrorMessage = false;
try {
let url = `${this.apiUrl}/users/profiles`;
const url = new URL(`${this.apiUrl}/users/profiles`)
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: {
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) {
console.error(error);
this.showErrorMessage = true;

View File

@ -3,6 +3,9 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store'
import Index from '@/views/Index.vue'
import Search from '@/views/Search.vue'
import Edit from '@/views/profile/Edit.vue'
@ -16,9 +19,9 @@ const routes = [
template: "<router-view/>",
},
beforeEnter: (to, from, next) => {
if(localStorage.getItem('token') !== null){
if (store.state.token){
next()
}else{
} else {
next({path: '/', query: {url: to.fullPath, access: false}})
}
},
@ -43,7 +46,14 @@ const routes = [
{
path: '/',
name: 'Index',
component: Index
component: Index,
beforeEnter: (_to, _from, next) => {
if (store.state.token) {
next({name: 'Search'})
} else {
next()
}
}
},
]

53
src/store/index.js Normal file
View 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
View 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
View 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')
}
}
}

View File

@ -5,48 +5,52 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="container">
<h1>WTF Kompetenzinventar</h1>
<form @submit.prevent="submitLogin()">
<div class="mb-3">
<label for="exampleInputusername1" class="form-label"
>Benutzername:
</label>
<input
type="username"
class="form-control"
id="exampleInputusername1"
v-model="username"
required
/>
<div class="bg-wtf">
<div class="container pt-5">
<div class="text-center mb-5">
<img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
<h1 class="text-white">Kompetenzinventar</h1>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
v-model="password"
required
/>
</div>
<button type="submit" class="btn btn-primary mb-4">Login</button>
</form>
<a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
<a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
<form @submit.prevent="submitLogin()" class="card bg-white login-form">
<div class="card-body">
<div class="mb-3">
<label for="exampleInputusername1" class="form-label" >
WTF-Benutzername:
</label>
<input
type="username"
class="form-control"
id="exampleInputusername1"
v-model="username"
required
autofocus
/>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
<input
type="password"
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>
<p>
Das Login gilt nur für WTF eG Mitglieder. Du kannst dein LDAP Passwort
hier ändern.
</p>
</div>
</template>
<script>
import RequestMixin from "@/mixins/request.mixin"
@ -62,3 +66,19 @@ export default {
},
};
</script>
<style scoped>
.container {
min-height: 100vh;
}
.login-form {
margin: 0 auto;
max-width: 500px;
}
.wtf-logo--index {
max-width: 200px;
}
</style>

View File

@ -5,85 +5,182 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="container">
<h1>Suche</h1>
<form @submit.prevent="submitSearch()">
<div class="row">
<div class="col">
<input
type="text"
class="form-control"
id="searchText"
v-model="searchText"
/>
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-4">
Suche starten
</button>
<div class="content">
<div class="bg-wtf text-white pt-3 pb-4">
<div class="container">
<div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
<div class="card mx-auto bg-white">
<div class="card-body">
<form @submit.prevent="handleSubmit">
<fieldset class="d-flex" :disabled="searching">
<div class="flex-grow-1 me-3">
<input
type="text"
class="form-control"
id="searchText"
v-model="searchText"
placeholder="Nick, Name, Fähigkeit, Sprache"
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>
</form>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Bei der Suche ist ein Fehler aufgetreten
</div>
<div v-if="searchTotal == 0">
Es wurde kein Suchergebnis gefunden.
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
</div>
<div v-else>
<div class="row">
<div
class="col-4 p-2"
v-for="result in searchResults"
:key="result.user_id"
>
<router-link
class="text-decoration-none"
:to="{ path: `/s/profile/${result.user_id}` }"
>
<div class="card">
<div class="card-body">
<h5 class="card-title">
{{ result.nickname
}}<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text" v-if="result.skills">
Fähigkeiten:
<span v-for="skill in result.skills" :key="skill.skill.name"
>{{ skill.skill.name }}
</span>
</p>
</div>
</div>
</router-link>
<div class="container pt-4 pb-3">
<div class="text-center" v-if="showSpinner">
<Spinner />
</div>
<div
class="fs-2 text-danger text-center"
role="alert"
v-if="error"
>
<div class="fs-1 mb-3">Kernel panic :/</div>
Bei der Suche ist ein Fehler aufgetreten.
</div>
<div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
<div class="fs-1 mb-3">nullptr :/</div>
Es wurde kein Suchergebnis gefunden.
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
</div>
<div v-else-if="showResults">
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
<SearchResult
v-for="profile in profiles"
:key="profile.user_id"
class="mb-3"
:profile="profile"
/>
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
</div>
</div>
</div>
</template>
<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 {
name: "Search",
mixins: [RequestMixin],
name: 'Search',
components: {
Paginator,
SearchResult,
Spinner,
},
data() {
return {
showErrorMessage: false,
searchText: "",
searchResults: null,
searchTotal: 0,
};
textChanged: false
}
},
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() {
if (this.$route.query.query) this.searchText = this.$route.query.query;
this.submitSearch();
},
if (this.$route.query.query) {
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>
<style scoped>
.container {
max-width: 768px;
}
.content {
min-height: calc(100vh - 60px);
}
</style>

View File

@ -5,190 +5,249 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="container">
<h1>Profil bearbeiten</h1>
<form @submit.prevent="submitFormEdit()">
<div class="row">
<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 class="bg-wtf py-3 mb-4">
<div class="container">
<h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
</div>
<div id="visibilityHelp" class="form-text">
Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
darauf zugreifen oder es in der Suche finden.
</div>
<div class="row">
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label fw-bold">Nickname:</label>
<input
type="text"
class="form-control"
id="nickname"
v-model="profile.nickname"
required
/>
</div>
<div class="container">
<form @submit.prevent="submitFormEdit(false)">
<Section title="Grunddaten">
<div class="row mb-4">
<div class="col-12 col-md-4 mb-3 mb-md-0">
<label class="form-label">Nickname</label>
<input
type="text"
class="form-control"
id="nickname"
maxlength="25"
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 class="col-6 col-xs-12">
<label for="pronouns" class="form-label fw-bold">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="profile.pronouns"
/>
<div for="pronouns" class="form-text">
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
<div class="savebar bg-white border-top py-3">
<div class="container d-flex align-items-center justify-content-end">
<div
class="text-danger"
v-if="showErrorMessage"
>
<i class="bi bi-bug"></i>
Beim Speichern ist ein Fehler aufgetreten.
</div>
<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 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>
<script>
import RequestMixin from "@/mixins/request.mixin"
import AutoComplete from "@/components/AutoComplete";
import Section from '@/components/profile/Section'
export default {
name: "profileEdit",
mixins: [RequestMixin],
components: {
AutoComplete,
Section,
},
data() {
return {
showErrorMessage: false,
showSuccessMessage: false,
clearMessagesHandle: null,
profile: {
visible: false,
nickname: "",
pronouns: "",
volunteerwork: "",
freetext: "",
availability: "",
availability_status: false,
availability_hours_per_week: null,
availability_text: "",
address: {
postcode: "",
city: "",
@ -199,10 +258,49 @@ export default {
searchtopics: [],
contacts: [],
},
pronounsTooltip: {
content: 'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
html: true
}
};
},
async created() {
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>
<style scoped>
.savebar {
bottom: 0;
position: sticky;
}
</style>

View File

@ -5,58 +5,156 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div v-if="profile" class="container">
<h1>
{{profile.nickname}}
<span v-if="profile.pronouns">({{profile.pronouns}})</span>
</h1>
<p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
<p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
<p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
<h3>Das kann ich:</h3>
<profile-list
:values="profile.skills"
type="skill"
></profile-list>
<h3>Das suche ich:</h3>
<profile-list
:values="profile.searchtopics"
type="skill"
></profile-list>
<h3>Meine Kontaktmöglichkeiten:</h3>
<profile-list
:values="profile.contacts"
type="contacttype"
></profile-list>
<h3>Ich Spreche Folgende Sprachen:</h3>
<profile-list
:values="profile.languages"
type="language"
></profile-list>
<div v-if="profile.address">
<h3>Meine Location:</h3>
{{profile.address.city}}<span v-if="profile.address && profile.address.postcode"> ({{profile.address.postcode}})</span>, {{profile.address.country}}
</div>
<div>
<template v-if="error">
<ViewError :isOwnProfile="isOwnProfile" :notFound="notFound" />
</template>
<template
v-else-if="profile"
class="container">
<ProfileHeader
class="mb-4"
:profile="profile" />
<Section
v-if="profile.skills && profile.skills.length > 0"
title="Das kann ich">
<div style="margin-bottom: -.5rem;">
<Skill
class="me-2 mb-2"
v-for="skill in profile.skills"
:key="skill.skill.id"
:profileSkill="skill"
:showLevel="true" />
</div>
</Section>
<Section
v-if="profile.searchtopics && profile.searchtopics.length > 0"
title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
<div style="margin-bottom: -.5rem;">
<Skill
class="me-2 mb-2"
v-for="skill in profile.searchtopics"
:key="skill.skill.id"
:profileSkill="skill"
:showLevel="false" />
</div>
</Section>
<Section
v-if="profile.languages && profile.languages.length > 0"
title="Ich spreche diese Sprachen">
<div style="margin-bottom: -.5rem;">
<Language
class="me-2 mb-2"
v-for="language in profile.languages"
:key="language.language.id"
:profileLanguage="language"
/>
</div>
</Section>
<Section title="Verfügbarkeit">
<div class="d-flex align-items-center">
<div v-if="profile.availability_status">
<i class="bi bi-check-square me-1"></i>
ja
</div>
<div v-else>
<i class="bi bi-x-square me-1"></i>
nein
</div>
<span
class="ms-3"
v-if="profile.availability_status && profile.availability_hours_per_week">
({{ profile.availability_hours_per_week }} Stunden pro Woche)
</span>
</div>
<div v-if="profile.availability_text" class="mt-3">
<label class="form-label fw-bold">
Anmerkungen
</label>
<div 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>
</template>
<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 {
name: "profileView",
mixins: [RequestMixin],
name: 'profileView',
components: {
ProfileList,
Contact,
Language,
ProfileHeader,
Section,
Skill,
ViewError,
},
data() {
return {
profile: null
};
methods: {
...mapActions({
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() {
await this.initViewPage();
}
const id = parseInt(this.$route.params.memberId, 10)
this.loadProfile(id)
},
unmounted() {
this.clearStore()
},
};
</script>
<style>
.line-break-text{
white-space: pre-line;
}
</style>