Merge pull request '"Problem melden"-Link korrigiert' (!78) from brain-patch-1 into main

Reviewed-on: kompetenzinventar/ki-frontend#78

.drone.yml

@@ -9,6 +9,7 @@ name: default
 steps:
 - name: reuse
   image: fsfe/reuse:latest
+
 - name: docker-publish
   image: plugins/docker
   settings:
@@ -21,5 +22,22 @@ steps:
     password:
       from_secret: "docker_password"
   when:
+    event:
+      - push
     branch:
       - main
+
+- name: docker-publish-tag
+  image: plugins/docker
+  settings:
+    registry: registry.wtf-eg.net
+    repo: registry.wtf-eg.net/ki-frontend
+    target: ki-frontend
+    auto_tag: true
+    username:
+      from_secret: "docker_username"
+    password:
+      from_secret: "docker_password"
+  when:
+    event:
+      - tag

package.json

@@ -7,10 +7,10 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-router": "^4.5.0",
+    "@vue/cli-service": "^4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",

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-frontend/issues/new">Problem melden</a></li>
+            <li><a href="https://git.wtf-eg.de/kompetenzinventar/ki-doku/issues/new/choose">Problem melden</a></li>
           </ul>
         </div>
       </div>

src/components/Paginator.vue

@@ -0,0 +1,49 @@
+<!--
+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"
+        @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

@@ -6,20 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <template>
   <ul class="list-group list-group-flush">
-    <li 
-      v-if="type == 'contacttype'"
-      class="list-group-item">
-      <div class="row">
-        <div class="col-6">
-          Kontaktart
-          <i class="bi bi-info-circle" v-tooltip="contactTypeTooltip"></i>
-        </div>
-        <div class="col-6">
-          Wert
-          <i class="bi bi-info-circle" v-tooltip="contactContentTooltip"></i>
-        </div>
-      </div>
-    </li>
     <li
       class="list-group-item"
       v-for="(value, valueKey) in values"
@@ -116,14 +102,6 @@ export default {
       levelSelection: levelJson,
       languagesSelection: languagesJson,
       editableValues: this.values,
-      contactTypeTooltip: {
-        content:  'Kontaktart z.B. E-Mail, Matrix, Twitter etc...',
-        html: true
-      },
-      contactContentTooltip: {
-        content:  'Wert: zB.: beate@beispiel.de, @beate:beispiel.de, beate_beispiel',
-        html: true
-      }
     };
   },
   watch: {

src/components/profile/Header.vue

@@ -16,6 +16,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </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>

src/store/search.js

@@ -12,8 +12,10 @@ export default {
       profiles: [],
       error: false,
       errorMessage: '',
+      pages: 1,
       query: {
-        search: ''
+        search: '',
+        page: 1
       }
     }
   },
@@ -40,11 +42,17 @@ export default {
       state.errorMessage = errorMessage
     },
     setQuerySearch(state, search) {
-      state.query.search = search
+      state.query = {...state.query, search}
+    },
+    setPages(state, pages) {
+      state.pages = pages
+    },
+    setQueryPage(state, page) {
+      state.query = {...state.query, page}
     }
   },
   actions: {
-    async search({state, commit, rootState}) {
+    async search({state, commit, rootState, dispatch}) {
       if (state.searching) {
         return
       }
@@ -65,6 +73,8 @@ export default {
         url.searchParams.append('search', state.query.search)
       }
 
+      url.searchParams.append('page', state.query.page)
+
       const headers = {
         Authorization: `Bearer ${rootState.token}`,
       }
@@ -81,8 +91,19 @@ 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')
@@ -93,6 +114,7 @@ export default {
 
       const responseData = await response.json()
       commit('setProfiles', responseData.profiles)
+      commit('setPages', responseData.pages)
       commit('setSearching', false)
       commit('hideSpinner')
     }

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, Fähigkeit, Sprache"
+                    placeholder="Nick, Name, Fähigkeit, Sprache"
                     ref="searchTextInput"
                   />
                 </div>
@@ -53,12 +53,26 @@ 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>
@@ -67,21 +81,29 @@ 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() {
@@ -89,6 +111,15 @@ 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() {
@@ -109,21 +140,37 @@ export default {
   },
   methods: {
     handleSubmit() {
-      this.$router.push({ query: { query: this.searchText }})
+      if (this.textChanged === true) {
+        this.$store.commit('search/setQueryPage', 1)
+      }
+      this.pushState()
       this.$store.dispatch('search/search')
     },
     focusSearchText() {
       this.$nextTick(() => {
         this.$refs.searchTextInput.focus()
       })
+    },
+    handlePageSelected(page) {
+      this.currentPage = page
+      this.pushState()
+      this.$store.dispatch('search/search')
+    },
+    pushState() {
+      this.$router.push({ query: { query: this.searchText, page: this.currentPage }})
     }
   },
   created() {
-    if (this.$route.query.query !== undefined) {
+    if (this.$route.query.query) {
       this.searchText = this.$route.query.query
       this.$store.commit('search/clearProfiles')
     }
 
+    if (this.$route.query.page) {
+      this.currentPage = parseInt(this.$route.query.page, 10)
+      this.$store.commit('search/clearProfiles')
+    }
+
     this.$store.dispatch('search/search')
   }
 };

src/views/profile/Edit.vue

@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           </div>
 
           <div class="row mb-4">
-            <div class="col-6 mb-3">
+            <div class="col-12 col-md-4 mb-3 mb-md-0">
               <label class="form-label">Nickname</label>
               <input
                 type="text"
@@ -43,7 +43,17 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 required
               />
             </div>
-            <div class="col-6 mb-3">
+            <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>
@@ -167,7 +177,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 <auto-complete
                   type="contacttype"
                   :values="profile.contacts"
-                  placeholder="Zuerst Kontaktart: E-Mail, Matrix, Web, etc.."
+                  placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
                   @update-values="profile.contacts = $event"
                 ></auto-complete>
               </template>

src/views/profile/View.vue

@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <label class="form-label fw-bold">
             Anmerkungen
           </label>
-          <div>{{ profile.availability_text }}</div>
+          <div class="line-break-text">{{ profile.availability_text }}</div>
         </div>
       </Section>
 
@@ -98,11 +98,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         title="Sonstiges">
         <div v-if="profile.freetext" :class="{ 'lh-base': true, 'mb-4': profile.volunteerwork }">
           <h5>Über mich</h5>
-          {{ profile.freetext }}
+           <div class="line-break-text">{{ profile.freetext }}</div>
         </div>
         <div v-if="profile.volunteerwork" class="lh-base">
           <h5>Ehrenamtliche Arbeit</h5>
-          {{ profile.volunteerwork }}
+          <div class="line-break-text">{{ profile.volunteerwork }}</div>
         </div>
       </Section>
     </template>
@@ -154,4 +154,7 @@ export default {
 </script>
 
 <style>
+.line-break-text{
+  white-space: pre-line;
+}
 </style>