introduce vuex

This commit is contained in:
weeman 2021-09-19 17:30:37 +02:00
parent 94d2a98b96
commit a408cae686
Signed by untrusted user: weeman
GPG Key ID: 34F0524D4DA694A1
10 changed files with 129 additions and 46 deletions

24
package-lock.json generated
View File

@ -21,7 +21,8 @@
"sass": "^1.37.5",
"sass-loader": "^10.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vuex": "^4.0.2"
}
},
"node_modules/@babel/code-frame": {
@ -13335,6 +13336,18 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"node_modules/vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
"dev": true,
"dependencies": {
"@vue/devtools-api": "^6.0.0-beta.11"
},
"peerDependencies": {
"vue": "^3.0.2"
}
},
"node_modules/watchpack": {
"version": "1.7.5",
"resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",
@ -25940,6 +25953,15 @@
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
"dev": true
},
"vuex": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
"dev": true,
"requires": {
"@vue/devtools-api": "^6.0.0-beta.11"
}
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",

View File

@ -20,6 +20,7 @@
"sass": "^1.37.5",
"sass-loader": "^10.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vuex": "^4.0.2"
}
}

View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<header v-if="this.$route.path.includes('/s/')">
<Navbar />
</header>
<router-view />
<router-view :key="$route.fullPath" />
<Footer />
</template>
<script>
@ -16,21 +16,10 @@ import Footer from '@/components/Footer.vue'
import Navbar from '@/components/Navbar.vue'
export default {
name: "App",
name: 'App',
components: {
Footer,
Navbar,
},
data() {
return {
memberId: null,
};
},
created() {
this.memberId = localStorage.getItem("user_id");
},
updated() {
this.memberId = localStorage.getItem("user_id");
},
}
};
</script>

View File

@ -58,8 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</div>
</template>
<script>
import RequestMixin from "@/mixins/request.mixin"
import { mapState } from 'vuex'
import RequestMixin from "@/mixins/request.mixin"
import ProfileList from "@/components/ProfileList";
export default {
@ -87,6 +88,9 @@ export default {
showErrorMessage: false,
};
},
computed: {
...mapState(['currentUserId'])
},
methods: {
addResult(result = false) {
if (!result) result = this.searchResults[0];
@ -98,7 +102,7 @@ export default {
let changeValues = Object.assign(this.values);
let newValue = {
profile_id: localStorage.getItem("user_id"),
profile_id: this.currentUserId,
};
if (this.type != "contacttype") {
newValue.level = 1;

View File

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<span class="d-sm-none">KI</span>
</router-link>
<button
@click="showMobileNavbar = !showMobileNavbar"
@click="toggleMobileNav"
class="navbar-toggler"
type="button"
aria-controls="navbarSupportedContent"
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</button>
<div
class="collapse navbar-collapse"
:class="{ show: showMobileNavbar }"
:class="{ show: showMobileNav }"
id="navbarSupportedContent"
>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<li class="nav-item">
<router-link
class="nav-link"
:to="{ path: `/s/profile/${$root.memberId}` }"
:to="{ path: `/s/profile/${currentUserId}` }"
active-class="active"
>Mein Profil</router-link
>
@ -86,21 +86,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<script>
import RequestMixin from "@/mixins/request.mixin"
import { mapState } from 'vuex'
import RequestMixin from '@/mixins/request.mixin'
export default {
name: "Navbar",
name: 'Navbar',
mixins: [RequestMixin],
data() {
return {
showMobileNavbar: false,
searchText: ''
searchText: '',
showMobileNav: false
}
},
computed: {
...mapState(['currentUserId'])
},
methods: {
toggleMobileNav() {
this.showMobileNav = !this.showMobileNav
},
logout() {
localStorage.clear();
this.$router.push({ path: "/" });
this.$store.dispatch('clear')
this.$router.push({ path: '/' });
},
searchRedirect() {
this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );

View File

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

View File

@ -2,6 +2,8 @@
//
// SPDX-License-Identifier: AGPL-3.0-or-later
import store from '@/store'
export default {
methods: {
async submitLogin() {
@ -26,8 +28,8 @@ export default {
}
const responseData = await response.json()
localStorage.setItem('token', responseData.token);
localStorage.setItem('user_id', responseData.user_id);
store.commit('setCurrentUserId', parseInt(responseData.user_id, 10))
store.commit('setToken', responseData.token)
this.$router.push({ path: '/s/search' });
} catch (error) {
console.error(error);
@ -38,7 +40,7 @@ export default {
try {
const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
Authorization: `Bearer ${store.state.token}`,
},
}
);
@ -65,13 +67,13 @@ export default {
}
},
async initEditPage() {
const userId = localStorage.getItem('user_id')
const userId = store.state.currentUserId
const url = `${this.apiUrl}/users/${userId}/profile`
try {
const response = await fetch(url, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`
Authorization: `Bearer ${store.state.token}`
},
}
);
@ -94,11 +96,11 @@ export default {
try {
const body = JSON.stringify(this.profile)
const response = await fetch(
`${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
`${this.apiUrl}/users/${store.currentUserId}/profile`,
{
method: 'POST',
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
Authorization: `Bearer ${store.state.token}`,
'Content-Type': 'application/json',
},
body
@ -119,7 +121,7 @@ export default {
async initViewPage() {
try {
const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
headers: { Authorization: `Bearer ${store.state.token}` },
}
);
@ -128,7 +130,7 @@ export default {
}
const responseData = await response.json()
this.profile = responseData.profile;
store.commit('setCurrentProfile', responseData.profile)
} catch (error) {
console.error(error);
}
@ -145,7 +147,7 @@ export default {
const response = await fetch(url, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
Authorization: `Bearer ${store.state.token}`,
},
});

View File

@ -3,6 +3,9 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store'
import Index from '@/views/Index.vue'
import Search from '@/views/Search.vue'
import Edit from '@/views/profile/Edit.vue'
@ -16,9 +19,9 @@ const routes = [
template: "<router-view/>",
},
beforeEnter: (to, from, next) => {
if(localStorage.getItem('token') !== null){
if (store.state.token){
next()
}else{
} else {
next({path: '/', query: {url: to.fullPath, access: false}})
}
},

50
src/store.js Normal file
View File

@ -0,0 +1,50 @@
// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
import { createStore } from 'vuex'
const localStorageKeys = {
currentUserId: 'ki_current_user_id',
token: 'ki_token',
}
export default createStore({
state() {
return {
currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
currentProfile: null
}
},
mutations: {
clearCurrentUserId(state) {
state.currentUserId = null
localStorage.removeItem(localStorageKeys.currentUserId)
},
setCurrentUserId(state, currentUserId) {
state.currentUserId = currentUserId
localStorage.setItem(
localStorageKeys.currentUserId,
JSON.stringify(currentUserId)
)
},
clearToken(state) {
state.token = null
localStorage.removeItem(localStorageKeys.token)
},
setToken(state, token) {
state.token = token
localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
},
setCurrentProfile(state, profile) {
state.currentProfile = profile
}
},
actions: {
clear(context) {
context.commit('clearCurrentUserId')
context.commit('clearToken')
}
}
})

View File

@ -40,9 +40,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</div>
</template>
<script>
import RequestMixin from "@/mixins/request.mixin"
import { mapState } from 'vuex'
import ProfileList from "@/components/ProfileList";
import RequestMixin from '@/mixins/request.mixin'
import ProfileList from '@/components/ProfileList';
export default {
name: "profileView",
@ -50,10 +52,10 @@ export default {
components: {
ProfileList,
},
data() {
return {
profile: null
};
computed: {
...mapState({
profile: 'currentProfile'
})
},
async created() {
await this.initViewPage();