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

     1  <template>
     2    <v-card>
     3      <v-card-title class="primary white--text flex-lg-nowrap">
     4        <span class="title">Recent Commits</span>
     5        <v-spacer />
     6        <v-select
     7          :items="branches"
     8          :hide-details="true"
     9          :disabled="loading"
    10          v-model="selectedBranch"
    11          flat
    12          dense
    13          solo
    14          @change="selectBranch"
    15        ></v-select>
    16      </v-card-title>
    17      <v-divider />
    18      <v-skeleton-loader :loading="loading" type="list-item-avatar-two-line">
    19        <v-card-text>
    20          <v-card flat v-if="commits.length <= 0">
    21            <v-card-title>
    22              <v-icon size="36" class="mr-2">mdi-progress-question</v-icon>No Commits Found
    23            </v-card-title>
    24            <v-card-text class="px-5">{{hint}}</v-card-text>
    25          </v-card>
    26          <v-list v-else>
    27            <v-list-item v-for="commit in commits" :key="commit.sha">
    28              <v-list-item-avatar class="elevation-4">
    29                <v-img :src="commit.committerAvatar" v-if="commit.committerAvatar"></v-img>
    30                <v-icon dark v-else>mdi-account</v-icon>
    31              </v-list-item-avatar>
    32              <v-list-item-content>
    33                <v-list-item-title>{{commit.message}}</v-list-item-title>
    34                <v-list-item-subtitle>
    35                  {{commit.committer}}
    36                  <v-chip
    37                    color="accent"
    38                    class="ml-5 px-1"
    39                    outlined
    40                    label
    41                    pill
    42                    x-small
    43                    dark
    44                  >{{shortSHA(commit.sha)}}</v-chip>
    45                </v-list-item-subtitle>
    46              </v-list-item-content>
    47              <v-list-item-action>
    48                <v-btn small color="accent" :to="commitLink(commit)">Report</v-btn>
    49              </v-list-item-action>
    50            </v-list-item>
    51          </v-list>
    52        </v-card-text>
    53      </v-skeleton-loader>
    54    </v-card>
    55  </template>
    56  
    57  <script lang="ts">
    58  import { Component } from 'vue-property-decorator';
    59  import { Location } from 'vue-router';
    60  import Vue from '@/vue';
    61  import { Actions } from '@/store';
    62  
    63  @Component
    64  export default class RecentCommits extends Vue {
    65    selectedBranch = '';
    66    loadingCommits = false;
    67  
    68    constructor() {
    69      super();
    70      this.selectedBranch = this.currentBranch;
    71      this.updateCommits(this.currentBranch);
    72    }
    73  
    74    get commits(): Commit[] {
    75      return this.$store.state.repository.commits.slice(0, 20);
    76    }
    77  
    78    get repo(): Repository | undefined {
    79      return this.$store.state.repository.current;
    80    }
    81  
    82    get loading(): boolean {
    83      return this.$store.state.repository.loading || this.loadingCommits;
    84    }
    85  
    86    get currentBranch(): string {
    87      const report = this.$store.state.report.current;
    88      if (report && report.reference && report.reference !== '') {
    89        return report.reference;
    90      }
    91      return this.repo ? this.repo.Branch : '';
    92    }
    93  
    94    get branches(): string[] {
    95      return this.$store.state.repository.branches;
    96    }
    97  
    98    get user(): User | undefined {
    99      return this.$store.state.user.current;
   100    }
   101  
   102    get hint(): string {
   103      if (this.commits.length > 0) {
   104        return '';
   105      }
   106      return this.user
   107        ? 'Push your first commit and go back later!'
   108        : 'Please login to get the commits list';
   109    }
   110  
   111    shortSHA(sha: string): string {
   112      return sha.substring(0, 16);
   113    }
   114  
   115    commitLink(commit: Commit): Location {
   116      return {
   117        name: 'report-overview',
   118        query: {
   119          ref: commit.sha
   120        }
   121      };
   122    }
   123  
   124    selectBranch() {
   125      this.updateCommits(this.selectedBranch);
   126    }
   127  
   128    updateCommits(ref = '') {
   129      this.loadingCommits = true;
   130      this.$store.dispatch(Actions.FETCH_REPOSITORY_COMMITS, ref).finally(() => {
   131        this.loadingCommits = false;
   132      });
   133    }
   134  }
   135  </script>
   136  
   137  <style lang="scss" scoped>
   138  .title {
   139    min-width: 250px;
   140  }
   141  </style>