From b109fd11339a6b547c757797a3f3dc763294b13e Mon Sep 17 00:00:00 2001
From: ajatprabha <ajat.prabha.leo@gmail.com>
Date: Sun, 14 Oct 2018 20:32:12 +0530
Subject: [PATCH] update MentorList.vue

---
 src/account/api/views.py            |  20 ++----
 ui/src/components/GAvatar.vue       |   4 +-
 ui/src/components/MentorDetails.vue |  51 --------------
 ui/src/components/MentorList.vue    | 102 ++++++++++++++++++++++++++++
 ui/src/router/index.js              |   4 +-
 5 files changed, 112 insertions(+), 69 deletions(-)
 delete mode 100644 ui/src/components/MentorDetails.vue
 create mode 100644 ui/src/components/MentorList.vue

diff --git a/src/account/api/views.py b/src/account/api/views.py
index df4e4b6..2f4bdcc 100644
--- a/src/account/api/views.py
+++ b/src/account/api/views.py
@@ -27,12 +27,6 @@ def get_object(self):
         return get_object_or_404(MentorProfile,
                                  user=self.request.user) if self.action == 'current' else super().get_object()
 
-    @action(methods=['get'], detail=False)
-    def current(self, request, *args, **kwargs):
-        return self.retrieve(request, args, kwargs)
-
-    # For listing all mentors that are verified
-
     def get_queryset(self, queryset=None):
         return self.queryset.filter(is_approved=True) if self.action == 'all' else super().get_queryset()
 
@@ -40,14 +34,12 @@ def get_serializer_class(self):
         return MentorsListSerializer if self.action == 'all' else self.serializer_class
 
     def get_permissions(self):
-        """
-        Instantiates and returns the list of permissions that this view requires.
-        """
-        if self.action == 'all':
-            permission_classes = [AllowAny]
-        else:
-            permission_classes = [IsAuthenticated]
-        return [permission() for permission in permission_classes]
+        self.permission_classes = [AllowAny] if self.action == 'all' else self.permission_classes
+        return super().get_permissions()
+
+    @action(methods=['get'], detail=False)
+    def current(self, request, *args, **kwargs):
+        return self.retrieve(request, args, kwargs)
 
     @action(methods=['get'], detail=False)
     def all(self, request, *args, **kwargs):
diff --git a/ui/src/components/GAvatar.vue b/ui/src/components/GAvatar.vue
index e30f0da..56074cd 100644
--- a/ui/src/components/GAvatar.vue
+++ b/ui/src/components/GAvatar.vue
@@ -8,13 +8,13 @@
 
   export default {
     name: 'GAvatar',
-    props: ['email'],
+    props: ['email', 'size'],
     data: () => ({link: avatarPlaceholder}),
     methods: {
       setLink () {
         if (this.email) {
           axios.get(`https://picasaweb.google.com/data/entry/api/user/${this.email}?alt=json`).then(response => {
-            this.link = response.data.entry.gphoto$thumbnail.$t
+            this.link = response.data.entry.gphoto$thumbnail.$t + (this.size ? `?sz=${this.size}` : '')
           })
         }
       }
diff --git a/ui/src/components/MentorDetails.vue b/ui/src/components/MentorDetails.vue
deleted file mode 100644
index bfcc6b8..0000000
--- a/ui/src/components/MentorDetails.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
- <div>
-  <v-layout justify-center><h1>Mentors</h1></v-layout>
-  <v-layout justify-center row wrap>
-     <v-flex xs12 md6 sm6  v-for="(mentor,i) in mentorList" :key="i" pt-2 pl-4 pr-4>
-     <v-card flat>
-           <v-layout justify-start row wrap>
-             <v-flex xs12 class="headline"><v-layout justify-center>{{ mentor.first_name }}  {{ mentor.last_name }}</v-layout></v-flex> 
-           </v-layout>
-           <v-layout justify-start row wrap>
-             <v-flex xs2 sm2 md2 pl-2><v-icon>fa-envelope</v-icon></v-flex><v-flex xs10 sm10 md10>
-{{ mentor.email }}</v-flex>
-           </v-layout>
-           <v-layout justify-start row wrap>
-             <v-flex xs2 sm2 md2 pl-2><v-icon>fa-phone</v-icon></v-flex><v-flex xs10 sm10 md10 class="sub-heading">{{ mentor.phone }}</v-flex>
-           </v-layout>
-           <v-layout justify-start row wrap>
-             <v-flex xs2 sm2 md2 pl-2><v-icon medium>fa-info-circle</v-icon></v-flex><v-flex xs10 sm10 md10 class="sub-heading">{{ mentor.about_me }}</v-flex>
-           </v-layout>
-      </v-card>
-     </v-flex>
-    </v-layout>
- </div>
-</template>
-
-<script>
-export default {
-  name: 'MentorDetails',
-  data () {
-    return {
-      mentorList: [{
-        first_name: '',
-        last_name: '',
-        email: '',
-        phone: '',
-        about_me: ''
-      }]
-    }
-  },
-  methods: {
-    fetchMentorList () {
-      this.$httpClient.get('/api/account/mentor-profile/all/').then(response => {
-        this.mentorList = response.data
-      })
-    }
-  },
-  mounted () {
-    this.fetchMentorList()
-  }
-}
-</script>
diff --git a/ui/src/components/MentorList.vue b/ui/src/components/MentorList.vue
new file mode 100644
index 0000000..9dda897
--- /dev/null
+++ b/ui/src/components/MentorList.vue
@@ -0,0 +1,102 @@
+<template>
+  <v-card class="fill-height" flat>
+    <v-toolbar
+      color="primary"
+      dark
+      extended
+      flat
+    >
+    </v-toolbar>
+    <v-layout row justify-center pb-2>
+      <v-flex xs11 sm10 md8>
+        <v-card class="card--flex-toolbar">
+          <v-card>
+            <v-container grid-list-lg fluid>
+              <h2 class="headline primary--text mb-3">Mentors</h2>
+              <p class="font-italic">You can also pitch your own project idea to these mentors. Feel free to contact any
+                mentor via email/phone and talk to them about the project idea, ask the mentor to float the project if
+                she/he agrees to mentor you with your proposed project. A mentor has to create the project for it to be
+                considered a valid project.</p>
+              <v-layout row wrap align-center justify-center>
+                <v-flex
+                  v-for="(mentor, i) in mentorList"
+                  :key="i"
+                  sm12 md6 lg5
+                >
+                  <v-card class="elevation-5">
+                    <v-card-text>
+                      <v-layout row column align-center justify-center>
+                        <v-avatar size="128">
+                          <GAvatar :email="mentor.email" :size="128"/>
+                        </v-avatar>
+                        <div class="headline">{{mentor.first_name + ' ' + mentor.last_name}}</div>
+                        <v-list>
+                          <v-list-tile>
+                            <v-list-tile-action>
+                              <v-icon>fa-envelope</v-icon>
+                            </v-list-tile-action>
+                            <v-list-tile-content><a :href="`mailto:${mentor.email}`">{{ mentor.email }}</a>
+                            </v-list-tile-content>
+                          </v-list-tile>
+                          <v-list-tile>
+                            <v-list-tile-action>
+                              <v-icon>fa-phone</v-icon>
+                            </v-list-tile-action>
+                            <v-list-tile-content><a :href="`mailto:${mentor.phone}`">{{ mentor.phone }}</a>
+                            </v-list-tile-content>
+                          </v-list-tile>
+                        </v-list>
+                        <v-flex><p>{{mentor.about_me}}</p></v-flex>
+                      </v-layout>
+                    </v-card-text>
+                  </v-card>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-card>
+</template>
+
+<script>
+  import GAvatar from './GAvatar'
+
+  export default {
+    name: 'MentorList',
+    components: {GAvatar},
+    data () {
+      return {
+        mentorList: []
+        /* {
+          first_name: '',
+          last_name: '',
+          email: '',
+          phone: '',
+          about_me: ''
+        } */
+      }
+    },
+    methods: {
+      fetchMentorList () {
+        this.$httpClient.get('/api/account/mentor-profile/all/').then(response => {
+          this.mentorList = response.data
+        })
+      }
+    },
+    mounted () {
+      this.fetchMentorList()
+    }
+  }
+</script>
+
+<style scoped>
+  .card--flex-toolbar {
+    margin-top: -64px;
+  }
+
+  .v-list__tile__content > a {
+    text-decoration: none;
+  }
+</style>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 8165953..ed7582a 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -8,7 +8,7 @@ import HowItWorks from '../components/HowItWorks'
 import NotFound from '../components/NotFound'
 import Help from '../components/Help'
 import Dashboard from '../components/Dashboard'
-import MentorDetails from '../components/MentorDetails'
+import MentorList from '../components/MentorList'
 
 Vue.use(Router)
 
@@ -20,7 +20,7 @@ const router = new Router({
     {path: '/projects', name: 'Projects', component: ProjectsList},
     {path: '/how-it-works', name: 'HowItWorks', component: HowItWorks},
     {path: '/help', name: 'Help', component: Help},
-    {path: '/mentors', name: 'MentorDetails', component: MentorDetails},
+    {path: '/mentors', name: 'MentorList', component: MentorList},
     {path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: {requiresAuth: true}},
     {path: '/not-found', component: NotFound},
     {path: '*', redirect: '/not-found'}