update MentorList.vue

src/account/api/views.py

@@ -27,27 +27,19 @@ 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()
 
     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):

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}` : '')
           })
         }
       }

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>

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'}