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

     1  <template>
     2    <perfect-scrollbar class="page-container">
     3      <v-container>
     4        <v-row align="top" justify="center" class="fill-height">
     5          <v-col cols="12" v-show="loading || emptyRepo"></v-col>
     6          <v-col cols="6" v-show="loading">
     7            <p class="subtitle-1 my-1">Getting Repositories</p>
     8            <v-progress-linear indeterminate rounded height="6"></v-progress-linear>
     9          </v-col>
    10          <v-col sm="12" md="8" v-show="!loading && !emptyRepo">
    11            <v-card flat>
    12              <v-toolbar flat>
    13                <v-text-field
    14                  v-model="searchText"
    15                  class="search-bar"
    16                  label="Search"
    17                  solo
    18                  dense
    19                  height="48"
    20                ></v-text-field>
    21                <v-btn :loading="syncing" color="accent" class="ml-5" small dark @click="synchronize">
    22                  <v-icon class="mr-1" small>mdi-sync</v-icon>Sync
    23                </v-btn>
    24              </v-toolbar>
    25              <v-card-text>
    26                <repo-list v-if="!loading" :repos="repositories"></repo-list>
    27              </v-card-text>
    28            </v-card>
    29          </v-col>
    30          <v-col cols="12" v-show="!loading && emptyRepo" class="subtitle-1 text-center">
    31            Oops, there is no repository found. Try to
    32            <v-btn :loading="syncing" color="accent" class="mx-1" small dark @click="synchronize">
    33              <v-icon class="mr-1" small>mdi-sync</v-icon>Sync
    34            </v-btn>at first.
    35          </v-col>
    36        </v-row>
    37      </v-container>
    38    </perfect-scrollbar>
    39  </template>
    40  
    41  <script lang="ts">
    42  import { Component } from 'vue-property-decorator';
    43  import Vue from '@/vue';
    44  import RepoList from '@/components/RepoList.vue';
    45  import { Actions } from '@/store';
    46  
    47  @Component({
    48    components: {
    49      RepoList
    50    }
    51  })
    52  export default class Repo extends Vue {
    53    syncing = false;
    54    searchText = '';
    55    mounted() {
    56      this.$store.dispatch(Actions.FETCH_REPOSITORY_LIST);
    57    }
    58  
    59    get loading(): boolean {
    60      return this.$store.state.repository.loading;
    61    }
    62  
    63    get emptyRepo(): boolean {
    64      return this.$store.state.repository.list.length <= 0;
    65    }
    66  
    67    get repositories(): Repository[] {
    68      let repos = [] as Repository[];
    69      repos.push(...this.$store.state.repository.list);
    70      repos.sort((a, b) => {
    71        if (a.ReportID && b.ReportID) {
    72          return a.URL.localeCompare(b.URL);
    73        } else if (a.ReportID) {
    74          return -1;
    75        } else if (b.ReportID) {
    76          return 1;
    77        } else {
    78          return a.URL.localeCompare(b.URL);
    79        }
    80      });
    81      if (this.searchText !== '') {
    82        const text = this.searchText.trim();
    83        repos = repos.filter(repo => {
    84          return repo.URL.toLowerCase().includes(text.toLowerCase());
    85        });
    86      }
    87      return repos;
    88    }
    89  
    90    synchronize() {
    91      this.syncing = true;
    92      this.$store.dispatch(Actions.SYNCHRONIZE_REPOSITORY).finally(() => {
    93        this.syncing = false;
    94      });
    95    }
    96  }
    97  </script>
    98  
    99  <style lang="scss" scoped>
   100  .page-container {
   101    overflow-y: auto;
   102    height: 100%;
   103  }
   104  
   105  ::v-deep .search-bar {
   106    .v-input__control {
   107      height: 48px !important;
   108    }
   109  }
   110  </style>