forked from kompetenzinventar/ki-frontend
parent
fcbf3ee796
commit
93cb302ca7
@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
|
|||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
License: AGPL-3.0-or-later
|
License: AGPL-3.0-or-later
|
||||||
|
|
||||||
Files: src/assets/img/wtf_logo*
|
Files: src/assets/img/wtf*
|
||||||
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
License: LicenseRef-WTF
|
License: LicenseRef-WTF
|
||||||
|
|
||||||
|
16
package-lock.json
generated
16
package-lock.json
generated
@ -15,6 +15,7 @@
|
|||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"bootstrap": "^5.0.1",
|
"bootstrap": "^5.0.1",
|
||||||
|
"bootstrap-icons": "^1.5.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
@ -2854,6 +2855,15 @@
|
|||||||
"@popperjs/core": "^2.10.1"
|
"@popperjs/core": "^2.10.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/bootstrap-icons": {
|
||||||
|
"version": "1.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||||
|
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
|
||||||
|
"dev": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
||||||
@ -17155,6 +17165,12 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {}
|
"requires": {}
|
||||||
},
|
},
|
||||||
|
"bootstrap-icons": {
|
||||||
|
"version": "1.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz",
|
||||||
|
"integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"bootstrap": "^5.0.1",
|
"bootstrap": "^5.0.1",
|
||||||
|
"bootstrap-icons": "^1.5.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
|
@ -1 +0,0 @@
|
|||||||
SPDX-License-Identifier: MIT
|
|
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
|
|
||||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 548 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 238 B |
@ -1 +0,0 @@
|
|||||||
SPDX-License-Identifier: MIT
|
|
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
|
|
||||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 331 B |
@ -1 +0,0 @@
|
|||||||
SPDX-License-Identifier: MIT
|
|
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
|
||||||
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 573 B |
@ -1 +0,0 @@
|
|||||||
SPDX-License-Identifier: MIT
|
|
@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
<Footer />
|
<Footer />
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Footer from '@/components/Footer.vue'
|
import Footer from '@/components/Footer'
|
||||||
import Navbar from '@/components/Navbar.vue'
|
import Navbar from '@/components/Navbar'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
@ -7,6 +7,13 @@
|
|||||||
@import "variables";
|
@import "variables";
|
||||||
@import "bootstrap/scss/bootstrap";
|
@import "bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
|
.bg-wtf {
|
||||||
|
background-image: url(../assets/img/wtf-header-bg.jpg);
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
BIN
src/assets/img/wtf-header-bg.jpg
Normal file
BIN
src/assets/img/wtf-header-bg.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 107 KiB |
@ -14,3 +14,5 @@ $body-bg: $gray-100;
|
|||||||
|
|
||||||
$link-decoration: none;
|
$link-decoration: none;
|
||||||
$link-hover-decoration: underline;
|
$link-hover-decoration: underline;
|
||||||
|
|
||||||
|
$spinner-animation-speed: 1s;
|
||||||
|
@ -27,10 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
aria-label="Hinzufügen"
|
aria-label="Hinzufügen"
|
||||||
@click="addResult()"
|
@click="addResult()"
|
||||||
>
|
>
|
||||||
<img
|
<i clas="bi-plus-lg"></i>
|
||||||
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
|
|
||||||
alt="Hinzufügen Icon"
|
|
||||||
/>
|
|
||||||
Hinzufügen
|
Hinzufügen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
37
src/components/Avatar.vue
Normal file
37
src/components/Avatar.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="avatar bg-dark">
|
||||||
|
{{ avatarLetters }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: String
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
avatarLetters() {
|
||||||
|
return this.name.substr(0, 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.avatar {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: .25rem;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 2.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
@ -26,59 +26,59 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<div
|
||||||
class="collapse navbar-collapse"
|
class="collapse navbar-collapse d-lg-flex"
|
||||||
:class="{ show: showMobileNav }"
|
:class="{ show: showMobileNav }"
|
||||||
id="navbarSupportedContent"
|
id="navbarSupportedContent"
|
||||||
>
|
>
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
<ul class="navbar-nav mb-2 mb-lg-0">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<router-link
|
<router-link
|
||||||
class="nav-link"
|
class="nav-link"
|
||||||
:to="{ path: `/s/search` }"
|
:to="{ path: `/s/search` }"
|
||||||
active-class="active"
|
active-class="active"
|
||||||
>Suche</router-link
|
>Suche</router-link
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<router-link
|
<router-link
|
||||||
class="nav-link"
|
class="nav-link"
|
||||||
:to="{ path: `/s/profile/${currentUserId}` }"
|
:to="{ path: `/s/profile/${currentUserId}` }"
|
||||||
active-class="active"
|
active-class="active"
|
||||||
>Mein Profil</router-link
|
>Mein Profil</router-link
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<router-link
|
<router-link
|
||||||
class="nav-link"
|
class="nav-link"
|
||||||
:to="{ path: `/s/profile-edit` }"
|
:to="{ path: `/s/profile-edit` }"
|
||||||
active-class="active"
|
active-class="active"
|
||||||
>Bearbeiten</router-link
|
>Bearbeiten</router-link
|
||||||
>
|
>
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<button class="btn btn-outline-danger" @click="logout()">
|
|
||||||
Logout
|
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<form class="d-flex" @submit.prevent="searchRedirect()">
|
<form class="flex-grow-1 d-flex ms-lg-3 me-lg-4 mb-3 mb-lg-0" @submit.prevent="searchRedirect()">
|
||||||
<input
|
<input
|
||||||
class="form-control me-2"
|
class="form-control bg-white me-2"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
type="search"
|
type="search"
|
||||||
placeholder="Profile durchsuchen"
|
placeholder="Profile durchsuchen"
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="btn btn-outline-primary"
|
class="btn btn-primary"
|
||||||
type="submit"
|
type="submit"
|
||||||
>
|
>
|
||||||
<img
|
<i class="bi bi-search"></i>
|
||||||
src="/img/bootstrap-icons-1.5.0/search.svg"
|
|
||||||
alt="Suche Icon"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<button class="btn btn-danger w-100" @click="logout()">
|
||||||
|
<i class="bi bi-box-arrow-right"></i>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -82,10 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
aria-label="Löschen"
|
aria-label="Löschen"
|
||||||
@click="$emit('removeValue', value[type].name)"
|
@click="$emit('removeValue', value[type].name)"
|
||||||
>
|
>
|
||||||
<img
|
<i class="bi-trash"></i>
|
||||||
src="/img/bootstrap-icons-1.5.0/trash.svg"
|
|
||||||
alt="Löschen Icon"
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
54
src/components/SearchResult.vue
Normal file
54
src/components/SearchResult.vue
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<router-link
|
||||||
|
class="text-decoration-none d-flex"
|
||||||
|
:to="{ path: `/s/profile/${profile.user_id}` }"
|
||||||
|
>
|
||||||
|
<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"/>
|
||||||
|
</div>
|
||||||
|
<div class="text-body">
|
||||||
|
<h5 class="card-title mb-1 lh-1">
|
||||||
|
{{ profile.nickname}}
|
||||||
|
<span v-if="profile.pronouns"> ({{ profile.pronouns }})</span>
|
||||||
|
</h5>
|
||||||
|
<small
|
||||||
|
class="card-text lh-1 text-dark"
|
||||||
|
v-if="profile.skills && profile.skills.length > 0"
|
||||||
|
>
|
||||||
|
Top-Fähigkeiten: {{ topSkills }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Avatar from '@/components/Avatar'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Avatar,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
profile: Object
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
topSkills() {
|
||||||
|
return this.profile.skills.slice(0, 5).map(s => s.skill.name).join(', ')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.card:hover {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
</style>
|
9
src/components/Spinner.vue
Normal file
9
src/components/Spinner.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="spinner-grow" role="status"></div>
|
||||||
|
</template>
|
@ -7,6 +7,7 @@ import App from './App.vue'
|
|||||||
import router from './router'
|
import router from './router'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
|
|
||||||
|
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||||
import './assets/global.scss'
|
import './assets/global.scss'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
@ -4,12 +4,17 @@
|
|||||||
|
|
||||||
import { createStore } from 'vuex'
|
import { createStore } from 'vuex'
|
||||||
|
|
||||||
|
import search from './search'
|
||||||
|
|
||||||
const localStorageKeys = {
|
const localStorageKeys = {
|
||||||
currentUserId: 'ki_current_user_id',
|
currentUserId: 'ki_current_user_id',
|
||||||
token: 'ki_token',
|
token: 'ki_token',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default createStore({
|
export default createStore({
|
||||||
|
modules: {
|
||||||
|
search,
|
||||||
|
},
|
||||||
state() {
|
state() {
|
||||||
return {
|
return {
|
||||||
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
|
100
src/store/search.js
Normal file
100
src/store/search.js
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state() {
|
||||||
|
return {
|
||||||
|
searching: false,
|
||||||
|
showSpinner: false,
|
||||||
|
searched: false,
|
||||||
|
profiles: [],
|
||||||
|
error: false,
|
||||||
|
errorMessage: '',
|
||||||
|
query: {
|
||||||
|
search: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
setSearching(state, searching) {
|
||||||
|
state.searching = searching
|
||||||
|
},
|
||||||
|
showSpinner(state) {
|
||||||
|
state.showSpinner = true
|
||||||
|
},
|
||||||
|
hideSpinner(state) {
|
||||||
|
state.showSpinner = false
|
||||||
|
},
|
||||||
|
clearProfiles(state) {
|
||||||
|
state.profiles = []
|
||||||
|
},
|
||||||
|
setProfiles(state, profiles) {
|
||||||
|
state.profiles = profiles
|
||||||
|
},
|
||||||
|
setError(state, error) {
|
||||||
|
state.error = error
|
||||||
|
},
|
||||||
|
setErrorMessage(state, errorMessage) {
|
||||||
|
state.errorMessage = errorMessage
|
||||||
|
},
|
||||||
|
setQuerySearch(state, search) {
|
||||||
|
state.query.search = search
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async search({state, commit, rootState}) {
|
||||||
|
if (state.searching) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
commit('setSearching', true)
|
||||||
|
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
commit('showSpinner')
|
||||||
|
commit('clearProfiles')
|
||||||
|
}, 100)
|
||||||
|
|
||||||
|
commit('setError', false)
|
||||||
|
commit('setErrorMessage', '')
|
||||||
|
|
||||||
|
const url = new URL(`${window.ki.apiUrl}/users/profiles`)
|
||||||
|
|
||||||
|
if (state.query.search) {
|
||||||
|
url.searchParams.append('search', state.query.search)
|
||||||
|
}
|
||||||
|
|
||||||
|
const headers = {
|
||||||
|
Authorization: `Bearer ${rootState.token}`,
|
||||||
|
}
|
||||||
|
|
||||||
|
let response
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await fetch(url, {headers})
|
||||||
|
} catch {
|
||||||
|
commit('setError', true)
|
||||||
|
commit('clearProfiles')
|
||||||
|
commit('setSearching', false)
|
||||||
|
commit('hideSpinner')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout(timeoutId)
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
commit('setError', true)
|
||||||
|
commit('clearProfiles')
|
||||||
|
commit('setSearching', false)
|
||||||
|
commit('hideSpinner')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseData = await response.json()
|
||||||
|
commit('setProfiles', responseData.profiles)
|
||||||
|
commit('setSearching', false)
|
||||||
|
commit('hideSpinner')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -5,46 +5,51 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container pt-5">
|
<div class="bg-wtf">
|
||||||
<div class="text-center mb-5">
|
<div class="container pt-5">
|
||||||
<img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
|
<div class="text-center mb-5">
|
||||||
<h1>Kompetenzinventar</h1>
|
<img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
|
||||||
|
<h1 class="text-white">Kompetenzinventar</h1>
|
||||||
|
</div>
|
||||||
|
<form @submit.prevent="submitLogin()" class="card bg-white login-form">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleInputusername1" class="form-label" >
|
||||||
|
WTF-Benutzername:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="username"
|
||||||
|
class="form-control"
|
||||||
|
id="exampleInputusername1"
|
||||||
|
v-model="username"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
class="form-control"
|
||||||
|
id="exampleInputPassword1"
|
||||||
|
v-model="password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Login</button>
|
||||||
|
<a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
|
||||||
|
<div
|
||||||
|
class="alert alert-danger mt-3 mb-0"
|
||||||
|
role="alert"
|
||||||
|
v-if="showErrorMessage"
|
||||||
|
>
|
||||||
|
Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="exampleInputusername1" class="form-label" >
|
|
||||||
WTF-Benutzername:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="username"
|
|
||||||
class="form-control"
|
|
||||||
id="exampleInputusername1"
|
|
||||||
v-model="username"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="exampleInputPassword1" class="form-label">Passwort:</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
class="form-control"
|
|
||||||
id="exampleInputPassword1"
|
|
||||||
v-model="password"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Login</button>
|
|
||||||
<a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
|
|
||||||
<div
|
|
||||||
class="alert alert-danger mt-3 mb-0"
|
|
||||||
role="alert"
|
|
||||||
v-if="showErrorMessage"
|
|
||||||
>
|
|
||||||
Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RequestMixin from "@/mixins/request.mixin"
|
import RequestMixin from "@/mixins/request.mixin"
|
||||||
|
|
||||||
@ -62,6 +67,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
@ -5,88 +5,129 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="content">
|
||||||
<h1>Suche</h1>
|
<div class="bg-wtf text-white pt-3 pb-4">
|
||||||
<form @submit.prevent="submitSearch()">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
|
||||||
<div class="col">
|
<div class="card mx-auto bg-white">
|
||||||
<input
|
<div class="card-body">
|
||||||
type="text"
|
<form @submit.prevent="handleSubmit">
|
||||||
class="form-control"
|
<fieldset class="d-flex" :disabled="searching">
|
||||||
id="searchText"
|
<div class="flex-grow-1 me-3">
|
||||||
v-model="searchText"
|
<input
|
||||||
/>
|
type="text"
|
||||||
</div>
|
class="form-control"
|
||||||
<div class="col">
|
id="searchText"
|
||||||
<button type="submit" class="btn btn-primary mb-4">
|
v-model="searchText"
|
||||||
Suche starten
|
placeholder="Nick, Fähigkeit, Sprache"
|
||||||
</button>
|
ref="searchTextInput"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
<i class="bi-search"></i>
|
||||||
|
<span class="d-none d-md-inline"> Suchen</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
<div
|
|
||||||
class="alert alert-danger mb-4 mt-4"
|
|
||||||
role="alert"
|
|
||||||
v-if="showErrorMessage"
|
|
||||||
>
|
|
||||||
Bei der Suche ist ein Fehler aufgetreten
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="searchTotal == 0">
|
<div class="container pt-4 pb-3">
|
||||||
Es wurde kein Suchergebnis gefunden.
|
<div class="text-center" v-if="showSpinner">
|
||||||
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div
|
||||||
<div class="row">
|
class="fs-2 text-danger text-center"
|
||||||
<div
|
role="alert"
|
||||||
class="col-4 p-2"
|
v-if="error"
|
||||||
v-for="result in searchResults"
|
>
|
||||||
:key="result.user_id"
|
<div class="fs-1 mb-3">Kernel panic :/</div>
|
||||||
>
|
Bei der Suche ist ein Fehler aufgetreten.
|
||||||
<router-link
|
</div>
|
||||||
class="text-decoration-none"
|
<div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
|
||||||
:to="{ path: `/s/profile/${result.user_id}` }"
|
<div class="fs-1 mb-3">nullptr :/</div>
|
||||||
>
|
Es wurde kein Suchergebnis gefunden.
|
||||||
<div class="card search-card">
|
<p v-if="searchText !== ''">Probiere eine andere Suche.</p>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<h5 class="card-title">
|
<div v-else-if="showResults">
|
||||||
{{ result.nickname}}
|
<SearchResult
|
||||||
<span v-if="result.pronouns"> ({{ result.pronouns }})</span>
|
v-for="profile in profiles"
|
||||||
</h5>
|
:key="profile.user_id"
|
||||||
<p
|
class="mb-3"
|
||||||
class="card-text"
|
:profile="profile"
|
||||||
v-if="result.skills && result.skills.length > 0"
|
/>
|
||||||
>
|
|
||||||
Fähigkeiten:
|
|
||||||
<span v-for="(skill, index) in result.skills" :key="index"
|
|
||||||
>
|
|
||||||
{{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RequestMixin from "@/mixins/request.mixin";
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import SearchResult from '@/components/SearchResult'
|
||||||
|
import Spinner from '@/components/Spinner'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Search",
|
name: 'Search',
|
||||||
mixins: [RequestMixin],
|
components: {
|
||||||
data() {
|
SearchResult,
|
||||||
return {
|
Spinner,
|
||||||
showErrorMessage: false,
|
},
|
||||||
searchText: "",
|
computed: {
|
||||||
searchResults: null,
|
...mapState({
|
||||||
searchTotal: 0,
|
searching: state => state.search.searching,
|
||||||
};
|
profiles: state => state.search.profiles,
|
||||||
|
error: state => state.search.error,
|
||||||
|
showSpinner: state => state.search.showSpinner,
|
||||||
|
}),
|
||||||
|
searchText: {
|
||||||
|
get() {
|
||||||
|
return this.$store.state.search.query.search
|
||||||
|
},
|
||||||
|
set(text) {
|
||||||
|
this.$store.commit('search/setQuerySearch', text)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showNoResults() {
|
||||||
|
return !this.searching && (!this.profiles || this.profiles.length === 0)
|
||||||
|
},
|
||||||
|
showResults() {
|
||||||
|
return !this.error && this.profiles && this.profiles.length > 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
searching(value) {
|
||||||
|
if (value) {
|
||||||
|
if (this.$refs.searchTextInput) {
|
||||||
|
this.$refs.searchTextInput.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSubmit() {
|
||||||
|
this.$store.dispatch('search/search')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.$route.query.query) this.searchText = this.$route.query.query;
|
if (this.$route.query.query !== undefined) {
|
||||||
this.submitSearch();
|
this.searchText = this.$route.query.query
|
||||||
},
|
this.$store.commit('search/clearProfiles')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$store.dispatch('search/search')
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user