release v2.0.0 #4

Merged
crimsen merged 481 commits from develop into master 2024-01-18 15:15:08 +00:00
9 changed files with 267 additions and 38 deletions
Showing only changes of commit 8409e09f19 - Show all commits

View File

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

View File

@ -25,6 +25,7 @@
:rules="rules" :rules="rules"
/> />
<div class="row justify-end"> <div class="row justify-end">
<q-btn label="test" @click="showStore" />
<q-btn label="Login" type="submit" color="primary" /> <q-btn label="Login" type="submit" color="primary" />
</div> </div>
</q-form> </q-form>
@ -47,10 +48,18 @@ export default defineComponent({
function doLogin() { function doLogin() {
console.log(username.value, password.value); 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> </script>

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>

View File

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

View File

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

View File

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

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;

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 { StateInterface } from 'src/store';
import { axios } from 'boot/axios'; 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 { export interface Token {
browser: string; browser: string;
@ -19,7 +22,11 @@ export interface User {
roles: string[]; roles: string[];
} }
export interface UserStateInterface { export interface UserStateInterface extends LoginResponse {
loginLoading: boolean;
}
export interface LoginResponse {
permissions: string[]; permissions: string[];
token: Token; token: Token;
user: User; user: User;
@ -36,17 +43,84 @@ const state: UserStateInterface = {
mail: '', mail: '',
roles: [] roles: []
}, },
userid: '' userid: '',
loginLoading: false
}; };
const mutation: MutationTree<UserStateInterface> = { const mutations: MutationTree<UserStateInterface> = {
setState(state: UserStateInterface, data: UserStateInterface) { setPermissions(state, data: []) {
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> = { const actions: ActionTree<UserStateInterface, StateInterface> = {
async = login({ commit: Commit }, data: LoginData) { login({ commit }, data: LoginData) {
axios 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;

View File

@ -8,11 +8,7 @@ import routes from './routes';
* If not building with SSR mode, you can * If not building with SSR mode, you can
* directly export the Router instantiation * directly export the Router instantiation
*/ */
export const Router: VueRouter = new VueRouter({
export default route<Store<StateInterface>>(function ({ Vue }) {
Vue.use(VueRouter);
const Router = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }), scrollBehavior: () => ({ x: 0, y: 0 }),
routes, routes,
@ -21,7 +17,10 @@ export default route<Store<StateInterface>>(function ({ Vue }) {
// quasar.conf.js -> build -> publicPath // quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE, mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE base: process.env.VUE_ROUTER_BASE
}); });
export default route<Store<StateInterface>>(function({ Vue }) {
Vue.use(VueRouter);
return Router; return Router;
}) });