ff-admin/src/views/admin/View.vue

<template>
  <SidebarLayout>
    <template #sidebar>
      <SidebarTemplate
        :mainTitle="activeNavigationObject.mainTitle"
        :topTitle="activeNavigationObject.topTitle"
        :showTopList="activeNavigationObject.top != null"
      >
        <template #topList>
          <RoutingLink v-for="item in activeNavigationObject.top" :key="item.key" :link="item" />
        </template>
        <template #list>
          <RoutingLink v-for="item in activeNavigationObject.main" :key="item.key" :link="item" />
        </template>
      </SidebarTemplate>
    </template>
    <template #main>
      <component v-if="display" :is="displayed" />
      <div v-else class="w-full h-full bg-white rounded-lg"></div>
    </template>
  </SidebarLayout>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNavigationStore } from "@/stores/admin/navigation";
import SidebarLayout from "@/layouts/Sidebar.vue";
import SidebarTemplate from "@/templates/Sidebar.vue";
import RoutingLink from "@/components/admin/RoutingLink.vue";
import { useAbilityStore } from "../../stores/ability";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    contestId: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState(useNavigationStore, [
      "activeNavigationObject",
      "activeTopLevelObject",
      "activeLink",
      "componentOverwrite",
    ]),
    display(): boolean {
      return this.activeLink?.component || this.componentOverwrite;
    },
    displayed() {
      if (this.componentOverwrite != null) {
        return this.componentOverwrite;
      } else {
        return this.activeLink?.component;
      }
    },
  },
  created() {
    useAbilityStore().$subscribe(() => {
      this.updateTopLevel();
      this.updateNavigation();
    });
    this.updateTopLevel();
    this.updateNavigation();

    this.setLink(this.activeTopLevelObject.levelDefault);
  },
  beforeUnmount() {
    this.resetNavigation();
  },
  methods: {
    ...mapActions(useNavigationStore, [
      "setLink",
      "resetNavigation",
      "setTopLevel",
      "updateTopLevel",
      "updateNavigation",
    ]),
  },
});
</script>