ShortCuts und Versionen hinzugefügt.

Code leicht aufgeräumt und verbessert.
This commit is contained in:
Tim Gröger 2020-10-14 22:27:20 +02:00
parent a23a17285b
commit 4324681b75
13 changed files with 177 additions and 214 deletions

View File

@ -2,22 +2,29 @@ import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router'; import { RouteConfig } from 'vue-router';
import { Module } from 'vuex'; import { Module } from 'vuex';
interface PluginRouteConfig extends RouteConfig { const config = {
example?: unknown; // Do not change required Modules !!
} requiredModules: ['user'],
// here you can import plugins.
loadModules: ['plugin1', 'user-plugin']
};
interface EssentialLink { // do not change anything here !!
title: string;
interface ShortCutLink {
link: string; link: string;
icon?: string; icon: string;
} }
interface Plugin { interface Plugin {
name: string; name: string;
routes: PluginRouteConfig[] | RouteConfig[]; routes: RouteConfig[];
store?: Module<never, never>[]; store?: Module<never, never>[];
mainLink: PluginMainLink; mainLink: PluginMainLink;
requiredModules: string[]; requiredModules: string[];
shortCuts: ShortCutLink[];
shortCutsOut: ShortCutLink[];
version: string;
} }
interface PluginMainLink extends PluginChildLink { interface PluginMainLink extends PluginChildLink {
@ -31,15 +38,29 @@ interface PluginChildLink {
icon: string; icon: string;
} }
const config = { interface LoadedPlugin {
// Do not change required Modules !! name: string;
requiredModules: ['user'], version: string;
// here you can import plugins. }
loadModules: ['plugin1', 'user-plugin']
interface LoadedPlugins {
plugins: LoadedPlugin[];
routes: RouteConfig[];
mainLinks: PluginMainLink[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];
}
export {
Plugin,
PluginChildLink,
PluginMainLink,
ShortCutLink,
LoadedPlugins,
LoadedPlugin
}; };
export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink }; // combine routes from source to target
function combineRoutes( function combineRoutes(
target: RouteConfig[], target: RouteConfig[],
source: RouteConfig[] source: RouteConfig[]
@ -52,6 +73,7 @@ function combineRoutes(
} }
); );
if (targetRouteConfig) { if (targetRouteConfig) {
// if exists first layer in target exist iterate through 2nd layer e.g. /main/user, /main/about
sourceRouteConfig.children?.forEach( sourceRouteConfig.children?.forEach(
(sourcePluginChildRouteConfig: RouteConfig) => { (sourcePluginChildRouteConfig: RouteConfig) => {
const targetPluginRouteConfig: const targetPluginRouteConfig:
@ -62,16 +84,20 @@ function combineRoutes(
} }
); );
if (targetPluginRouteConfig) { if (targetPluginRouteConfig) {
// if 2nd layer in target exist check if target has children path.
if (targetPluginRouteConfig.children) { if (targetPluginRouteConfig.children) {
// if target has children path, add children from source.
targetPluginRouteConfig.children = Object.assign( targetPluginRouteConfig.children = Object.assign(
targetPluginRouteConfig.children, targetPluginRouteConfig.children,
sourcePluginChildRouteConfig.children sourcePluginChildRouteConfig.children
); );
} else { } else {
// if not set children of targen from children of source
targetPluginRouteConfig.children = targetPluginRouteConfig.children =
sourcePluginChildRouteConfig.children; sourcePluginChildRouteConfig.children;
} }
} else { } else {
// if target not exists in 2nd layer, add source to children of first targen
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
targetRouteConfig.children.push(sourcePluginChildRouteConfig); targetRouteConfig.children.push(sourcePluginChildRouteConfig);
@ -79,90 +105,105 @@ function combineRoutes(
} }
); );
} else { } else {
// if target not exists in first layer, add source
target.push(sourceRouteConfig); target.push(sourceRouteConfig);
} }
}); });
return target; return target;
} }
// combine Links of Plugins from source to target
function combineMainLinks( function combineMainLinks(
target: PluginMainLink[], target: PluginMainLink[],
source: PluginMainLink source: PluginMainLink
): PluginMainLink[] { ): PluginMainLink[] {
console.log('target', target);
console.log('source', source);
const targetPluginMainLink: PluginMainLink | undefined = target.find( const targetPluginMainLink: PluginMainLink | undefined = target.find(
(targetPluginMainLink: PluginMainLink) => { (targetPluginMainLink: PluginMainLink) => {
console.log(targetPluginMainLink.title, source.title); console.log(targetPluginMainLink.title, source.title);
return targetPluginMainLink.title == source.title; return targetPluginMainLink.title == source.title;
} }
); );
console.log('targetPluginMainLink', targetPluginMainLink);
if (targetPluginMainLink) { if (targetPluginMainLink) {
source.children.forEach((sourcePluginChildLink: PluginChildLink) => { source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
targetPluginMainLink.children.push(sourcePluginChildLink); targetPluginMainLink.children.push(sourcePluginChildLink);
}); });
} else { } else {
console.log('push source', source);
target.push(source); target.push(source);
} }
console.log('merged', target);
return target; return target;
} }
// loade plugins
function loadPlugin(
loadedPlugins: LoadedPlugins,
modules: string[],
plugins: Plugin[],
store: any
): LoadedPlugins {
modules.forEach(requiredModule => {
const plugin = plugins.find(plugin => {
return plugin.name == requiredModule;
});
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);
});
}
loadedPlugins.mainLinks = combineMainLinks(
loadedPlugins.mainLinks,
plugin.mainLink
);
loadedPlugins.shortcuts.concat(plugin.shortCuts);
loadedPlugins.shortcutsOut.concat(plugin.shortCutsOut);
loadedPlugins.plugins.push({
name: plugin.name,
version: plugin.version
});
} else {
console.exception(`Don't find required Plugin ${requiredModule}`);
}
});
return loadedPlugins;
}
// "async" is optional; // "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
export default boot(({ Vue, router, store }) => { export default boot(({ Vue, router, store }) => {
const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
let pluginMainLinks: PluginMainLink[] = [];
const plugins: Plugin[] = []; const plugins: Plugin[] = [];
let loadedPlugins: LoadedPlugins = {
routes: [],
plugins: [],
mainLinks: [],
shortcuts: [],
shortcutsOut: []
};
// get all plugins
const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
pluginsContext.keys().forEach((fileName: string) => { pluginsContext.keys().forEach((fileName: string) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
plugins.push(pluginsContext(fileName).default); plugins.push(pluginsContext(fileName).default);
}); });
let routes: RouteConfig[] = []; // load plugins
loadedPlugins = loadPlugin(
loadedPlugins,
config.requiredModules,
plugins,
store
);
loadedPlugins = loadPlugin(loadedPlugins, config.loadModules, plugins, store);
config.requiredModules.forEach(requiredModule => { console.log(loadedPlugins.routes);
const plugin = plugins.find(plugin => {
return plugin.name == requiredModule;
});
if (plugin) {
routes = combineRoutes(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);
});
}
pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
} else {
console.exception(`Don't find required Plugin ${requiredModule}`);
}
});
config.loadModules.forEach(loadModule => { // add new routes for plugins
const plugin = plugins.find(plugin => { router.addRoutes(loadedPlugins.routes);
return plugin.name == loadModule;
}); // save plugins in VM-variable
if (plugin) {
routes = combineRoutes(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);
});
}
pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
} else {
console.exception(`Don't find Plugin ${loadModule}`);
}
});
console.log(routes);
router.addRoutes(routes);
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeistPluginsMainLinks = pluginMainLinks; Vue.prototype.$flaschengeistPlugins = loadedPlugins;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access console.log(loadedPlugins);
Vue.prototype.$flaschengeistPlugins = plugins;
console.log(pluginMainLinks);
}); });

View File

@ -1,59 +0,0 @@
<template>
<div>
<p>{{ title }}</p>
<ul>
<li v-for="todo in todos" :key="todo.id" @click="increment">
{{ todo.id }} - {{ todo.content }}
</li>
</ul>
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
<p>Active: {{ active ? 'yes' : 'no' }}</p>
<p>Clicks on todos: {{ clickCount }}</p>
</div>
</template>
<script lang="ts">
import {
defineComponent, PropType, computed, ref, toRef, Ref,
} from '@vue/composition-api';
import { Todo, Meta } from './models';
function useClickCount() {
const clickCount = ref(0);
function increment() {
clickCount.value += 1
return clickCount.value;
}
return { clickCount, increment };
}
function useDisplayTodo(todos: Ref<Todo[]>) {
const todoCount = computed(() => todos.value.length);
return { todoCount };
}
export default defineComponent({
name: 'CompositionComponent',
props: {
title: {
type: String,
required: true
},
todos: {
type: (Array as unknown) as PropType<Todo[]>,
default: () => []
},
meta: {
type: (Object as unknown) as PropType<Meta>,
required: true
},
active: {
type: Boolean
}
},
setup(props) {
return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
},
});
</script>

View File

@ -1,27 +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 Home', link: 'newHome', icon: 'mdi-google-home' },
{ title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
];
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

@ -0,0 +1,20 @@
<template>
<q-btn flat dense :icon="icon" :to="{ name: link }" />
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'ShortCutLink',
props: {
link: {
required: true,
type: String
},
icon: {
required: true,
type: String
}
}
});
</script>

View File

@ -23,8 +23,12 @@
<!-- Hier kommen die Shortlinks hin --> <!-- Hier kommen die Shortlinks hin -->
<div> <div>
<q-btn flat round dense icon="sim_card" /> <short-cut-link
<q-btn flat round dense icon="gamepad" /> v-for="(shortcut, index) in $flaschengeistPlugins.shortcuts"
:key="'shortcut' + index"
:link="shortcut.link"
:icon="shortcut.icon"
/>
</div> </div>
<q-btn <q-btn
flat flat
@ -47,7 +51,7 @@
<!-- Plugins --> <!-- Plugins -->
<q-list> <q-list>
<essential-link <essential-link
v-for="(link, index) in $flaschengeistPluginsMainLinks" v-for="(link, index) in $flaschengeistPlugins.mainLinks"
:key="'plugin' + index" :key="'plugin' + index"
:title="link.title" :title="link.title"
:link="link.link" :link="link.link"
@ -101,8 +105,9 @@
<script lang="ts"> <script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue'; import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import { Screen } from 'quasar'; import { Screen } from 'quasar';
import { PluginMainLink } from 'boot/plugins'; import { LoadedPlugins, PluginMainLink } from 'boot/plugins';
import { defineComponent, ref, computed } from '@vue/composition-api'; import { defineComponent, ref, computed } from '@vue/composition-api';
const links = [ const links = [
@ -114,15 +119,30 @@ const links = [
} }
]; ];
const shortcuts = [
{
link: 'about',
icon: 'mdi-information'
},
{
link: 'user',
icon: 'mdi-account'
},
{
link: 'user-plugin1',
icon: 'mdi-account-plus'
}
];
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
$flaschengeistPluginsMainLinks: PluginMainLink[]; $flaschengeistPlugins: LoadedPlugins;
} }
} }
export default defineComponent({ export default defineComponent({
name: 'MainLayout', name: 'MainLayout',
components: { EssentialLink }, components: { EssentialLink, ShortCutLink },
setup(_, ctx) { setup(_, ctx) {
const leftDrawer = ref(false); const leftDrawer = ref(false);
@ -142,7 +162,7 @@ export default defineComponent({
const pluginChildLinks = computed(() => { const pluginChildLinks = computed(() => {
const test: const test:
| PluginMainLink | PluginMainLink
| undefined = ctx.root.$flaschengeistPluginsMainLinks.find( | undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
(plugin: PluginMainLink) => { (plugin: PluginMainLink) => {
if (ctx.root.$route.matched.length > 1) { if (ctx.root.$route.matched.length > 1) {
return plugin.name == ctx.root.$route.matched[1].name; return plugin.name == ctx.root.$route.matched[1].name;
@ -170,7 +190,8 @@ export default defineComponent({
leftDrawerClicker, leftDrawerClicker,
links, links,
pluginChildLinks, pluginChildLinks,
showRoute showRoute,
shortcuts
}; };
} }
}); });

View File

@ -1,49 +0,0 @@
<template>
<q-page class="row items-center justify-evenly">
<example-component
title="Example component"
active
:todos="todos"
:meta="meta"
></example-component>
</q-page>
</template>
<script lang="ts">
import { Todo, Meta } from 'components/models';
import ExampleComponent from 'components/CompositionComponent.vue';
import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
name: 'PageIndex',
components: { ExampleComponent },
setup() {
const todos = ref<Todo[]>([
{
id: 1,
content: 'ct1'
},
{
id: 2,
content: 'ct2'
},
{
id: 3,
content: 'ct3'
},
{
id: 4,
content: 'ct4'
},
{
id: 5,
content: 'ct5'
}
]);
const meta = ref<Meta>({
totalCount: 1200
});
return { todos, meta };
}
});
</script>

View File

@ -36,12 +36,12 @@
</q-card-section> </q-card-section>
<q-card-section v-if="$route.name == 'about'"> <q-card-section v-if="$route.name == 'about'">
<q-chip <q-chip
v-for="(plugin, index) in $flaschengeistPlugins" v-for="(plugin, index) in $flaschengeistPlugins.plugins"
:key="'plugin' + index" :key="'plugin' + index"
> >
{{ plugin.name }} {{ plugin.name }}
<q-separator vertical color="black" class="q-ma-xs" /> <q-separator vertical color="black" class="q-ma-xs" />
Version {{ plugin.version }}
</q-chip> </q-chip>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />

View File

@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
setup(_, ctx) { setup(_, ctx) {
const a = ctx.root.$flaschengeistPluginsMainLinks; const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink }; return { a, mainLink };
} }
}); });

View File

@ -26,7 +26,10 @@ const plugin: Plugin = {
routes, routes,
mainLink, mainLink,
name: mainLink.name, name: mainLink.name,
requiredModules: [] requiredModules: [],
shortCuts: [],
shortCutsOut: [],
version: '1.0.2'
}; };
export { mainLink }; export { mainLink };

View File

@ -15,7 +15,7 @@ import { mainLink } from '../plugin';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
setup(_, ctx) { setup(_, ctx) {
const a = ctx.root.$flaschengeistPluginsMainLinks; const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink }; return { a, mainLink };
} }
}); });

View File

@ -1,4 +1,4 @@
import { Plugin, PluginMainLink } from 'boot/plugins'; import { Plugin, PluginMainLink, ShortCutLink } from 'boot/plugins';
import routes from './routes'; import routes from './routes';
const mainLink: PluginMainLink = { const mainLink: PluginMainLink = {
@ -22,11 +22,21 @@ const mainLink: PluginMainLink = {
] ]
}; };
const shortCuts: ShortCutLink[] = [
{
link: 'user-plugin2',
icon: 'mdi-account-minus'
}
];
const plugin: Plugin = { const plugin: Plugin = {
routes, routes,
mainLink, mainLink,
name: mainLink.name, name: mainLink.name,
requiredModules: ['user'] requiredModules: ['user'],
shortCuts,
shortCutsOut: [],
version: '0.1.0'
}; };
export { mainLink }; export { mainLink };

View File

@ -21,7 +21,7 @@ import { mainLink } from '../plugin';
export default defineComponent({ export default defineComponent({
// name: 'PageName' // name: 'PageName'
setup(_, ctx) { setup(_, ctx) {
const a = ctx.root.$flaschengeistPluginsMainLinks; const a = ctx.root.$flaschengeistPlugins.mainLinks;
return { a, mainLink }; return { a, mainLink };
} }
}); });

View File

@ -13,7 +13,10 @@ const plugin: Plugin = {
routes, routes,
mainLink, mainLink,
name: mainLink.name, name: mainLink.name,
requiredModules: [] requiredModules: [],
shortCutsOut: [],
shortCuts: [],
version: '0.0.1'
}; };
export { mainLink }; export { mainLink };