From 785296f398cd547b25ae772a0b34edfa319aae9f Mon Sep 17 00:00:00 2001
From: Andreu Cotanda Oliver <cotoli23@gmail.com>
Date: Sun, 8 Sep 2019 20:26:41 +0200
Subject: [PATCH 1/3] WIP, Set up initial template and get data from server

---
 src/App.vue                                   |  2 --
 src/components/Leaves.vue                     | 34 ++++++++++--------
 src/router.js                                 |  2 +-
 src/views/Contributors.vue                    | 12 -------
 src/views/ContributorsPage/Contributor.vue    | 35 +++++++++++++++++++
 .../ContributorsPage/ContributorList.vue      | 33 +++++++++++++++++
 src/views/ContributorsPage/Contributors.vue   | 17 +++++++++
 7 files changed, 106 insertions(+), 29 deletions(-)
 delete mode 100644 src/views/Contributors.vue
 create mode 100644 src/views/ContributorsPage/Contributor.vue
 create mode 100644 src/views/ContributorsPage/ContributorList.vue
 create mode 100644 src/views/ContributorsPage/Contributors.vue

diff --git a/src/App.vue b/src/App.vue
index 23c6885..04b83e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,8 +41,6 @@ body {
   color: var(--smoky_dark);
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100vh;
 }
 
 .app-container {
diff --git a/src/components/Leaves.vue b/src/components/Leaves.vue
index ebc2ee6..9b9198e 100644
--- a/src/components/Leaves.vue
+++ b/src/components/Leaves.vue
@@ -1,29 +1,31 @@
 <template>
   <div class="leaves">
-    <div class="leaf design-leaf"></div>
-    <div class="leaf planing-leaf"></div>
-    <div class="leaf testing-leaf"></div>
-    <div class="leaf backend-leaf"></div>
-    <div class="leaf frontend-leaf"></div>
-    <div class="leaf devops-leaf"></div>
+    <div class="leaf" v-bind:class="{design: design}"></div>
+    <div class="leaf" v-bind:class="planning"></div>
+    <div class="leaf" v-bind:class="testing"></div>
+    <div class="leaf" v-bind:class="backend"></div>
+    <div class="leaf" v-bind:class="frontend"></div>
+    <div class="leaf" v-bind:class="devops"></div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Leaves',
-  props: {
-    design: Boolean,
-    planing: Boolean,
-    testing: Boolean,
-    backend: Boolean,
-    frontend: Boolean,
-    devops: Boolean,
+  data() {
+    return {
+      design: true,
+      planning: false,
+      testing: false,
+      backend: false,
+      frontend: false,
+      devops: false,
+    };
   },
+  props: ['teams'],
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .leaf {
   float: left;
@@ -33,4 +35,8 @@ export default {
   border-radius: 15px 0 15px 0;
   background-color: #bbb;
 }
+
+.design {
+  color: rgb(26, 103, 92);
+}
 </style>
diff --git a/src/router.js b/src/router.js
index a92f415..1c5a83b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,7 +3,7 @@ import Router from 'vue-router';
 import History from './views/History.vue';
 import FAQPage from './views/FAQPage/index.vue';
 import Videos from './views/Videos.vue';
-import Contributors from './views/Contributors.vue';
+import Contributors from './views/ContributorsPage/Contributors.vue';
 
 Vue.use(Router);
 
diff --git a/src/views/Contributors.vue b/src/views/Contributors.vue
deleted file mode 100644
index a12d53d..0000000
--- a/src/views/Contributors.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="page">
-    Contributors page
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'contributors',
-  components: {},
-};
-</script>
diff --git a/src/views/ContributorsPage/Contributor.vue b/src/views/ContributorsPage/Contributor.vue
new file mode 100644
index 0000000..e969096
--- /dev/null
+++ b/src/views/ContributorsPage/Contributor.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="contributor">
+    <img v-bind:src="data.attributes.image" class="profile" />
+    <Leaves :teams="data.attributes.teamIDs" />
+    <p>
+      <i class="fa fa-github-square"></i>
+      {{ data.attributes.username }}
+    </p>
+    <p>{{ data.attributes.name }}</p>
+    <hr />
+  </div>
+</template>
+
+<script>
+import Leaves from '../../components/Leaves.vue';
+
+export default {
+  name: 'Contributor',
+  components: {
+    Leaves,
+  },
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('../../assets/main.css');
+
+.profile {
+  width: var(--width_height);
+  height: var(--width_height);
+  border-radius: 50%;
+}
+</style>
diff --git a/src/views/ContributorsPage/ContributorList.vue b/src/views/ContributorsPage/ContributorList.vue
new file mode 100644
index 0000000..075cd1b
--- /dev/null
+++ b/src/views/ContributorsPage/ContributorList.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="contributors">
+    <div class="contributor" v-for="contributor in contributors" :key="contributor.id">
+      <Contributor :data="contributor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Contributor from './Contributor.vue';
+
+export default {
+  name: 'ContributorList',
+  data() {
+    return {
+      contributors: [],
+    };
+  },
+  created() {
+    return (
+      fetch('https://api-dev.codinggarden.community/contributors')
+        .then(res => res.json())
+        // eslint-disable-next-line
+        .then(json => (this.contributors = json))
+    );
+  },
+  components: {
+    Contributor,
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/ContributorsPage/Contributors.vue b/src/views/ContributorsPage/Contributors.vue
new file mode 100644
index 0000000..58cfeeb
--- /dev/null
+++ b/src/views/ContributorsPage/Contributors.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    Contributors page
+    <ContributorsList />
+  </div>
+</template>
+
+<script>
+import ContributorsList from './ContributorList.vue';
+
+export default {
+  name: 'contributors',
+  components: {
+    ContributorsList,
+  },
+};
+</script>

From 08e02cc55e21ac4335300e3ff47cd19a9a01bf3c Mon Sep 17 00:00:00 2001
From: Andreu Cotanda Oliver <cotoli23@gmail.com>
Date: Sat, 5 Oct 2019 20:28:37 +0200
Subject: [PATCH 2/3] Colorize Leaves

---
 src/components/Leaves.vue                  | 42 ----------------------
 src/components/Leaves/Leave.vue            | 39 ++++++++++++++++++++
 src/components/Leaves/Leaves.vue           | 29 +++++++++++++++
 src/views/ContributorsPage/Contributor.vue |  7 ++--
 4 files changed, 72 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/Leaves.vue
 create mode 100644 src/components/Leaves/Leave.vue
 create mode 100644 src/components/Leaves/Leaves.vue

diff --git a/src/components/Leaves.vue b/src/components/Leaves.vue
deleted file mode 100644
index 9b9198e..0000000
--- a/src/components/Leaves.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="leaves">
-    <div class="leaf" v-bind:class="{design: design}"></div>
-    <div class="leaf" v-bind:class="planning"></div>
-    <div class="leaf" v-bind:class="testing"></div>
-    <div class="leaf" v-bind:class="backend"></div>
-    <div class="leaf" v-bind:class="frontend"></div>
-    <div class="leaf" v-bind:class="devops"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Leaves',
-  data() {
-    return {
-      design: true,
-      planning: false,
-      testing: false,
-      backend: false,
-      frontend: false,
-      devops: false,
-    };
-  },
-  props: ['teams'],
-};
-</script>
-
-<style scoped>
-.leaf {
-  float: left;
-  width: 15px;
-  height: 28px;
-  margin-right: 8px;
-  border-radius: 15px 0 15px 0;
-  background-color: #bbb;
-}
-
-.design {
-  color: rgb(26, 103, 92);
-}
-</style>
diff --git a/src/components/Leaves/Leave.vue b/src/components/Leaves/Leave.vue
new file mode 100644
index 0000000..faf3bd5
--- /dev/null
+++ b/src/components/Leaves/Leave.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="leaf" v-bind:class="team"></div>
+</template>
+
+<script>
+export default {
+  props: ['team'],
+};
+</script>
+
+<style scoped>
+.leaf {
+  float: left;
+  width: 15px;
+  height: 28px;
+  margin-right: 8px;
+  border-radius: 15px 0 15px 0;
+  background-color: #bbb;
+}
+
+.frontend {
+  background-color: rgb(26, 103, 92);
+}
+.backend {
+  background-color: rgb(40, 107, 179);
+}
+.devops {
+  background-color: rgb(145, 15, 25);
+}
+.design {
+  background-color: rgb(229, 0, 25);
+}
+.planning {
+  background-color: rgb(248, 129, 10);
+}
+.functional_testing {
+  background-color: rgb(247, 171, 0);
+}
+</style>
diff --git a/src/components/Leaves/Leaves.vue b/src/components/Leaves/Leaves.vue
new file mode 100644
index 0000000..1227409
--- /dev/null
+++ b/src/components/Leaves/Leaves.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="leaves">
+    <Leave v-for="team in teamNames" v-bind:key="teamNames.indexOf(team)" :team="team"></Leave>
+  </div>
+</template>
+
+<script>
+import Leave from './Leave.vue';
+
+export default {
+  name: 'Leaves',
+  components: {
+    Leave,
+  },
+  computed: {
+    teamNames() {
+      return this.teams.map(team => {
+        if (team === 0) return 'planning';
+        if (team === 1) return 'design';
+        if (team === 2) return 'frontend';
+        if (team === 3) return 'backend';
+        if (team === 4) return 'devops';
+        return 'functional_testing';
+      });
+    },
+  },
+  props: ['teams'],
+};
+</script>
diff --git a/src/views/ContributorsPage/Contributor.vue b/src/views/ContributorsPage/Contributor.vue
index e969096..d5fdf0e 100644
--- a/src/views/ContributorsPage/Contributor.vue
+++ b/src/views/ContributorsPage/Contributor.vue
@@ -1,18 +1,19 @@
 <template>
   <div class="contributor">
     <img v-bind:src="data.attributes.image" class="profile" />
-    <Leaves :teams="data.attributes.teamIDs" />
+    <span>{{ data.attributes.name }}</span>
+    <Leaves :teams="data.attributes.teamIds" />
+    <br />
     <p>
       <i class="fa fa-github-square"></i>
       {{ data.attributes.username }}
     </p>
-    <p>{{ data.attributes.name }}</p>
     <hr />
   </div>
 </template>
 
 <script>
-import Leaves from '../../components/Leaves.vue';
+import Leaves from '../../components/Leaves/Leaves.vue';
 
 export default {
   name: 'Contributor',

From 37375db0feb06e3c675bfc9eacb19a4466b4a0bd Mon Sep 17 00:00:00 2001
From: Andreu Cotanda Oliver <cotoli23@gmail.com>
Date: Sat, 5 Oct 2019 22:08:39 +0200
Subject: [PATCH 3/3] Update Contributor component

---
 src/views/ContributorsPage/Contributor.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/ContributorsPage/Contributor.vue b/src/views/ContributorsPage/Contributor.vue
index d5fdf0e..68235bd 100644
--- a/src/views/ContributorsPage/Contributor.vue
+++ b/src/views/ContributorsPage/Contributor.vue
@@ -5,8 +5,10 @@
     <Leaves :teams="data.attributes.teamIds" />
     <br />
     <p>
-      <i class="fa fa-github-square"></i>
-      {{ data.attributes.username }}
+      <a v-bind:href="`https://github.com/${data.attributes.username}`">
+        <i class="fa fa-github-square"></i>
+        <span>{{ data.attributes.username }}</span>
+      </a>
     </p>
     <hr />
   </div>
@@ -33,4 +35,9 @@ export default {
   height: var(--width_height);
   border-radius: 50%;
 }
+
+a {
+  color: black;
+  text-decoration: none;
+}
 </style>