This commit is contained in:
scammo 2021-08-18 22:59:44 +02:00
parent 513d204d58
commit f0ef4e7f13
7 changed files with 141 additions and 126 deletions

View File

@ -53,10 +53,13 @@
</div> </div>
</template> </template>
<script> <script>
import RequestMixin from "@/mixins/request.mixin"
import ProfileList from "@/components/ProfileList"; import ProfileList from "@/components/ProfileList";
export default { export default {
name: "AutoComplete", name: "AutoComplete",
mixins: [RequestMixin],
components: { components: {
ProfileList, ProfileList,
}, },
@ -80,31 +83,6 @@ export default {
}; };
}, },
methods: { methods: {
async search() {
try {
const request = await this.axios.get(
`${this.apiUrl}/${this.type}s?search=${this.searchText}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (request.status === 200) {
this.searchResults = request.data[`${this.type}s`];
if (
!this.values
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase())
) {
this.searchResults.unshift({ name: this.searchText });
}
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
addResult(result = false) { addResult(result = false) {
if (!result) result = this.searchResults[0]; if (!result) result = this.searchResults[0];
if ( if (

View File

@ -3,15 +3,12 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import axios from 'axios'
import './assets/global.scss' import './assets/global.scss'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.config.globalProperties.axios=axios
app.config.globalProperties.apiUrl = window.ki.apiUrl app.config.globalProperties.apiUrl = window.ki.apiUrl
app.mount('#app') app.mount('#app')

123
src/mixins/request.mixin.js Normal file
View File

@ -0,0 +1,123 @@
import axios from "axios";
export default {
methods: {
async submitLogin() {
this.showErrorMessage = false;
try {
const loginResult = await axios.post(
`${this.apiUrl}/users/login`,
{
username: this.username,
password: this.password,
}
);
if (loginResult.status === 200) {
this.showErrorMessage = false;
//success login
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(error);
this.showErrorMessage = true;
}
},
async search() {
try {
const request = await axios.get(
`${this.apiUrl}/${this.type}s?search=${this.searchText}`,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (request.status === 200) {
this.searchResults = request.data[`${this.type}s`];
if (
!this.values
.map((item) => item[this.type].name.toLowerCase())
.includes(this.searchText.toLowerCase())
) {
this.searchResults.unshift({ name: this.searchText });
}
}
} catch (error) {
console.error();
this.showErrorMessage = true;
}
},
async initEditPage() {
try {
const userProfile = await axios.get(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
}
},
async submitFormEdit() {
try {
const formSubmitResult = await axios.post(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
this.profile,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (formSubmitResult.status === 200) {
// success
this.showSuccessMessage = true;
} else {
// failure
this.showErrorMessage = true;
}
} catch (error) {
console.error(error);
this.showErrorMessage = true;
}
},
async initViewPage() {
try {
const userProfile = await axios.get(
`${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
}
},
async submitSearch() {
this.showErrorMessage = false;
try {
let url = `${this.apiUrl}/users/profiles`;
if (this.searchText != "") {
url += `?nickname=${this.searchText}`;
}
const result = await axios.get(url, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
this.searchResults = result.data.profiles;
this.searchTotal = result.data.total;
} catch (error) {
console.error(error);
this.showErrorMessage = true;
}
},
},
}

View File

@ -43,10 +43,11 @@
</div> </div>
</template> </template>
<script> <script>
import axios from "axios"; import RequestMixin from "@/mixins/request.mixin"
export default { export default {
name: "Index", name: "Index",
mixins: [RequestMixin],
data() { data() {
return { return {
showErrorMessage: false, showErrorMessage: false,
@ -54,31 +55,5 @@ export default {
password: "", password: "",
}; };
}, },
methods: {
async submitLogin() {
this.showErrorMessage = false;
try {
const loginResult = await axios.post(
`${this.apiUrl}/users/login`,
{
username: this.username,
password: this.password,
}
);
if (loginResult.status === 200) {
this.showErrorMessage = false;
//success login
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(error);
this.showErrorMessage = true;
}
},
},
}; };
</script> </script>

View File

@ -63,8 +63,11 @@
</div> </div>
</template> </template>
<script> <script>
import RequestMixin from "@/mixins/request.mixin"
export default { export default {
name: "Search", name: "Search",
mixins: [RequestMixin],
data() { data() {
return { return {
showErrorMessage: false, showErrorMessage: false,
@ -77,26 +80,5 @@ export default {
if (this.$route.query.query) this.searchText = this.$route.query.query; if (this.$route.query.query) this.searchText = this.$route.query.query;
this.submitSearch(); this.submitSearch();
}, },
methods: {
async submitSearch() {
this.showErrorMessage = false;
try {
let url = `${this.apiUrl}/users/profiles`;
if (this.searchText != "") {
url += `?nickname=${this.searchText}`;
}
const result = await this.axios.get(url, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
this.searchResults = result.data.profiles;
this.searchTotal = result.data.total;
} catch (error) {
console.error(error);
this.showErrorMessage = true;
}
},
},
}; };
</script> </script>

View File

@ -2,7 +2,7 @@
<template> <template>
<div class="container"> <div class="container">
<h1>Profil bearbeiten</h1> <h1>Profil bearbeiten</h1>
<form @submit.prevent="submitForm()"> <form @submit.prevent="submitFormEdit()">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<input <input
@ -163,11 +163,13 @@
</div> </div>
</template> </template>
<script> <script>
import axios from "axios"; import RequestMixin from "@/mixins/request.mixin"
import AutoComplete from "@/components/AutoComplete"; import AutoComplete from "@/components/AutoComplete";
export default { export default {
name: "profileEdit", name: "profileEdit",
mixins: [RequestMixin],
components: { components: {
AutoComplete, AutoComplete,
}, },
@ -195,42 +197,7 @@ export default {
}; };
}, },
async created() { async created() {
try { await this.initEditPage();
const userProfile = await axios.get(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
}
},
methods: {
async submitForm() {
try {
const formSubmitResult = await axios.post(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
this.profile,
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
if (formSubmitResult.status === 200) {
// success
this.showSuccessMessage = true;
} else {
// failure
this.showErrorMessage = true;
}
} catch (error) {
console.error(error);
this.showErrorMessage = true;
}
},
}, },
}; };
</script> </script>

View File

@ -35,10 +35,13 @@
</div> </div>
</template> </template>
<script> <script>
import RequestMixin from "@/mixins/request.mixin"
import ProfileList from "@/components/ProfileList"; import ProfileList from "@/components/ProfileList";
export default { export default {
name: "profileView", name: "profileView",
mixins: [RequestMixin],
components: { components: {
ProfileList, ProfileList,
}, },
@ -48,17 +51,7 @@ export default {
}; };
}, },
async created() { async created() {
try { await this.initViewPage();
const userProfile = await this.axios.get(
`${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
{
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
} }
);
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
}
},
}; };
</script> </script>