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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/boot/plugins.ts
View File

@ -2,22 +2,29 @@ import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { Module } from 'vuex';
interface PluginRouteConfig extends RouteConfig {
example?: unknown;
}
const config = {
// Do not change required Modules !!
requiredModules: ['user'],
// here you can import plugins.
loadModules: ['plugin1', 'user-plugin']
};
interface EssentialLink {
title: string;
// do not change anything here !!
interface ShortCutLink {
link: string;
icon?: string;
icon: string;
}
interface Plugin {
name: string;
routes: PluginRouteConfig[] | RouteConfig[];
routes: RouteConfig[];
store?: Module<never, never>[];
mainLink: PluginMainLink;
requiredModules: string[];
shortCuts: ShortCutLink[];
shortCutsOut: ShortCutLink[];
version: string;
}
interface PluginMainLink extends PluginChildLink {
@ -31,15 +38,29 @@ interface PluginChildLink {
icon: string;
}
const config = {
// Do not change required Modules !!
requiredModules: ['user'],
// here you can import plugins.
loadModules: ['plugin1', 'user-plugin']
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
};
export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink };
// combine routes from source to target
function combineRoutes(
target: RouteConfig[],
source: RouteConfig[]
@ -52,6 +73,7 @@ function combineRoutes(
}
);
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:
@ -62,16 +84,20 @@ function combineRoutes(
}
);
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);
@ -79,90 +105,105 @@ function combineRoutes(
}
);
} 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[] {
console.log('target', target);
console.log('source', source);
const targetPluginMainLink: PluginMainLink | undefined = target.find(
(targetPluginMainLink: PluginMainLink) => {
console.log(targetPluginMainLink.title, source.title);
return targetPluginMainLink.title == source.title;
}
);
console.log('targetPluginMainLink', targetPluginMainLink);
if (targetPluginMainLink) {
source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
targetPluginMainLink.children.push(sourcePluginChildLink);
});
} else {
console.log('push source', source);
target.push(source);
}
console.log('merged', 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;
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
export default boot(({ Vue, router, store }) => {
const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
let pluginMainLinks: PluginMainLink[] = [];
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) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
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 => {
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}`);
}
});
console.log(loadedPlugins.routes);
config.loadModules.forEach(loadModule => {
const plugin = plugins.find(plugin => {
return plugin.name == loadModule;
});
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);
// add new routes for plugins
router.addRoutes(loadedPlugins.routes);
// save plugins in VM-variable
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeistPluginsMainLinks = pluginMainLinks;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeistPlugins = plugins;
console.log(pluginMainLinks);
Vue.prototype.$flaschengeistPlugins = loadedPlugins;
console.log(loadedPlugins);
});

59
src/components/CompositionComponent.vue
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>

27
src/components/navigation/PluginChildrenLinks.vue
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>

20
src/components/navigation/ShortCutLink.vue Normal file
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>

37
src/layouts/MainLayout.vue
View File

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

49
src/pages/Index.vue
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>

4
src/pages/about/About.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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