ProjectPage.vue

<template>
  <div>
    <b-row align-h="between">
      <!-- Resources -->
      <b-col id="resources">
        <CoscineHeadline :headline="$parent.$tc('page.project.resource', 2)" />

        <div class="list">
          <b-card-group deck>
            <CoscineCard
              :title="$parent.$t('page.project.addResource')"
              type="create"
              :to="toCreateResource()"
              @open-card="openCreateResource($event)"
            />
            <CoscineCard
              v-for="(resource, index) in resources"
              :key="index"
              :title="resource.displayName"
              type="resource"
              :badge_visibility="resource.archived"
              :badge_text="$t('default.archived')"
              :to="toResource(resource)"
              :toSettings="toResourceSettings(resource)"
              @open-card="openResource($event, resource)"
              @open-card-settings="openResourceSettings($event, resource)"
            />
          </b-card-group>
        </div>
      </b-col>

      <!-- Members -->
      <b-col id="members">
        <Members v-if="project"/>
      </b-col>
    </b-row>

    <!-- Sub-Projects -->
    <div id="sub-projects">
      <CoscineHeadline :headline="$parent.$tc('page.project.subProject', 0)" />

      <div class="list">
        <b-card-group deck>
          <CoscineCard
            :title="$parent.$t('page.listProjects.addProject')"
            type="create"
            :to="toCreateSubProject()"
            @open-card="openCreateProject($event)"
          />
          <CoscineCard
            v-for="(project, index) in subProjects"
            :key="index"
            :title="project.displayName"
            type="project"
            :to="toSubProject(project)"
            @open-card="openProject($event, project)"
          />
        </b-card-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue-demi";
import Members from "./components/Members.vue";
import { RawLocation } from "vue-router";
import type {
  ProjectObject,
  ResourceObject,
} from "@coscine/api-client/dist/types/Coscine.Api.Project";

// import the store for current module
import { useProjectStore } from "../store";
// import the main store
import { useMainStore } from "@/store/index";
import { useResourceStore } from "@/modules/resource/store";

export default defineComponent({
  setup() {
    const mainStore = useMainStore();
    const projectStore = useProjectStore();
    const resourceStore = useResourceStore();

    return { mainStore, projectStore, resourceStore };
  },

  props: {
    loading: {
      default: false,
      type: Boolean,
    },
  },

  components: {
    Members,
  },

  computed: {
    project(): ProjectObject | null {
      return this.projectStore.currentProject;
    },
    subProjects(): ProjectObject[] | null {
      return this.projectStore.currentSubProjects;
    },
    resources(): ResourceObject[] | null {
      return this.projectStore.currentResources;
    },
  },

  methods: {
    toCreateSubProject(): RawLocation {
      const route = { name: "create-sub-project" } as RawLocation;
      return route;
    },
    toCreateResource(): RawLocation {
      const route = { name: "create-resource" } as RawLocation;
      return route;
    },
    toSubProject(project: ProjectObject): RawLocation {
      const route = {
        name: "project-home",
        params: { slug: project.slug },
      } as RawLocation;
      return route;
    },
    toResource(resource: ResourceObject): RawLocation {
      const route = {
        name: "resource-home",
        params: { guid: resource.id },
      } as RawLocation;
      return route;
    },
    toResourceSettings(resource: ResourceObject): RawLocation {
      const route = {
        name: "resource-settings",
        params: { guid: resource.id },
      } as RawLocation;
      return route;
    },
    openCreateProject(to: RawLocation) {
      this.$router.push(to);
    },
    openCreateResource(to: RawLocation) {
      // Set current resource ID to null
      this.resourceStore.currentId = null;
      this.$router.push(to);
    },
    openProject(to: RawLocation, project: ProjectObject) {
      if (project.slug) {
        // Add project here, to save an unnecessary API request
        this.projectStore.addProjectAsVisited(project);
        this.$router.push(to);
      } else {
        console.error(
          `Slug for ${project.displayName} is possibly undefined...`
        );
      }
    },
    openResource(to: RawLocation, resource: ResourceObject) {
      if (resource.id) {
        // Add resource here, to save an unnecessary API request
        this.resourceStore.addResourceAsVisited(resource);
        this.$router.push(to);
      } else {
        console.error(
          `ID for ${resource.displayName} is possibly undefined...`
        );
      }
    },
    openResourceSettings(to: RawLocation, resource: ResourceObject) {
      if (resource.id) {
        // Add resource here, to save an unnecessary API request
        this.resourceStore.addResourceAsVisited(resource);
        this.$router.push(to);
      } else {
        console.error(
          `ID for ${resource.displayName} is possibly undefined...`
        );
      }
    },
  },
});
</script>

<style scoped>
#resources {
  /* Forces Members list to collapse down to 
  a new row at after certain window width */
  min-width: 22rem;
}

#members {
  /* Prevents Members list to become wider */
  max-width: 27rem;
}
</style>