Merge pull request 'Fix typo for language levels' (#67) from zeitschlag/ki-frontend:typo into main

Reviewed-on: #67

.drone.yml

@@ -20,3 +20,6 @@ steps:
       from_secret: "docker_username"
     password:
       from_secret: "docker_password"
+  when:
+    branch:
+      - main

.reuse/dep5

@@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: AGPL-3.0-or-later
 
-Files: src/assets/img/wtf_logo*
+Files: src/assets/img/wtf*
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: LicenseRef-WTF
 

LICENSES/MIT.txt

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

package-lock.json

@@ -15,11 +15,13 @@
         "@vue/compiler-sfc": "^3.0.0",
         "babel-eslint": "^10.1.0",
         "bootstrap": "^5.0.1",
+        "bootstrap-icons": "^1.5.0",
         "core-js": "^3.6.5",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^7.0.0",
         "sass": "^1.37.5",
         "sass-loader": "^10.2.0",
+        "v-tooltip": "^4.0.0-alpha.1",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.2"
@@ -333,9 +335,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.14.4",
+      "version": "7.15.8",
-      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
-      "integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
+      "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1214,7 +1216,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
       "dev": true,
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1806,73 +1807,54 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
-      "integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
+      "integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.12.0",
+        "@babel/parser": "^7.15.0",
-        "@babel/types": "^7.12.0",
+        "@vue/shared": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "estree-walker": "^2.0.2",
-        "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-core/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
-      "integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
+      "integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-core": "3.0.11",
+        "@vue/compiler-core": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
-      "integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
+      "integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
       "dev": true,
       "dependencies": {
-        "@babel/parser": "^7.13.9",
+        "@babel/parser": "^7.15.0",
-        "@babel/types": "^7.13.0",
+        "@vue/compiler-core": "3.2.20",
-        "@vue/compiler-core": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-ssr": "3.2.20",
-        "@vue/compiler-ssr": "3.0.11",
+        "@vue/ref-transform": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "@vue/shared": "3.2.20",
-        "consolidate": "^0.16.0",
+        "estree-walker": "^2.0.2",
-        "estree-walker": "^2.0.1",
-        "hash-sum": "^2.0.0",
-        "lru-cache": "^5.1.1",
         "magic-string": "^0.25.7",
-        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
-        "postcss-modules": "^4.0.0",
-        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
       }
     },
-    "node_modules/@vue/compiler-sfc/node_modules/consolidate": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npm.taobao.org/consolidate/download/consolidate-0.16.0.tgz?cache=0&sync_timestamp=1599596658886&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsolidate%2Fdownload%2Fconsolidate-0.16.0.tgz",
-      "integrity": "sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=",
-      "dev": true,
-      "dependencies": {
-        "bluebird": "^3.7.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.3.0",
       "resolved": "https://registry.nlark.com/postcss/download/postcss-8.3.0.tgz?cache=0&sync_timestamp=1621568932145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-8.3.0.tgz",
@@ -1897,13 +1879,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
-      "integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
+      "integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -1972,39 +1954,65 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
-      "integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
+      "integrity": "sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==",
       "dev": true,
       "dependencies": {
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "node_modules/@vue/ref-transform": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.20.tgz",
+      "integrity": "sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.15.0",
+        "@vue/compiler-core": "3.2.20",
+        "@vue/shared": "3.2.20",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
-      "integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
+      "integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
       "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.0.11",
+        "@vue/reactivity": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
-      "integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
+      "integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
       "dev": true,
       "dependencies": {
-        "@vue/runtime-core": "3.0.11",
+        "@vue/runtime-core": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "@vue/shared": "3.2.20",
         "csstype": "^2.6.8"
       }
     },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.20.tgz",
+      "integrity": "sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.2.20",
+        "@vue/shared": "3.2.20"
+      },
+      "peerDependencies": {
+        "vue": "3.2.20"
+      }
+    },
     "node_modules/@vue/shared": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
-      "integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
+      "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
       "dev": true
     },
     "node_modules/@vue/web-component-wrapper": {
@@ -2854,6 +2862,15 @@
         "@popperjs/core": "^2.10.1"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
+      "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@@ -4525,9 +4542,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.17",
+      "version": "2.6.18",
-      "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
-      "integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
+      "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
       "dev": true
     },
     "node_modules/cyclist": {
@@ -5557,8 +5574,8 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.2.tgz?cache=0&sync_timestamp=1611955458899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Festree-walker%2Fdownload%2Festree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
     "node_modules/esutils": {
@@ -6321,15 +6338,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "node_modules/generic-names": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npm.taobao.org/generic-names/download/generic-names-2.0.1.tgz?cache=0&sync_timestamp=1603542442076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgeneric-names%2Fdownload%2Fgeneric-names-2.0.1.tgz",
-      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^1.1.0"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.2.tgz?cache=0&sync_timestamp=1603829716561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgensync%2Fdownload%2Fgensync-1.0.0-beta.2.tgz",
@@ -6999,12 +7007,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/icss-replace-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
-    },
     "node_modules/icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -8114,12 +8116,6 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
-    "node_modules/lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
-      "dev": true
-    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/lodash.debounce/download/lodash.debounce-4.0.8.tgz",
@@ -9892,22 +9888,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/postcss-modules": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-4.0.0.tgz?cache=0&sync_timestamp=1606641138659&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-4.0.0.tgz",
-      "integrity": "sha1-K8fydquI8/Gw+t9svXdy1DtfO5s=",
-      "dev": true,
-      "dependencies": {
-        "generic-names": "^2.0.1",
-        "icss-replace-symbols": "^1.1.0",
-        "lodash.camelcase": "^4.3.0",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "string-hash": "^1.1.1"
-      }
-    },
     "node_modules/postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-2.0.0.tgz",
@@ -9958,62 +9938,6 @@
         "postcss": "^7.0.6"
       }
     },
-    "node_modules/postcss-modules/node_modules/icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-5.1.0.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-5.1.0.tgz",
-      "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules/node_modules/postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-3.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules/node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-4.0.0.tgz?cache=0&sync_timestamp=1602587565462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-local-by-default%2Fdownload%2Fpostcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha1-67tU+uFZjuz99pGgKz/zs5ClpRw=",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules/node_modules/postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-3.0.0.tgz?cache=0&sync_timestamp=1602593177072&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha1-nvMVFFbTu/oSDKRImN/Kby+gHwY=",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules/node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-4.0.0.tgz?cache=0&sync_timestamp=1602586198892&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-values%2Fdownload%2Fpostcss-modules-values-4.0.0.tgz",
-      "integrity": "sha1-18Xn5ow7s8myfL9Iyguz/7RgLJw=",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.nlark.com/postcss-normalize-charset/download/postcss-normalize-charset-4.0.1.tgz?cache=0&sync_timestamp=1621449638213&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss-normalize-charset%2Fdownload%2Fpostcss-normalize-charset-4.0.1.tgz",
@@ -12070,12 +11994,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npm.taobao.org/string-hash/download/string-hash-1.1.3.tgz",
-      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
-      "dev": true
-    },
     "node_modules/string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz?cache=0&sync_timestamp=1618558856477&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-2.1.1.tgz",
@@ -13090,6 +13008,19 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-tooltip": {
+      "version": "4.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
+      "integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.6.0",
+        "vue-resize": "^2.0.0-alpha.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -13142,14 +13073,16 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/vue/download/vue-3.0.11.tgz?cache=0&sync_timestamp=1622235952885&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
-      "integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
+      "integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/runtime-dom": "3.0.11",
+        "@vue/compiler-sfc": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/runtime-dom": "3.2.20",
+        "@vue/server-renderer": "3.2.20",
+        "@vue/shared": "3.2.20"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -13305,6 +13238,15 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
@@ -14789,9 +14731,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.14.4",
+      "version": "7.15.8",
-      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
-      "integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
+      "integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
       "dev": true
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
@@ -15654,8 +15596,7 @@
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
       "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
-      "dev": true,
+      "dev": true
-      "peer": true
     },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
@@ -16219,69 +16160,53 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
-      "integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
+      "integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
       "dev": true,
       "requires": {
-        "@babel/parser": "^7.12.0",
+        "@babel/parser": "^7.15.0",
-        "@babel/types": "^7.12.0",
+        "@vue/shared": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "estree-walker": "^2.0.2",
-        "estree-walker": "^2.0.1",
         "source-map": "^0.6.1"
       },
       "dependencies": {
         "source-map": {
           "version": "0.6.1",
-          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
-      "integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
+      "integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
       "dev": true,
       "requires": {
-        "@vue/compiler-core": "3.0.11",
+        "@vue/compiler-core": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
-      "integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
+      "integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
       "dev": true,
       "requires": {
-        "@babel/parser": "^7.13.9",
+        "@babel/parser": "^7.15.0",
-        "@babel/types": "^7.13.0",
+        "@vue/compiler-core": "3.2.20",
-        "@vue/compiler-core": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-ssr": "3.2.20",
-        "@vue/compiler-ssr": "3.0.11",
+        "@vue/ref-transform": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "@vue/shared": "3.2.20",
-        "consolidate": "^0.16.0",
+        "estree-walker": "^2.0.2",
-        "estree-walker": "^2.0.1",
-        "hash-sum": "^2.0.0",
-        "lru-cache": "^5.1.1",
         "magic-string": "^0.25.7",
-        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
-        "postcss-modules": "^4.0.0",
-        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "consolidate": {
-          "version": "0.16.0",
-          "resolved": "https://registry.npm.taobao.org/consolidate/download/consolidate-0.16.0.tgz?cache=0&sync_timestamp=1599596658886&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fconsolidate%2Fdownload%2Fconsolidate-0.16.0.tgz",
-          "integrity": "sha1-oRhkdokw8vGUMWYKZZBmaPX73BY=",
-          "dev": true,
-          "requires": {
-            "bluebird": "^3.7.2"
-          }
-        },
         "postcss": {
           "version": "8.3.0",
           "resolved": "https://registry.nlark.com/postcss/download/postcss-8.3.0.tgz?cache=0&sync_timestamp=1621568932145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-8.3.0.tgz",
@@ -16302,13 +16227,13 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
-      "integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
+      "integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "@vue/component-compiler-utils": {
@@ -16371,39 +16296,62 @@
       "dev": true
     },
     "@vue/reactivity": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
-      "integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
+      "integrity": "sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==",
       "dev": true,
       "requires": {
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
+      }
+    },
+    "@vue/ref-transform": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.20.tgz",
+      "integrity": "sha512-Y42d3PGlYZ1lXcF3dbd3+qU/C/a3wYEZ949fyOI5ptzkjDWlkfU6vn74fmOjsLjEcjs10BXK2qO99FqQIK2r1Q==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.15.0",
+        "@vue/compiler-core": "3.2.20",
+        "@vue/shared": "3.2.20",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
-      "integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
+      "integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
       "dev": true,
       "requires": {
-        "@vue/reactivity": "3.0.11",
+        "@vue/reactivity": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/shared": "3.2.20"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
-      "integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
+      "integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
       "dev": true,
       "requires": {
-        "@vue/runtime-core": "3.0.11",
+        "@vue/runtime-core": "3.2.20",
-        "@vue/shared": "3.0.11",
+        "@vue/shared": "3.2.20",
         "csstype": "^2.6.8"
       }
     },
+    "@vue/server-renderer": {
+      "version": "3.2.20",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.20.tgz",
+      "integrity": "sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-ssr": "3.2.20",
+        "@vue/shared": "3.2.20"
+      }
+    },
     "@vue/shared": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
-      "integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
+      "integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
       "dev": true
     },
     "@vue/web-component-wrapper": {
@@ -17155,6 +17103,12 @@
       "dev": true,
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
+      "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@@ -18570,9 +18524,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.17",
+      "version": "2.6.18",
-      "resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
-      "integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
+      "integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
       "dev": true
     },
     "cyclist": {
@@ -19430,8 +19384,8 @@
     },
     "estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npm.taobao.org/estree-walker/download/estree-walker-2.0.2.tgz?cache=0&sync_timestamp=1611955458899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Festree-walker%2Fdownload%2Festree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
     "esutils": {
@@ -20063,15 +20017,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "generic-names": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npm.taobao.org/generic-names/download/generic-names-2.0.1.tgz?cache=0&sync_timestamp=1603542442076&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgeneric-names%2Fdownload%2Fgeneric-names-2.0.1.tgz",
-      "integrity": "sha1-+KN46tLMqno08DF7BVVIMq5BuHI=",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0"
-      }
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.2.tgz?cache=0&sync_timestamp=1603829716561&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgensync%2Fdownload%2Fgensync-1.0.0-beta.2.tgz",
@@ -20631,12 +20576,6 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "icss-replace-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npm.taobao.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
-    },
     "icss-utils": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -21518,12 +21457,6 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
-    "lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
-      "dev": true
-    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/lodash.debounce/download/lodash.debounce-4.0.8.tgz",
@@ -23031,65 +22964,6 @@
         }
       }
     },
-    "postcss-modules": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npm.taobao.org/postcss-modules/download/postcss-modules-4.0.0.tgz?cache=0&sync_timestamp=1606641138659&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules%2Fdownload%2Fpostcss-modules-4.0.0.tgz",
-      "integrity": "sha1-K8fydquI8/Gw+t9svXdy1DtfO5s=",
-      "dev": true,
-      "requires": {
-        "generic-names": "^2.0.1",
-        "icss-replace-symbols": "^1.1.0",
-        "lodash.camelcase": "^4.3.0",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "string-hash": "^1.1.1"
-      },
-      "dependencies": {
-        "icss-utils": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-5.1.0.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-5.1.0.tgz",
-          "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
-          "dev": true
-        },
-        "postcss-modules-extract-imports": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-3.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-3.0.0.tgz",
-          "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
-          "dev": true
-        },
-        "postcss-modules-local-by-default": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-4.0.0.tgz?cache=0&sync_timestamp=1602587565462&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-local-by-default%2Fdownload%2Fpostcss-modules-local-by-default-4.0.0.tgz",
-          "integrity": "sha1-67tU+uFZjuz99pGgKz/zs5ClpRw=",
-          "dev": true,
-          "requires": {
-            "icss-utils": "^5.0.0",
-            "postcss-selector-parser": "^6.0.2",
-            "postcss-value-parser": "^4.1.0"
-          }
-        },
-        "postcss-modules-scope": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-3.0.0.tgz?cache=0&sync_timestamp=1602593177072&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-3.0.0.tgz",
-          "integrity": "sha1-nvMVFFbTu/oSDKRImN/Kby+gHwY=",
-          "dev": true,
-          "requires": {
-            "postcss-selector-parser": "^6.0.4"
-          }
-        },
-        "postcss-modules-values": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-4.0.0.tgz?cache=0&sync_timestamp=1602586198892&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-values%2Fdownload%2Fpostcss-modules-values-4.0.0.tgz",
-          "integrity": "sha1-18Xn5ow7s8myfL9Iyguz/7RgLJw=",
-          "dev": true,
-          "requires": {
-            "icss-utils": "^5.0.0"
-          }
-        }
-      }
-    },
     "postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-2.0.0.tgz",
@@ -24888,12 +24762,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npm.taobao.org/string-hash/download/string-hash-1.1.3.tgz",
-      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
-      "dev": true
-    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz?cache=0&sync_timestamp=1618558856477&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstring-width%2Fdownload%2Fstring-width-2.1.1.tgz",
@@ -25730,6 +25598,16 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-tooltip": {
+      "version": "4.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
+      "integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.6.0",
+        "vue-resize": "^2.0.0-alpha.1"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
@@ -25776,14 +25654,16 @@
       "dev": true
     },
     "vue": {
-      "version": "3.0.11",
+      "version": "3.2.20",
-      "resolved": "https://registry.nlark.com/vue/download/vue-3.0.11.tgz?cache=0&sync_timestamp=1622235952885&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-3.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
-      "integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
+      "integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.0.11",
+        "@vue/compiler-dom": "3.2.20",
-        "@vue/runtime-dom": "3.0.11",
+        "@vue/compiler-sfc": "3.2.20",
-        "@vue/shared": "3.0.11"
+        "@vue/runtime-dom": "3.2.20",
+        "@vue/server-renderer": "3.2.20",
+        "@vue/shared": "3.2.20"
       }
     },
     "vue-eslint-parser": {
@@ -25920,6 +25800,13 @@
         }
       }
     },
+    "vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "dev": true,
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",

package.json

@@ -14,11 +14,13 @@
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",
+    "bootstrap-icons": "^1.5.0",
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
+    "v-tooltip": "^4.0.0-alpha.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.2"

public/img/bootstrap-icons-1.5.0/pencil.license

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

public/img/bootstrap-icons-1.5.0/pencil.svg

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

public/img/bootstrap-icons-1.5.0/plus-lg.svg

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

public/img/bootstrap-icons-1.5.0/plus-lg.svg.license

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

public/img/bootstrap-icons-1.5.0/search.svg

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

public/img/bootstrap-icons-1.5.0/search.svg.license

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

public/img/bootstrap-icons-1.5.0/trash.svg

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

public/img/bootstrap-icons-1.5.0/trash.svg.license

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

src/App.vue

@@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <Footer />
 </template>
 <script>
-import Footer from '@/components/Footer.vue'
+import Footer from '@/components/Footer'
-import Navbar from '@/components/Navbar.vue'
+import Navbar from '@/components/Navbar'
 
 export default {
   name: 'App',

src/assets/global.scss

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

src/assets/language_level.json

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

src/assets/skill_level.json

@@ -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"
+  }
 }

src/assets/variables.scss

@@ -14,3 +14,5 @@ $body-bg: $gray-100;
 
 $link-decoration: none;
 $link-hover-decoration: underline;
+
+$spinner-animation-speed: 1s;

src/components/AutoComplete.vue

@@ -5,37 +5,33 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div>
+  <profile-list
-    <label for="searchText" class="form-label fw-bold">{{ label }}</label>
+    :values="values"
-    <div class="row mb-2">
+    :type="type"
-      <div class="col">
+    :editable="true"
+    :show-secondary="showSecondary"
+    @remove-value="removeValue($event)"
+    @update-values="this.$emit('update-values', this.values)"
+  >
+  </profile-list>
+  <div v-bind="$attrs" class="card-body">
+    <div class="row">
+      <div class="col-12 col-md-4 col-lg-3 col-xl-2">
+        <div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
+      </div>
+      <div class="col-12 col-md-6">
         <input
           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>
+        <div v-if="searchResults">
-      <div class="col">
-        <button
-          v-if="searchText != ''"
-          type="button"
-          class="btn btn-outline-success"
-          aria-label="Hinzufügen"
-          @click="addResult()"
-        >
-          <img
-            src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
-            alt="Hinzufügen Icon"
-          />
-          Hinzufügen
-        </button>
-      </div>
-    </div>
-    <div class="" v-if="searchResults">
           <ul class="list-group">
             <li
               class="list-group-item"
@@ -47,24 +43,30 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             </li>
           </ul>
         </div>
-    <profile-list
+      </div>
-      :values="values"
+      <div class="col-md-2">
-      :type="type"
+        <button
-      :editable="true"
+          v-if="searchText != ''"
-      @remove-value="removeValue($event)"
+          type="button"
-      @update-values="this.$emit('update-values', this.values)"
+          class="btn btn-outline-success"
+          aria-label="Hinzufügen"
+          @click="addResult()"
         >
-    </profile-list>
+          <i clas="bi-plus-lg"></i>
+          Hinzufügen
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 
-import RequestMixin from "@/mixins/request.mixin"
+import RequestMixin from '@/mixins/request.mixin'
-import ProfileList from "@/components/ProfileList";
+import ProfileList from '@/components/ProfileList';
 
 export default {
-  name: "AutoComplete",
+  name: 'AutoComplete',
   mixins: [RequestMixin],
   components: {
     ProfileList,
@@ -79,21 +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'])
+    ...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)
       ) {
@@ -104,16 +118,19 @@ export default {
       let newValue = {
         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) => {
@@ -123,7 +140,7 @@ export default {
           return true;
         }
       });
-      this.$emit("update-values", newValues);
+      this.$emit('update-values', newValues);
     },
   },
 };

src/components/Avatar.vue

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

src/components/Navbar.vue

@@ -26,11 +26,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <span class="navbar-toggler-icon"></span>
       </button>
       <div
-        class="collapse navbar-collapse"
+        class="collapse navbar-collapse d-lg-flex"
         :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
-        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <ul class="navbar-nav mb-2 mb-lg-0 me-auto">
           <li class="nav-item">
             <router-link
               class="nav-link"
@@ -55,30 +55,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             >Bearbeiten</router-link
           >
           </li>
+        </ul>
+        <ul class="navbar-nav">
           <li class="nav-item">
-            <button class="btn btn-outline-danger" @click="logout()">
+            <button class="btn btn-danger w-100" @click="logout()">
+              <i class="bi bi-box-arrow-right"></i>
               Logout
             </button>
           </li>
         </ul>
-        <form class="d-flex" @submit.prevent="searchRedirect()">
-          <input
-            class="form-control me-2"
-            v-model="searchText"
-            type="search"
-            placeholder="Profile durchsuchen"
-            aria-label="Search"
-          />
-          <button
-            class="btn btn-outline-primary"
-            type="submit"
-          >
-            <img
-              src="/img/bootstrap-icons-1.5.0/search.svg"
-              alt="Suche Icon"
-            />
-          </button>
-        </form>
       </div>
     </div>
   </nav>
@@ -95,7 +80,6 @@ export default {
   mixins: [RequestMixin],
   data() {
     return {
-      searchText: '',
       showMobileNav: false
     }
   },
@@ -110,9 +94,6 @@ export default {
       this.$store.dispatch('clear')
       this.$router.push({ path: '/' });
     },
-    searchRedirect() {
-      this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
-    },
   }
 }
 

src/components/ProfileList.vue

@@ -5,24 +5,27 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <ul>
+  <ul class="list-group list-group-flush">
-    <li v-for="(value, valueKey) in values" :key="value.id">
+    <li
-      <div class="row m-1">
+      class="list-group-item"
-        <div class="col">
+      v-for="(value, valueKey) in values"
-          <img
+      :key="value.id"
-            style="max-width: 64px"
+    >
+      <div class="row">
+        <div class="col-12 col-md-5 d-flex align-items-center">
+          <div
+            class="list-icon me-1"
+            :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
             v-if="value[type].icon_url"
-            :src="iconUrl + value[type].icon_url"
-            :alt="`${value[type].name} Logo`"
           />
+          <div>
             {{ value[type].name }}
           </div>
-        <div class="col">
+        </div>
-          <div v-if="type == 'skill'">
+        <div class="col-10 col-md-5">
-            <div v-if="editable">
+          <div v-if="type == 'skill' && showSecondary">
             <select
-                v-if="editableValues[valueKey]"
+              class="form-select form-select-sm"
-                class="form-select"
               aria-label="Selektiere dein Level"
               v-model="editableValues[valueKey].level"
               @input="$emit('update-values', editableValues)"
@@ -32,18 +35,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 :value="key"
                 :key="key"
               >
-                  {{ value }}
+                {{ value.long || value }}
               </option>
             </select>
           </div>
-            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
-          </div>
           <div v-else-if="type == 'language'">
-            <div v-if="editable">
-              <div v-if="editable">
             <select
-                v-if="editableValues[valueKey]"
+              class="form-select form-select-sm"
-                class="form-select"
               aria-label="Selektiere dein Level"
               v-model="editableValues[valueKey].level"
               @input="$emit('update-values', editableValues)"
@@ -57,35 +55,22 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               </option>
             </select>
           </div>
-            </div>
-            <div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
-          </div>
           <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 class="col-2 text-end">
-        <div class="col">
           <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
+            <i class="text-danger bi bi-x-circle"></i>
-              src="/img/bootstrap-icons-1.5.0/trash.svg"
-              alt="Löschen Icon"
-            />
           </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 levelJson from '@/assets/skill_level.json';
-import languagesJson from "@/assets/language_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>

src/components/SearchResult.vue

@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <router-link
+    class="text-decoration-none d-flex"
+    :to="{ path: `/s/profile/${profile.user_id}` }"
+  >
+    <div class="card w-100">
+      <div class="card-body d-flex">
+        <div class="d-flex align-items-center justify-content-center me-3">
+          <Avatar :name="profile.nickname"/>
+        </div>
+        <div class="text-body">
+        <h5 class="card-title mb-1 lh-1">
+          {{ profile.nickname}}
+          <span v-if="profile.pronouns"> ({{ profile.pronouns }})</span>
+        </h5>
+        <small
+          class="card-text lh-1 text-dark"
+          v-if="profile.skills && profile.skills.length > 0"
+        >
+          Top-Fähigkeiten: {{ topSkills }}
+        </small>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+<script>
+import Avatar from '@/components/Avatar'
+
+export default {
+  components: {
+    Avatar,
+  },
+  props: {
+    profile: Object
+  },
+  computed: {
+    topSkills() {
+      return this.profile.skills.slice(0, 5).map(s => s.skill.name).join(', ')
+    }
+  }
+}
+</script>
+<style scoped>
+.card:hover {
+  background-color: #f8f9fa;
+}
+</style>

src/components/Skill.vue

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

src/components/Spinner.vue

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

src/components/ViewError.vue

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

src/components/profile/Contact.vue

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

src/components/profile/Header.vue

@@ -0,0 +1,71 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="bg-wtf py-3">
+    <div class="container">
+      <div class="d-flex align-items-center mb-3">
+        <Avatar class="me-3" :name="profile.nickname" />
+        <div class="text-white fs-3">
+          <span class="fs-3">{{ profile.nickname }}</span>
+          <span v-if="profile.pronouns" class="fs-5">
+            ({{ profile.pronouns }})
+          </span>
+        </div>
+      </div>
+      <div v-if="location">
+        <div class="d-flex align-items-center">
+          <i class="fs-4 bi bi-geo-alt-fill text-dark mx-2"></i>
+          <div class="text-white">
+            {{ location }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Avatar from '@/components/Avatar'
+
+export default {
+  name: 'ProfileHeader',
+  components: {
+    Avatar
+  },
+  props: {
+    profile: Object
+  },
+  computed: {
+    location() {
+      if (!this.profile.address) {
+        return
+      }
+
+      const parts = []
+
+      if (this.profile.address.postcode) {
+        parts.push(this.profile.address.postcode)
+      }
+
+      if (this.profile.address.city) {
+        parts.push(this.profile.address.city)
+      }
+
+      if (this.profile.address.country) {
+        parts.push(this.profile.address.country)
+      }
+
+      return parts.join(', ')
+    }
+  }
+}
+</script>
+
+<style>
+.content {
+  min-height: calc(100vh - 60px);
+}
+</style>

src/components/profile/Language.vue

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

src/components/profile/Section.vue

@@ -0,0 +1,28 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div class="container mb-5">
+    <h3 class="text-center">
+      {{ title }}
+    </h3>
+    <div class="card w-100">
+      <slot name="card-body">
+        <div class="card-body">
+          <slot></slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  }
+}
+</script>

src/main.js

@@ -6,11 +6,15 @@ 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)
 

src/mixins/request.mixin.js

@@ -37,6 +37,11 @@ export default {
       }
     },
     async search() {
+      if (!this.searchText) {
+        this.searchResults = []
+        return
+      }
+
       try {
         const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
             headers: {
@@ -52,15 +57,16 @@ export default {
         }
 
         const responseData = await response.json()
-        this.searchResults = responseData[`${this.type}s`];
+        const searchResults = responseData[`${this.type}s`];
 
         if (
-          !this.values
+          !searchResults.map((item) => item.name.toLowerCase())
-          .map((item) => item[this.type].name.toLowerCase())
             .includes(this.searchText.toLowerCase())
         ) {
-          this.searchResults.unshift({ name: this.searchText });
+          searchResults.unshift({ name: this.searchText });
         }
+
+        this.searchResults = searchResults
       } catch (error) {
         console.error();
         this.showErrorMessage = true;

src/router/index.js

@@ -46,7 +46,14 @@ const routes = [
   {
     path: '/',
     name: 'Index',
-    component: Index
+    component: Index,
+    beforeEnter: (_to, _from, next) => {
+      if (store.state.token) {
+        next({name: 'Search'})
+      } else {
+        next()
+      }
+    }
   },
 ]
 

src/store/index.js

@@ -4,17 +4,23 @@
 
 import { createStore } from 'vuex'
 
+import profile from './profile'
+import search from './search'
+
 const localStorageKeys = {
   currentUserId: 'ki_current_user_id',
   token: 'ki_token',
 }
 
 export default createStore({
+  modules: {
+    profile,
+    search,
+  },
   state() {
     return {
       currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
       token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
-      currentProfile: null
     }
   },
   mutations: {
@@ -37,9 +43,6 @@ export default createStore({
       state.token = token
       localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
     },
-    setCurrentProfile(state, profile) {
-      state.currentProfile = profile
-    }
   },
   actions: {
     clear(context) {

src/store/profile.js

@@ -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')
+    }
+  }
+}

src/store/search.js

@@ -0,0 +1,100 @@
+// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export default {
+  namespaced: true,
+  state() {
+    return {
+      searching: false,
+      showSpinner: false,
+      searched: false,
+      profiles: [],
+      error: false,
+      errorMessage: '',
+      query: {
+        search: ''
+      }
+    }
+  },
+  mutations: {
+    setSearching(state, searching) {
+      state.searching = searching
+    },
+    showSpinner(state) {
+      state.showSpinner = true
+    },
+    hideSpinner(state) {
+      state.showSpinner = false
+    },
+    clearProfiles(state) {
+      state.profiles = []
+    },
+    setProfiles(state, profiles) {
+      state.profiles = profiles
+    },
+    setError(state, error) {
+      state.error = error
+    },
+    setErrorMessage(state, errorMessage) {
+      state.errorMessage = errorMessage
+    },
+    setQuerySearch(state, search) {
+      state.query.search = search
+    }
+  },
+  actions: {
+    async search({state, commit, rootState}) {
+      if (state.searching) {
+        return
+      }
+
+      commit('setSearching', true)
+
+      const timeoutId = setTimeout(() => {
+        commit('showSpinner')
+        commit('clearProfiles')
+      }, 100)
+
+      commit('setError', false)
+      commit('setErrorMessage', '')
+
+      const url = new URL(`${window.ki.apiUrl}/users/profiles`)
+      
+      if (state.query.search) {
+        url.searchParams.append('search', state.query.search)
+      }
+
+      const headers = {
+        Authorization: `Bearer ${rootState.token}`,
+      }
+
+      let response
+
+      try {
+        response = await fetch(url, {headers})
+      } catch {
+        commit('setError', true)
+        commit('clearProfiles')
+        commit('setSearching', false)
+        commit('hideSpinner')
+        return
+      }
+
+      clearTimeout(timeoutId)
+
+      if (!response.ok) {
+        commit('setError', true)
+        commit('clearProfiles')
+        commit('setSearching', false)
+        commit('hideSpinner')
+        return
+      }
+
+      const responseData = await response.json()
+      commit('setProfiles', responseData.profiles)
+      commit('setSearching', false)
+      commit('hideSpinner')
+    }
+  }
+}

src/views/Index.vue

@@ -5,12 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
+  <div class="bg-wtf">
     <div class="container pt-5">
       <div class="text-center mb-5">
         <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
-      <h1>Kompetenzinventar</h1>
+        <h1 class="text-white">Kompetenzinventar</h1>
       </div>
-    <form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
+      <form @submit.prevent="submitLogin()" class="card bg-white login-form">
+        <div class="card-body">
           <div class="mb-3">
             <label for="exampleInputusername1" class="form-label" >
               WTF-Benutzername:
@@ -21,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               id="exampleInputusername1"
               v-model="username"
               required
+              autofocus
             />
           </div>
           <div class="mb-3">
@@ -42,9 +45,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           >
             Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
           </div>
+        </div>
       </form>
     </div>
+  </div>
 </template>
+
 <script>
 import RequestMixin from "@/mixins/request.mixin"
 
@@ -62,6 +68,7 @@ export default {
 </script>
 
 <style scoped>
+
 .container {
   min-height: 100vh;
 }

src/views/Search.vue

@@ -5,88 +5,135 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
+  <div class="content">
+    <div class="bg-wtf text-white pt-3 pb-4">
       <div class="container">
-    <h1>Suche</h1>
+        <div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
-    <form @submit.prevent="submitSearch()">
+        <div class="card mx-auto bg-white">
-      <div class="row">
+          <div class="card-body">
-        <div class="col">
+            <form @submit.prevent="handleSubmit">
+              <fieldset class="d-flex" :disabled="searching">
+                <div class="flex-grow-1 me-3">
                   <input
                     type="text"
                     class="form-control"
                     id="searchText"
                     v-model="searchText"
+                    placeholder="Nick, Fähigkeit, Sprache"
+                    ref="searchTextInput"
                   />
                 </div>
-        <div class="col">
+                <div class="">
-          <button type="submit" class="btn btn-primary mb-4">
+                  <button type="submit" class="btn btn-primary">
-            Suche starten
+                    <i class="bi-search"></i>
+                    <span class="d-none d-md-inline"> Suchen</span>
                   </button>
                 </div>
-      </div>
+              </fieldset>
             </form>
-    <div
-      class="alert alert-danger mb-4 mt-4"
-      role="alert"
-      v-if="showErrorMessage"
-    >
-      Bei der Suche ist ein Fehler aufgetreten
           </div>
-    <div v-if="searchTotal == 0">
+        </div>
+      </div>
+    </div>
+    <div class="container pt-4 pb-3">
+      <div class="text-center" v-if="showSpinner">
+        <Spinner />
+      </div>
+      <div
+        class="fs-2 text-danger text-center"
+        role="alert"
+        v-if="error"
+      >
+        <div class="fs-1 mb-3">Kernel panic :/</div>
+        Bei der Suche ist ein Fehler aufgetreten.
+      </div>
+      <div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
+        <div class="fs-1 mb-3">nullptr :/</div>
         Es wurde kein Suchergebnis gefunden.
         <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
       </div>
-    <div v-else>
+      <div v-else-if="showResults">
-      <div class="row">
+        <SearchResult
-        <div
+          v-for="profile in profiles"
-          class="col-4 p-2"
+          :key="profile.user_id"
-          v-for="result in searchResults"
+          class="mb-3"
-          :key="result.user_id"
+          :profile="profile"
-        >
+        />
-          <router-link
-            class="text-decoration-none"
-            :to="{ path: `/s/profile/${result.user_id}` }"
-          >
-            <div class="card search-card">
-              <div class="card-body">
-                <h5 class="card-title">
-                  {{ result.nickname}}
-                  <span v-if="result.pronouns"> ({{ result.pronouns }})</span>
-                </h5>
-                <p
-                  class="card-text"
-                  v-if="result.skills && result.skills.length > 0"
-                >
-                  Fähigkeiten:
-                  <span v-for="(skill, index) in result.skills" :key="index"
-                    >
-                    {{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
-                  </span>
-                </p>
-              </div>
-            </div>
-          </router-link>
-        </div>
       </div>
     </div>
   </div>
 </template>
+
 <script>
-import RequestMixin from "@/mixins/request.mixin";
+import { mapState } from 'vuex'
+
+import SearchResult from '@/components/SearchResult'
+import Spinner from '@/components/Spinner'
 
 export default {
-  name: "Search",
+  name: 'Search',
-  mixins: [RequestMixin],
+  components: {
-  data() {
+    SearchResult,
-    return {
+    Spinner,
-      showErrorMessage: false,
+  },
-      searchText: "",
+  computed: {
-      searchResults: null,
+    ...mapState({
-      searchTotal: 0,
+      searching: state => state.search.searching,
-    };
+      profiles: state => state.search.profiles,
+      error: state => state.search.error,
+      showSpinner: state => state.search.showSpinner,
+    }),
+      searchText: {
+        get() {
+          return this.$store.state.search.query.search
+        },
+        set(text) {
+          this.$store.commit('search/setQuerySearch', text)
+        }
+      },
+      showNoResults() {
+        return !this.searching && (!this.profiles || this.profiles.length === 0)
+      },
+      showResults() {
+        return !this.error && this.profiles && this.profiles.length > 0
+      }
+  },
+  watch: {
+    searching(value) {
+      if (!value) {
+        if (this.$refs.searchTextInput) {
+          this.focusSearchText()
+        }
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$router.push({ query: { query: this.searchText }})
+      this.$store.dispatch('search/search')
+    },
+    focusSearchText() {
+      this.$nextTick(() => {
+        this.$refs.searchTextInput.focus()
+      })
+    }
   },
   created() {
-    if (this.$route.query.query) this.searchText = this.$route.query.query;
+    if (this.$route.query.query !== undefined) {
-    this.submitSearch();
+      this.searchText = this.$route.query.query
-  },
+      this.$store.commit('search/clearProfiles')
+    }
+
+    this.$store.dispatch('search/search')
+  }
 };
 </script>
+<style scoped>
+.container {
+  max-width: 768px;
+}
+
+.content {
+  min-height: calc(100vh - 60px);
+}
+</style>

src/views/profile/Edit.vue

@@ -5,190 +5,250 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
+  <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>
     <div class="container">
-    <h1>Profil bearbeiten</h1>
       <form @submit.prevent="submitFormEdit()">
-      <div class="row">
+        <Section title="Grunddaten">
-        <div class="col">
+          <div class="mb-4">
+            <div class="form-check form-switch">
               <input
-            type="radio"
+                class="form-check-input"
-            id="false"
+                type="checkbox"
-            :value="false"
+                role="switch"
                 v-model="profile.visible"
-            class="mr-2"
+                id="visibility"
-          />
+              >
-          <label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
+              <label
-        </div>
+                class="form-check-label"
-        <div class="col">
+                for="visibility">
-          <input
+                Profil für angemeldete Benutzer sichtbar
-            type="radio"
+              </label>
-            id="true"
-            :value="true"
-            v-model="profile.visible"
-          />
-          <label for="true" class="m-2 fw-bold"> Öffentlich</label>
             </div>
           </div>
-      <div id="visibilityHelp" class="form-text">
+
-        Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
+          <div class="row mb-4">
-        darauf zugreifen oder es in der Suche finden.
+            <div class="col-6 mb-3">
-      </div>
+              <label class="form-label">Nickname</label>
-      <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"
+                maxlength="25"
                 v-model="profile.nickname"
                 required
               />
             </div>
-        <div class="col-6 col-xs-12">
+            <div class="col-6 mb-3">
-          <label for="pronouns" class="form-label fw-bold">Pronomen:</label>
+              <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 for="pronouns" class="form-text">
-            Z.B.: Er/Ihn, Sie/Ihr, Es etc..
-          </div>
             </div>
           </div>
+
+          <label class="form-label">Anschrift</label>
           <div class="row">
-        <div class="col-12 col-xs-12">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
-          <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"
+                id="postcode"
+                maxlength="10"
+                placeholder="Postleitzahl"
                 v-model="profile.address.postcode"
               />
             </div>
-        <div class="col">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
-          <label for="city" class="form-label fw-bold">Stadt</label>
               <input
                 type="text"
                 class="form-control"
                 id="city"
+                maxlength="25"
+                placeholder="Ort"
                 v-model="profile.address.city"
               />
             </div>
-        <div class="col">
+            <div class="col-12 col-md-4">
-          <label for="country" class="form-label fw-bold">Land</label>
               <input
                 type="text"
                 class="form-control"
                 id="country"
+                maxlength="25"
+                placeholder="Land"
                 v-model="profile.address.country"
               />
             </div>
           </div>
+        </Section>
 
-      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
+        <Section title="Meine Fähigkeiten">
-        Speichern
+          <template v-slot:card-body>
-      </button>
+            <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">
+          <template v-slot:card-body>
+            <auto-complete
+              type="skill"
+              label="Ich suche"
+              :values="profile.searchtopics"
+              :showSecondary="false"
+              placeholder="z.B. Python, JavaScript, Linux"
+              @update-values="profile.searchtopics = $event"
+            ></auto-complete>
+          </template>
+        </Section>
+
+        <Section title="Verfügbarkeit">
+          <div class="form-check mb-3">
+            <input
+              v-model="profile.availability_status"
+              class="form-check-input me-2"
+              type="checkbox"
+              id="availability_status">
+              <label class="form-check-label" for="availability_status">
+                Ich bin aktuell verfügbar
+              </label>
+            </div>
+            <div class="mb-3" v-if="profile.availability_status">
+              <label class="form-label">
+                Stunden pro Woche
+              </label>
+              <input
+                v-model="profile.availability_hours_per_week"
+                type="number"
+                min="0"
+                max="168"
+                class="form-control">
+              </div>
+              <label for="availability" class="form-label">
+                Anmerkungen
+              </label>
+              <textarea
+                class="form-control"
+                id="availability"
+                rows="3"
+                maxlength="4000"
+                v-model="profile.availability_text"
+              ></textarea>
+            </Section>
+
+            <Section title="Meine Kontaktmöglichkeiten">
+              <template v-slot:card-body>
+                <auto-complete
+                  type="contacttype"
+                  :values="profile.contacts"
+                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
+                  @update-values="profile.contacts = $event"
+                ></auto-complete>
+              </template>
+            </Section>
+
+            <Section title="Sonstiges">
+              <div class="mb-3">
+                <label class="form-label">Über mich</label>
+                <textarea
+                  class="form-control"
+                  rows="3"
+                  maxlength="4000"
+                  v-model="profile.freetext"
+                />
+              </div>
+              <div>
+                <label class="form-label">Ehrenamtliche Arbeit</label>
+                <textarea
+                  class="form-control"
+                  rows="3"
+                  maxlength="4000"
+                  v-model="profile.volunteerwork"
+                />
+              </div>
+            </Section>
+            <input type="submit" class="d-none">
+          </form>
+        </div>
+        <div class="savebar bg-white border-top py-3">
+          <div class="container d-flex align-items-center justify-content-end">
             <div
-        class="alert alert-danger mb-4 mt-4"
+              class="text-danger"
-        role="alert"
               v-if="showErrorMessage"
             >
-        Es ist Fehler aufgetreten
+              <i class="bi bi-bug"></i>
+              Beim Speichern ist ein Fehler aufgetreten.
             </div>
             <div
-        class="alert alert-success mb-4 mt-4"
+              class="text-success"
-        role="alert"
               v-if="showSuccessMessage"
             >
-        Deine Änderungen wurden erfolgreich gespeichert
+              <i class="bi bi-check-lg"></i>
+              Gespeichert
+            </div>
+            <button
+              class="btn btn-primary ms-3"
+              @click="submitFormEdit()"
+            >
+              Speichern
+            </button>
+          </div>
         </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 +259,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>

src/views/profile/View.vue

@@ -5,60 +5,153 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <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"
-    ></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>
+      </Section>
+
+      <Section
+        v-if="profile.searchtopics && profile.searchtopics.length > 0"
+        title="Das suche ich">
+        <div style="margin-bottom: -.5rem;">
+          <Skill
+            class="me-2 mb-2"
+            v-for="skill in profile.searchtopics"
+            :key="skill.skill.id"
+            :profileSkill="skill"
+            :showLevel="false" />
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.languages && profile.languages.length > 0"
+        title="Ich spreche diese Sprachen">
+        <div style="margin-bottom: -.5rem;">
+          <Language
+            class="me-2 mb-2"
+            v-for="language in profile.languages"
+            :key="language.language.id"
+            :profileLanguage="language"
+          />
+        </div>
+      </Section>
+
+      <Section title="Verfügbarkeit">
+        <div class="d-flex align-items-center">
+          <div v-if="profile.availability_status">
+            <i class="bi bi-check-square me-1"></i>
+            ja
+          </div>
+          <div v-else>
+            <i class="bi bi-x-square me-1"></i>
+            nein
+          </div>
+          <span
+            class="ms-3"
+            v-if="profile.availability_status && profile.availability_hours_per_week">
+            ({{ profile.availability_hours_per_week }} Stunden pro Woche)
+          </span>
+        </div>
+        <div v-if="profile.availability_text" class="mt-3">
+          <label class="form-label fw-bold">
+            Anmerkungen
+          </label>
+          <div>{{ profile.availability_text }}</div>
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.contacts && profile.contacts.length > 0"
+        title="Meine Kontaktmöglichkeiten"
+      >
+        <div style="margin-bottom: -.5rem;">
+          <Contact
+            class="me-2 mb-2"
+            v-for="profileContact in profile.contacts"
+            :key="profileContact.id"
+            :profileContact="profileContact"
+          />
+        </div>
+      </Section>
+
+      <Section
+        v-if="profile.volunteerwork || profile.freetext"
+        title="Sonstiges">
+        <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
+          <h5>Über mich</h5>
+          {{ profile.freetext }}
+        </div>
+        <div v-if="profile.volunteerwork" class="lh-base">
+          <h5>Ehrenamtliche Arbeit</h5>
+          {{ profile.volunteerwork }}
+        </div>
+      </Section>
+    </template>
   </div>
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
-import RequestMixin from '@/mixins/request.mixin'
+import ViewError from '@/components/ViewError'
-
+import ProfileHeader from '@/components/profile/Header'
-import ProfileList from '@/components/ProfileList';
+import Section from '@/components/profile/Section'
+import Contact from '@/components/profile/Contact'
+import Language from '@/components/profile/Language'
+import Skill from '@/components/Skill'
 
 export default {
-  name: "profileView",
+  name: 'profileView',
-  mixins: [RequestMixin],
   components: {
-    ProfileList,
+    Contact,
+    Language,
+    ProfileHeader,
+    Section,
+    Skill,
+    ViewError,
+  },
+  methods: {
+    ...mapActions({
+      loadProfile: 'profile/load',
+      clearStore: 'profile/clear',
+    })
   },
   computed: {
     ...mapState({
-      profile: 'currentProfile'
+      profile: state => state.profile.profile,
+      error: state => state.profile.error,
+      notFound: state => state.profile.notFound,
+      isOwnProfile: state => state.profile.isOwnProfile,
+      showSpinner: state =>  state.profile.showSpinner
     })
   },
   async created() {
-    await this.initViewPage();
+    const id = parseInt(this.$route.params.memberId, 10)
-  }
+    this.loadProfile(id)
+  },
+  unmounted() {
+    this.clearStore()
+  },
 };
 </script>
+
+<style>
+</style>