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

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

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

View File

@ -1,4 +1,43 @@
<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>
@ -6,3 +45,23 @@
<a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
</footer>
</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);
}

View File

@ -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"

View File

@ -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
},

View File

@ -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;
}
},

View File

@ -1,4 +1,5 @@
<template>
<div class="container">
<h1>Suche</h1>
<form @submit.prevent="submitSearch()">
<div class="row">
@ -12,47 +13,54 @@
/>
</div>
<div class="col">
<button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
<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">
<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(){
name: "Search",
data() {
return {
showErrorMessage: false,
searchText: '',
}
searchText: "",
};
},
methods: {
async submitSearch(){
this.showErrorMessage = false
try{
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){
}
);
if (loginResult.status === 200) {
//success login
this.router.push({path: 's/search'})
this.router.push({ path: "s/search" });
} else {
this.showErrorMessage = true;
}
else{
this.showErrorMessage = true
} catch (error) {
console.error();
this.showErrorMessage = true;
}
}catch(error){
console.error()
this.showErrorMessage = true
}
}
}
}
},
},
};
</script>

View File

@ -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,12 +45,14 @@
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"
type="text"
@ -65,12 +67,15 @@
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,
profile: {
nickname: "",
pronouns: "",
freetext: "",
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: [],
};
},
methods: {
submitForm() {},
async searchSkills() {
this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
async created() {
try {
const skillResult = await axios.get(
`${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
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(skillResult);
if (skillResult.status === 200) {
this.searchSkillResults = skillResult.skills;
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: {
async submitForm() {
try {
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(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>