added page for all mentors

Abhinav232004 · Oct 4, 2018 · d0041eb · d0041eb
1 parent fcc1cfa
commit d0041eb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/ui/src/components/MentorDetails.vue b/ui/src/components/MentorDetails.vue
@@ -0,0 +1,51 @@
+<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/router/index.js b/ui/src/router/index.js
@@ -8,6 +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'
 
 Vue.use(Router)
 
@@ -19,9 +20,10 @@ 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: '/dashboard', name: 'Dashboard', component: Dashboard, meta: {requiresAuth: true}},
-    { path: '/not-found', component: NotFound },
-    { path: '*', redirect: '/not-found' }
+    {path: '/not-found', component: NotFound},
+    {path: '*', redirect: '/not-found'}
   ]
 })
 

diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
@@ -2,6 +2,7 @@ const state = {
   items: [
     {icon: 'fa-home', text: 'Home', path: '/'},
     {icon: 'fa-calendar', text: 'How It Works', path: '/how-it-works'},
+    {icon: 'supervisor_account', text: 'Mentors', path: '/mentors'},
     {icon: 'fa-code', text: 'Projects', path: '/projects'},
     {icon: 'fa-tachometer', text: 'Dashboard', path: '/dashboard', requiresAuth: true},
     {icon: 'help', text: 'Help', path: '/help'}