flaschengeist-frontend/src/layouts/MainLayout.vue

<template>
  <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
          dense
          flat
          round
          icon="menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
          v-if="!leftDrawerOpen"
        />

        <q-toolbar-title>
          <router-link
            :to="{ name: 'dashboard' }"
            style="text-decoration: none; color: inherit;"
          >
            <q-avatar>
              <img src="logo.svg" />
            </q-avatar>
            <span class="gt-xs">
              Flaschengeist
            </span>
          </router-link>
        </q-toolbar-title>

        <!-- Hier kommen die Shortlinks hin -->
        <div>
          <short-cut-link
            v-for="(shortcut, index) in $flaschengeistPlugins.shortcuts"
            :key="'shortcut' + index"
            :link="shortcut.link"
            :icon="shortcut.icon"
            :permissions="shortcut.permissions"
          />
        </div>
        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
      </q-toolbar>
    </q-header>

    <q-drawer
      show-if-above
      v-model="leftDrawerOpen"
      side="left"
      bordered
      :mini="leftDrawerMini"
      @click.capture="leftDrawerClicker"
    >
      <!-- Plugins -->
      <q-list>
        <essential-link
          v-for="(link, index) in $flaschengeistPlugins.mainLinks"
          :key="'plugin' + index"
          :title="link.title"
          :link="link.link"
          :icon="link.icon"
          :permissions="link.permissions"
        />
      </q-list>
      <q-separator />

      <!-- Plugin functions -->
      <!-- <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"
          :permissions="link.permissions"
        />
      </q-list>

      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
        <q-btn
          size="sm"
          dense
          round
          unelevated
          color="secondary"
          icon="chevron_left"
          @click="leftDrawerMini = true"
        />
      </div>

      <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"
      />
    </q-drawer>

    <BackendOffline />

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import BackendOffline from 'components/loading/BackendOffline.vue';
import { Screen, Loading } from 'quasar';
import { defineComponent, ref, computed } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { FG_Plugin } from 'src/plugins';

const links = [
  {
    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'
  }
];

declare module 'vue/types/vue' {
  interface Vue {
    $flaschengeistPlugins: FG_Plugin.LoadedPlugins;
  }
}

export default defineComponent({
  name: 'MainLayout',
  components: { EssentialLink, ShortCutLink, BackendOffline },
  setup(_, ctx) {
    const leftDrawer = ref(false);

    const leftDrawerOpen = ref(
      computed({
        get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
        set: (val: boolean) => (leftDrawer.value = val)
      })
    );
    const leftDrawerMini = ref(false);

    function leftDrawerClicker() {
      if (leftDrawerMini.value) {
        leftDrawerMini.value = false;
      }
    }

    const pluginChildLinks = computed(() => {
      const link:
        | FG_Plugin.PluginMainLink
        | undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
        (plugin: FG_Plugin.PluginMainLink) => {
          if (ctx.root.$route.matched.length > 1) {
            return plugin.name == ctx.root.$route.matched[1].name;
          }
        }
      );

      if (link == undefined) {
        return [];
      } else {
        return link.children;
      }
    });

    function logout() {
      Loading.show({ message: 'Session wird abgemeldet' });
      (<Store<StateInterface>>ctx.root.$store)
        .dispatch('session/logout')
        .finally(() => {
          Loading.hide();
        });
    }

    return {
      leftDrawerOpen,
      leftDrawerMini,
      leftDrawerClicker,
      links,
      pluginChildLinks,
      shortcuts,
      logout
    };
  }
});
</script>