Compare commits

..

No commits in common. "main" and "feature-search" have entirely different histories.

34 changed files with 23024 additions and 10685 deletions

View File

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

View File

@ -4,115 +4,16 @@
# SPDX-License-Identifier: AGPL-3.0-or-later # SPDX-License-Identifier: AGPL-3.0-or-later
kind: pipeline kind: pipeline
type: docker type: docker
name: qa name: default
trigger:
event:
- push
- pull_request
branch:
- main
steps: steps:
- name: reuse - name: reuse
image: fsfe/reuse:4.0.3-debian@sha256:20e70745bf4aa1d37f4ac054f4df045e4f7df7f4ec95d7abd2e263aa1323f399 image: fsfe/reuse:latest
- name: lint - name: docker-publish
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9 image: plugins/docker
commands:
- npm ci
- npm run lint -- --no-fix
- name: audit
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
commands:
- npm install -g better-npm-audit
- better-npm-audit audit --production --level=moderate
- name: docker-dry-run
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
settings: settings:
registry: git.wtf-eg.de registry: registry.wtf-eg.net
repo: git.wtf-eg.de/kompetenzinventar/frontend repo: registry.wtf-eg.net/ki-frontend
target: ki-frontend
dry_run: true
when:
event:
- pull_request
---
kind: pipeline
type: docker
name: build
trigger:
event:
- push
branch:
- main
depends_on:
- qa
steps:
- name: docker-publish
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
settings:
registry: git.wtf-eg.de
repo: git.wtf-eg.de/kompetenzinventar/frontend
target: ki-frontend
auto_tag: true
username:
from_secret: "docker_username"
password:
from_secret: "docker_password"
---
kind: pipeline
type: docker
name: deploy
trigger:
event:
- push
branch:
- main
depends_on:
- build
steps:
- name: deploy-dev
image: appleboy/drone-ssh:1.7.5@sha256:995677e073454912f26d4c0fdd2f9df2e1f5a30d6603d3f2ece667311b6babb3
settings:
host:
- dev01.wtf-eg.net
username: drone_deployment
key:
from_secret: "dev01_deployment_key"
command_timeout: 2m
script:
- echo "Executing forced command..."
---
kind: pipeline
type: docker
name: tag-release
trigger:
event:
- tag
steps:
- name: reuse
image: fsfe/reuse:4.0.3-debian@sha256:20e70745bf4aa1d37f4ac054f4df045e4f7df7f4ec95d7abd2e263aa1323f399
- name: lint
image: node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9
commands:
- npm ci
- npm run lint -- --no-fix
- name: docker-publish
image: plugins/docker:20.18.4@sha256:a8d3d86853c721492213264815f1d00d3ed13f42f5c1855a02f47fa4d5f1e042
settings:
registry: git.wtf-eg.de
repo: git.wtf-eg.de/kompetenzinventar/frontend
target: ki-frontend target: ki-frontend
auto_tag: true auto_tag: true
username: username:

View File

@ -8,13 +8,10 @@ module.exports = {
'eslint:recommended' 'eslint:recommended'
], ],
parserOptions: { parserOptions: {
parser: '@babel/eslint-parser' parser: 'babel-eslint'
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
'vue/multi-word-component-names': 'off',
'vue/no-useless-template-attributes': 'off',
'vue/no-reserved-component-names': 'off'
} }
} }

28
.reuse/dep5 Normal file
View File

@ -0,0 +1,28 @@
Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
Upstream-Name: ki-frontend
Upstream-Contact: Scammo <kontakt@samuelbrinkmann.de>
Source: https://git.wtf-eg.de/kompetenzinventar/ki-frontend
Files: package.json package-lock.json
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: AGPL-3.0-or-later
Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: AGPL-3.0-or-later
Files: src/assets/img/wtf*
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: LicenseRef-WTF
Files: src/assets/language_level.json src/assets/skill_level.json
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: AGPL-3.0-or-later
Files: public/img/bootstrap-icons-1.5.0/*
Copyright: Copyright (c) 2019-2020 The Bootstrap Authors
License: MIT
Files: public/fonts/Lato*
Copyright: 2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)
License: OFL-1.1-RFN

View File

@ -2,27 +2,14 @@
# #
# SPDX-License-Identifier: AGPL-3.0-or-later # SPDX-License-Identifier: AGPL-3.0-or-later
FROM node:20.18.0-alpine@sha256:c13b26e7e602ef2f1074aef304ce6e9b7dd284c419b35d89fcf3cc8e44a8def9 as builder FROM node:14-alpine as builder
COPY package.json package-lock.json ./ COPY . ./
RUN npm install
COPY .eslintrc.js .
COPY babel.config.js .
COPY public public
COPY src src
RUN npm ci && npm run build RUN npm ci && npm run build
FROM nginx:1.27-alpine@sha256:2140dad235c130ac861018a4e13a6bc8aea3a35f3a40e20c1b060d51a7efd250 as ki-frontend FROM nginx as ki-frontend
LABEL org.opencontainers.image.source=https://git.wtf-eg.de/kompetenzinventar/ki-frontend.git
LABEL org.opencontainers.image.url=https://git.wtf-eg.de/kompetenzinventar/ki-frontend
LABEL org.opencontainers.image.documentation=https://git.wtf-eg.de/kompetenzinventar/ki-frontend#docker
LABEL org.opencontainers.image.vendor="WTF Kooperative eG"
WORKDIR /usr/share/nginx/html
COPY --from=builder /dist/ /usr/share/nginx/html/
COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf COPY etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /dist .

View File

@ -41,14 +41,6 @@ Folgende Kanäle gibt es für die Kommunikation über das Kompetenzinventar:
npm ci npm ci
``` ```
### Pre requirements
* Node 20
* Wenn du eine andere node version installiert hast, kannst du [nvm](https://github.com/nvm-sh/nvm) benutzen um schnell zwischen node version zu wechseln
* NPM
* (KI-backend)[https://git.wtf-eg.de/kompetenzinventar/ki-backend] muss lokal laufen
### Konfigurationsdatei anpassen ### Konfigurationsdatei anpassen
``` ```
@ -56,6 +48,7 @@ cp public/config.js.dev public/config.js
vi public/config.js vi public/config.js
``` ```
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
npm run serve npm run serve

View File

@ -1,40 +0,0 @@
version = 1
SPDX-PackageName = "ki-frontend"
SPDX-PackageSupplier = "Scammo <kontakt@samuelbrinkmann.de>"
SPDX-PackageDownloadLocation = "https://git.wtf-eg.de/kompetenzinventar/ki-frontend"
[[annotations]]
path = ["package.json", "package-lock.json", "renovate.json"]
precedence = "aggregate"
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
SPDX-License-Identifier = "AGPL-3.0-or-later"
[[annotations]]
path = [".browserslistrc", ".dockerignore", ".eslintrc.js", ".gitignore", "REUSE.toml"]
precedence = "aggregate"
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
SPDX-License-Identifier = "AGPL-3.0-or-later"
[[annotations]]
path = "src/assets/img/wtf**"
precedence = "aggregate"
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
SPDX-License-Identifier = "LicenseRef-WTF"
[[annotations]]
path = ["src/assets/language_level.json", "src/assets/skill_level.json"]
precedence = "aggregate"
SPDX-FileCopyrightText = "WTF Kooperative eG <https://wtf-eg.de/>"
SPDX-License-Identifier = "AGPL-3.0-or-later"
[[annotations]]
path = "public/img/bootstrap-icons-1.5.0/**"
precedence = "aggregate"
SPDX-FileCopyrightText = "Copyright (c) 2019-2020 The Bootstrap Authors"
SPDX-License-Identifier = "MIT"
[[annotations]]
path = "public/fonts/Lato**"
precedence = "aggregate"
SPDX-FileCopyrightText = "2010-2015, Łukasz Dziedzic (dziedzic@typoland.com)"
SPDX-License-Identifier = "OFL-1.1-RFN"

View File

@ -9,24 +9,10 @@ server {
#access_log /var/log/nginx/host.access.log main; #access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/html;
# routes without dots serve the index.html without caching
location / { location / {
add_header Cache-Control "no-cache"; root /usr/share/nginx/html;
try_files $uri $uri/index.html /index.html; index index.html index.htm;
} try_files $uri $uri/ /index.html;
# static js and css files that get replaced instead of updated
location ~ \.(js|css) {
add_header Cache-Control "public, max-age=31536000, immutable";
try_files $uri =404;
}
# cache other static files for 30 days
location ~ \.(?!html) {
add_header Cache-Control "public, max-age=2592000";
try_files $uri =404;
} }
#error_page 404 /404.html; #error_page 404 /404.html;

31854
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,21 +0,0 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:best-practices",
"group:linters",
"group:test",
"npm:unpublishSafe",
":disableDependencyDashboard",
":maintainLockFilesWeekly",
":pinAllExceptPeerDependencies",
":separateMultipleMajorReleases"
],
"packageRules": [
{
"matchPackageNames": [
"node"
],
"allowedVersions": "/^[1-9][02468]\\./"
}
]
}

View File

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

View File

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

View File

@ -5,46 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <template>
<profile-list <div>
:values="values" <label for="searchText" class="form-label fw-bold">{{ label }}</label>
:type="type" <div class="row mb-2">
:editable="true" <div class="col">
:show-secondary="showSecondary"
@remove-value="removeValue($event)"
@update-values="this.$emit('update-values', this.values)"
>
</profile-list>
<div v-bind="$attrs" class="card-body bg-white">
<div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
<div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
</div>
<div class="col-12 col-md-6">
<input <input
autocomplete="off" autocomplete="off"
type="text" type="text"
class="form-control form-control-sm" class="form-control"
id="searchText" id="searchText"
:maxlength="maxlength"
:placeholder="placeholder"
v-model="searchText" v-model="searchText"
@input="search()" @keyup="search()"
@keyup.enter="addResult()" @keyup.enter="addResult()"
/> />
<div v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item bg-white"
v-for="result in searchResults"
:key="result.id"
@click="addResult(result)"
>
{{ result.name }}
</li>
</ul>
</div> </div>
</div> <div class="col">
<div class="col-md-2">
<button <button
v-if="searchText != ''" v-if="searchText != ''"
type="button" type="button"
@ -57,16 +32,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</button> </button>
</div> </div>
</div> </div>
<div class="" v-if="searchResults">
<ul class="list-group">
<li
class="list-group-item"
v-for="result in searchResults"
:key="result.id"
@click="addResult(result)"
>
{{ result.name }}
</li>
</ul>
</div>
<profile-list
:values="values"
:type="type"
:editable="true"
@remove-value="removeValue($event)"
@update-values="this.$emit('update-values', this.values)"
>
</profile-list>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import RequestMixin from '@/mixins/request.mixin' import RequestMixin from "@/mixins/request.mixin"
import ProfileList from '@/components/ProfileList'; import ProfileList from "@/components/ProfileList";
export default { export default {
name: 'AutoComplete', name: "AutoComplete",
mixins: [RequestMixin], mixins: [RequestMixin],
components: { components: {
ProfileList, ProfileList,
@ -81,33 +76,21 @@ export default {
values: { values: {
type: Array, type: Array,
}, },
showSecondary: {
type: Boolean,
default: true,
},
placeholder: {
type: String,
default: "",
},
}, },
data() { data() {
return { return {
iconUrl: this.apiUrl, iconUrl: this.apiUrl,
searchText: '', searchText: "",
searchResults: [], searchResults: [],
showErrorMessage: false, showErrorMessage: false,
}; };
}, },
computed: { computed: {
...mapState(['currentUserId']), ...mapState(['currentUserId'])
maxlength() {
return this.type === 'skill' ? 50 : 25
}
}, },
methods: { methods: {
addResult(result = false) { addResult(result = false) {
if (!result) result = this.searchResults[0]; if (!result) result = this.searchResults[0];
if ( if (
this.values.map((item) => item[this.type].name).includes(result.name) this.values.map((item) => item[this.type].name).includes(result.name)
) { ) {
@ -118,19 +101,16 @@ export default {
let newValue = { let newValue = {
profile_id: this.currentUserId, profile_id: this.currentUserId,
}; };
if (this.type != "contacttype") {
if (this.type != 'contacttype') {
newValue.level = 1; newValue.level = 1;
} else { } else {
newValue.content = ''; newValue.content = "";
} }
newValue[this.type] = result; newValue[this.type] = result;
changeValues.unshift(newValue); changeValues.unshift(newValue);
this.searchText = "";
this.searchText = '';
this.searchResults = []; this.searchResults = [];
this.$emit('update-values', changeValues); this.$emit("update-values", changeValues);
}, },
removeValue(valueName) { removeValue(valueName) {
const newValues = this.values.filter((value) => { const newValues = this.values.filter((value) => {
@ -140,7 +120,7 @@ export default {
return true; return true;
} }
}); });
this.$emit('update-values', newValues); this.$emit("update-values", newValues);
}, },
}, },
}; };

View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="fw-bold text-white mb-2">Kompetenzinventar</div> <div class="fw-bold text-white mb-2">Kompetenzinventar</div>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li> <li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
<li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</a></li> <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem melden</a></li>
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -1,50 +0,0 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<ul class="pagination">
<li
class="page-item"
:class="{ active: page === current }"
v-for="page in pages"
:key="page"
>
<span
class="page-link pointer"
:class="{ 'bg-white': page !== current }"
@click="onPageClicked(page)"
>
{{ page }}
</span>
</li>
</ul>
</template>
<script>
export default {
name: 'Paginator',
props: {
page: Number,
current: Number,
pages: Number
},
methods: {
onPageClicked(page) {
if (page == this.current) {
return
}
this.$emit('page', page)
}
}
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>

View File

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

View File

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
class="text-decoration-none d-flex" class="text-decoration-none d-flex"
:to="{ path: `/s/profile/${profile.user_id}` }" :to="{ path: `/s/profile/${profile.user_id}` }"
> >
<div class="card w-100 bg-white"> <div class="card w-100">
<div class="card-body d-flex"> <div class="card-body d-flex">
<div class="d-flex align-items-center justify-content-center me-3"> <div class="d-flex align-items-center justify-content-center me-3">
<Avatar :name="profile.nickname"/> <Avatar :name="profile.nickname"/>

View File

@ -1,81 +0,0 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="skill rounded me-2">
<div class="skill__left p-2">
<div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
</div>
<div class="skill__right d-flex align-items-center rounded-end px-2">
<div>
<div class="skill__name fw-bold me-1">
{{ profileSkill.skill.name }}
</div>
<small class="skill__level" v-if="showLevel" :title="levelTitle">
{{ level }}
</small>
</div>
</div>
</div>
</template>
<script>
import levels from '@/assets/skill_level.json';
export default {
props: {
profileSkill: Object,
showLevel: {
type: Boolean,
default: false
}
},
data() {
return {
levels
}
},
computed: {
iconUrl() {
return `url("${window.ki.apiUrl}/${this.profileSkill.skill.icon_url}")`
},
level() {
return levels[this.profileSkill.level].short
},
levelTitle() {
return levels[this.profileSkill.level].long
}
}
}
</script>
<style>
.skill {
align-items: stretch;
border: 1px solid #acacac;
display: inline-flex;
line-height: 1;
}
.skill__icon {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 32px;
width: 32px;
}
.skill__right {
background-color: #edefeb;
color: #202020;
}
.skill__name,
.skill__level {
display: inline-block;
white-space: nowrap;
}
</style>

View File

@ -1,39 +0,0 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="container text-center py-5">
<template v-if="notFound">
<div v-if="isOwnProfile">
<div class="fs-1 lh-1">nullptr :/</div>
<div class="fs-3 mb-4">Du hast noch kein Profil</div>
<router-link :to="{ name: 'ProfileEdit' }" class="btn btn-primary" >
Jetzt Profil erstellen
</router-link>
</div>
<div v-else>
<div class="fs-1 mb-3">nullptr :/</div>
<div class="mb-3">
Profil nicht gefunden
</div>
</div>
</template>
<template v-else>
<div class="fs-1 mb-3">Kernel panic :/</div>
Das Profil konnte nicht geladen werden
</template>
</div>
</template>
<script>
export default {
props: {
isOwnProfile: Boolean,
notFound: Boolean
}
}
</script>

View File

@ -1,39 +0,0 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="contact rounded d-inline-flex align-items-center">
<div class="contact__left px-2">
{{ profileContact.contacttype.name }}
</div>
<div class="contact__right d-flex align-items-center rounded-end px-2">
{{ profileContact.content }}
</div>
</div>
</template>
<script>
export default {
props: {
profileContact: Object,
}
}
</script>
<style>
.contact {
align-items: stretch;
border: 1px solid #acacac;
display: inline-flex;
}
.contact__right {
background-color: #edefeb;
color: #202020;
font-weight: bold;
height: 32px;
}
</style>

View File

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

View File

@ -1,69 +0,0 @@
<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<div class="language rounded me-2">
<div class="language__left px-2">
<div class="language__icon" :style="{ backgroundImage: iconUrl }"></div>
</div>
<div class="language__right d-flex align-items-center rounded-end px-2">
<div>
<div class="language__name me-1">{{ profileLanguage.language.name }}</div>
<small class="language__level">{{ level }}</small>
</div>
</div>
</div>
</template>
<script>
import levels from '@/assets/language_level.json';
export default {
props: {
profileLanguage: Object,
},
data() {
return {
levels
}
},
computed: {
iconUrl() {
return `url("${window.ki.apiUrl}/${this.profileLanguage.language.icon_url}")`
},
level() {
return levels[this.profileLanguage.level]
}
}
}
</script>
<style>
.language {
align-items: stretch;
border: 1px solid #acacac;
display: inline-flex;
}
.language__icon {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 32px;
width: 32px;
}
.language__right {
background-color: #edefeb;
color: #202020;
}
.language__name {
display: inline-block;
font-weight: bold;
white-space: nowrap;
}
</style>

View File

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

View File

@ -6,15 +6,12 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from '@/store' import store from '@/store'
import VTooltipPlugin from 'v-tooltip'
import 'v-tooltip/dist/v-tooltip.css'
import 'bootstrap-icons/font/bootstrap-icons.css' import 'bootstrap-icons/font/bootstrap-icons.css'
import './assets/global.scss' import './assets/global.scss'
const app = createApp(App) const app = createApp(App)
app.use(VTooltipPlugin)
app.use(router) app.use(router)
app.use(store) app.use(store)

View File

@ -37,11 +37,6 @@ export default {
} }
}, },
async search() { async search() {
if (!this.searchText) {
this.searchResults = []
return
}
try { try {
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, { const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
headers: { headers: {
@ -57,16 +52,15 @@ export default {
} }
const responseData = await response.json() const responseData = await response.json()
const searchResults = responseData[`${this.type}s`]; this.searchResults = responseData[`${this.type}s`];
if ( if (
!searchResults.map((item) => item.name.toLowerCase()) !this.values
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase()) .includes(this.searchText.toLowerCase())
) { ) {
searchResults.unshift({ name: this.searchText }); this.searchResults.unshift({ name: this.searchText });
} }
this.searchResults = searchResults
} catch (error) { } catch (error) {
console.error(); console.error();
this.showErrorMessage = true; this.showErrorMessage = true;
@ -95,11 +89,10 @@ export default {
console.error(error); console.error(error);
} }
}, },
async submitFormEdit(isProfileVisible) { async submitFormEdit() {
this.showErrorMessage = false this.showErrorMessage = false
this.showSuccessMessage = false this.showSuccessMessage = false
const userId = store.state.currentUserId const userId = store.state.currentUserId
this.profile.visible = isProfileVisible;
try { try {
const body = JSON.stringify(this.profile) const body = JSON.stringify(this.profile)

View File

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

View File

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

View File

@ -1,120 +0,0 @@
// 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')
}
}
}

View File

@ -12,10 +12,8 @@ export default {
profiles: [], profiles: [],
error: false, error: false,
errorMessage: '', errorMessage: '',
pages: 1,
query: { query: {
search: '', search: ''
page: 1
} }
} }
}, },
@ -42,17 +40,11 @@ export default {
state.errorMessage = errorMessage state.errorMessage = errorMessage
}, },
setQuerySearch(state, search) { setQuerySearch(state, search) {
state.query = {...state.query, search} state.query.search = search
},
setPages(state, pages) {
state.pages = pages
},
setQueryPage(state, page) {
state.query = {...state.query, page}
} }
}, },
actions: { actions: {
async search({state, commit, rootState, dispatch}) { async search({state, commit, rootState}) {
if (state.searching) { if (state.searching) {
return return
} }
@ -73,8 +65,6 @@ export default {
url.searchParams.append('search', state.query.search) url.searchParams.append('search', state.query.search)
} }
url.searchParams.append('page', state.query.page)
const headers = { const headers = {
Authorization: `Bearer ${rootState.token}`, Authorization: `Bearer ${rootState.token}`,
} }
@ -91,19 +81,8 @@ export default {
return return
} }
console.log(response.ok)
console.log(response.status)
console.log(state.query.page)
clearTimeout(timeoutId) clearTimeout(timeoutId)
if (!response.ok && response.status === 404 && state.query.page != 1) {
commit('setQueryPage', 1)
commit('setSearching', false)
await dispatch('search')
return
}
if (!response.ok) { if (!response.ok) {
commit('setError', true) commit('setError', true)
commit('clearProfiles') commit('clearProfiles')
@ -114,7 +93,6 @@ export default {
const responseData = await response.json() const responseData = await response.json()
commit('setProfiles', responseData.profiles) commit('setProfiles', responseData.profiles)
commit('setPages', responseData.pages)
commit('setSearching', false) commit('setSearching', false)
commit('hideSpinner') commit('hideSpinner')
} }

View File

@ -23,7 +23,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
id="exampleInputusername1" id="exampleInputusername1"
v-model="username" v-model="username"
required required
autofocus
/> />
</div> </div>
<div class="mb-3"> <div class="mb-3">

View File

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
class="form-control" class="form-control"
id="searchText" id="searchText"
v-model="searchText" v-model="searchText"
placeholder="Nick, Name, Fähigkeit, Sprache" placeholder="Nick, Fähigkeit, Sprache"
ref="searchTextInput" ref="searchTextInput"
/> />
</div> </div>
@ -53,26 +53,12 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<p v-if="searchText !== ''">Probiere eine andere Suche.</p> <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
</div> </div>
<div v-else-if="showResults"> <div v-else-if="showResults">
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
<SearchResult <SearchResult
v-for="profile in profiles" v-for="profile in profiles"
:key="profile.user_id" :key="profile.user_id"
class="mb-3" class="mb-3"
:profile="profile" :profile="profile"
/> />
<div class="d-flex justify-content-around">
<Paginator
:pages="pages"
:current="currentPage"
@page="handlePageSelected"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -81,29 +67,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Paginator from '@/components/Paginator'
import SearchResult from '@/components/SearchResult' import SearchResult from '@/components/SearchResult'
import Spinner from '@/components/Spinner' import Spinner from '@/components/Spinner'
export default { export default {
name: 'Search', name: 'Search',
components: { components: {
Paginator,
SearchResult, SearchResult,
Spinner, Spinner,
}, },
data() {
return {
textChanged: false
}
},
computed: { computed: {
...mapState({ ...mapState({
searching: state => state.search.searching, searching: state => state.search.searching,
profiles: state => state.search.profiles, profiles: state => state.search.profiles,
error: state => state.search.error, error: state => state.search.error,
showSpinner: state => state.search.showSpinner, showSpinner: state => state.search.showSpinner,
pages: state => state.search.pages,
}), }),
searchText: { searchText: {
get() { get() {
@ -111,15 +89,6 @@ export default {
}, },
set(text) { set(text) {
this.$store.commit('search/setQuerySearch', text) this.$store.commit('search/setQuerySearch', text)
this.textChanged = true
}
},
currentPage: {
get() {
return this.$store.state.search.query.page
},
set(page) {
this.$store.commit('search/setQueryPage', page)
} }
}, },
showNoResults() { showNoResults() {
@ -131,46 +100,24 @@ export default {
}, },
watch: { watch: {
searching(value) { searching(value) {
if (!value) { if (value) {
if (this.$refs.searchTextInput) { if (this.$refs.searchTextInput) {
this.focusSearchText() this.$refs.searchTextInput.focus()
} }
} }
} }
}, },
methods: { methods: {
handleSubmit() { handleSubmit() {
if (this.textChanged === true) {
this.$store.commit('search/setQueryPage', 1)
}
this.pushState()
this.$store.dispatch('search/search') this.$store.dispatch('search/search')
},
focusSearchText() {
this.$nextTick(() => {
this.$refs.searchTextInput.focus()
})
},
handlePageSelected(page) {
this.currentPage = page
this.pushState()
this.$store.dispatch('search/search')
},
pushState() {
this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
} }
}, },
created() { created() {
if (this.$route.query.query) { if (this.$route.query.query !== undefined) {
this.searchText = this.$route.query.query this.searchText = this.$route.query.query
this.$store.commit('search/clearProfiles') this.$store.commit('search/clearProfiles')
} }
if (this.$route.query.page) {
this.currentPage = parseInt(this.$route.query.page, 10)
this.$store.commit('search/clearProfiles')
}
this.$store.dispatch('search/search') this.$store.dispatch('search/search')
} }
}; };

View File

@ -5,249 +5,190 @@ SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <template>
<div>
<div class="bg-wtf py-3 mb-4">
<div class="container"> <div class="container">
<h3 class="text-white text-center mb-0">Profil bearbeiten</h3> <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> </div>
<div class="container"> <div id="visibilityHelp" class="form-text">
<form @submit.prevent="submitFormEdit(false)"> Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
<Section title="Grunddaten"> darauf zugreifen oder es in der Suche finden.
<div class="row mb-4"> </div>
<div class="col-12 col-md-4 mb-3 mb-md-0"> <div class="row">
<label class="form-label">Nickname</label> <div class="col-6 col-xs-12">
<label for="nickname" class="form-label fw-bold">Nickname:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
id="nickname" id="nickname"
maxlength="25"
v-model="profile.nickname" v-model="profile.nickname"
required required
/> />
</div> </div>
<div class="col-12 col-md-4 mb-3 mb-md-0"> <div class="col-6 col-xs-12">
<label class="form-label">Klarname (optional)</label> <label for="pronouns" class="form-label fw-bold">Pronomen:</label>
<input
type="text"
class="form-control"
id="realname"
maxlength="25"
v-model="profile.address.name"
/>
</div>
<div class="col-12 col-md-4">
<label class="form-label">
Pronomen
<i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>
</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
id="pronouns" id="pronouns"
maxlength="25"
v-model="profile.pronouns" v-model="profile.pronouns"
/> />
<div for="pronouns" class="form-text">
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
</div>
</div> </div>
</div> </div>
<label class="form-label">Anschrift</label>
<div class="row"> <div class="row">
<div class="col-12 col-md-4 mb-3 mb-md-0"> <div class="col-12 col-xs-12">
<input <label for="freetext" class="form-label fw-bold">Vorstellung:</label>
type="text" <textarea
class="form-control" class="form-control"
id="postcode" id="freetext"
maxlength="10" rows="3"
placeholder="Postleitzahl" v-model="profile.freetext"
v-model="profile.address.postcode" ></textarea>
/>
</div> </div>
<div class="col-12 col-md-4 mb-3 mb-md-0"> <div class="col-12 col-xs-12">
<input <label for="volunteerwork" class="form-label fw-bold"
type="text" >Ehrenamtliche Arbeit:</label
>
<textarea
class="form-control" class="form-control"
id="city" id="volunteerwork"
maxlength="25" rows="3"
placeholder="Ort" v-model="profile.volunteerwork"
v-model="profile.address.city" ></textarea>
/>
</div>
<div class="col-12 col-md-4">
<input
type="text"
class="form-control"
id="country"
maxlength="25"
placeholder="Land"
v-model="profile.address.country"
/>
</div> </div>
</div> </div>
</Section>
<Section title="Meine Fähigkeiten">
<template v-slot:card-body>
<auto-complete <auto-complete
type="skill" type="skill"
label="Deine Fähigkeiten"
:values="profile.skills" :values="profile.skills"
placeholder="z.B. Python, JavaScript, Linux"
@update-values="profile.skills = $event" @update-values="profile.skills = $event"
></auto-complete> ></auto-complete>
</template>
</Section>
<Section title="Meine Sprachkenntnisse">
<template v-slot:card-body>
<auto-complete <auto-complete
type="language" type="language"
label="Deine Sprachen"
:values="profile.languages" :values="profile.languages"
placeholder="z.B. Deutsch, Englisch, Französisch"
@update-values="profile.languages = $event" @update-values="profile.languages = $event"
></auto-complete> ></auto-complete>
</template>
</Section>
<Section title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
<template v-slot:card-body>
<auto-complete <auto-complete
type="skill" type="skill"
label="Ich suche für mich Projekte/Aufträge in folgenden Bereichen" label="Ich suche"
:values="profile.searchtopics" :values="profile.searchtopics"
:showSecondary="false"
placeholder="z.B. Python, JavaScript, Linux"
@update-values="profile.searchtopics = $event" @update-values="profile.searchtopics = $event"
></auto-complete> ></auto-complete>
</template>
</Section>
<Section title="Verfügbarkeit"> <div class="col-12 col-xs-12">
<div class="form-check mb-3"> <label for="availability" class="form-label fw-bold"
<input >Ich bin für Anfragen verfügbar:</label
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 <textarea
class="form-control" class="form-control"
id="availability" id="availability"
rows="3" rows="3"
maxlength="4000" v-model="profile.availability"
v-model="profile.availability_text"
></textarea> ></textarea>
</Section> </div>
<Section title="Meine Kontaktmöglichkeiten">
<template v-slot:card-body>
<auto-complete <auto-complete
type="contacttype" type="contacttype"
label="Kontaktmöglichkeiten"
:values="profile.contacts" :values="profile.contacts"
placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
@update-values="profile.contacts = $event" @update-values="profile.contacts = $event"
></auto-complete> ></auto-complete>
</template>
</Section>
<Section title="Sonstiges"> <div class="row">
<div class="mb-3 bg-white"> <div class="col">
<label class="form-label">Über mich</label> <label for="pzl" class="form-label fw-bold">PLZ</label>
<textarea <input
type="text"
class="form-control" class="form-control"
rows="3" id="pzl"
maxlength="4000" v-model="profile.address.postcode"
v-model="profile.freetext"
/> />
</div> </div>
<div> <div class="col">
<label class="form-label">Ehrenamtliche Arbeit</label> <label for="city" class="form-label fw-bold">Stadt</label>
<textarea <input
type="text"
class="form-control" class="form-control"
rows="3" id="city"
maxlength="4000" v-model="profile.address.city"
v-model="profile.volunteerwork"
/> />
</div> </div>
</Section> <div class="col">
<input type="submit" class="d-none"> <label for="country" class="form-label fw-bold">Land</label>
</form> <input
type="text"
class="form-control"
id="country"
v-model="profile.address.country"
/>
</div> </div>
<div class="savebar bg-white border-top py-3"> </div>
<div class="container d-flex align-items-center justify-content-end">
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
Speichern
</button>
<div <div
class="text-danger" class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage" v-if="showErrorMessage"
> >
<i class="bi bi-bug"></i> Es ist Fehler aufgetreten
Beim Speichern ist ein Fehler aufgetreten.
</div> </div>
<div <div
class="text-success" class="alert alert-success mb-4 mt-4"
role="alert"
v-if="showSuccessMessage" v-if="showSuccessMessage"
> >
<i class="bi bi-check-lg"></i> Deine Änderungen wurden erfolgreich gespeichert
Gespeichert
</div>
<button
class="btn btn-secondary ms-3"
@click="submitFormEdit(false)"
>
Entwurf Speichern
</button>
<button
class="btn btn-primary ms-3"
@click="submitFormEdit(true)"
>
Speichern und Veröffentlichen
</button>
</div>
</div> </div>
</form>
</div> </div>
</template> </template>
<script> <script>
import RequestMixin from "@/mixins/request.mixin" import RequestMixin from "@/mixins/request.mixin"
import AutoComplete from "@/components/AutoComplete"; import AutoComplete from "@/components/AutoComplete";
import Section from '@/components/profile/Section'
export default { export default {
name: "profileEdit", name: "profileEdit",
mixins: [RequestMixin], mixins: [RequestMixin],
components: { components: {
AutoComplete, AutoComplete,
Section,
}, },
data() { data() {
return { return {
showErrorMessage: false, showErrorMessage: false,
showSuccessMessage: false, showSuccessMessage: false,
clearMessagesHandle: null,
profile: { profile: {
visible: false, visible: false,
nickname: "", nickname: "",
pronouns: "", pronouns: "",
volunteerwork: "", volunteerwork: "",
freetext: "", freetext: "",
availability_status: false, availability: "",
availability_hours_per_week: null,
availability_text: "",
address: { address: {
postcode: "", postcode: "",
city: "", city: "",
@ -258,49 +199,10 @@ export default {
searchtopics: [], searchtopics: [],
contacts: [], contacts: [],
}, },
pronounsTooltip: {
content: 'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
html: true
}
}; };
}, },
async created() { async created() {
await this.initEditPage(); await this.initEditPage();
}, },
unmounted() {
this.cancelClearMessages()
},
methods: {
cancelClearMessages() {
if (this.clearMessagesHandle) {
window.clearTimeout(this.clearMessagesHandle)
}
},
scheduleClearMessages() {
this.cancelClearMessages()
this.clearMessagesHandle = window.setTimeout(() => {
this.showErrorMessage = false
this.showSuccessMessage = false
}, 2500)
}
},
watch: {
showErrorMessage(curr) {
if (curr) {
this.scheduleClearMessages()
}
},
showSuccessMessage(curr) {
if (curr) {
this.scheduleClearMessages()
}
}
}
}; };
</script> </script>
<style scoped>
.savebar {
bottom: 0;
position: sticky;
}
</style>

View File

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