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

View File

@ -2,172 +2,171 @@ 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 (
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;
}
);
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
);
} else {
// if not set children of targen from children of source
targetPluginRouteConfig.children =
sourcePluginChildRouteConfig.children;
}
} 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);
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 (targetMainConfig) {
const sourceChildren: RouteConfig[] = [];
sourceMainConfig.children?.forEach(child => {
sourceChildren.push(<RouteConfig>child);
});
if (targetMainConfig.children) {
targetMainConfig.children = Object.assign(
targetMainConfig.children,
sourceChildren
);
} else {
targetMainConfig.children = sourceChildren;
}
} else {
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;
}
// combine Links of Plugins from source to target
function combineMainLinks (
target: PluginMainLink[],
source: PluginMainLink
): PluginMainLink[] {
const targetPluginMainLink: PluginMainLink | undefined = target.find(
(targetPluginMainLink: PluginMainLink) => {
function combineMainLinks(
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);
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,
function loadPlugin(
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: [],

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[];
}
}

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>

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>

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>

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>

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;

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;

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>

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>

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>

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>

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;

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;

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>

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>

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;

View File

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

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);

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
@ -19,7 +17,7 @@ export const Router: VueRouter = new VueRouter({
base: process.env.VUE_ROUTER_BASE
});
export default route<Store<StateInterface>>(function ({ Vue }) {
export default route<Store<StateInterface>>(function({ Vue }) {
Vue.use(VueRouter);
return Router;