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

[plugins] Cleanup, documentation and refactoring of plugin system

This commit is contained in:
Ferdinand Thiessen 2021-03-22 03:24:27 +01:00
parent cd937f111c
commit 851ce3aa8b
20 changed files with 435 additions and 454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

404
src/boot/plugins.ts
View File

@ -3,7 +3,7 @@ import { FG_Plugin } from 'src/plugins';
import routes from 'src/router/routes';
import { api } from 'boot/axios';
import { AxiosResponse } from 'axios';
import { Router, RouteRecordRaw } from 'vue-router';
import { RouteRecordRaw } from 'vue-router';
const config: { [key: string]: Array<string> } = {
// Do not change required Modules !!
@ -12,9 +12,33 @@ const config: { [key: string]: Array<string> } = {
loadModules: ['Balance', 'Schedule', 'Pricelist'],
};
/* Stop!
// do not change anything here !!
// combine routes from source to target
// You can not even read? I said stop!
// Really are you stupid? Stop scrolling down here!
// Every line you scroll down, an unicorn will die painfully!
// Ok you must hate unicorns... But what if I say you I joked... Baby otters will die!
.-"""-.
/ o\
| o 0).-.
| .-;(_/ .-.
\ / /)).---._| `\ ,
'. ' /(( `'-./ _/|
\ .' ) .-.;` /
'. | `\-'
'._ -' /
``""--`------`
*/
/****************************************************
******** Internal area for some magic **************
****************************************************/
interface BackendPlugin {
permissions: string[];
@ -22,44 +46,60 @@ interface BackendPlugin {
}
interface BackendPlugins {
[key: string]: BackendPlugin | null;
[key: string]: BackendPlugin;
}
interface Backend {
plugins: BackendPlugins[];
plugins: BackendPlugins;
version: string;
}
export { Backend };
function setPermissions(object: FG_Plugin.PluginRouteConfig) {
// Combine routes, shortcuts and widgets from plugins
/**
* Helper function, set permissions from MenuRoute to meta from RouteRecordRaw
* @param object MenuRoute to set route meta
*/
function setPermissions(object: FG_Plugin.MenuRoute) {
if (object.permissions !== undefined) {
if (object.route.meta === undefined) object.route.meta = {};
object.route.meta['permissions'] = object.permissions;
}
}
function convertRoutes(parent: RouteRecordRaw, children?: FG_Plugin.PluginRouteConfig[]) {
if (children === undefined) return;
children.forEach((child) => {
setPermissions(child);
convertRoutes(child.route, child.children);
if (parent.children === undefined) parent.children = [];
parent.children.push(child.route);
});
/**
* Helper function to convert MenuRoute to the parents RouteRecordRaw
* @param parent Parent RouteRecordRaw
* @param children MenuRoute to convert
*/
function convertRoutes(parent: RouteRecordRaw, children?: FG_Plugin.MenuRoute[]) {
if (children !== undefined) {
children.forEach((child) => {
setPermissions(child);
convertRoutes(child.route, child.children);
if (parent.children === undefined) parent.children = [];
parent.children.push(child.route);
});
}
}
function combineRoutes(
/**
* Combines routes from plugin MenuRoute to Vue-Router RouteRecordRaw to get a clean route-tree
* @param target
* @param source
* @param mainPath
*/
function combineMenuRoutes(
target: RouteRecordRaw[],
source: FG_Plugin.PluginRouteConfig[],
mainPath: '/' | '/main' = '/'
source: FG_Plugin.MenuRoute[],
mainPath: '/' | '/in' = '/'
): RouteRecordRaw[] {
// Search parent
target.forEach((target) => {
if (target.path === mainPath) {
// Parent found = target
source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
source.forEach((sourceMainConfig: FG_Plugin.MenuRoute) => {
// Check if source is already in target
const targetMainConfig = target.children?.find((targetMainConfig: RouteRecordRaw) => {
return sourceMainConfig.route.path === targetMainConfig.path;
@ -89,193 +129,229 @@ function combineRoutes(
return target;
}
// combine Links of Plugins from source to target
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) => {
return targetPluginMainLink.title == source.title;
}
);
if (targetPluginMainLink) {
source.children?.forEach((sourcePluginChildLink: FG_Plugin.PluginRouteConfig) => {
targetPluginMainLink.children.push(<FG_Plugin.PluginChildLink>{
title: sourcePluginChildLink.title,
icon: sourcePluginChildLink.icon,
link: sourcePluginChildLink.route.name,
name: sourcePluginChildLink.route.name,
permissions: sourcePluginChildLink.permissions,
function combineRoutes(
target: RouteRecordRaw[],
source: FG_Plugin.NamedRouteRecordRaw[],
mainPath: '/' | '/in'
) {
// Search parent
target.forEach((target) => {
if (target.path === mainPath) {
// Parent found = target
source.forEach((sourceRoute) => {
// Check if source is already in target
const targetRoot = target.children?.find(
(targetRoot) => sourceRoute.path === targetRoot.path
);
// Already in target routes, add only children
if (targetRoot) {
if (targetRoot.children === undefined) targetRoot.children = [];
targetRoot.children.push(...(sourceRoute.children || []));
} else {
// Append to target
if (target.children === undefined) target.children = [];
if (
sourceRoute.children &&
sourceRoute.children.length > 0 &&
sourceRoute.component === undefined
)
Object.assign(sourceRoute, {
component: () => import('src/components/navigation/EmptyParent.vue'),
});
target.children.push(sourceRoute);
}
});
});
} else {
const mainLink: FG_Plugin.PluginMainLink = <FG_Plugin.PluginMainLink>{
}
});
}
/**
* Combine MenuRoutes into Flaschengeist MenuLinks for the main menu
* @param target Flaschengeist list of menu links
* @param source MenuRoutes to combine
*/
function combineMenuLinks(target: FG_Plugin.MenuLink[], source: FG_Plugin.MenuRoute) {
let idx = target.findIndex((link) => link.title == source.title);
// Link not found, add new one
if (idx === -1) {
idx += target.push({
title: source.title,
icon: source.icon,
link: source.route.name,
name: source.route.name,
permissions: source.permissions,
};
source.children?.forEach((child) => {
if (mainLink.children === undefined) {
mainLink.children = [];
}
mainLink.children.push(<FG_Plugin.PluginChildLink>{
title: child.title,
icon: child.icon,
link: child.route.name,
name: child.route.name,
permissions: child.permissions,
});
});
target.push(mainLink);
}
return target;
if (target[idx].children === undefined) {
target[idx].children = [];
}
source.children?.forEach((sourceChild) => {
target[idx].children?.push({
title: sourceChild.title,
icon: sourceChild.icon,
link: sourceChild.route.name,
permissions: sourceChild.permissions,
});
});
}
function loadShortCuts(
target: FG_Plugin.ShortCutLink[],
source: FG_Plugin.PluginRouteConfig[]
): FG_Plugin.ShortCutLink[] {
/**
* Combine shortcuts from Plugin MenuRouts into the Flaschenbeist Shortcut list
* @param target Flaschengeist list of shortcuts
* @param source MenuRoutes to extract shortcuts from
*/
function combineShortcuts(target: FG_Plugin.Shortcut[], source: FG_Plugin.MenuRoute[]) {
source.forEach((route) => {
if (route.shortcut) {
target.push(<FG_Plugin.ShortCutLink>{
target.push(<FG_Plugin.Shortcut>{
link: route.route.name,
icon: route.icon,
permissions: route.permissions,
});
}
if (route.children) {
target = loadShortCuts(target, route.children);
combineShortcuts(target, route.children);
}
});
return target;
}
// loade plugins
/**
* Load a Flaschengeist plugin
* @param loadedPlugins Flaschgeist object
* @param pluginName Plugin to load
* @param context RequireContext of plugins
* @param router VueRouter instance
*/
function loadPlugin(
loadedPlugins: FG_Plugin.Flaschengeist,
modules: string[],
backendpromise: Promise<Backend | null>,
plugins: FG_Plugin.Plugin[],
router: Router
): FG_Plugin.Flaschengeist {
modules.forEach((requiredModule) => {
const plugin = plugins.find((plugin) => {
return plugin.name == requiredModule;
});
if (plugin) {
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.widgets.length > 0) {
plugin.widgets.forEach((widget) => (widget.name = plugin.name + '_' + widget.name));
Array.prototype.push.apply(loadedPlugins.widgets, plugin.widgets);
}
loadedPlugins.plugins.push({
name: plugin.name,
version: plugin.version,
});
} else {
console.exception(`Could not find required Plugin ${requiredModule}`);
router.push({ name: 'error' }).catch((e) => {
console.warn(e);
});
}
});
return loadedPlugins;
}
pluginName: string,
context: __WebpackModuleApi.RequireContext,
backend: Backend
) {
// Check if already loaded
if (loadedPlugins.plugins.findIndex((p) => p.name === pluginName) !== -1) return true;
async function getBackend(): Promise<Backend | null> {
let backend: Backend | null = null;
try {
const response: AxiosResponse<Backend> = await api.get('/');
backend = response.data;
} catch (e) {
console.warn(e);
return null;
} finally {
return backend;
// Search if plugin is installed
const available = context.keys();
const plugin = available.includes(`./${pluginName.toLowerCase()}/plugin.ts`)
? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
<FG_Plugin.Plugin>context(`./${pluginName.toLowerCase()}/plugin.ts`).default
: undefined;
if (!plugin) {
// Plugin is not found, results in an error
console.exception(`Could not find required Plugin ${pluginName}`);
return false;
} else {
// Plugin found. Check backend dependencies
if (
!plugin.requiredBackendModules.every((required) => backend.plugins[required] !== undefined)
) {
console.error(`Plugin ${pluginName}: Backend modules not satisfied`);
return false;
}
// Check frontend dependencies
if (
!plugin.requiredModules.every((required) =>
loadPlugin(loadedPlugins, required, context, backend)
)
) {
console.error(`Plugin ${pluginName}: Backend modules not satisfied`);
return false;
}
// Start combining and loading routes, shortcuts etc
if (plugin.internalRoutes) {
combineRoutes(loadedPlugins.routes, plugin.internalRoutes, '/in');
}
if (plugin.innerRoutes) {
// Routes for Vue Router
combineMenuRoutes(loadedPlugins.routes, plugin.innerRoutes, '/in');
// Combine links for menu
plugin.innerRoutes.forEach((route) => combineMenuLinks(loadedPlugins.menuLinks, route));
// Combine shortcuts
combineShortcuts(loadedPlugins.shortcuts, plugin.innerRoutes);
}
if (plugin.outerRoutes) {
combineMenuRoutes(loadedPlugins.routes, plugin.outerRoutes);
combineShortcuts(loadedPlugins.outerShortcuts, plugin.outerRoutes);
}
if (plugin.widgets.length > 0) {
plugin.widgets.forEach((widget) => (widget.name = plugin.name + '_' + widget.name));
Array.prototype.push.apply(loadedPlugins.widgets, plugin.widgets);
}
loadedPlugins.plugins.push({
name: plugin.name,
version: plugin.version,
});
return plugin;
}
}
export default boot(({ router, app }) => {
const plugins: FG_Plugin.Plugin[] = [];
/**
* Loading backend information
* @returns Backend object or null
*/
async function getBackend() {
try {
const { data }: AxiosResponse<Backend> = await api.get('/');
return data;
} catch (e) {
console.warn(e);
return null;
}
}
const backendPromise = getBackend();
/**
* Boot file, load all required plugins, check for dependencies
*/
export default boot(async ({ router, app }) => {
const backend = await getBackend();
if (!backend) {
void router.push({ name: 'error' });
return;
}
let loadedPlugins: FG_Plugin.Flaschengeist = {
const loadedPlugins: FG_Plugin.Flaschengeist = {
routes,
plugins: [],
mainLinks: [],
menuLinks: [],
shortcuts: [],
shortcutsOut: [],
outerShortcuts: [],
widgets: [],
};
// 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);
// Start loading plugins
// Load required modules:
config.requiredModules.forEach((required) => {
const plugin = loadPlugin(loadedPlugins, required, pluginsContext, backend);
if (!plugin) {
void router.push({ name: 'error' });
return;
}
});
// check dependencies
backendPromise
.then((backend) => {
if (backend) {
plugins.forEach((plugin: FG_Plugin.Plugin) => {
plugin.requiredModules.forEach((requiredModule: string) => {
if (
!(
config.requiredModules.includes(requiredModule) ||
config.loadModules.includes(requiredModule)
)
) {
console.error(`Plugin ${plugin.name} need Plugin ${requiredModule}`);
router.push({ name: 'error' }).catch((e) => {
console.warn(e);
});
}
});
plugin.requiredBackendModules.forEach((requiredBackendModule: string) => {
if (!(requiredBackendModule in backend.plugins)) {
console.error(
`Plugin ${plugin.name} need Plugin ${requiredBackendModule} in backend.`
);
router.push({ name: 'error' }).catch((err) => {
console.warn(err);
});
}
});
});
}
})
.catch((e) => {
console.error(e);
});
// load plugins
loadedPlugins = loadPlugin(
loadedPlugins,
config.requiredModules,
backendPromise,
plugins,
router
);
loadedPlugins = loadPlugin(loadedPlugins, config.loadModules, backendPromise, plugins, router);
// Load user defined plugins
config.loadModules.forEach((required) => {
const plugin = loadPlugin(loadedPlugins, required, pluginsContext, backend);
if (!plugin) {
void router.push({ name: 'error' });
return;
}
});
// Sort widgets by priority
loadedPlugins.widgets.sort((a, b) => b.priority - a.priority);
// Add loaded routes to router
loadedPlugins.routes.forEach((route) => router.addRoute(route));
// save plugins in VM-variable

39
src/components/navigation/EssentialLink.vue
View File

@ -1,50 +1,35 @@
<template>
<q-item v-if="isGranted" clickable tag="a" target="self" :to="{ name: link }">
<q-item-section v-if="icon" avatar>
<q-icon :name="icon" />
<q-item v-if="isGranted" clickable tag="a" target="self" :to="{ name: entry.link }">
<q-item-section v-if="entry.icon" avatar>
<q-icon :name="entry.icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
<!--<q-item-label caption>
{{ caption }}
</q-item-label>-->
</q-item-section>
</q-item>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { computed, defineComponent, PropType } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from 'src/plugins';
export default defineComponent({
name: 'EssentialLink',
props: {
title: {
type: String,
entry: {
type: Object as PropType<FG_Plugin.MenuLink>,
required: true,
},
caption: {
type: String,
default: '',
},
link: {
type: String,
default: 'dashboard',
},
icon: {
type: String,
default: '',
},
permissions: {
default: () => Array<string>(),
type: Array as () => Array<string>,
},
},
setup(props) {
const isGranted = computed(() => hasPermissions(props.permissions));
return { isGranted };
const isGranted = computed(() => hasPermissions(props.entry.permissions || []));
const title = computed(() =>
typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
);
return { isGranted, title };
},
});
</script>

30
src/components/navigation/ShortCutLink.vue
View File

@ -1,30 +0,0 @@
<template>
<q-btn v-if="isGranted" flat dense :icon="icon" :to="{ name: link }" />
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { hasPermissions } from 'src/utils/permission';
export default defineComponent({
name: 'ShortCutLink',
props: {
link: {
required: true,
type: String,
},
icon: {
required: true,
type: String,
},
permissions: {
default: undefined,
type: Array as () => Array<string>,
},
},
setup(props) {
const isGranted = computed(() => hasPermissions(props.permissions || []));
return { isGranted };
},
});
</script>

23
src/components/navigation/ShortcutLink.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" />
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from 'src/plugins';
export default defineComponent({
name: 'ShortcutLink',
props: {
shortcut: {
required: true,
type: Object as PropType<FG_Plugin.Shortcut>,
},
},
setup(props) {
const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
return { isGranted };
},
});
</script>

2
src/components/utils/IsoDateInput.vue
View File

@ -39,7 +39,7 @@
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { date as q_date } from 'quasar';
import { stringIsDate, stringIsTime, stringIsDateTime } from 'src/utils/validators';
import { stringIsDate, stringIsTime, stringIsDateTime, Validator } from 'src/utils/validators';
export default defineComponent({
name: 'IsoDateInput',

109
src/layouts/MainLayout.vue
View File

@ -2,7 +2,6 @@
<q-layout view="hHh lpr lFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
<q-btn
v-if="!leftDrawerOpen"
dense
@ -22,15 +21,11 @@
</q-toolbar-title>
<!-- Hier kommen die Shortlinks hin -->
<div>
<short-cut-link
v-for="(shortcut, index) in flaschengeist.shortcuts"
:key="'shortcut' + index"
:link="shortcut.link"
:icon="shortcut.icon"
:permissions="shortcut.permissions"
/>
</div>
<shortcut-link
v-for="(shortcut, index) in shortcuts"
:key="'shortcut' + index"
:shortcut="shortcut"
/>
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
</q-toolbar>
</q-header>
@ -46,26 +41,17 @@
<!-- Plugins -->
<q-list>
<essential-link
v-for="(link, index) in flaschengeist.mainLinks"
v-for="(entry, index) in mainLinks"
:key="'plugin' + index"
:title="typeof link.title === 'object' ? link.title.value : link.title"
:link="link.link"
:icon="link.icon"
:permissions="link.permissions"
:entry="entry"
/>
</q-list>
<q-separator />
<q-separator />
<!-- Plugin functions -->
<!-- Plugin functions -->
<!-- <router-view name="plugin-nav" /> -->
<q-list>
<essential-link
v-for="(link, index) in pluginChildLinks"
v-for="(entry, index) in subLinks"
:key="'childPlugin' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
:permissions="link.permissions"
:entry="entry"
/>
</q-list>
@ -84,12 +70,9 @@
<q-separator />
<essential-link
v-for="(link, index) in links"
:key="'main' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
:permissions="link.permissions"
v-for="(entry, index) in essentials"
:key="'essential' + index"
:entry="entry"
/>
</q-drawer>
<q-page-container>
@ -99,54 +82,37 @@
</template>
<script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
import { Screen } from 'quasar';
import { defineComponent, ref, inject, computed } from 'vue';
import { useMainStore } from 'src/store';
import { FG_Plugin } from 'src/plugins';
import { useRoute, useRouter } from 'vue-router';
import { useRouter } from 'vue-router';
const links = [
const essentials: FG_Plugin.MenuLink[] = [
{
name: 'about',
title: 'Über Flaschengeist',
link: 'about',
icon: 'mdi-information',
},
];
const shortcuts = [
{
link: 'about',
icon: 'mdi-information',
},
{
link: 'user',
icon: 'mdi-account',
},
{
link: 'user-plugin1',
icon: 'mdi-account-plus',
},
];
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink, ShortCutLink },
components: { EssentialLink, ShortcutLink },
setup() {
const route = useRoute();
const router = useRouter();
const mainStore = useMainStore();
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
const leftDrawer = ref(false);
const shortcuts = flaschengeist?.shortcuts;
const mainLinks = flaschengeist?.menuLinks;
const leftDrawerOpen = ref(
computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val),
})
);
const leftDrawerOpen = computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val),
});
const leftDrawerMini = ref(false);
function leftDrawerClicker() {
@ -155,20 +121,9 @@ export default defineComponent({
}
}
const pluginChildLinks = computed(() => {
const link: FG_Plugin.PluginMainLink | undefined = flaschengeist?.mainLinks.find(
(plugin: FG_Plugin.PluginMainLink) => {
if (route.matched.length > 1) {
return plugin.name == route.matched[1].name;
}
}
);
if (link == undefined) {
return [];
} else {
return link.children;
}
const subLinks = computed(() => {
const matched = router.currentRoute.value.matched[1];
return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
});
function logout() {
@ -177,14 +132,14 @@ export default defineComponent({
}
return {
essentials,
leftDrawerOpen,
leftDrawerMini,
leftDrawerClicker,
links,
pluginChildLinks,
shortcuts,
logout,
flaschengeist,
mainLinks,
shortcuts,
subLinks,
};
},
});

41
src/layouts/OutLayout.vue
View File

@ -8,30 +8,13 @@
</q-avatar>
<span class="gt-xs"> Flaschengeist </span>
</q-toolbar-title>
<div>
<short-cut-link
v-for="(shortcut, index) in shortcuts"
:key="'shortcut' + index"
:link="shortcut.link"
:icon="shortcut.icon"
/>
</div>
<q-btn
v-if="$route.name != 'about_out'"
flat
round
dense
icon="mdi-information"
@click="$router.push({ name: 'about_out' })"
/>
<q-btn
v-if="$route.name != 'login'"
flat
round
dense
icon="mdi-login-variant"
@click="$router.push({ name: 'login' })"
<shortcut-link
v-for="(shortcut, index) in shortcuts"
:key="'shortcut' + index"
:shortcut="shortcut"
/>
<shortcut-link v-if="$route.name != 'about_out'" :shortcut="about" />
<shortcut-link v-if="$route.name != 'login'" :shortcut="login" />
</q-toolbar>
</q-header>
@ -44,14 +27,18 @@
<script lang="ts">
import { FG_Plugin } from 'src/plugins';
import { defineComponent, inject } from 'vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import ShortcutLink from 'components/navigation/ShortcutLink.vue';
export default defineComponent({
name: 'OutLayout',
components: { ShortCutLink },
components: { ShortcutLink },
setup() {
const shortcuts = inject<FG_Plugin.Flaschengeist>('flaschengeist')?.shortcutsOut || [];
return { shortcuts };
const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
const shortcuts = flaschengeist?.outerShortcuts || [];
const about: FG_Plugin.Shortcut = { icon: 'mdi-information', link: 'about_out' };
const login: FG_Plugin.Shortcut = { icon: 'mdi-login-variant', link: 'login' };
return { about, login, shortcuts };
},
});
</script>

128
src/plugins.d.ts vendored
View File

@ -1,66 +1,100 @@
import { RouteRecordRaw } from 'vue-router';
import { RouteRecordRaw, RouteRecordName } from 'vue-router';
import { Component, ComputedRef } from 'vue';
declare global {
type Validator = (value: unknown) => boolean | string;
}
declare namespace FG_Plugin {
interface ShortCutLink {
link: string;
/**
* Interface defining a Flaschengeist plugin
*/
interface Plugin {
name: string;
version: string;
widgets: Widget[];
/** Pther frontend modules needed for this plugin to work correctly */
requiredModules: string[];
/** Backend modules needed for this plugin to work correctly */
requiredBackendModules: string[];
/** Menu entries for authenticated users */
innerRoutes?: MenuRoute[];
/** Public menu entries (without authentification) */
outerRoutes?: MenuRoute[];
/** Routes without menu links, for internal usage */
internalRoutes?: NamedRouteRecordRaw[];
}
/**
* Defines the loaded state of the Flaschengeist
*/
interface Flaschengeist {
/** All loaded plugins */
plugins: LoadedPlugin[];
/** All routes, combined from all plugins */
routes: RouteRecordRaw[];
/** All menu entries */
menuLinks: MenuLink[];
/** All inner shortcuts */
shortcuts: Shortcut[];
/** All outer shortcuts */
outerShortcuts: Shortcut[];
/** All widgets */
widgets: Widget[];
}
/**
* Loaded Flaschengeist plugin
*/
interface LoadedPlugin {
name: string;
version: string;
}
/**
* Defines a shortcut link
*/
interface Shortcut {
link: RouteRecordName;
icon: string;
permissions?: string[];
}
interface PluginRouteConfig {
/**
* Defines a main menu entry along with the route
* Used when defining a plugin
*/
interface MenuRoute extends MenuEntry {
route: NamedRouteRecordRaw;
shortcut?: boolean;
children?: this[];
}
type NamedRouteRecordRaw = RouteRecordRaw & {
name: RouteRecordName;
};
/**
* Defines a menu entry in the main menu
*/
interface MenuLink extends MenuEntry {
/** Name of the target route */
link: RouteRecordName;
}
/**
* Base interface for internal use
*/
interface MenuEntry {
title: string | ComputedRef<string>;
icon: string;
route: RouteRecordRaw;
shortcut?: boolean;
children?: PluginRouteConfig[];
permissions?: string[];
children?: this[];
}
/**
* Widget object for the dashboard
*/
interface Widget {
name: string;
priority: number;
permissions: FG.Permission[];
widget: Component;
}
interface Plugin {
name: string;
version: string;
widgets: Widget[];
requiredModules: string[];
requiredBackendModules: string[];
mainRoutes?: PluginRouteConfig[];
outRoutes?: PluginRouteConfig[];
}
interface PluginMainLink extends PluginChildLink {
children: PluginChildLink[];
}
interface PluginChildLink {
name: string;
title: string;
link: string;
icon: string;
permissions?: string[];
}
interface LoadedPlugin {
name: string;
version: string;
}
interface Flaschengeist {
plugins: LoadedPlugin[];
routes: RouteRecordRaw[];
mainLinks: PluginMainLink[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];
widgets: Widget[];
}
}

2
src/plugins/balance/plugin.ts
View File

@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue';
const plugin: FG_Plugin.Plugin = {
name: 'Balance',
mainRoutes: routes,
innerRoutes: routes,
requiredModules: ['User'],
requiredBackendModules: ['balance'],
version: '0.0.2',

2
src/plugins/balance/routes/index.ts
View File

@ -1,7 +1,7 @@
import { FG_Plugin } from 'src/plugins';
import permissions from '../permissions';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
const mainRoutes: FG_Plugin.MenuRoute[] = [
{
title: 'Gerücht',
icon: 'mdi-cash-100',

12
src/plugins/pricelist/plugin.ts
View File

@ -1,21 +1,13 @@
import routes from './routes';
import { innerRoutes } from './routes';
import { FG_Plugin } from 'src/plugins';
const plugin: FG_Plugin.Plugin = {
name: 'Pricelist',
mainRoutes: routes,
innerRoutes,
requiredModules: [],
requiredBackendModules: ['pricelist'],
version: '0.0.1',
widgets: [],
// widgets: [
// {
// priority: 1,
// name: 'greeting',
// permissions: []
// widget: () => import('./components/Widget.vue')
// }
// ]
};
export default plugin;

21
src/plugins/pricelist/routes/index.ts
View File

@ -1,12 +1,13 @@
import { FG_Plugin } from 'src/plugins';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
export const innerRoutes: FG_Plugin.MenuRoute[] = [
{
title: 'Getränke',
icon: 'mdi-glass-mug-variant',
route: {
path: 'drinks',
name: 'drinks',
redirect: { name: 'drinks-pricelist' }
redirect: { name: 'drinks-pricelist' },
},
permissions: ['user'],
children: [
@ -18,8 +19,8 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
route: {
path: 'pricelist',
name: 'drinks-pricelist',
component: () => import('../pages/PricelistP.vue')
}
component: () => import('../pages/PricelistP.vue'),
},
},
{
title: 'Einstellungen',
@ -29,11 +30,9 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
route: {
path: 'settings',
name: 'drinks-settings',
component: () => import('../pages/Settings.vue')
}
}
]
}
component: () => import('../pages/Settings.vue'),
},
},
],
},
];
export default mainRoutes;

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

@ -1,10 +1,11 @@
import { defineAsyncComponent } from 'vue';
import mainRoutes from './routes';
import { innerRoutes, privateRoutes } from './routes';
import { FG_Plugin } from 'src/plugins';
const plugin: FG_Plugin.Plugin = {
name: 'Schedule',
mainRoutes,
innerRoutes,
internalRoutes: privateRoutes,
requiredModules: ['User'],
requiredBackendModules: ['events'],
version: '0.0.1',

10
src/plugins/schedule/routes/index.ts
View File

@ -1,7 +1,7 @@
import { FG_Plugin } from 'src/plugins';
import { PERMISSIONS } from '../permissions';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
export const innerRoutes: FG_Plugin.MenuRoute[] = [
{
title: 'Dienste',
icon: 'mdi-briefcase',
@ -47,4 +47,10 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
},
];
export default mainRoutes;
export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [
{
name: 'events-edit',
path: 'schedule/edit/:id',
redirect: { name: 'schedule-overview' },
},
];

41
src/plugins/user/pages/MainPage.vue
View File

@ -1,41 +0,0 @@
<template>
<div>
<q-page v-if="checkMain" padding>
<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"
:permissions="route.permissions"
/>
</q-list>
</q-card-section>
</q-card>
</q-page>
<router-view />
</div>
</template>
<script lang="ts">
import { useRoute } from 'vue-router';
import { computed, defineComponent } from 'vue';
import mainRoutes from 'src/plugins/user/routes';
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
export default defineComponent({
// name: 'PageName'
components: { EssentialLink },
setup() {
const route = useRoute();
const checkMain = computed(() => {
return route.matched.length == 2;
});
return { checkMain, mainRoutes };
},
});
</script>

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

@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue';
const plugin: FG_Plugin.Plugin = {
name: 'User',
mainRoutes: routes,
innerRoutes: routes,
requiredModules: [],
requiredBackendModules: ['auth'],
version: '0.0.1',

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

@ -2,14 +2,14 @@ import { FG_Plugin } from 'src/plugins';
import { useMainStore } from 'src/store';
import { computed } from 'vue';
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
const mainRoutes: FG_Plugin.MenuRoute[] = [
{
get title() {
return computed(() => useMainStore().user?.display_name || 'Not loaded');
return computed(() => useMainStore().currentUser.display_name);
},
icon: 'mdi-account',
permissions: ['user'],
route: { path: 'user', name: 'user', component: () => import('../pages/MainPage.vue') },
route: { path: 'user', name: 'user', redirect: { name: 'user-settings' } },
children: [
{
title: 'Einstellungen',

2
src/router/routes.ts
View File

@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
],
},
{
path: '/main',
path: '/in',
redirect: 'dashboard',
component: () => import('layouts/MainLayout.vue'),
meta: { permissions: ['user'] },

8
src/shims-vue.d.ts vendored
View File

@ -4,11 +4,3 @@ declare module '*.vue' {
const component: ComponentOptions;
export default component;
}
/*
// Mocks all files ending in `.vue` showing them as plain Vue instances
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
*/

2
src/utils/validators.ts
View File

@ -1,3 +1,5 @@
export type Validator = (value: unknown) => boolean | string;
export function notEmpty(val: unknown) {
return !!val || 'Feld darf nicht leer sein!';
}