kompetenzinventar/ki-frontend
7
4
Fork 7
Code Issues Pull Requests 11 Packages Projects Releases 1 Wiki Activity

router, auth, edit, first autocomplete, bascis structure, no design

Browse Source
This commit is contained in:
scammo 2021-06-25 19:28:41 +02:00
parent 356aa738fb
commit 16b03bb5f2
9 changed files with 314 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
public/index.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title>Kompetenz Inventar der WTF eG</title>
</head> </head>
<body> <body>

61
src/App.vue
View File

@ -1,8 +1,67 @@
<template> <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/> <router-view/>
<footer> <footer>
<a href="https://wtf-eg.de/impressum/" class="m-4">Impressum</a> <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://wtf-eg.de/datenschutz/" class="m-4">Datenschutz</a>
<a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a> <a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
</footer> </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
View File

@ -0,0 +1,4 @@
.container{
min-height: calc(100vh - 70px - 24px);
}

6
src/main.js
View File

@ -3,11 +3,15 @@ import App from './App.vue'
import router from './router' import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/css/bootstrap.min.css'
import './assets/custom.css'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
app.mount('#app') app.mount('#app')
app.config.globalProperties.apiUrl="todo"

16
src/router/index.js
View File

@ -9,7 +9,17 @@ const routes = [
path: '/s', path: '/s',
name: 's', name: 's',
component: { 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: [ children: [
{ {
@ -18,12 +28,12 @@ const routes = [
component: Search component: Search
}, },
{ {
path: '/profile/:member', path: 'profile/:member',
name: 'ProfileMember', name: 'ProfileMember',
component: View component: View
}, },
{ {
path: '/profile-edit', path: 'profile-edit',
name: 'ProfileEdit', name: 'ProfileEdit',
component: Edit component: Edit
}, },

14
src/views/Index.vue
View File

@ -57,24 +57,28 @@ export default {
async submitLogin() { async submitLogin() {
this.showErrorMessage = false; this.showErrorMessage = false;
try { try {
console.log(this.apiUrl)
const loginResult = await axios.post( const loginResult = await axios.post(
`${process.env.VUE_APP_API_URL}/users/login`, `${this.apiUrl}/users/login`,
{ {
username: this.username, username: this.username,
password: this.password, password: this.password,
} }
); );
console.log(loginResult); console.log(loginResult);
console.log(loginResult.status);
if (loginResult.status === 200) { if (loginResult.status === 200) {
console.log('if true')
this.showErrorMessage = false;
//success login //success login
localStorage.setItem("token", loginResult.token); localStorage.setItem("token", loginResult.data.token);
localStorage.setItem("user_id", loginResult.user_id); localStorage.setItem("user_id", loginResult.data.user_id);
this.router.push({ path: "s/search" }); this.$router.push({ path: "/s/search" });
} else { } else {
this.showErrorMessage = true; this.showErrorMessage = true;
} }
} catch (error) { } catch (error) {
console.error(); console.error(error);
this.showErrorMessage = true; this.showErrorMessage = true;
} }
}, },

94
src/views/Search.vue
View File

@ -1,58 +1,66 @@
<template> <template>
<div class="container">
<h1>Suche</h1> <h1>Suche</h1>
<form @submit.prevent="submitSearch()"> <form @submit.prevent="submitSearch()">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<input <input
type="text" type="text"
class="form-control" class="form-control"
id="searchText" id="searchText"
v-model="searchText" v-model="searchText"
required required
/> />
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
</div>
</div> </div>
<div class="col">
<button type="submit" class="btn btn-primary mb-4">
Suche Starten
</button>
</div>
</div>
</form> </form>
<div class="alert alert-danger mb-4 mt-4" role="alert" v-if="showErrorMessage"> <div
Bei der Suche ist ein Fehler aufgetreten class="alert alert-danger mb-4 mt-4"
role="alert"
v-if="showErrorMessage"
>
Bei der Suche ist ein Fehler aufgetreten
</div> </div>
</div>
</template> </template>
<script> <script>
import axios from 'axios' import axios from "axios";
export default { export default {
name: 'Search', name: "Search",
data(){ data() {
return { return {
showErrorMessage: false, showErrorMessage: false,
searchText: '', searchText: "",
} };
}, },
methods: { methods: {
async submitSearch(){ async submitSearch() {
this.showErrorMessage = false this.showErrorMessage = false;
try{ try {
const loginResult = await axios.post( const loginResult = await axios.post(
`${process.env.VUE_APP_API_URL}/search`, `${process.env.VUE_APP_API_URL}/search`,
// Beispiel Hafte Daten // Beispiel Hafte Daten
{ {
searchText: this.searchText, 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
} }
);
if (loginResult.status === 200) {
//success login
this.router.push({ path: "s/search" });
} else {
this.showErrorMessage = true;
}
} catch (error) {
console.error();
this.showErrorMessage = true;
} }
} },
} },
};
</script> </script>

208
src/views/profile/Edit.vue
View File

@ -9,7 +9,7 @@
type="text" type="text"
class="form-control" class="form-control"
id="nickname" id="nickname"
v-model="nickname" v-model="profile.nickname"
required required
/> />
</div> </div>
@ -19,7 +19,7 @@
type="text" type="text"
class="form-control" class="form-control"
id="pronouns" id="pronouns"
v-model="pronouns" v-model="profile.pronouns"
required required
/> />
<div id="emailHelp" class="form-text"> <div id="emailHelp" class="form-text">
@ -34,7 +34,7 @@
class="form-control" class="form-control"
id="freetext" id="freetext"
rows="3" rows="3"
v-model="freetext" v-model="profile.freetext"
></textarea> ></textarea>
</div> </div>
<div class="col-12 col-xs-12"> <div class="col-12 col-xs-12">
@ -45,14 +45,16 @@
class="form-control" class="form-control"
id="volunteerwork" id="volunteerwork"
rows="3" rows="3"
v-model="volunteerwork" v-model="profile.volunteerwork"
></textarea> ></textarea>
</div> </div>
</div> </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 <input
autocomplete="off" autocomplete="off"
type="text" type="text"
class="form-control" class="form-control"
id="pronouns" id="pronouns"
@ -61,16 +63,19 @@
/> />
<div class="" v-if="searchSkillResults"> <div class="" v-if="searchSkillResults">
<ul class="list-group"> <ul class="list-group">
<li <li
class="list-group-item" class="list-group-item"
v-for="result in searchSkillResults" v-for="result in searchSkillResults"
:key="result.id" :key="result.id"
@click="addSkill(result)">{{result.name}}</li> @click="addSkill(result)"
>
{{ result.name }}
</li>
</ul> </ul>
</div> </div>
<div> <div>
<span <span
v-for="skill in skills" v-for="skill in profile.skills"
:key="skill.id" :key="skill.id"
class="badge bg-primary m-2" class="badge bg-primary m-2"
> >
@ -84,6 +89,46 @@
</span> </span>
</div> </div>
</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> <button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
<div <div
@ -101,51 +146,109 @@ import axios from "axios";
export default { export default {
name: "profileEdit", name: "profileEdit",
created() {
// get user profile by jwt tocken and fill the form details
},
data() { data() {
return { return {
showErrorMessage: false, showErrorMessage: false,
nickname: "",
pronouns: "", profile: {
freetext: "", nickname: "",
volunteerwork: "", pronouns: "",
languages: [], volunteerwork: "",
freetext: "",
created: "",
updated: "",
address: {
name: "",
street: "",
house_number: "",
additional: "",
postcode: "",
city: "",
country: "",
},
skills: [],
languages: [],
},
searchLanguagesText: "", searchLanguagesText: "",
skills: [ searchLanguagesResult: [],
{ id: 3, name: "PHP" },
{ id: 2, name: "PHP" },
],
searchSkillsText: "", searchSkillsText: "",
searchSkillResults: [], 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: { methods: {
submitForm() {}, async submitForm() {
async searchSkills() {
this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
try { try {
const skillResult = await axios.get( const formSubmitResult = await axios.post(
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}` `${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); console.log(formSubmitResult);
if (skillResult.status === 200) { if (formSubmitResult.status === 200) {
this.searchSkillResults = skillResult.skills; // success
} else {
// failure
} }
} catch (error) { } catch (error) {
console.error(); console.error();
this.showErrorMessage = true; this.showErrorMessage = true;
} }
}, },
addSkill(skill){ async searchSkills() {
if(this.skills.includes(skill)) return false try {
this.skills.push(skill) const skillResult = await axios.get(
this.searchSkillsText = '' `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
this.searchSkillResults = [] );
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) { removeSkill(skillId) {
this.skills = this.skills.filter((skill) => { this.profile.skills = this.profile.skills.filter((skill) => {
if (skillId === skill.id) { if (skillId === skill.id) {
return false; return false;
} else { } 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> </script>