forked from kompetenzinventar/ki-frontend
Compare commits
12 Commits
Author | SHA1 | Date |
---|---|---|
weeman | aaa0883692 | |
weeman | e404bef2a9 | |
scammo | cbbcfd0f37 | |
weeman | 5c5f157a77 | |
scammo | 3017c001b2 | |
scammo | fefe9a034d | |
weeman | bac8731e17 | |
weeman | dc883ac302 | |
scammo | 16feb41f8a | |
weeman | 04cb8a7217 | |
weeman | e3115f9944 | |
scammo | 122b13b6a2 |
18
.drone.yml
18
.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
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
@ -60,11 +68,13 @@ 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}`,
|
||||
}
|
||||
|
@ -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')
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
@ -115,11 +125,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
</template>
|
||||
</Section>
|
||||
|
||||
<Section title="Ich suche">
|
||||
<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"
|
||||
label="Ich suche für mich Projekte/Aufträge in folgenden Bereichen"
|
||||
:values="profile.searchtopics"
|
||||
:showSecondary="false"
|
||||
placeholder="z.B. Python, JavaScript, Linux"
|
||||
|
|
|
@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
|
||||
<Section
|
||||
v-if="profile.searchtopics && profile.searchtopics.length > 0"
|
||||
title="Das suche ich">
|
||||
title="Ich suche für mich Projekte/Aufträge in folgenden Bereichen">
|
||||
<div style="margin-bottom: -.5rem;">
|
||||
<Skill
|
||||
class="me-2 mb-2"
|
||||
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue