ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Vue3][Quasar2] Fixed Store and Router, breaking changes in both.

This commit is contained in:
Ferdinand Thiessen 2021-01-30 04:19:30 +01:00
parent 0efe445864
commit d147e538d1
9 changed files with 157 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/boot/plugins.ts
View File

@ -1,12 +1,11 @@
import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { VueRouter } from 'vue-router/types/router';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { FG_Plugin } from 'src/plugins';
import routes from 'src/router/routes';
import { axios } from 'boot/axios';
import { AxiosResponse } from 'axios';
import { Router, RouteRecordRaw } from 'vue-router';
const config = {
// Do not change required Modules !!
@ -35,21 +34,27 @@ interface Backend {
export { Backend };
function setPermissions(object: FG_Plugin.PluginRouteConfig) {
if (object.route.meta === undefined) object.route.meta = {};
object.route.meta['permissions'] = object.permissions;
}
function combineRoutes(
target: RouteConfig[],
target: RouteRecordRaw[],
source: FG_Plugin.PluginRouteConfig[],
mainPath: '/' | '/main' = '/'
): RouteConfig[] {
): RouteRecordRaw[] {
target.forEach((target) => {
if (target.path === mainPath) {
source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
const targetMainConfig = target.children?.find((targetMainConfig: RouteConfig) => {
return sourceMainConfig.path === targetMainConfig.path;
const targetMainConfig = target.children?.find((targetMainConfig: RouteRecordRaw) => {
return sourceMainConfig.route.path === targetMainConfig.path;
});
if (targetMainConfig) {
const sourceChildren: RouteConfig[] = [];
const sourceChildren: RouteRecordRaw[] = [];
sourceMainConfig.children?.forEach((child) => {
sourceChildren.push(<RouteConfig>child);
setPermissions(child);
sourceChildren.push(child.route);
});
if (targetMainConfig.children) {
targetMainConfig.children = Object.assign(targetMainConfig.children, sourceChildren);
@ -63,10 +68,14 @@ function combineRoutes(
if (
sourceMainConfig.children &&
sourceMainConfig.children.length > 0 &&
!sourceMainConfig.component
!sourceMainConfig.route.component
)
sourceMainConfig.component = () => import('src/components/navigation/EmptyParent.vue');
target.children.push(<RouteConfig>sourceMainConfig);
target.children.push({
component: () => import('src/components/navigation/EmptyParent.vue'),
name: sourceMainConfig.route.name,
path: sourceMainConfig.route.path,
});
else target.children.push(sourceMainConfig.route);
}
});
}
@ -90,18 +99,18 @@ function combineMainLinks(
targetPluginMainLink.children.push(<FG_Plugin.PluginChildLink>{
title: sourcePluginChildLink.title,
icon: sourcePluginChildLink.icon,
link: sourcePluginChildLink.name,
name: sourcePluginChildLink.name,
permissions: sourcePluginChildLink.meta?.permissions,
link: sourcePluginChildLink.route.name,
name: sourcePluginChildLink.route.name,
permissions: sourcePluginChildLink.permissions,
});
});
} else {
const mainLink: FG_Plugin.PluginMainLink = <FG_Plugin.PluginMainLink>{
title: source.title,
icon: source.icon,
link: source.name,
name: source.name,
permissions: source.meta?.permissions,
link: source.route.name,
name: source.route.name,
permissions: source.permissions,
};
source.children?.forEach((child) => {
if (mainLink.children === undefined) {
@ -110,9 +119,9 @@ function combineMainLinks(
mainLink.children.push(<FG_Plugin.PluginChildLink>{
title: child.title,
icon: child.icon,
link: child.name,
name: child.name,
permissions: child.meta?.permissions,
link: child.route.name,
name: child.route.name,
permissions: child.permissions,
});
});
target.push(mainLink);
@ -127,9 +136,9 @@ function loadShortCuts(
source.forEach((route) => {
if (route.shortcut) {
target.push(<FG_Plugin.ShortCutLink>{
link: route.name,
link: route.route.name,
icon: route.icon,
permissions: route.meta?.permissions,
permissions: route.permissions,
});
}
if (route.children) {
@ -146,7 +155,7 @@ function loadPlugin(
backendpromise: Promise<Backend | null>,
plugins: FG_Plugin.Plugin[],
store: Store<any>,
router: VueRouter
router: Router
): FG_Plugin.LoadedPlugins {
modules.forEach((requiredModule) => {
const plugin = plugins.find((plugin) => {
@ -202,7 +211,7 @@ async function getBackend(): Promise<Backend | null> {
// "async" is optional;
// 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 }) => {
export default boot<Store<StateInterface>>(({ router, store, app }) => {
const plugins: FG_Plugin.Plugin[] = [];
const backendPromise = getBackend();
@ -279,10 +288,8 @@ export default boot<Store<StateInterface>>(({ Vue, router, store }) => {
loadedPlugins.widgets.sort((a, b) => b.priority - a.priority);
// add new routes for plugins, flatten them to allow empty parent routes
router.addRoutes(loadedPlugins.routes);
loadedPlugins.routes.forEach((route) => router.addRoute(route));
// save plugins in VM-variable
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeistPlugins = loadedPlugins;
app.provide('flaschengeistPlugins', loadedPlugins);
});

27
src/layouts/MainLayout.vue
View File

@ -102,10 +102,10 @@
import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import { Screen, Loading } from 'quasar';
import { defineComponent, ref, computed } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { defineComponent, ref, inject, computed } from 'vue';
import { FG_Plugin } from 'src/plugins';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const links = [
{
@ -131,16 +131,13 @@ const shortcuts = [
},
];
declare module 'vue/types/vue' {
interface Vue {
$flaschengeistPlugins: FG_Plugin.LoadedPlugins;
}
}
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink, ShortCutLink },
setup(_, ctx) {
setup() {
const route = useRoute();
const store = useStore();
const plugins = inject<FG_Plugin.LoadedPlugins>('flaschengeistPlugins');
const leftDrawer = ref(false);
const leftDrawerOpen = ref(
@ -158,12 +155,10 @@ export default defineComponent({
}
const pluginChildLinks = computed(() => {
const link:
| FG_Plugin.PluginMainLink
| undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
const link: FG_Plugin.PluginMainLink | undefined = plugins?.mainLinks.find(
(plugin: FG_Plugin.PluginMainLink) => {
if (ctx.root.$route.matched.length > 1) {
return plugin.name == ctx.root.$route.matched[1].name;
if (route.matched.length > 1) {
return plugin.name == route.matched[1].name;
}
}
);
@ -177,7 +172,7 @@ export default defineComponent({
function logout() {
Loading.show({ message: 'Session wird abgemeldet' });
(<Store<StateInterface>>ctx.root.$store).dispatch('session/logout').finally(() => {
store.dispatch('session/logout').finally(() => {
Loading.hide();
});
}

18
src/plugins.d.ts vendored
View File

@ -1,7 +1,6 @@
import { RouteConfig } from 'vue-router';
import { RouteRecordRaw } from 'vue-router';
import { Module } from 'vuex';
import { StateInterface } from 'src/store';
import { AsyncComponentPromise } from 'vue/types/options';
import { Component } from 'vue';
declare namespace FG_Plugin {
interface ShortCutLink {
@ -10,19 +9,20 @@ declare namespace FG_Plugin {
permissions?: string[];
}
interface PluginRouteConfig extends RouteConfig {
shortcut?: boolean;
interface PluginRouteConfig {
title: string;
icon: string;
route: RouteRecordRaw;
shortcut?: boolean;
children?: PluginRouteConfig[];
meta?: { permissions?: string[] };
permissions?: string[];
}
interface Widget {
name: string;
priority: number;
permissions: FG.Permission[];
widget: AsyncComponentPromise;
widget: Component;
}
interface Plugin {
@ -33,7 +33,7 @@ declare namespace FG_Plugin {
requiredBackendModules: string[];
mainRoutes?: PluginRouteConfig[];
outRoutes?: PluginRouteConfig[];
store?: Map<string, Module<any, StateInterface>>;
store?: Map<string, Module<any, any>>;
}
interface PluginMainLink extends PluginChildLink {
@ -55,7 +55,7 @@ declare namespace FG_Plugin {
interface LoadedPlugins {
plugins: LoadedPlugin[];
routes: RouteConfig[];
routes: RouteRecordRaw[];
mainLinks: PluginMainLink[];
shortcuts: ShortCutLink[];
shortcutsOut: ShortCutLink[];

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

@ -5,36 +5,44 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
title: 'Gerücht',
icon: 'mdi-cash-100',
permissions: ['user'],
route: {
path: 'balance',
name: 'balance',
redirect: { name: 'balance-view' },
meta: { permissions: ['user'] },
},
children: [
{
title: 'Übersicht',
icon: 'mdi-cash-check',
permissions: [permissions.SHOW],
route: {
path: 'overview',
name: 'balance-view',
meta: { permissions: [permissions.SHOW] },
component: () => import('../pages/Overview.vue'),
},
},
{
title: 'Buchen',
icon: 'mdi-cash-plus',
shortcut: true,
permissions: [permissions.DEBIT_OWN, permissions.SHOW],
route: {
path: 'change',
name: 'balance-change',
shortcut: true,
meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
component: () => import('../pages/MainPage.vue'),
},
},
{
title: 'Verwaltung',
icon: 'mdi-account-cash',
permissions: [permissions.SET_LIMIT, permissions.SHOW_OTHER],
route: {
path: 'admin',
name: 'balance-admin',
meta: { permissions: [permissions.SET_LIMIT, permissions.SHOW_OTHER] },
component: () => import('../pages/Admin.vue'),
},
},
],
},
];

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

@ -4,38 +4,45 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
title: 'Dienste',
icon: 'mdi-briefcase',
permissions: ['user'],
route: {
path: 'schedule',
name: 'schedule',
component: () => import('../pages/MainPage.vue'),
meta: { permissions: ['user'] },
},
children: [
{
title: 'Dienstübersicht',
icon: 'mdi-account-group',
shortcut: true,
permissions: [],
route: {
path: 'schedule-overview',
name: 'schedule-overview',
shortcut: true,
meta: { permissions: [] },
component: () => import('../pages/Overview.vue'),
},
},
{
title: 'Dienstverwaltung',
icon: 'mdi-account-details',
shortcut: false,
route: {
path: 'schedule-management',
name: 'schedule-management',
shortcut: false,
meta: { permissions: [] },
component: () => import('../pages/Management.vue'),
},
},
{
title: 'Dienstanfragen',
icon: 'mdi-account-switch',
shortcut: false,
route: {
path: 'schedule-requests',
name: 'schedule-requests',
shortcut: false,
meta: { permissions: [] },
component: () => import('../pages/Requests.vue'),
},
},
],
},
];

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

@ -3,29 +3,31 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
{
title: 'loadFromStore("user/displayName")',
icon: 'mdi-account',
path: 'user',
name: 'user',
component: () => import('../pages/MainPage.vue'),
meta: { permissions: ['user'] },
permissions: ['user'],
route: { path: 'user', name: 'user', component: () => import('../pages/MainPage.vue') },
children: [
{
title: 'Einstellungen',
icon: 'mdi-account-edit',
shortcut: true,
permissions: ['user'],
route: {
path: 'settings',
name: 'user-settings',
shortcut: true,
meta: { permissions: ['user'] },
component: () => import('../pages/Settings.vue'),
},
},
{
title: 'Admin',
icon: 'mdi-cog',
shortcut: false,
permissions: ['users_edit_other'],
route: {
path: 'admin',
name: 'admin-settings',
shortcut: false,
meta: { permissions: ['users_edit_other'] },
component: () => import('../pages/AdminSettings.vue'),
},
},
],
},
];

44
src/router/index.ts
View File

@ -1,24 +1,42 @@
import { route } from 'quasar/wrappers';
import VueRouter from 'vue-router';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import {
createRouter,
createMemoryHistory,
createWebHistory,
createWebHashHistory,
} from 'vue-router';
import routes from './routes';
/*
* If not building with SSR mode, you can
* directly export the Router instantiation
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export const Router: VueRouter = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
// Leave these as is and change from quasar.conf.js instead!
function router(/* { store, ssrContext } */) {
const createHistory =
process.env.MODE === 'ssr'
? createMemoryHistory
: process.env.VUE_ROUTER_MODE === 'history'
? createWebHistory
: createWebHashHistory;
const Router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
routes,
// Leave this as is and make changes in quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE,
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
});
export default route<Store<StateInterface>>(function ({ Vue }) {
Vue.use(VueRouter);
return Router;
});
}
export default route(router);
export const Router = router();

6
src/router/routes.ts
View File

@ -1,6 +1,6 @@
import { RouteConfig } from 'vue-router';
import { RouteRecordRaw } from 'vue-router';
const routes: RouteConfig[] = [
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: 'login',
@ -56,7 +56,7 @@ const routes: RouteConfig[] = [
// Always leave this as last one,
// but you can also remove it
{
path: '*',
path: '/:catchAll(.*)*',
redirect: 'login',
},
];

24
src/store/index.ts
View File

@ -1,27 +1,13 @@
import { store } from 'quasar/wrappers';
import { SessionInterface } from 'src/plugins/user/store/session';
import Vuex from 'vuex';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { createStore } from 'vuex';
/*
* If not building with SSR mode, you can
* directly export the Store instantiation
*/
export interface StateInterface {
user: UserStateInterface;
session: SessionInterface;
[key: string]: any;
}
export default store(function ({ Vue }) {
Vue.use(Vuex);
const Store = new Vuex.Store<StateInterface>({
export default store(function (/* { ssrContext } */) {
const Store = createStore({
modules: {},
// enable strict mode (adds overhead!)
// for dev mode only
strict: !!process.env.DEV,
// for dev mode and --debug builds only
strict: !!process.env.DEBUGGING,
});
return Store;