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

Strukturänderung im Plugin 

Plugins haben nun PluginRouteConfig für mainRoute und outRoute. Dabei werden die wirklichen routes, shortcuts und mainlinks daraus generiert.
This commit is contained in:
Tim Gröger 2020-10-31 15:09:02 +01:00
parent 22ca9b03a0
commit caedb5a9d2
21 changed files with 246 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
src/boot/plugins.ts
View File

@ -2,112 +2,55 @@ import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { Module, Store } from 'vuex';
import { StateInterface } from 'src/store';
import { FG_Plugin } from 'src/plugins';
import routes from 'src/router/routes';
const config = {
// Do not change required Modules !!
requiredModules: ['user'],
requiredModules: ['User'],
// here you can import plugins.
loadModules: []
};
// do not change anything here !!
interface ShortCutLink {
link: string;
icon: string;
}
interface Plugin {
name: string;
routes: RouteConfig[];
store?: Map<string, Module<any, StateInterface>>;
mainLink: PluginMainLink;
requiredModules: string[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];
version: string;
}
interface PluginMainLink extends PluginChildLink {
children: PluginChildLink[];
}
interface PluginChildLink {
name: string;
title: string;
link: string;
icon: string;
}
interface LoadedPlugin {
name: string;
version: string;
}
interface LoadedPlugins {
plugins: LoadedPlugin[];
routes: RouteConfig[];
mainLinks: PluginMainLink[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];
}
export {
Plugin,
PluginChildLink,
PluginMainLink,
ShortCutLink,
LoadedPlugins,
LoadedPlugin
};
// combine routes from source to target
function combineRoutes(
target: RouteConfig[],
source: RouteConfig[]
source: FG_Plugin.PluginRouteConfig[],
mainPath: '/' | '/main' = '/'
): RouteConfig[] {
// iterate first layer e.g. /main, / etc.
source.forEach((sourceRouteConfig: RouteConfig) => {
const targetRouteConfig: RouteConfig | undefined = target.find(
(routeConfig: RouteConfig) => {
return sourceRouteConfig.path == routeConfig.path;
target.forEach(target => {
if (target.path === mainPath) {
console.log('target', target.path);
source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
console.log('sourceMainconfig', sourceMainConfig);
const targetMainConfig = target.children?.find(
(targetMainConfig: RouteConfig) => {
return sourceMainConfig.path === targetMainConfig.path;
}
);
if (targetRouteConfig) {
// if exists first layer in target exist iterate through 2nd layer e.g. /main/user, /main/about
sourceRouteConfig.children ?.forEach(
(sourcePluginChildRouteConfig: RouteConfig) => {
const targetPluginRouteConfig:
| RouteConfig
| undefined = targetRouteConfig.children ?.find(
(routeConfig: RouteConfig) => {
return sourcePluginChildRouteConfig.path == routeConfig.path;
}
);
if (targetPluginRouteConfig) {
// if 2nd layer in target exist check if target has children path.
if (targetPluginRouteConfig.children) {
// if target has children path, add children from source.
targetPluginRouteConfig.children = Object.assign(
targetPluginRouteConfig.children,
sourcePluginChildRouteConfig.children
if (targetMainConfig) {
const sourceChildren: RouteConfig[] = [];
sourceMainConfig.children?.forEach(child => {
sourceChildren.push(<RouteConfig>child);
});
if (targetMainConfig.children) {
targetMainConfig.children = Object.assign(
targetMainConfig.children,
sourceChildren
);
} else {
// if not set children of targen from children of source
targetPluginRouteConfig.children =
sourcePluginChildRouteConfig.children;
targetMainConfig.children = sourceChildren;
}
} else {
// if target not exists in 2nd layer, add source to children of first targen
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
targetRouteConfig.children.push(sourcePluginChildRouteConfig);
if (target.children === undefined) {
target.children = [];
}
target.children.push(<RouteConfig>sourceMainConfig);
}
);
} else {
// if target not exists in first layer, add source
target.push(sourceRouteConfig);
});
}
});
return target;
@ -115,59 +58,115 @@ function combineRoutes (
// combine Links of Plugins from source to target
function combineMainLinks(
target: PluginMainLink[],
source: PluginMainLink
): PluginMainLink[] {
const targetPluginMainLink: PluginMainLink | undefined = target.find(
(targetPluginMainLink: PluginMainLink) => {
target: FG_Plugin.PluginMainLink[],
source: FG_Plugin.PluginRouteConfig
): FG_Plugin.PluginMainLink[] {
const targetPluginMainLink:
| FG_Plugin.PluginMainLink
| undefined = target.find(
(targetPluginMainLink: FG_Plugin.PluginMainLink) => {
console.log(targetPluginMainLink.title, source.title);
return targetPluginMainLink.title == source.title;
}
);
if (targetPluginMainLink) {
source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
targetPluginMainLink.children.push(sourcePluginChildLink);
source.children?.forEach(
(sourcePluginChildLink: FG_Plugin.PluginRouteConfig) => {
targetPluginMainLink.children.push(<FG_Plugin.PluginChildLink>{
title: sourcePluginChildLink.title,
icon: sourcePluginChildLink.icon,
link: sourcePluginChildLink.name,
name: sourcePluginChildLink.name
});
} else {
target.push(source);
}
);
} else {
const mainLink: FG_Plugin.PluginMainLink = <FG_Plugin.PluginMainLink>{
title: source.title,
icon: source.icon,
link: source.name,
name: source.name
};
source.children?.forEach(child => {
if (mainLink.children === undefined) {
mainLink.children = [];
}
mainLink.children.push(<FG_Plugin.PluginChildLink>{
title: child.title,
icon: child.icon,
link: child.name,
name: child.name
});
});
target.push(mainLink);
}
return target;
}
function loadShortCuts(
target: FG_Plugin.ShortCutLink[],
source: FG_Plugin.PluginRouteConfig[]
): FG_Plugin.ShortCutLink[] {
source.forEach(route => {
if (route.shortcut) {
target.push(<FG_Plugin.ShortCutLink>{
link: route.name,
icon: route.icon
});
}
if (route.children) {
target = loadShortCuts(target, route.children);
}
});
return target;
}
// loade plugins
function loadPlugin(
loadedPlugins: LoadedPlugins,
loadedPlugins: FG_Plugin.LoadedPlugins,
modules: string[],
plugins: Plugin[],
store: Store<any>
): LoadedPlugins {
): FG_Plugin.LoadedPlugins {
modules.forEach(requiredModule => {
const plugin = plugins.find(plugin => {
const plugin = <FG_Plugin.Plugin | undefined>plugins.find(plugin => {
return plugin.name == requiredModule;
});
if (plugin) {
loadedPlugins.routes = combineRoutes(loadedPlugins.routes, plugin.routes);
if (plugin.mainRoutes) {
loadedPlugins.routes = combineRoutes(
loadedPlugins.routes,
plugin.mainRoutes,
'/main'
);
plugin.mainRoutes.forEach(route => {
loadedPlugins.mainLinks = combineMainLinks(
loadedPlugins.mainLinks,
route
);
});
loadedPlugins.shortcuts = loadShortCuts(
loadedPlugins.shortcuts,
plugin.mainRoutes
);
}
if (plugin.outRoutes) {
loadedPlugins.routes = combineRoutes(
loadedPlugins.routes,
plugin.outRoutes
);
loadedPlugins.shortcutsOut = loadShortCuts(
loadedPlugins.shortcutsOut,
plugin.outRoutes
);
}
if (plugin.store) {
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,
plugin.mainLink
);
loadedPlugins.shortcuts = loadedPlugins.shortcuts.concat(
plugin.shortcuts
);
loadedPlugins.shortcutsOut = loadedPlugins.shortcutsOut.concat(
plugin.shortcutsOut
);
loadedPlugins.plugins.push({
name: plugin.name,
version: plugin.version
@ -183,8 +182,8 @@ function loadPlugin (
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
export default boot<Store<StateInterface>>(({ Vue, router, store }) => {
const plugins: Plugin[] = [];
let loadedPlugins: LoadedPlugins = {
routes: [],
let loadedPlugins: FG_Plugin.LoadedPlugins = {
routes,
plugins: [],
mainLinks: [],
shortcuts: [],

8
src/layouts/MainLayout.vue
View File

@ -99,10 +99,10 @@
import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import { Screen } from 'quasar';
import { LoadedPlugins, PluginMainLink } from 'boot/plugins';
import { defineComponent, ref, computed } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { FG_Plugin } from 'src/plugins';
const links = [
{
@ -130,7 +130,7 @@ const shortcuts = [
declare module 'vue/types/vue' {
interface Vue {
$flaschengeistPlugins: LoadedPlugins;
$flaschengeistPlugins: FG_Plugin.LoadedPlugins;
}
}
@ -155,9 +155,9 @@ export default defineComponent({
const pluginChildLinks = computed(() => {
const link:
| PluginMainLink
| FG_Plugin.PluginMainLink
| undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
(plugin: PluginMainLink) => {
(plugin: FG_Plugin.PluginMainLink) => {
if (ctx.root.$route.matched.length > 1) {
return plugin.name == ctx.root.$route.matched[1].name;
}

49
src/plugins.d.ts vendored Normal file
View File

@ -0,0 +1,49 @@
import { RouteConfig } from 'vue-router';
import { Module } from 'vuex';
import { StateInterface } from 'src/store';
declare namespace FG_Plugin {
interface ShortCutLink {
link: string;
icon: string;
}
interface PluginRouteConfig extends RouteConfig {
shortcut?: boolean;
title: string;
icon: string;
children?: PluginRouteConfig[];
}
interface Plugin {
name: string;
mainRoutes?: PluginRouteConfig[];
outRoutes?: PluginRouteConfig[];
store?: Map<string, Module<any, StateInterface>>;
requiredModules: string[];
version: string;
}
interface PluginMainLink extends PluginChildLink {
children: PluginChildLink[];
}
interface PluginChildLink {
name: string;
title: string;
link: string;
icon: string;
}
interface LoadedPlugin {
name: string;
version: string;
}
interface LoadedPlugins {
plugins: LoadedPlugin[];
routes: RouteConfig[];
mainLinks: PluginMainLink[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];
}
}

32
src/plugins/plugin-example/components/navigation/PluginLinks.vue
View File

@ -1,32 +0,0 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{
title: 'Neues Plugin1',
link: 'plugin1_1',
icon: 'mdi-information-outline'
},
{ title: 'Altes Plugin1', link: 'plugin1_2', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

17
src/plugins/plugin-example/pages/NewPlugin.vue
View File

@ -1,17 +0,0 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Neues {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

16
src/plugins/plugin-example/pages/OldPlugin.vue
View File

@ -1,16 +0,0 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Altes {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

22
src/plugins/plugin-example/pages/Plugin.vue
View File

@ -1,22 +0,0 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == mainLink.link">
<q-card-section>
{{ mainLink.title }}
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink };
}
});
</script>

37
src/plugins/plugin-example/plugin.ts
View File

@ -1,37 +0,0 @@
import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
import routes from 'src/plugins/plugin-example/routes';
const mainLink: PluginMainLink = {
name: 'plugin1',
title: 'Plugin1',
link: 'plugin1',
icon: 'mdi-toy-brick',
children: [
{
name: 'plugin1',
title: 'Neues Plugin1',
link: 'plugin1_1',
icon: 'mdi-information-outline'
},
{
name: 'plugin1',
title: 'Altes Plugin1',
link: 'plugin1_2',
icon: 'mdi-information-variant'
}
]
};
const plugin: Plugin = {
routes,
mainLink,
name: mainLink.name,
requiredModules: [],
shortcuts: [],
shortcutsOut: [],
version: '1.0.2'
};
export { mainLink };
export default plugin;

37
src/plugins/plugin-example/routes/index.ts
View File

@ -1,37 +0,0 @@
import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/main',
components: {
default: () => import('layouts/MainLayout.vue')
},
children: [
{
path: 'plugin1',
name: 'plugin1',
meta: { permissions: ['user'] },
components: {
default: () => import('../pages/Plugin.vue'),
'plugin-nav': () => import('../components/navigation/PluginLinks.vue')
},
children: [
{
path: 'plugin1_1',
name: 'plugin1_1',
meta: { permissions: ['user'] },
component: () => import('../pages/NewPlugin.vue')
},
{
path: 'plugin1_2',
name: 'plugin1_2',
meta: { permissions: ['user'] },
component: () => import('../pages/OldPlugin.vue')
}
]
}
]
}
];
export default routes;

32
src/plugins/user-plugin/components/navigation/PluginLinks.vue
View File

@ -1,32 +0,0 @@
<template>
<div>
<essential-link
v-for="(link, index) in links"
:key="index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</div>
</template>
<script lang="ts">
const links = [
{
title: 'Neues Plugin2',
link: 'plugin2_1',
icon: 'mdi-information-outline'
},
{ title: 'Altes Plugin2', link: 'plugin2_2', icon: 'mdi-information-variant' }
];
import { defineComponent } from '@vue/composition-api';
import EssentialLink from 'components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'ComponentName'
components: { EssentialLink },
setup() {
return { links };
}
});
</script>

17
src/plugins/user-plugin/pages/NewPlugin.vue
View File

@ -1,17 +0,0 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Neues {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

16
src/plugins/user-plugin/pages/OldPlugin.vue
View File

@ -1,16 +0,0 @@
<template>
<q-card class="col-4" height="">
<q-card-section> Altes {{ mainLink.title }} </q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup() {
return { mainLink };
}
});
</script>

22
src/plugins/user-plugin/pages/Plugin.vue
View File

@ -1,22 +0,0 @@
<template>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="" v-if="$route.name == mainLink.link">
<q-card-section>
{{ mainLink.title }}
</q-card-section>
</q-card>
<router-view />
</q-page>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {
const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink };
}
});
</script>

43
src/plugins/user-plugin/plugin.ts
View File

@ -1,43 +0,0 @@
import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
import routes from './routes';
const mainLink: PluginMainLink = {
name: 'user-plugin',
title: 'User',
link: 'user',
icon: 'mdi-account',
children: [
{
name: 'user-plugin',
title: 'Erstes Plugin für User',
link: 'user-plugin1',
icon: 'mdi-account-plus'
},
{
name: 'user-plugin',
title: 'Zweites Plugin für User',
link: 'user-plugin2',
icon: 'mdi-account-minus'
}
]
};
const shortcuts: ShortCutLink[] = [
{
link: 'user-plugin2',
icon: 'mdi-account-minus'
}
];
const plugin: Plugin = {
routes,
mainLink,
name: mainLink.name,
requiredModules: ['user'],
shortcuts,
shortcutsOut: [],
version: '0.1.0'
};
export { mainLink };
export default plugin;

31
src/plugins/user-plugin/routes/index.ts
View File

@ -1,31 +0,0 @@
import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/main',
components: {
default: () => import('layouts/MainLayout.vue')
},
children: [
{
path: 'user',
name: 'user',
component: () => import('src/plugins/user/pages/User.vue'),
children: [
{
path: 'user-plugin',
name: 'user-plugin1',
component: () => import('../pages/NewPlugin.vue')
},
{
path: 'user-plugin2',
name: 'user-plugin2',
component: () => import('../pages/OldPlugin.vue')
}
]
}
]
}
];
export default routes;

39
src/plugins/user/pages/MainPage.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div>
<q-page padding v-if="checkMain">
<q-card>
<q-card-section>
<q-list
v-for="(mainRoute, index) in mainRoutes"
:key="'mainRoute' + index"
>
<essential-link
v-for="(route, index2) in mainRoute.children"
:key="'route' + index2"
:title="route.title"
:icon="route.icon"
:link="route.name"
/>
</q-list>
</q-card-section>
</q-card>
</q-page>
<router-view />
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import mainRoutes from 'src/plugins/user/routes';
export default defineComponent({
// name: 'PageName'
components: { EssentialLink },
setup(_, { root }) {
const checkMain = computed(() => {
return root.$route.matched.length == 2;
});
return { checkMain, mainRoutes };
}
});
</script>

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

@ -1,10 +1,6 @@
<template>
<div>
<q-page
padding
class="fit row justify-center content-center items-center"
v-if="checkMain"
>
<q-page padding class="fit row justify-center content-center items-center">
<q-card class="col-4" height="">
<q-card-section>
Name: {{ userObj.firstname }} {{ userObj.lastname }}<br />
@ -18,13 +14,11 @@
</q-card-section>
</q-card>
</q-page>
<router-view />
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from '@vue/composition-api';
import { mainLink } from '../plugin';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
@ -37,10 +31,7 @@ export default defineComponent({
const sessionObj = computed(() => store.state.user.session);
const checkMain = computed(() => {
return mainLink.name == root.$route.name;
});
return { userObj, sessionObj, checkMain };
return { userObj, sessionObj };
}
});
</script>

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

@ -1,32 +1,14 @@
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 { StateInterface } from 'src/store';
import { FG_Plugin } from 'src/plugins';
const mainLink: PluginMainLink = {
name: 'user',
title: 'loadFromStore("user/displayName")',
link: 'user',
icon: 'mdi-account',
children: [
{
name: 'user',
title: 'Einstellungen',
link: 'user-settings',
icon: 'mdi-cog'
}
]
};
const plugin: Plugin = {
routes,
mainLink,
name: mainLink.name,
const plugin: FG_Plugin.Plugin = {
name: 'User',
mainRoutes: routes,
requiredModules: [],
shortcutsOut: [],
shortcuts: [],
version: '0.0.1',
store: new Map<string, Module<any, StateInterface>>([
['user', userStore],
@ -34,6 +16,4 @@ const plugin: Plugin = {
])
};
export { mainLink };
export default plugin;

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

@ -1,26 +1,33 @@
import { RouteConfig } from 'vue-router';
const routes: RouteConfig[] = [
{
path: '/main',
component: () => import('layouts/MainLayout.vue'),
children: [
import { FG_Plugin } from 'src/plugins';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
title: 'loadFromStore("user/displayName")',
icon: 'mdi-account',
path: 'user',
name: 'user',
component: () => import('../pages/User.vue'),
component: () => import('../pages/MainPage.vue'),
meta: { permission: 'user' },
children: [
{
title: 'Hauptkanal',
icon: 'mdi-account-hard-hat',
path: 'user-main',
name: 'user-main',
shortcut: false,
meta: { permission: 'user' },
component: () => import('../pages/User.vue')
},
{
title: 'Einstellungen',
icon: 'mdi-cog',
path: 'settings',
name: 'user-settings',
shortcut: true,
meta: { permission: 'user' },
component: () => import('../pages/Settings.vue')
}
]
}
]
}
];
export default routes;
export default mainRoutes;

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

@ -73,7 +73,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
LocalStorage.set('user', response.data.user);
LocalStorage.set('session', response.data.session);
void Router.push({ name: 'user' });
void Router.push({ name: 'user-main' });
})
.catch(error => {
console.exception(error);

2
src/router/index.ts
View File

@ -1,7 +1,6 @@
import { route } from 'quasar/wrappers';
import VueRouter from 'vue-router';
import { Store } from 'vuex';
import routes from './routes';
import { StateInterface } from 'src/store';
/*
@ -10,7 +9,6 @@ import { StateInterface } from 'src/store';
*/
export const Router: VueRouter = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode