github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/views/Report.vue (about)

     1  <template>
     2    <perfect-scrollbar class="page-container">
     3      <v-container>
     4        <v-card flat>
     5          <v-card-title class="d-flow align-center">
     6            <v-icon class="mr-5" size="36">{{avatar}}</v-icon>
     7            <router-link
     8              :to="{name: 'report-overview', query: {}}"
     9              class="black--text text-h5 font-weight-bold"
    10            >{{title}}</router-link>
    11            <v-btn icon class="ml-5" :href="repoURL">
    12              <v-icon small>mdi-open-in-new</v-icon>
    13            </v-btn>
    14          </v-card-title>
    15          <v-tabs v-show="!loading">
    16            <v-tab v-for="tab in tabs" :key="tab.key" :to="tab.link">{{tab.key}}</v-tab>
    17          </v-tabs>
    18        </v-card>
    19        <v-progress-linear :active="loading" :indeterminate="loading"></v-progress-linear>
    20        <div class="router-container" v-show="!loading">
    21          <router-view></router-view>
    22        </div>
    23      </v-container>
    24    </perfect-scrollbar>
    25  </template>
    26  
    27  <script lang="ts">
    28  import { Component } from 'vue-property-decorator';
    29  import { Location } from 'vue-router';
    30  import Vue from '@/vue';
    31  import ReportOverview from '@/components/ReportOverview.vue';
    32  
    33  type tabOptions = {
    34    key: string;
    35    link: Location;
    36  };
    37  
    38  @Component({
    39    components: { ReportOverview }
    40  })
    41  export default class ReportView extends Vue {
    42    get loading(): boolean {
    43      return (
    44        this.$store.state.repository.loading || this.$store.state.report.loading
    45      );
    46    }
    47  
    48    get repo(): Repository | undefined {
    49      return this.$store.state.repository.current;
    50    }
    51  
    52    get owner(): boolean {
    53      return this.$store.state.repository.owner;
    54    }
    55  
    56    get title(): string {
    57      if (this.repo) {
    58        return `${this.repo.NameSpace}/${this.repo.Name}`;
    59      }
    60      return 'Report';
    61    }
    62  
    63    get report(): Report | undefined {
    64      return this.$store.state.report.current;
    65    }
    66  
    67    get history(): Report[] {
    68      return this.$store.state.report.history;
    69    }
    70  
    71    get user(): User | undefined {
    72      return this.$store.state.user.current;
    73    }
    74  
    75    get repoURL(): string {
    76      return this.repo ? this.repo.URL : '';
    77    }
    78  
    79    get tabs(): tabOptions[] {
    80      const options: tabOptions[] = [
    81        {
    82          key: 'Overview',
    83          link: {
    84            name: 'report-overview',
    85            query: this.$route.query
    86          }
    87        }
    88      ];
    89      if (this.report) {
    90        options.push({
    91          key: 'Code',
    92          link: {
    93            name: 'report-code',
    94            query: this.$route.query
    95          }
    96        });
    97      }
    98      if (this.history.length > 0) {
    99        options.push({
   100          key: 'History',
   101          link: {
   102            name: 'report-history',
   103            query: this.$route.query
   104          }
   105        });
   106      }
   107      if (
   108        this.repo &&
   109        this.user &&
   110        this.owner &&
   111        Object.keys(this.$route.query).length === 0
   112      ) {
   113        options.push({
   114          key: 'Setting',
   115          link: {
   116            name: 'report-setting'
   117          }
   118        });
   119      }
   120      return options;
   121    }
   122  
   123    get avatar(): string {
   124      switch (this.repo?.SCM) {
   125        case 'github': {
   126          return 'mdi-github';
   127        }
   128        case 'gitea': {
   129          return '$vuetify.icons.gitea';
   130        }
   131        case 'gitlab': {
   132          return 'mdi-gitlab';
   133        }
   134        default: {
   135          return 'mdi-source-repository';
   136        }
   137      }
   138    }
   139  }
   140  </script>
   141  
   142  <style lang="scss" scoped>
   143  .router-container {
   144    height: calc(100% - 48px);
   145  }
   146  .page-container {
   147    overflow-y: auto;
   148    height: 100%;
   149  }
   150  </style>