Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

release v2.0.0 #4

Merged
crimsen merged 481 commits from develop into master 2024-01-18 15:15:08 +00:00
Conversation 0 Commits 481 Files Changed 156 +267 -38
9 changed files with 267 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8409e09f19 - Show all commits

21
src/boot/plugins.ts
View File

@ -1,12 +1,12 @@
import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { Module } from 'vuex';
import { Module, Store } from 'vuex';
const config = {
// Do not change required Modules !!
requiredModules: ['user'],
// here you can import plugins.
loadModules: ['plugin1', 'user-plugin']
loadModules: []
};
// do not change anything here !!
@ -19,7 +19,7 @@ interface ShortCutLink {
interface Plugin {
name: string;
routes: RouteConfig[];
store?: Module<never, never>[];
store?: Map<string, Module<any, any>>;
mainLink: PluginMainLink;
requiredModules: string[];
shortcuts: ShortCutLink[];
@ -65,7 +65,7 @@ function combineRoutes(
target: RouteConfig[],
source: RouteConfig[]
): RouteConfig[] {
// iterate first layer e.g. /main, /login etc.
// iterate first layer e.g. /main, / etc.
source.forEach((sourceRouteConfig: RouteConfig) => {
const targetRouteConfig: RouteConfig | undefined = target.find(
(routeConfig: RouteConfig) => {
@ -138,7 +138,7 @@ function loadPlugin(
loadedPlugins: LoadedPlugins,
modules: string[],
plugins: Plugin[],
store: any
store: Store<any>
): LoadedPlugins {
modules.forEach(requiredModule => {
const plugin = plugins.find(plugin => {
@ -147,10 +147,15 @@ function loadPlugin(
if (plugin) {
loadedPlugins.routes = combineRoutes(loadedPlugins.routes, plugin.routes);
if (plugin.store) {
plugin.store.forEach(store_module => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
store.registerModule(store_module);
console.log(plugin.store);
console.log(plugin.store.keys());
plugin.store.forEach((store_plugin, store_namespace) => {
store.registerModule(store_namespace, store_plugin);
});
//.forEach(store_key => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
//store.registerModule(store_key, plugin.store.get(store_key));
//});
}
loadedPlugins.mainLinks = combineMainLinks(
loadedPlugins.mainLinks,

13
src/pages/Login.vue
View File

@ -25,6 +25,7 @@
:rules="rules"
/>
<div class="row justify-end">
<q-btn label="test" @click="showStore" />
<q-btn label="Login" type="submit" color="primary" />
</div>
</q-form>
@ -47,10 +48,18 @@ export default defineComponent({
function doLogin() {
console.log(username.value, password.value);
void ctx.root.$router.push({ name: 'main' });
ctx.root.$store.dispatch('user/login', {
userid: username.value,
password: password.value
});
//ctx.root.$router.push({ name: 'main' });
}
return { username, password, doLogin, rules };
function showStore() {
console.log(ctx.root.$store);
}
return { username, password, doLogin, rules, showStore };
}
});
</script>

42
src/plugins/user/pages/Settings.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div>
<q-page padding class="fit row justify-center content-center items-center">
<div class="text-h5 row">
Deine Sessions:
</div>
<!--<div class="fit row justify-center content-center items-center">
<q-card
class="col-4"
height=""
v-for="(session, index) in sessions"
:key="'session' + index"
>
<q-card-section>
{{ session }}
</q-card-section>
</q-card>
</div> -->
<div class="row">
<q-btn label="show sessions" @click="showRootGetters" />
</div>
</q-page>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const sessions = computed(
() => ctx.root.$store.getters['sessions/sessions']
);
function showRootGetters() {
//ctx.root.$store.dispatch('sessions/getSessions');
console.log(sessions.value);
}
return { showRootGetters, sessions };
}
});
</script>

17
src/plugins/user/pages/User.vue
View File

@ -7,22 +7,33 @@
>
<q-card class="col-4" height="">
<q-card-section>
{{ mainLink.title }}
{{ `Hallo ${firstname} ${lastname}` }}
</q-card-section>
</q-card>
<q-btn label="test" @click="showStore" />
</q-page>
<router-view />
</div>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink };
const firstname = computed(
() => ctx.root.$store.getters['user/user'].firstname
);
const lastname = computed(
() => ctx.root.$store.getters['user/user'].lastname
);
function showStore() {
console.log(ctx.root.$store.getters);
}
return { a, mainLink, firstname, lastname, showStore };
}
});
</script>

18
src/plugins/user/plugin.ts
View File

@ -1,4 +1,7 @@
import { Plugin, PluginMainLink } from 'boot/plugins';
import { Module } from 'vuex';
import userStore from './store/user';
import sessionsStore from './store/session';
import routes from './routes';
const mainLink: PluginMainLink = {
@ -6,7 +9,14 @@ const mainLink: PluginMainLink = {
title: 'User',
link: 'user',
icon: 'mdi-account',
children: []
children: [
{
name: 'user',
title: 'Einstellungen',
link: 'user-settings',
icon: 'mdi-cog'
}
]
};
const plugin: Plugin = {
@ -16,7 +26,11 @@ const plugin: Plugin = {
requiredModules: [],
shortcutsOut: [],
shortcuts: [],
version: '0.0.1'
version: '0.0.1',
store: new Map<string, Module<any, any>>([
['user', userStore],
['sessions', sessionsStore]
])
};
export { mainLink };

9
src/plugins/user/routes/index.ts
View File

@ -8,7 +8,14 @@ const routes: RouteConfig[] = [
{
path: 'user',
name: 'user',
component: () => import('../pages/User.vue')
component: () => import('../pages/User.vue'),
children: [
{
path: 'settings',
name: 'user-settings',
component: () => import('../pages/Settings.vue')
}
]
}
]
}

68
src/plugins/user/store/session.ts Normal file
View File

@ -0,0 +1,68 @@
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { LoginData } from 'src/plugins/user/models';
import { AxiosResponse } from 'axios';
import { LocalStorage } from 'quasar';
import { Router } from 'src/router';
export interface SessionInterface {
sessions: Session[];
loading: boolean;
}
export interface Session {
browser: string;
expires: string;
lifetime: number;
platform: string;
token: string;
}
const state: SessionInterface = {
sessions: [],
loading: false
};
const mutations: MutationTree<SessionInterface> = {
setSessions(state, sessions: Session[]) {
state.sessions = sessions;
},
setLoading(state, value) {
state.loading = value;
}
};
const actions: ActionTree<SessionInterface, StateInterface> = {
getSessions({ commit, rootGetters }) {
console.log(rootGetters);
commit('setLoading', true);
axios
.get('http://localhost:5000/auth', {
headers: { Token: rootGetters['user/token'].token }
})
.then(response => {
commit('setSessions', response.data);
})
.catch(error => {
console.exception(error);
})
.finally(() => {
commit('setLoading', false);
});
}
};
const getters: GetterTree<SessionInterface, StateInterface> = {
sessions(state) {
return state.sessions;
}
};
const sessions: Module<SessionInterface, StateInterface> = {
namespaced: true,
state,
mutations,
actions,
getters
};
export default sessions;

92
src/plugins/user/store/user.ts
View File

@ -1,7 +1,10 @@
import { Module, MutationTree, ActionTree, Commit } from 'vuex';
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { LoginData } from 'src/plugins/user/models'
import { LoginData } from 'src/plugins/user/models';
import { AxiosResponse } from 'axios';
import { LocalStorage } from 'quasar';
import { Router } from 'src/router';
export interface Token {
browser: string;
@ -19,7 +22,11 @@ export interface User {
roles: string[];
}
export interface UserStateInterface {
export interface UserStateInterface extends LoginResponse {
loginLoading: boolean;
}
export interface LoginResponse {
permissions: string[];
token: Token;
user: User;
@ -36,17 +43,84 @@ const state: UserStateInterface = {
mail: '',
roles: []
},
userid: ''
userid: '',
loginLoading: false
};
const mutation: MutationTree<UserStateInterface> = {
setState(state: UserStateInterface, data: UserStateInterface) {
state = data;
const mutations: MutationTree<UserStateInterface> = {
setPermissions(state, data: []) {
state.permissions = data;
},
setToken(state, data: Token) {
state.token = data;
},
setUser(state, data: User) {
state.user = data;
},
setUserId(state, data: string) {
state.userid = data;
},
setLoginLoading(state, data: boolean) {
state.loginLoading = data;
},
showState(state) {
console.log(state);
}
};
const actions: ActionTree<UserStateInterface, StateInterface> = {
async = login({ commit: Commit }, data: LoginData) {
axios
login({ commit }, data: LoginData) {
console.log('bla');
commit('setLoginLoading', true);
void axios
.post('http://localhost:5000/auth', data)
.then((response: AxiosResponse<LoginResponse>) => {
commit('setPermissions', response.data.permissions);
console.log('saved permisisons');
commit('setToken', response.data.token);
commit('setUser', response.data.user);
commit('setUserId', response.data.userid);
commit('showState');
//LocalStorage.set('permissions', response.data.permissions);
//LocalStorage.set('token', response.data.token);
//LocalStorage.set('user', response.data.user);
//LocalStorage.set('userid', response.data.userid);
void Router.push({ name: 'user' });
})
.catch(error => {
console.exception(error);
})
.finally(() => {
commit('setLoginLoading', false);
});
}
};
const getters: GetterTree<UserStateInterface, StateInterface> = {
permissions({ permissions }) {
return permissions;
},
token({ token }) {
return token;
},
user({ user }) {
return user;
},
userid({ userid }) {
return userid;
},
loginLoading({ loginLoading }) {
return loginLoading;
}
};
const userStore: Module<UserStateInterface, StateInterface> = {
namespaced: true,
actions,
getters,
mutations,
state
};
export default userStore;

25
src/router/index.ts
View File

@ -8,20 +8,19 @@ import routes from './routes';
* If not building with SSR mode, you can
* directly export the Router instantiation
*/
export const Router: VueRouter = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
export default route<Store<StateInterface>>(function ({ Vue }) {
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE
});
export default route<Store<StateInterface>>(function({ Vue }) {
Vue.use(VueRouter);
const Router = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE
});
return Router;
})
});