.dockerignore

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

.drone.yml

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

.eslintrc.js

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

.reuse/dep5

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

Dockerfile

@@ -2,27 +2,14 @@
 #
 # 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
 
 
-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 --from=builder /dist .

README.md

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

REUSE.toml

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

etc/nginx/conf.d/default.conf

@@ -9,24 +9,10 @@ server {
 
     #access_log  /var/log/nginx/host.access.log  main;
 
-    root   /usr/share/nginx/html;
-
-    # routes without dots serve the index.html without caching
     location / {
-        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;

package.json

@@ -1,31 +1,27 @@
 {
   "name": "@wtf/ki-frontend",
-  "version": "1.1.0",
+  "version": "0.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "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"
   }
 }

renovate.json

@@ -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]\\./"
-    }
-  ]
-}

src/assets/language_level.json

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

src/assets/skill_level.json

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

src/components/AutoComplete.vue

@@ -5,46 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <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
           autocomplete="off"
           type="text"
-          class="form-control form-control-sm"
+          class="form-control"
           id="searchText"
-          :maxlength="maxlength"
-          :placeholder="placeholder"
           v-model="searchText"
-          @input="search()"
+          @keyup="search()"
           @keyup.enter="addResult()"
         />
-        <div v-if="searchResults">
-          <ul class="list-group">
-            <li
-              class="list-group-item bg-white"
-              v-for="result in searchResults"
-              :key="result.id"
-              @click="addResult(result)"
-            >
-              {{ result.name }}
-            </li>
-          </ul>
-        </div>
       </div>
-      <div class="col-md-2">
+      <div class="col">
         <button
           v-if="searchText != ''"
           type="button"
@@ -57,16 +32,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </button>
       </div>
     </div>
+    <div class="" v-if="searchResults">
+      <ul class="list-group">
+        <li
+          class="list-group-item"
+          v-for="result in searchResults"
+          :key="result.id"
+          @click="addResult(result)"
+        >
+          {{ result.name }}
+        </li>
+      </ul>
+    </div>
+    <profile-list
+      :values="values"
+      :type="type"
+      :editable="true"
+      @remove-value="removeValue($event)"
+      @update-values="this.$emit('update-values', this.values)"
+    >
+    </profile-list>
   </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 
-import RequestMixin from '@/mixins/request.mixin'
+import RequestMixin from "@/mixins/request.mixin"
-import ProfileList from '@/components/ProfileList';
+import ProfileList from "@/components/ProfileList";
 
 export default {
-  name: 'AutoComplete',
+  name: "AutoComplete",
   mixins: [RequestMixin],
   components: {
     ProfileList,
@@ -81,33 +76,21 @@ export default {
     values: {
       type: Array,
     },
-    showSecondary: {
-      type: Boolean,
-      default: true,
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
   },
   data() {
     return {
       iconUrl: this.apiUrl,
-      searchText: '',
+      searchText: "",
       searchResults: [],
       showErrorMessage: false,
     };
   },
   computed: {
-    ...mapState(['currentUserId']),
+    ...mapState(['currentUserId'])
-    maxlength() {
-      return this.type === 'skill' ? 50 : 25
-    }
   },
   methods: {
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
-
       if (
         this.values.map((item) => item[this.type].name).includes(result.name)
       ) {
@@ -118,19 +101,16 @@ 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) => {
@@ -140,7 +120,7 @@ export default {
           return true;
         }
       });
-      this.$emit('update-values', newValues);
+      this.$emit("update-values", newValues);
     },
   },
 };

src/components/Footer.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <div class="fw-bold text-white mb-2">Kompetenzinventar</div>
           <ul class="list-unstyled">
             <li><a href="https://git.wtf-eg.de/kompetenzinventar">Quellcode</a></li>
-            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-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>
         </div>
       </div>

src/components/Paginator.vue

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

src/components/ProfileList.vue

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

src/components/SearchResult.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     class="text-decoration-none d-flex"
     :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="d-flex align-items-center justify-content-center me-3">
           <Avatar :name="profile.nickname"/>

src/components/Skill.vue

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

src/components/ViewError.vue

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

src/components/profile/Contact.vue

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

src/components/profile/Header.vue

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

src/components/profile/Language.vue

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

src/components/profile/Section.vue

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

src/main.js

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

src/mixins/request.mixin.js

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

src/router/index.js

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

src/store/index.js

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

src/store/profile.js

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

src/store/search.js

@@ -12,10 +12,8 @@ export default {
       profiles: [],
       error: false,
       errorMessage: '',
-      pages: 1,
       query: {
-        search: '',
+        search: ''
-        page: 1
       }
     }
   },
@@ -42,17 +40,11 @@ export default {
       state.errorMessage = errorMessage
     },
     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: {
-    async search({state, commit, rootState, dispatch}) {
+    async search({state, commit, rootState}) {
       if (state.searching) {
         return
       }
@@ -68,13 +60,11 @@ export default {
       commit('setErrorMessage', '')
 
       const url = new URL(`${window.ki.apiUrl}/users/profiles`)
-
+      
       if (state.query.search) {
         url.searchParams.append('search', state.query.search)
       }
 
-      url.searchParams.append('page', state.query.page)
-
       const headers = {
         Authorization: `Bearer ${rootState.token}`,
       }
@@ -91,19 +81,8 @@ export default {
         return
       }
 
-      console.log(response.ok)
-      console.log(response.status)
-      console.log(state.query.page)
-
       clearTimeout(timeoutId)
 
-      if (!response.ok && response.status === 404 && state.query.page != 1) {
-        commit('setQueryPage', 1)
-        commit('setSearching', false)
-        await dispatch('search')
-        return
-      }
-
       if (!response.ok) {
         commit('setError', true)
         commit('clearProfiles')
@@ -114,7 +93,6 @@ export default {
 
       const responseData = await response.json()
       commit('setProfiles', responseData.profiles)
-      commit('setPages', responseData.pages)
       commit('setSearching', false)
       commit('hideSpinner')
     }

src/views/Index.vue

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

src/views/Search.vue

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

src/views/profile/Edit.vue

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

src/views/profile/View.vue

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