ResourceModule.vue

<template>
  <div>
    <RouterView v-if="moduleIsReady" />
    <b-row v-else align-h="center" class="my-4">
      <b-spinner variant="primary" />
    </b-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ResourceI18nMessages } from "./i18n";

// import the store for current module
import useResourceStore from "./store";
import useProjectStore from "@/modules/project/store";

import type { VisitedResourceObject } from "./types";
import VueI18n from "vue-i18n";
import { cloneDeep } from "lodash";
import type { Route } from "vue-router";
import type {
  ProjectDto,
  ResourceTypeInformationDto,
} from "@coscine/api-client/dist/types/Coscine.Api";

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

    return { resourceStore, projectStore };
  },

  computed: {
    project(): ProjectDto | null {
      return this.projectStore.currentProject;
    },
    resource(): VisitedResourceObject | null {
      return this.resourceStore.currentResource;
    },
    resourceTypeInformation(): ResourceTypeInformationDto | undefined {
      return this.resourceStore.enabledResourceTypes?.find(
        (resourceType) => resourceType.id === this.resource?.type?.id
      );
    },
    moduleIsReady(): boolean {
      if (
        this.projectStore.currentProject &&
        this.projectStore.currentUserRole &&
        this.resourceStore.currentResource
      ) {
        return true;
      }
      return false;
    },
  },

  watch: {
    async resourceTypeInformation() {
      this.setI18n();
    },
  },

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

  beforeDestroy() {
    // Set current resource ID to null
    this.resourceStore.currentId = null;
  },

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

    async apiFetch(route: Route) {
      if (this.project?.id) {
        // Resource may be unset (e.g. when entering from a direct link)
        await this.resourceStore.retrieveUnsetResource(
          this.project.id,
          this.resource,
          route
        );
        if (this.resource) {
          if (!this.resourceStore.currentFullApplicationProfile) {
            this.resourceStore.retrieveApplicationProfile(this.resource);
          }
        }
        this.setI18n();
      }
    },

    setI18n() {
      this.$i18n.mergeLocaleMessage("de", cloneDeep(ResourceI18nMessages.de));
      this.$i18n.mergeLocaleMessage("en", cloneDeep(ResourceI18nMessages.en));
      if (
        this.resourceTypeInformation &&
        this.resourceTypeInformation.specificType
      ) {
        if (ResourceI18nMessages.de.resourceType) {
          const germanResourceTypeMessageObject = ResourceI18nMessages.de
            .resourceType as VueI18n.LocaleMessageObject;
          if (
            germanResourceTypeMessageObject[
              this.resourceTypeInformation.specificType
            ]
          ) {
            const resourceTypeDefinition = germanResourceTypeMessageObject[
              this.resourceTypeInformation.specificType
            ] as VueI18n.LocaleMessageObject;
            this.$i18n.mergeLocaleMessage(
              "de",
              cloneDeep(resourceTypeDefinition)
            );
          }
        }
        if (ResourceI18nMessages.en.resourceType) {
          const englishResourceTypeMessageObject = ResourceI18nMessages.en
            .resourceType as VueI18n.LocaleMessageObject;
          if (
            englishResourceTypeMessageObject[
              this.resourceTypeInformation.specificType
            ]
          ) {
            const resourceTypeDefinition = englishResourceTypeMessageObject[
              this.resourceTypeInformation.specificType
            ] as VueI18n.LocaleMessageObject;
            this.$i18n.mergeLocaleMessage(
              "en",
              cloneDeep(resourceTypeDefinition)
            );
          }
        }
      }
    },
  },
});
</script>

<style></style>