ProjectModule.vue

<template>
  <div>
    <RouterView />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

// import the store for current module
import useProjectStore from "./store";
import useResourceStore from "@/modules/resource/store";
import useNotificationStore from "@/store/notification";

import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
import type { Route } from "vue-router";

export default defineComponent({
  async beforeRouteUpdate(to, from, next) {
    await this.apiFetch(to);
    next();
  },
  setup() {
    const projectStore = useProjectStore();
    const notificationStore = useNotificationStore();
    const resourceStore = useResourceStore();

    return { projectStore, notificationStore, resourceStore };
  },

  computed: {
    project(): ProjectObject | null {
      return this.projectStore.currentProject;
    },
    moduleIsReady(): boolean {
      // Currently unused
      return (
        this.projectStore.currentSlug !== null &&
        this.projectStore.currentProject !== null &&
        this.projectStore.currentResources !== null &&
        this.projectStore.currentSubProjects !== null &&
        this.projectStore.currentQuotas !== null &&
        this.projectStore.currentProjectRoles !== null &&
        this.projectStore.roles !== null &&
        this.projectStore.roles !== undefined &&
        this.resourceStore.resourceTypes !== null
      );
    },
  },

  created() {
    this.initialize();
  },

  beforeDestroy() {
    // Set the slug to null in order to hide the project from the sidebar
    if (this.projectStore.currentSlug) {
      this.projectStore.currentSlug = null;
    }
  },

  methods: {
    async initialize() {
      await this.apiFetch(this.$router.currentRoute);
    },

    async apiFetch(route: Route) {
      // Project may be unset (e.g. when entering from a direct link)
      await this.projectStore.retrieveUnsetProject(this.project, route);
      // Load All Projects if not present
      if (this.projectStore.allProjects === null) {
        this.projectStore.retrieveAllProjects();
      }
      // Load Resources for the project if not present
      if (this.projectStore.currentResources === null) {
        this.projectStore.retrieveResources(this.project);
      }
      // Load Sub-Projects for the project if not present
      if (this.projectStore.currentSubProjects === null) {
        this.projectStore.retrieveSubProjects(this.project);
      }
      // Load Project Roles for the project if not present
      if (this.projectStore.currentProjectRoles === null) {
        this.projectStore.retrieveProjectRoles(this.project);
      }
      // Load list of all Project Role Types if not present
      if (this.projectStore.roles === null) {
        this.projectStore.retrieveRoles();
      }
      // Load list of Enabled Resource Types if not present
      if (this.resourceStore.resourceTypes === null) {
        await this.resourceStore.retrieveResourceTypes();
      }
    },
  },
});
</script>