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

Fixed Error und Warnings

This commit is contained in:
Tim Gröger 2020-10-13 11:27:27 +02:00
parent 6d56d5847f
commit dddafef3a1
17 changed files with 172 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@ -1376,6 +1376,12 @@
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"typescript": {
"version": "3.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
"integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
"dev": true
}
}
},
@ -8645,15 +8651,6 @@
"lower-case": "1.1.4"
}
},
"node-dir": {
"version": "0.1.17",
"resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
"integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
"dev": true,
"requires": {
"minimatch": "3.0.4"
}
},
"node-forge": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@ -10912,15 +10909,6 @@
}
}
},
"require-context": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/require-context/-/require-context-1.1.0.tgz",
"integrity": "sha512-nfYSy3Q9W3W1fCo0nief19bDq216IGY9+wOUsmCWAJ5jssyak0r110rvqIj4KJYoUYDxLDaeA66ONOYy4PJEUw==",
"dev": true,
"requires": {
"node-dir": "0.1.17"
}
},
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@ -12947,9 +12935,9 @@
"dev": true
},
"typescript": {
"version": "3.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
"integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
"integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==",
"dev": true
},
"uglify-js": {

2
package.json
View File

@ -28,7 +28,7 @@
"eslint-config-prettier": "^6.9.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-vue": "^6.1.2",
"require-context": "^1.1.0"
"typescript": "^4.0.3"
},
"browserslist": [
"last 10 Chrome versions",

6
quasar.conf.js
View File

@ -8,7 +8,6 @@
/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */
const { configure } = require('quasar/wrappers');
const { path } = require('path');
module.exports = configure(function(ctx) {
return {
@ -75,11 +74,6 @@ module.exports = configure(function(ctx) {
exclude: /node_modules/
});
}
cfg.resolve.alias = {
...cfg.resolve.alias
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
//flaschngeist_plugin: path.resolve(__dirname, './src/plugins')
};
}
},

3
src/boot/composition-api.ts
View File

@ -1,6 +1,7 @@
import VueCompositionApi from '@vue/composition-api';
import { VueConstructor } from 'vue';
import { boot } from 'quasar/wrappers';
export default boot(({ Vue }) => {
export default boot(({ Vue }: { Vue: VueConstructor }) => {
Vue.use(VueCompositionApi);
});

42
src/boot/plugins.ts
View File

@ -1,7 +1,6 @@
import { boot } from 'quasar/wrappers';
import { RouteConfig } from 'vue-router';
import { Module } from 'vuex';
import {} from 'webpack';
interface PluginRouteConfig extends RouteConfig {
example?: unknown;
@ -15,30 +14,35 @@ interface EssentialLink {
interface Plugin {
router: PluginRouteConfig[];
store?: Module<any, any>;
mainLink: EssentialLink;
store?: Module<never, never>;
mainLink: PluginMainLink;
}
export { PluginRouteConfig, Plugin };
interface PluginMainLink extends PluginChildLink {
children: PluginChildLink[] | [];
}
interface PluginChildLink {
name: string;
title: string;
link: string;
icon: string;
}
export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink };
// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export default boot(({ Vue, router, store }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const plugins: any = require.context('src/plugins', true, /.+\/plugin.ts$/);
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
let mop = [];
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
plugins.keys().forEach((fileName: any) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
export default boot(({ Vue, router }) => {
const plugins = require.context('src/plugins', true, /.+\/plugin.ts$/);
const pluginMainLinks: PluginMainLink[] = [];
plugins.keys().forEach((fileName: string) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
router.addRoutes(plugins(fileName).default.router);
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
mop.push(plugins(fileName).default.mainLink);
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
pluginMainLinks.push(plugins(fileName).default.mainLink);
});
Vue.prototype.$flaschengeist_plugins = mop;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$flaschengeist_plugins = pluginMainLinks;
console.log(plugins);
});

0
src/components/navigation/PluginLinksHome.vue → src/components/navigation/PluginChildrenLinks.vue
View File

28
src/components/navigation/PluginLinksAbout.vue
View File

@ -1,28 +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 About', link: 'newAbout', icon: 'mdi-information-outline' },
{ title: 'Altes About', link: 'oldAbout', 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>

90
src/layouts/MainLayout.vue
View File

@ -48,14 +48,14 @@
<q-list>
<essential-link
v-for="(link, index) in links"
:key="index"
:key="'main' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
<essential-link
v-for="(link, index) in $flaschengeist_plugins"
:key="index"
:key="'plugin' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
@ -64,7 +64,18 @@
<q-separator />
<!-- Plugin functions -->
<router-view name="plugin-nav" />
<!-- <router-view name="plugin-nav" /> -->
<q-list>
<essential-link
v-for="(link, index) in pluginChildLinks"
:key="'childPlugin' + index"
:title="link.title"
:link="link.link"
:icon="link.icon"
/>
</q-list>
<q-btn @click="showRoute" label="test"></q-btn>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<q-btn
@ -87,18 +98,50 @@
<script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue';
import { event, Screen } from 'quasar';
import { defineComponent, ref, reactive, computed } from '@vue/composition-api';
import { Screen } from 'quasar';
import { PluginMainLink } from 'boot/plugins';
import { defineComponent, ref, computed } from '@vue/composition-api';
const links = [
{ title: 'home', icon: 'mdi-home' },
{ title: 'about', link: 'about', icon: 'mdi-information' }
{
name: 'home',
title: 'home',
icon: 'mdi-home',
children: [
{ title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
{ title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
]
},
{
name: 'about',
title: 'about',
link: 'about',
icon: 'mdi-information',
children: [
{
title: 'Neues About',
link: 'newAbout',
icon: 'mdi-information-outline'
},
{
title: 'Altes About',
link: 'oldAbout',
icon: 'mdi-information-variant'
}
]
}
];
declare module 'vue/types/vue' {
interface Vue {
$flaschengeist_plugins: PluginMainLink[];
}
}
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink },
setup() {
setup(_, ctx) {
const leftDrawer = ref(false);
const leftDrawerOpen = ref(
@ -114,7 +157,36 @@ export default defineComponent({
}
}
return { leftDrawerOpen, leftDrawerMini, leftDrawerClicker, links };
const pluginChildLinks = computed(() => {
const test:
| PluginMainLink
| undefined = ctx.root.$flaschengeist_plugins.find(
(plugin: PluginMainLink) => {
return plugin.name == ctx.root.$route.matched[1].name;
}
);
console.log(test);
if (typeof test == undefined) {
return [];
} else {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
return test.children;
}
});
function showRoute() {
console.log(ctx.root.$route);
}
return {
leftDrawerOpen,
leftDrawerMini,
leftDrawerClicker,
links,
pluginChildLinks,
showRoute
};
}
});
</script>

18
src/layouts/OutLayout.vue
View File

@ -1,12 +1,13 @@
<template>
<q-layout view="hHh lpr lFf"> <!-- Be sure to play with the Layout demo on docs -->
<q-layout view="hHh lpr lFf">
<!-- Be sure to play with the Layout demo on docs -->
<!-- (Optional) The Header -->
<q-header elevated>
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="logo.svg">
<img src="logo.svg" />
</q-avatar>
<span class="gt-xs">
Flaschengeist
@ -17,25 +18,18 @@
<!-- (Optional) The Footer -->
<!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
<q-page-container>
<!-- This is where pages get injected -->
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api'
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'OutLayout',
setup() {
return { }
}
})
name: 'OutLayout'
});
</script>

4
src/pages/Login.vue
View File

@ -38,7 +38,7 @@ import { defineComponent, ref } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
setup() {
setup(_, ctx) {
const username = ref('');
const password = ref('');
const rules = [
@ -47,7 +47,7 @@ export default defineComponent({
function doLogin() {
console.log(username.value, password.value);
this.$router.push({ name: 'home' });
void ctx.root.$router.push({ name: 'home' });
}
return { username, password, doLogin, rules };

2
src/pages/home/Home.vue
View File

@ -13,7 +13,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
// name: 'PageName'
setup(_, ctx) {

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

@ -10,7 +10,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'

24
src/plugins/plugin-example-2/plugin.ts
View File

@ -1,10 +1,28 @@
import { PluginRouteConfig, Plugin } from 'boot/plugins';
import { RouteConfig } from 'vue-router';
import { Plugin } from 'boot/plugins';
import routes from 'src/plugins/plugin-example-2/routes';
const plugin: Plugin = {
router: routes,
mainLink: { title: 'Plugin2', link: 'plugin2', icon: 'mdi-toy-brick-plus' }
mainLink: {
name: 'plugin2',
title: 'Plugin2',
link: 'plugin2',
icon: 'mdi-toy-brick-plus',
children: [
{
name: 'plugin2',
title: 'Neues Plugin2',
link: 'plugin2_1',
icon: 'mdi-information-outline'
},
{
name: 'plugin2',
title: 'Altes Plugin2',
link: 'plugin2_2',
icon: 'mdi-information-variant'
}
]
}
};
const mainLink = plugin.mainLink;

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

@ -10,7 +10,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
import { defineComponent } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
// name: 'PageName'

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

@ -1,10 +1,28 @@
import { PluginRouteConfig, Plugin } from 'boot/plugins';
import { RouteConfig } from 'vue-router';
import { Plugin } from 'boot/plugins';
import routes from 'src/plugins/plugin-example/routes';
const plugin: Plugin = {
router: routes,
mainLink: { title: 'Plugin1', link: 'plugin1', icon: 'mdi-toy-brick' }
mainLink: {
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 mainLink = plugin.mainLink;

12
src/router/routes.ts
View File

@ -20,11 +20,7 @@ const routes: RouteConfig[] = [
{
name: 'home',
path: 'home',
components: {
default: () => import('pages/home/Home.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksHome.vue')
},
component: () => import('pages/home/Home.vue'),
children: [
{
name: 'newHome',
@ -41,11 +37,7 @@ const routes: RouteConfig[] = [
{
name: 'about',
path: 'about',
components: {
default: () => import('pages/about/About.vue'),
'plugin-nav': () =>
import('components/navigation/PluginLinksAbout.vue')
},
component: () => import('pages/about/About.vue'),
children: [
{
name: 'newAbout',

2
tsconfig.json
View File

@ -1,7 +1,7 @@
{
"extends": "@quasar/app/tsconfig-preset",
"compilerOptions": {
"types": ["node", "webpack-env"],
"types": ["node", "webpack-env", "@quasar/app"],
"baseUrl": "."
}
}