update profile edit view

This commit is contained in:
weeman 2021-10-18 20:45:18 +02:00
parent 04d59d5520
commit 4e8390cf96
Signed by untrusted user: weeman
GPG Key ID: 34F0524D4DA694A1
6 changed files with 503 additions and 573 deletions

509
package-lock.json generated
View File

@ -334,9 +334,9 @@
}
},
"node_modules/@babel/parser": {
"version": "7.14.4",
"resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
"integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
"version": "7.15.8",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
"integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
"dev": true,
"bin": {
"parser": "bin/babel-parser.js"
@ -1807,73 +1807,54 @@
}
},
"node_modules/@vue/compiler-core": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
"integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
"integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.11",
"estree-walker": "^2.0.1",
"@babel/parser": "^7.15.0",
"@vue/shared": "3.2.20",
"estree-walker": "^2.0.2",
"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",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
"integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
"integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
"dev": true,
"dependencies": {
"@vue/compiler-core": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-core": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
"integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
"integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.13.9",
"@babel/types": "^7.13.0",
"@vue/compiler-core": "3.0.11",
"@vue/compiler-dom": "3.0.11",
"@vue/compiler-ssr": "3.0.11",
"@vue/shared": "3.0.11",
"consolidate": "^0.16.0",
"estree-walker": "^2.0.1",
"hash-sum": "^2.0.0",
"lru-cache": "^5.1.1",
"@babel/parser": "^7.15.0",
"@vue/compiler-core": "3.2.20",
"@vue/compiler-dom": "3.2.20",
"@vue/compiler-ssr": "3.2.20",
"@vue/ref-transform": "3.2.20",
"@vue/shared": "3.2.20",
"estree-walker": "^2.0.2",
"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",
@ -1898,13 +1879,13 @@
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
"integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
"integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
"dev": true,
"dependencies": {
"@vue/compiler-dom": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-dom": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"node_modules/@vue/component-compiler-utils": {
@ -1973,39 +1954,65 @@
}
},
"node_modules/@vue/reactivity": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
"integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
"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",
"resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
"integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
"integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
"dev": true,
"dependencies": {
"@vue/reactivity": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/reactivity": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"node_modules/@vue/runtime-dom": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
"integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
"integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
"dev": true,
"dependencies": {
"@vue/runtime-core": "3.0.11",
"@vue/shared": "3.0.11",
"@vue/runtime-core": "3.2.20",
"@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",
"resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
"integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
"integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
"dev": true
},
"node_modules/@vue/web-component-wrapper": {
@ -4535,9 +4542,9 @@
}
},
"node_modules/csstype": {
"version": "2.6.17",
"resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
"integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
"version": "2.6.18",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
"integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
"dev": true
},
"node_modules/cyclist": {
@ -5567,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",
"integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true
},
"node_modules/esutils": {
@ -6331,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",
@ -7009,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",
@ -8124,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",
@ -9902,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",
@ -9968,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",
@ -12080,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",
@ -13152,14 +13060,16 @@
"dev": true
},
"node_modules/vue": {
"version": "3.0.11",
"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",
"integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
"integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
"dev": true,
"dependencies": {
"@vue/compiler-dom": "3.0.11",
"@vue/runtime-dom": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-dom": "3.2.20",
"@vue/compiler-sfc": "3.2.20",
"@vue/runtime-dom": "3.2.20",
"@vue/server-renderer": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"node_modules/vue-eslint-parser": {
@ -14799,9 +14709,9 @@
}
},
"@babel/parser": {
"version": "7.14.4",
"resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.4.tgz",
"integrity": "sha1-pcVg1tts2ObtNCNo3qgDkjLLqxg=",
"version": "7.15.8",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.8.tgz",
"integrity": "sha512-BRYa3wcQnjS/nqI8Ac94pYYpJfojHVvVXJ97+IDCImX4Jc8W8Xv1+47enbruk+q1etOpsQNwnfFcNGw+gtPGxA==",
"dev": true
},
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
@ -16229,69 +16139,53 @@
}
},
"@vue/compiler-core": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-core/download/@vue/compiler-core-3.0.11.tgz",
"integrity": "sha1-XvV55G17M2uHNSKHWNHCxQWq5po=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.20.tgz",
"integrity": "sha512-vcEXlKXoPwBXFP5aUTHN9GTZaDfwCofa9Yu9bbW2C5O/QSa9Esdt7OG4+0RRd3EHEMxUvEdj4RZrd/KpQeiJbA==",
"dev": true,
"requires": {
"@babel/parser": "^7.12.0",
"@babel/types": "^7.12.0",
"@vue/shared": "3.0.11",
"estree-walker": "^2.0.1",
"@babel/parser": "^7.15.0",
"@vue/shared": "3.2.20",
"estree-walker": "^2.0.2",
"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",
"integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"@vue/compiler-dom": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-dom/download/@vue/compiler-dom-3.0.11.tgz",
"integrity": "sha1-sV/ByQk3H9ZxdGAgulW12rSnMO4=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz",
"integrity": "sha512-QnI77ec/JtV7R0YBbcVayYTDCRcI9OCbxiUQK6izVyqQO0658n0zQuoNwe+bYgtqnvGAIqTR3FShTd5y4oOjdg==",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-core": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"@vue/compiler-sfc": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.11.tgz",
"integrity": "sha1-zYyiFUuIlntSH1rTsQ9fi2tmVnk=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz",
"integrity": "sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==",
"dev": true,
"requires": {
"@babel/parser": "^7.13.9",
"@babel/types": "^7.13.0",
"@vue/compiler-core": "3.0.11",
"@vue/compiler-dom": "3.0.11",
"@vue/compiler-ssr": "3.0.11",
"@vue/shared": "3.0.11",
"consolidate": "^0.16.0",
"estree-walker": "^2.0.1",
"hash-sum": "^2.0.0",
"lru-cache": "^5.1.1",
"@babel/parser": "^7.15.0",
"@vue/compiler-core": "3.2.20",
"@vue/compiler-dom": "3.2.20",
"@vue/compiler-ssr": "3.2.20",
"@vue/ref-transform": "3.2.20",
"@vue/shared": "3.2.20",
"estree-walker": "^2.0.2",
"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",
@ -16312,13 +16206,13 @@
}
},
"@vue/compiler-ssr": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.11.tgz",
"integrity": "sha1-rFoF/RJXQS+mYHnII9ggO2qImhM=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.20.tgz",
"integrity": "sha512-rzzVVYivm+EjbfiGQvNeyiYZWzr6Hkej97RZLZvcumacQlnKv9176Xo9rRyeWwFbBlxmtNdrVMslRXtipMXk2w==",
"dev": true,
"requires": {
"@vue/compiler-dom": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-dom": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"@vue/component-compiler-utils": {
@ -16381,39 +16275,62 @@
"dev": true
},
"@vue/reactivity": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.0.11.tgz",
"integrity": "sha1-B7WINJ/QViaxfzUAy+99S9tNvQs=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.20.tgz",
"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",
"resolved": "https://registry.nlark.com/@vue/runtime-core/download/@vue/runtime-core-3.0.11.tgz",
"integrity": "sha1-xS38as8yFUk2I1UsHCkZCAxWLkQ=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.20.tgz",
"integrity": "sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==",
"dev": true,
"requires": {
"@vue/reactivity": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/reactivity": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"@vue/runtime-dom": {
"version": "3.0.11",
"resolved": "https://registry.nlark.com/@vue/runtime-dom/download/@vue/runtime-dom-3.0.11.tgz",
"integrity": "sha1-elUt8hkHlCch/raWHEGOIippkzc=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz",
"integrity": "sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==",
"dev": true,
"requires": {
"@vue/runtime-core": "3.0.11",
"@vue/shared": "3.0.11",
"@vue/runtime-core": "3.2.20",
"@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",
"resolved": "https://registry.nlark.com/@vue/shared/download/@vue/shared-3.0.11.tgz",
"integrity": "sha1-INIt0Np9NYuyHBf5vehigVJkLHc=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz",
"integrity": "sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==",
"dev": true
},
"@vue/web-component-wrapper": {
@ -18586,9 +18503,9 @@
}
},
"csstype": {
"version": "2.6.17",
"resolved": "https://registry.nlark.com/csstype/download/csstype-2.6.17.tgz",
"integrity": "sha1-TPMOuH4dGgBdi2UQ+VKSQT9qHA4=",
"version": "2.6.18",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.18.tgz",
"integrity": "sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==",
"dev": true
},
"cyclist": {
@ -19446,8 +19363,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",
"integrity": "sha1-UvAQF4wqTBF6d1fP6UKtt9LaTKw=",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true
},
"esutils": {
@ -20079,15 +19996,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",
@ -20647,12 +20555,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",
@ -21534,12 +21436,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",
@ -23047,65 +22943,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",
@ -24904,12 +24741,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",
@ -25792,14 +25623,16 @@
"dev": true
},
"vue": {
"version": "3.0.11",
"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",
"integrity": "sha1-yC+VlMv03MhpJB1MjdPgjZqPS18=",
"version": "3.2.20",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.20.tgz",
"integrity": "sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==",
"dev": true,
"requires": {
"@vue/compiler-dom": "3.0.11",
"@vue/runtime-dom": "3.0.11",
"@vue/shared": "3.0.11"
"@vue/compiler-dom": "3.2.20",
"@vue/compiler-sfc": "3.2.20",
"@vue/runtime-dom": "3.2.20",
"@vue/server-renderer": "3.2.20",
"@vue/shared": "3.2.20"
}
},
"vue-eslint-parser": {

View File

@ -5,17 +5,25 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div>
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
<div class="row mb-2">
<profile-list
:values="values"
:type="type"
:editable="true"
@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">
<input
autocomplete="off"
type="text"
class="form-control"
id="searchText"
maxlength="25"
v-model="searchText"
@keyup="search()"
@input="search()"
@keyup.enter="addResult()"
/>
</div>
@ -32,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</button>
</div>
</div>
<div class="" v-if="searchResults">
<div v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item"
@ -44,24 +52,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</li>
</ul>
</div>
<profile-list
:values="values"
:type="type"
:editable="true"
@remove-value="removeValue($event)"
@update-values="this.$emit('update-values', this.values)"
>
</profile-list>
</div>
</template>
<script>
import { mapState } from 'vuex'
import RequestMixin from "@/mixins/request.mixin"
import ProfileList from "@/components/ProfileList";
import RequestMixin from '@/mixins/request.mixin'
import ProfileList from '@/components/ProfileList';
export default {
name: "AutoComplete",
name: 'AutoComplete',
mixins: [RequestMixin],
components: {
ProfileList,
@ -80,7 +80,7 @@ export default {
data() {
return {
iconUrl: this.apiUrl,
searchText: "",
searchText: '',
searchResults: [],
showErrorMessage: false,
};
@ -91,6 +91,7 @@ export default {
methods: {
addResult(result = false) {
if (!result) result = this.searchResults[0];
if (
this.values.map((item) => item[this.type].name).includes(result.name)
) {
@ -101,16 +102,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) => {
@ -120,7 +124,7 @@ export default {
return true;
}
});
this.$emit("update-values", newValues);
this.$emit('update-values', newValues);
},
},
};

View File

@ -5,24 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<ul>
<li v-for="(value, valueKey) in values" :key="value.id">
<div class="row m-1">
<div class="col">
<img
style="max-width: 64px"
<ul class="list-group list-group-flush">
<li
class="list-group-item"
v-for="(value, valueKey) in values"
:key="value.id"
>
<div class="row">
<div class="col d-flex align-items-center">
<div
class="list-icon me-1"
:style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
v-if="value[type].icon_url"
:src="iconUrl + value[type].icon_url"
:alt="`${value[type].name} Logo`"
/>
{{ value[type].name }}
<div>
{{ value[type].name }}
</div>
</div>
<div class="col">
<div v-if="type == 'skill'">
<div v-if="editable">
<select
v-if="editableValues[valueKey]"
class="form-select"
class="form-select form-select-sm"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
@ -41,28 +46,32 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div v-else-if="type == 'language'">
<div v-if="editable">
<div v-if="editable">
<select
v-if="editableValues[valueKey]"
class="form-select"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
>
<option
v-for="(value, key) in languagesSelection"
:value="key"
:key="key"
<select
v-if="editableValues[valueKey]"
class="form-select form-select-sm"
aria-label="Selektiere dein Level"
v-model="editableValues[valueKey].level"
@input="$emit('update-values', editableValues)"
>
{{ value }}
</option>
</select>
</div>
<option
v-for="(value, key) in languagesSelection"
:value="key"
:key="key"
>
{{ value }}
</option>
</select>
</div>
</div>
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
</div>
<div v-else-if="type == 'contacttype'">
<div v-if="editable">
<input class="form-control" v-model="editableValues[valueKey].content"/>
<input
class="form-control form-control-sm"
maxlength="200"
v-model="editableValues[valueKey].content"
/>
</div>
<div v-else>
<span v-if="value[type].name === 'E-Mail'">
@ -74,15 +83,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</div>
</div>
</div>
<div class="col">
<div class="col text-end">
<button
v-if="editable"
type="button"
class="btn btn-outline-danger"
class="btn btn-sm btn-light"
aria-label="Löschen"
@click="$emit('removeValue', value[type].name)"
>
<i class="bi-trash"></i>
<i class="text-danger bi bi-x-circle"></i>
</button>
</div>
</div>
@ -110,7 +119,7 @@ export default {
},
data() {
return {
iconUrl: this.apiUrl,
iconBaseUrl: this.apiUrl,
levelSelection: levelJson,
languagesSelection: languagesJson,
editableValues: this.values,
@ -123,3 +132,13 @@ export default {
},
};
</script>
<style scope>
.list-icon {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 32px;
width: 32px;
}
</style>

View File

@ -10,9 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{{ title }}
</h3>
<div class="card w-100">
<div class="card-body">
<slot></slot>
</div>
<slot name="card-body">
<div class="card-body">
<slot></slot>
</div>
</slot>
</div>
</div>
</template>

View File

@ -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
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase())
!searchResults.map((item) => item.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;

View File

@ -5,186 +5,216 @@ SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="container">
<h1>Profil bearbeiten</h1>
<form @submit.prevent="submitFormEdit()">
<div class="row">
<div class="col">
<input
type="radio"
id="false"
:value="false"
v-model="profile.visible"
class="mr-2"
/>
<label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
</div>
<div class="col">
<input
type="radio"
id="true"
:value="true"
v-model="profile.visible"
/>
<label for="true" class="m-2 fw-bold"> Öffentlich</label>
</div>
<div>
<div class="bg-wtf py-3 mb-4">
<div class="container">
<h3 class="text-white text-center mb-0">Profil bearbeiten</h3>
</div>
<div id="visibilityHelp" class="form-text">
Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
darauf zugreifen oder es in der Suche finden.
</div>
<div class="row">
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label fw-bold">Nickname:</label>
<input
type="text"
class="form-control"
id="nickname"
v-model="profile.nickname"
required
/>
</div>
<div class="container">
<form @submit.prevent="submitFormEdit()">
<Section title="Grunddaten">
<div class="mb-4">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
v-model="profile.visible"
id="visibility"
>
<label
class="form-check-label"
for="visibility">
Profil für angemeldete Benutzer sichtbar
</label>
</div>
</div>
<div class="row mb-4">
<div class="col-6 mb-3">
<label class="form-label">Nickname</label>
<input
type="text"
class="form-control"
id="nickname"
maxlength="25"
v-model="profile.nickname"
required
/>
</div>
<div class="col-6 mb-3">
<label class="form-label">
Pronomen
<i class="bi bi-info-circle" title="ToDo: Tooltip"></i>
</label>
<input
type="text"
class="form-control"
id="pronouns"
maxlength="25"
v-model="profile.pronouns"
/>
</div>
</div>
<label class="form-label">Anschrift</label>
<div class="row">
<div class="col-4">
<input
type="text"
class="form-control"
id="postcode"
maxlength="10"
placeholder="Postleitzahl"
v-model="profile.address.postcode"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
id="city"
maxlength="25"
placeholder="Ort"
v-model="profile.address.city"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
id="country"
maxlength="25"
placeholder="Land"
v-model="profile.address.country"
/>
</div>
</div>
</Section>
<Section title="Meine Fähigkeiten">
<template v-slot:card-body>
<auto-complete
type="skill"
:values="profile.skills"
@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"
@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"
@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"
v-model="profile.availability_text"
></textarea>
</Section>
<Section title="Meine Kontaktmöglichkeiten">
<template v-slot:card-body>
<auto-complete
type="contacttype"
:values="profile.contacts"
@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="col-6 col-xs-12">
<label for="pronouns" class="form-label fw-bold">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="profile.pronouns"
/>
<div for="pronouns" class="form-text">
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
<div class="savebar bg-white border-top py-3">
<div class="container d-flex align-items-center justify-content-end">
<div
class="text-danger"
v-if="showErrorMessage"
>
<i class="bi bi-bug"></i>
Beim Speichern ist ein Fehler aufgetreten.
</div>
<div
class="text-success"
v-if="showSuccessMessage"
>
<i class="bi bi-check-lg"></i>
Gespeichert
</div>
<button
class="btn btn-primary ms-3"
@click="submitFormEdit()"
>
Speichern
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xs-12">
<label for="freetext" class="form-label fw-bold">Vorstellung:</label>
<textarea
class="form-control"
id="freetext"
rows="3"
v-model="profile.freetext"
></textarea>
</div>
<div class="col-12 col-xs-12">
<label for="volunteerwork" class="form-label fw-bold"
>Ehrenamtliche Arbeit:</label
>
<textarea
class="form-control"
id="volunteerwork"
rows="3"
v-model="profile.volunteerwork"
></textarea>
</div>
</div>
<auto-complete
type="skill"
label="Deine Fähigkeiten"
:values="profile.skills"
@update-values="profile.skills = $event"
></auto-complete>
<auto-complete
type="language"
label="Deine Sprachen"
:values="profile.languages"
@update-values="profile.languages = $event"
></auto-complete>
<auto-complete
type="skill"
label="Ich suche"
:values="profile.searchtopics"
@update-values="profile.searchtopics = $event"
></auto-complete>
<Section title="Verfügbarkeit">
<div class="form-check mb-3">
<input
v-model="profile.availability_status"
class="form-check-input me-2"
type="checkbox"
id="availability_status">
<label class="form-check-label" for="availability_status">
Ich bin aktuell verfügbar
</label>
</div>
<div class="mb-3" v-if="profile.availability_status">
<label class="form-label">
Stunden pro Woche
</label>
<input
v-model="profile.availability_hours_per_week"
type="number"
class="form-control">
</div>
<label for="availability" class="form-label">
Anmerkungen
</label>
<textarea
class="form-control"
id="availability"
rows="3"
v-model="profile.availability_text"
></textarea>
</Section>
<auto-complete
type="contacttype"
label="Kontaktmöglichkeiten"
:values="profile.contacts"
@update-values="profile.contacts = $event"
></auto-complete>
<div class="row">
<div class="col">
<label for="pzl" class="form-label fw-bold">PLZ</label>
<input
type="text"
class="form-control"
id="pzl"
v-model="profile.address.postcode"
/>
</div>
<div class="col">
<label for="city" class="form-label fw-bold">Stadt</label>
<input
type="text"
class="form-control"
id="city"
v-model="profile.address.city"
/>
</div>
<div class="col">
<label for="country" class="form-label fw-bold">Land</label>
<input
type="text"
class="form-control"
id="country"
v-model="profile.address.country"
/>
</div>
</div>
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
Speichern
</button>
<div
class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Es ist Fehler aufgetreten
</div>
<div
class="alert alert-success mb-4 mt-4"
role="alert"
v-if="showSuccessMessage"
>
Deine Änderungen wurden erfolgreich gespeichert
</div>
</form>
</div>
</template>
<script>
import RequestMixin from "@/mixins/request.mixin"
@ -203,6 +233,7 @@ export default {
return {
showErrorMessage: false,
showSuccessMessage: false,
clearMessagesHandle: null,
profile: {
visible: false,
nickname: "",
@ -227,5 +258,40 @@ export default {
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>