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

     1  <template>
     2    <v-container class="container">
     3      <report-empty v-show="!report" />
     4      <v-container v-show="report">
     5        <v-banner single-line>
     6          <span class="text-h4 text-capitalize">Breakdown</span>
     7        </v-banner>
     8        <v-row justify="space-around">
     9          <v-card flat>
    10            <v-card-title>{{branchTitle}}</v-card-title>
    11            <v-card-text class="text-capitalize text-h6">{{branch}}</v-card-text>
    12          </v-card>
    13          <v-card flat>
    14            <v-card-title>Files</v-card-title>
    15            <v-card-text>
    16              <ICountUp :endVal="filesCount" class="count-up text-h2" />
    17            </v-card-text>
    18          </v-card>
    19        </v-row>
    20        <v-banner single-line>
    21          <span class="text-h4">Coverage</span>
    22        </v-banner>
    23        <v-row justify="space-around">
    24          <v-card flat>
    25            <v-card-title>Latest Upload</v-card-title>
    26            <v-card-text>
    27              <commit-button class="mr-5" />
    28              {{uploadDate}}
    29            </v-card-text>
    30          </v-card>
    31          <v-sheet class="content">
    32            <v-progress-circular
    33              :size="100"
    34              :width="15"
    35              :rotate="-90"
    36              :value="$coverage"
    37              color="primary"
    38            >{{$coverage}}</v-progress-circular>
    39          </v-sheet>
    40        </v-row>
    41      </v-container>
    42    </v-container>
    43  </template>
    44  
    45  <script lang="ts">
    46  import { Component, Mixins } from 'vue-property-decorator';
    47  import ICountUp from 'vue-countup-v2';
    48  import Vue from '@/vue';
    49  import ReportEmpty from '@/components/ReportEmpty.vue';
    50  import CommitButton from '@/components/CommitButton.vue';
    51  import ReportMixin from '@/mixins/report';
    52  
    53  @Component({
    54    name: 'report-overview',
    55    components: {
    56      ICountUp,
    57      ReportEmpty,
    58      CommitButton
    59    }
    60  })
    61  export default class ReportOverview extends ((Mixins(
    62    ReportMixin
    63  ) as typeof Vue) && ReportMixin) {
    64    get repo(): Repository | undefined {
    65      return this.$store.state.repository.current;
    66    }
    67  
    68    get report(): Report | undefined {
    69      return this.$store.state.report.current;
    70    }
    71  
    72    get branchTitle(): string {
    73      console.log(this.repo);
    74      console.log(this.report);
    75      if (
    76        this.repo &&
    77        this.report &&
    78        this.report.reference &&
    79        this.report.reference !== ''
    80      ) {
    81        return this.report.reference !== this.repo.Branch
    82          ? 'Current Branch'
    83          : 'Default Branch';
    84      }
    85      return 'Default Branch';
    86    }
    87  
    88    get branch(): string {
    89      if (this.report && this.report.reference && this.report.reference !== '') {
    90        return this.report.reference;
    91      }
    92      return this.repo ? this.repo.Branch : 'Master';
    93    }
    94  
    95    get filesCount(): number {
    96      return this.report && this.report.files ? this.report.files.length : 0;
    97    }
    98  
    99    get uploadDate(): string {
   100      if (this.report && this.report.createdAt) {
   101        const date = new Date(this.report.createdAt);
   102        return date.toLocaleDateString();
   103      } else {
   104        return 'No Report uploaded';
   105      }
   106    }
   107  }
   108  </script>
   109  
   110  <style lang="scss" scoped>
   111  @import '@/assets/styles/variables';
   112  
   113  .container {
   114    .content {
   115      padding: 20px;
   116    }
   117    .count-up {
   118      color: $content-color;
   119    }
   120  }
   121  </style>
   122  
   123  <docs>
   124  
   125  ### Examples
   126  ```[import](./__examples__/ReportOverview.vue)
   127  ```
   128  </docs>