c-home.vue

<template lang="pug">
#home
  template(v-if="userUpdated")
    c-resizer
      template(#left)
        #summary-wrapper(ref="summaryWrapper", @scroll="handleSummaryScroll")
          c-intro(ref="cIntro")
          c-summary.tab-padding(
            v-if="!isPortfolio",
            ref="summary",
            :repos="users",
            :error-messages="errorMessages",
            @view-file-browser="$emit('view-file-browser', $event)",
            @go-back-to-welcome-tab="$emit('go-back-to-welcome-tab')"
          )
          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 }}

          c-scroll-top-button(
            :show-back-to-top="showSummaryBackToTop",
            @scroll-to-top="scrollSummaryToTop"
          )

      template(#right)
        #tabs-wrapper(ref="tabWrapper", @scroll="handleTabsScroll")
          .tab-content.panel-padding
            .tab-pane
              c-authorship#tab-authorship(v-if="tabType === 'authorship'")
              c-global-file-browser#tab-file-browser(
                v-else-if="tabType === 'file-browser'",
                :files="globalFiles"
              )
              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.

              c-scroll-top-button(
                :show-back-to-top="showTabsBackToTop",
                @scroll-to-top="scrollTabsToTop"
              )

  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, PropType } from 'vue';

import cIntro from '../components/c-intro.vue';
import cResizer from '../components/c-resizer.vue';
import cZoom from './c-zoom.vue';
import cScrollTopButton from '../components/c-scroll-top-button.vue';
import cSummary from './c-summary.vue';
import cSummaryPortfolio from './c-summary-portfolio.vue';
import cAuthorship from './c-authorship.vue';
import cGlobalFileBrowser from './c-global-file-browser.vue';
import { GlobalFileEntry, Repo } from '../types/types';

const home = defineComponent({
  name: 'c-home',
  components: {
    cGlobalFileBrowser,
    cIntro,
    cResizer,
    cZoom,
    cScrollTopButton,
    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,
    },
    globalFiles: {
      type: Array as PropType<Array<GlobalFileEntry>>,
      required: true,
    },
  },
  emits: [
    'view-file-browser',
    'go-back-to-welcome-tab',
    'open-local-tab',
  ],
  data(): {
    showSummaryBackToTop: boolean,
    showTabsBackToTop: boolean,
  } {
    return {
      showSummaryBackToTop: false,
      showTabsBackToTop: false,
    };
  },
  computed: {
    isPortfolio(): boolean {
      return window.isPortfolio;
    }
  },
  mounted() {
    this.handleTabsScroll();
    this.handleSummaryScroll();
  },
  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`;
    },

    handleSummaryScroll(): void {
      const el = this.$refs.summaryWrapper as HTMLElement | undefined;
      this.showSummaryBackToTop = (el?.scrollTop ?? 0) > 200;
    },

    handleTabsScroll(): void {
      const el = this.$refs.tabWrapper as HTMLElement | undefined;
      this.showTabsBackToTop = (el?.scrollTop ?? 0) > 200;
    },

    scrollSummaryToTop(): void {
      const el = this.$refs.summaryWrapper as HTMLElement | undefined;
      el?.scrollTo({ top: 0, behavior: 'smooth' });
    },

    scrollTabsToTop(): void {
      const el = this.$refs.tabWrapper as HTMLElement | undefined;
      el?.scrollTo({ top: 0, behavior: 'smooth' });
    },
  },
});

export default home;
</script>