[func] List org contributors

Author: PrabhaniN

src/components/org/ContributorItem.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <v-list-tile avatar>
+      <!-- <div> -->
+      <v-layout justify-space-between>
+        <div>
+          <v-list-tile-title v-html="author"></v-list-tile-title>
+        </div>
+        <div class="mx-5">
+          <div class="badge-simple" :style="{backgroundColor: getColor()}"></div>
+        </div>
+      </v-layout>
+      <!-- </div> -->
+      <!-- <div>
+        <v-list-tile-title>{ Total commits: {{total}}, Last commit: {{getLastWeek()}} week(s) ago }</v-list-tile-title>
+      </div>-->
+    </v-list-tile>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContributorItem',
+  props: {
+    author: {
+      type: String
+    },
+    weeks: {
+      type: Array
+    },
+    total: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      reversedWeeks: this.weeks.reverse()
+    };
+  },
+  methods: {
+    getLastWeek() {
+      return this.reversedWeeks.findIndex(week => week.c != 0);
+    },
+    getColor() {
+      let value = this.getLastWeek();
+
+      if (value == 1) return '#1B5E20';
+      else if (value == 2) return '#2E7D32';
+      else if (value == 3) return '#66BB6A';
+      else if (3 < value && value <= 5) return '#A5D6A7';
+      else if (5 < value && value <= 8) return '#FFF9C4';
+      else if (8 < value && value <= 16) return '#FFF176';
+      else if (16 < value && value <= 32) return '#F9A825';
+      else if (32 < value && value <= 56) return '#FF6F00';
+      else if (56 < value && value <= 84) return '#E65100';
+      else if (84 < value && value <= 112) return '#FF3D00';
+      else if (112 < value) return '#78909C';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.badge-simple {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+</style>

src/components/org/OrgDetails.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <v-card flat ripple>
+      <v-layout justify-center row>
+        <v-avatar size="80">
+          <img :src="dp">
+        </v-avatar>
+        <div class="name ml-3">{{name}}</div>
+      </v-layout>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserDetails',
+  props: {
+    dp: {
+      type: String
+    },
+    name: {
+      type: String
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.name {
+  font-size: 20px;
+}
+</style>

src/components/org/OrgRepos.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="my-3">
+      <div class="mt-5 count">Total repo count: {{repos.length}}</div>
+      <div class="my-5" v-for="repo in repos" :key="repo.name">
+        <div class="repo-name">{{repo.name}}</div>
+        <RepoContributors :orgName="orgName" :repoName="repo.name"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RepoContributors from './RepoContributors.vue';
+
+export default {
+  name: 'OrgRepos',
+  props: {
+    repos: {
+      type: Array
+    },
+    orgName: {
+      type: String
+    }
+  },
+  components: {
+    RepoContributors
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.repo-name {
+  font-size: 18px;
+  font-weight: 600;
+}
+.count {
+  font-size: 20px;
+}
+</style>

src/components/org/RepoContributors.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div v-for="contributor in contributors" :key="contributor.author.id">
+      <ContributorItem
+        :author="contributor.author.login"
+        :weeks="contributor.weeks"
+        :total="contributor.total"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import ContributorItem from './ContributorItem';
+import AxiosHelper from '../../config/AxiosHelper';
+import AuthService from '../../services/authService';
+
+const authService = new AuthService();
+
+export default {
+  name: 'RepoContributors',
+  data() {
+    return {
+      contributors: []
+    };
+  },
+  props: {
+    orgName: {
+      type: String
+    },
+    repoName: {
+      type: String
+    }
+  },
+  components: {
+    ContributorItem
+  },
+  methods: {
+    loadContributors() {
+      axios
+        .get(
+          `${AxiosHelper.baseUrl}/repos/${this.orgName}/${
+            this.repoName
+          }/stats/contributors`,
+          {
+            headers: {
+              Authorization: `token ${authService.getToken()}`
+            }
+          }
+        )
+        .then(res => (this.contributors = res.data))
+        .catch(err => console.log(err));
+    }
+  },
+  created() {
+    this.loadContributors();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.badge {
+  width: 20px;
+  height: 20px;
+}
+table,
+th,
+td {
+  border: 1px solid black;
+}
+</style>

src/views/OrgView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-layout class="ma-5" justify-center>
+      <Org/>
+    </v-layout>
+  </div>
+</template>
+
+<script>
+import Org from '../components/org/Org';
+
+export default {
+  name: 'OrgView',
+  components: {
+    Org
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>