forked from kompetenzinventar/ki-frontend
router, auth, edit, first autocomplete, bascis structure, no design
This commit is contained in:
parent
356aa738fb
commit
16b03bb5f2
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
@ -4,7 +4,8 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" type="image/png" href="<%= BASE_URL %>favicon-96x96.png" sizes="96x96">
|
||||
<title>Kompetenz Inventar der WTF eG</title>
|
||||
</head>
|
||||
<body>
|
||||
|
61
src/App.vue
61
src/App.vue
@ -1,8 +1,67 @@
|
||||
<template>
|
||||
<header v-if="this.$route.path.includes('/s/')">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">KI</a>
|
||||
<button @click="showMobileNavbar = !showMobileNavbar" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse"
|
||||
:class="{
|
||||
'show': showMobileNavbar,
|
||||
}"
|
||||
id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" :to="{path: `/s/search`}" active-class="active">Suche</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" :to="{path: `/s/profile/${memberId}`}" active-class="active">Mein Profil</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" :to="{path: `/s/profile-edit`}" active-class="active">Bearbeiten</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="btn btn-outline-danger" @click="logout()">Logout</button>
|
||||
<a class="nav-link active" aria-current="page" href="#"></a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Direkt Suchen" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">
|
||||
<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>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<router-view/>
|
||||
<footer>
|
||||
<a href="https://wtf-eg.de/impressum/" class="m-4">Impressum</a>
|
||||
<a href="https://wtf-eg.de/datenschutz/" class="m-4">Datenschutz</a>
|
||||
<a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
|
||||
</footer>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
showMobileNavbar: false,
|
||||
memberId: null
|
||||
};
|
||||
},
|
||||
created(){
|
||||
this.memberId = localStorage.getItem('user_id')
|
||||
},
|
||||
methods: {
|
||||
logout(){
|
||||
localStorage.clear();
|
||||
this.$router.push({ path: "/" });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
4
src/assets/custom.css
Normal file
4
src/assets/custom.css
Normal file
@ -0,0 +1,4 @@
|
||||
.container{
|
||||
min-height: calc(100vh - 70px - 24px);
|
||||
}
|
||||
|
@ -3,11 +3,15 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import './assets/custom.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
|
||||
app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
app.config.globalProperties.apiUrl="todo"
|
||||
|
||||
|
||||
|
@ -9,7 +9,17 @@ const routes = [
|
||||
path: '/s',
|
||||
name: 's',
|
||||
component: {
|
||||
template: "<router-view/>"
|
||||
template: "<router-view/>",
|
||||
},
|
||||
beforeEnter: (to, from, next) => {
|
||||
console.log('test')
|
||||
console.log('token', localStorage.getItem('token'))
|
||||
if(localStorage.getItem('token') !== null){
|
||||
console.log('next')
|
||||
next()
|
||||
}else{
|
||||
next({path: '/', query: {url: to.fullPath, access: false}})
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -18,12 +28,12 @@ const routes = [
|
||||
component: Search
|
||||
},
|
||||
{
|
||||
path: '/profile/:member',
|
||||
path: 'profile/:member',
|
||||
name: 'ProfileMember',
|
||||
component: View
|
||||
},
|
||||
{
|
||||
path: '/profile-edit',
|
||||
path: 'profile-edit',
|
||||
name: 'ProfileEdit',
|
||||
component: Edit
|
||||
},
|
||||
|
@ -57,24 +57,28 @@ export default {
|
||||
async submitLogin() {
|
||||
this.showErrorMessage = false;
|
||||
try {
|
||||
console.log(this.apiUrl)
|
||||
const loginResult = await axios.post(
|
||||
`${process.env.VUE_APP_API_URL}/users/login`,
|
||||
`${this.apiUrl}/users/login`,
|
||||
{
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}
|
||||
);
|
||||
console.log(loginResult);
|
||||
console.log(loginResult.status);
|
||||
if (loginResult.status === 200) {
|
||||
console.log('if true')
|
||||
this.showErrorMessage = false;
|
||||
//success login
|
||||
localStorage.setItem("token", loginResult.token);
|
||||
localStorage.setItem("user_id", loginResult.user_id);
|
||||
this.router.push({ path: "s/search" });
|
||||
localStorage.setItem("token", loginResult.data.token);
|
||||
localStorage.setItem("user_id", loginResult.data.user_id);
|
||||
this.$router.push({ path: "/s/search" });
|
||||
} else {
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
console.error(error);
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
|
@ -1,58 +1,66 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Suche</h1>
|
||||
<form @submit.prevent="submitSearch()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="searchText"
|
||||
v-model="searchText"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="searchText"
|
||||
v-model="searchText"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary mb-4">
|
||||
Suche Starten
|
||||
</button>
|
||||
</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
|
||||
class="alert alert-danger mb-4 mt-4"
|
||||
role="alert"
|
||||
v-if="showErrorMessage"
|
||||
>
|
||||
Bei der Suche ist ein Fehler aufgetreten
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
data(){
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
searchText: '',
|
||||
}
|
||||
name: "Search",
|
||||
data() {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
searchText: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async submitSearch(){
|
||||
this.showErrorMessage = false
|
||||
try{
|
||||
const loginResult = await axios.post(
|
||||
`${process.env.VUE_APP_API_URL}/search`,
|
||||
// Beispiel Hafte Daten
|
||||
{
|
||||
searchText: this.searchText,
|
||||
})
|
||||
if(loginResult.status === 200){
|
||||
//success login
|
||||
this.router.push({path: 's/search'})
|
||||
}
|
||||
else{
|
||||
this.showErrorMessage = true
|
||||
}
|
||||
}catch(error){
|
||||
console.error()
|
||||
this.showErrorMessage = true
|
||||
async submitSearch() {
|
||||
this.showErrorMessage = false;
|
||||
try {
|
||||
const loginResult = await axios.post(
|
||||
`${process.env.VUE_APP_API_URL}/search`,
|
||||
// Beispiel Hafte Daten
|
||||
{
|
||||
searchText: this.searchText,
|
||||
}
|
||||
);
|
||||
if (loginResult.status === 200) {
|
||||
//success login
|
||||
this.router.push({ path: "s/search" });
|
||||
} else {
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
@ -9,7 +9,7 @@
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="nickname"
|
||||
v-model="nickname"
|
||||
v-model="profile.nickname"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="pronouns"
|
||||
v-model="profile.pronouns"
|
||||
required
|
||||
/>
|
||||
<div id="emailHelp" class="form-text">
|
||||
@ -34,7 +34,7 @@
|
||||
class="form-control"
|
||||
id="freetext"
|
||||
rows="3"
|
||||
v-model="freetext"
|
||||
v-model="profile.freetext"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="col-12 col-xs-12">
|
||||
@ -45,14 +45,16 @@
|
||||
class="form-control"
|
||||
id="volunteerwork"
|
||||
rows="3"
|
||||
v-model="volunteerwork"
|
||||
v-model="profile.volunteerwork"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="skills" class="form-label">Deine Fähigkeiten: (Autocomplete)</label>
|
||||
<label for="skills" class="form-label"
|
||||
>Deine Fähigkeiten: (Autocomplete)</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
@ -61,16 +63,19 @@
|
||||
/>
|
||||
<div class="" v-if="searchSkillResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchSkillResults"
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchSkillResults"
|
||||
:key="result.id"
|
||||
@click="addSkill(result)">{{result.name}}</li>
|
||||
@click="addSkill(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="skill in skills"
|
||||
v-for="skill in profile.skills"
|
||||
:key="skill.id"
|
||||
class="badge bg-primary m-2"
|
||||
>
|
||||
@ -84,6 +89,46 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="skills" class="form-label"
|
||||
>Deine Sprachen: (Autocomplete)</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pronouns"
|
||||
v-model="searchLanguagesText"
|
||||
@keyup="searchLanguages()"
|
||||
/>
|
||||
<div class="" v-if="searchLanguagesResult">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchLanguagesResult"
|
||||
:key="result.id"
|
||||
@click="addLanguage(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
v-for="language in profile.languages"
|
||||
:key="language.id"
|
||||
class="badge bg-primary m-2"
|
||||
>
|
||||
{{ language.name }}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
aria-label="Close"
|
||||
@click="removeLanguage(language.id)"
|
||||
></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
|
||||
<div
|
||||
@ -101,51 +146,109 @@ import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "profileEdit",
|
||||
created() {
|
||||
// get user profile by jwt tocken and fill the form details
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showErrorMessage: false,
|
||||
nickname: "",
|
||||
pronouns: "",
|
||||
freetext: "",
|
||||
volunteerwork: "",
|
||||
languages: [],
|
||||
|
||||
profile: {
|
||||
nickname: "",
|
||||
pronouns: "",
|
||||
volunteerwork: "",
|
||||
freetext: "",
|
||||
created: "",
|
||||
updated: "",
|
||||
address: {
|
||||
name: "",
|
||||
street: "",
|
||||
house_number: "",
|
||||
additional: "",
|
||||
postcode: "",
|
||||
city: "",
|
||||
country: "",
|
||||
},
|
||||
skills: [],
|
||||
languages: [],
|
||||
},
|
||||
searchLanguagesText: "",
|
||||
skills: [
|
||||
{ id: 3, name: "PHP" },
|
||||
{ id: 2, name: "PHP" },
|
||||
],
|
||||
searchLanguagesResult: [],
|
||||
searchSkillsText: "",
|
||||
searchSkillResults: [],
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const userProfile = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
);
|
||||
console.log(userProfile.data);
|
||||
this.profile.nickname = userProfile.data.profile.nickname;
|
||||
this.profile.pronouns = userProfile.data.profile.pronouns;
|
||||
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
|
||||
this.profile.freetext = userProfile.data.profile.freetext;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submitForm() {},
|
||||
async searchSkills() {
|
||||
this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
|
||||
async submitForm() {
|
||||
try {
|
||||
const skillResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
|
||||
const formSubmitResult = await axios.post(
|
||||
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
||||
"user_id"
|
||||
)}/profile`,
|
||||
{
|
||||
nickname: this.profile.nickname,
|
||||
pronouns: this.profile.pronouns,
|
||||
volunteerwork: this.profile.volunteerwork,
|
||||
freetext: this.profile.freetext,
|
||||
skills: this.profile.skills,
|
||||
languages: this.profile.languages,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log(skillResult);
|
||||
if (skillResult.status === 200) {
|
||||
this.searchSkillResults = skillResult.skills;
|
||||
console.log(formSubmitResult);
|
||||
if (formSubmitResult.status === 200) {
|
||||
// success
|
||||
} else {
|
||||
// failure
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
addSkill(skill){
|
||||
if(this.skills.includes(skill)) return false
|
||||
this.skills.push(skill)
|
||||
this.searchSkillsText = ''
|
||||
this.searchSkillResults = []
|
||||
async searchSkills() {
|
||||
try {
|
||||
const skillResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
|
||||
);
|
||||
if (skillResult.status === 200) {
|
||||
this.searchSkillResults = skillResult.data.skills;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
addSkill(skill) {
|
||||
console.log(this.profile.skills.map((item) => item.id));
|
||||
if (this.profile.skills.map((item) => item.id).includes(skill.id))
|
||||
return false;
|
||||
this.profile.skills.push(skill);
|
||||
this.searchSkillsText = "";
|
||||
this.searchSkillResults = [];
|
||||
},
|
||||
removeSkill(skillId) {
|
||||
this.skills = this.skills.filter((skill) => {
|
||||
this.profile.skills = this.profile.skills.filter((skill) => {
|
||||
if (skillId === skill.id) {
|
||||
return false;
|
||||
} else {
|
||||
@ -153,7 +256,36 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
searchLanguages() {},
|
||||
async searchLanguages() {
|
||||
try {
|
||||
const languageResult = await axios.get(
|
||||
`${process.env.VUE_APP_API_URL}/languages?search=${this.searchLanguagesText}`
|
||||
);
|
||||
if (languageResult.status === 200) {
|
||||
this.searchLanguagesResult = languageResult.data.languages;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error();
|
||||
this.showErrorMessage = true;
|
||||
}
|
||||
},
|
||||
|
||||
addLanguage(language) {
|
||||
if (this.profile.languages.map((item) => item.id).includes(language.id))
|
||||
return false;
|
||||
this.profile.languages.push(language);
|
||||
this.searchLanguagesText = "";
|
||||
this.searchLanguagesResult = [];
|
||||
},
|
||||
removeLanguage(languageId) {
|
||||
this.profile.languages = this.profile.languages.filter((language) => {
|
||||
if (languageId === language.id) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
Loading…
Reference in New Issue
Block a user