c-home.vue

<template lang="pug">
#home
  template(v-if="userUpdated")
    c-resizer
      template(#left)
        #summary-wrapper
          c-title(ref="cTitle")
          c-summary.tab-padding(
            v-if="!isPortfolio",
            ref="summary",
            :repos="users",
            :error-messages="errorMessages"
          )
          c-summary-portfolio.tab-padding(
            v-else,
            ref="summary",
            :repos="users",
            :error-messages="errorMessages"
          )

          .timestamp-footer
            span Generated by&nbsp;
            a(
              :href="getSpecificCommitLink()", target="_blank"
            )
              strong this version
            span &nbsp;of&nbsp;
            a(
              :href="getRepoSenseHomeLink()", target="_blank"
            )
              strong RepoSense
            span &nbsp;(
            a(
              :href="getUserGuideLink()", target ="_blank"
            )
              strong User Guide
            span ) on {{ creationDate }}
          .report-generation-time(style="display: none;")
            span {{ reportGenerationTime }}

      template(#right)
        #tabs-wrapper(ref="tabWrapper")
          .tab-content.panel-padding
            .tab-pane
              c-authorship#tab-authorship(v-if="tabType === 'authorship'")
              c-zoom#tab-zoom(v-else-if="tabType === 'zoom'")
              #tab-empty(v-else)
                .title
                  h2 Welcome to this RepoSense report!
                  p The charts on the left show the contribution activities, grouped by repository and author.
                  p
                    | To view the code attributed to a specific author, click the &nbsp;
                    font-awesome-icon(icon="code")
                    | &nbsp; icon next to that author's name.
                    br
                    | To view the breakdown of commits made by a specific author, click the &nbsp;
                    font-awesome-icon(icon="list-ul")
                    | &nbsp; icon next to that author's name.
                    br
                    | To hide the code view and show only the activity charts, click the &nbsp;
                    font-awesome-icon(icon="caret-right")
                    | &nbsp; icon on the centre divider.
                  p
                    | See the &nbsp;
                    a(
                      :href="getUsingReportsUserGuideLink()", target="_blank"
                    )
                      strong User Guide
                    | &nbsp; to get a better understanding of how to interpret the report.

  template(v-else)
    .empty Please upload a .zip file generated by RepoSense.

    form#file-upload(onsubmit="return false;")
      input(type="file", accept=".zip", @change="updateReportZip")
</template>

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

import cTitle from '../components/c-title.vue';
import cResizer from '../components/c-resizer.vue';
import cZoom from './c-zoom.vue';
import cSummary from './c-summary.vue';
import cSummaryPortfolio from './c-summary-portfolio.vue';
import cAuthorship from './c-authorship.vue';

const home = defineComponent({
  name: 'c-home',
  components: {
    cTitle,
    cResizer,
    cZoom,
    cSummary,
    cSummaryPortfolio,
    cAuthorship,
  },
  props: {
    updateReportZip: {
      type: Function,
      required: true,
    },
    repos: {
      type: Object,
      required: true,
    },
    users: {
      type: Array<Repo>,
      required: true,
    },
    userUpdated: {
      type: Boolean,
      required: true,
    },
    loadingOverlayOpacity: {
      type: Number,
      required: true,
    },
    tabType: {
      type: String,
      required: true,
    },
    creationDate: {
      type: String,
      required: true,
    },
    reportGenerationTime: {
      type: String,
      required: true,
    },
    errorMessages: {
      type: Object,
      required: true,
    },
  },
  computed: {
    isPortfolio(): boolean {
      return window.isPortfolio;
    }
  },
  methods: {
    getRepoSenseHomeLink(): string {
      const version = window.repoSenseVersion;
      if (!version) {
        return `${window.HOME_PAGE_URL}/RepoSense/`;
      }
      return `${window.HOME_PAGE_URL}`;
    },

    getSpecificCommitLink(): string {
      const version = window.repoSenseVersion;
      if (!version) {
        return `${window.REPOSENSE_REPO_URL}`;
      }
      if (version.startsWith('v')) {
        return `${window.REPOSENSE_REPO_URL}/releases/tag/${version}`;
      }
      return `${window.REPOSENSE_REPO_URL}/commit/${version}`;
    },

    getUserGuideLink(): string {
      const version = window.repoSenseVersion;
      if (!version) {
        return `${window.HOME_PAGE_URL}/RepoSense/ug/index.html`;
      }
      return `${window.HOME_PAGE_URL}/ug/index.html`;
    },

    getUsingReportsUserGuideLink(): string {
      const version = window.repoSenseVersion;
      if (!version) {
        return `${window.HOME_PAGE_URL}/RepoSense/ug/usingReports.html`;
      }
      return `${window.HOME_PAGE_URL}/ug/usingReports.html`;
    },
  },
});

export default home;
</script>