add search

Abhinav232004 · Oct 19, 2018 · 4ee9e85 · 4ee9e85
1 parent 6c52e3d
commit 4ee9e85
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 29 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -42,6 +42,8 @@
         prepend-inner-icon="search"
         label="Search"
         class="hidden-sm-and-down"
+        @input="search"
+        :value="filterString"
       ></v-text-field>
       <v-spacer></v-spacer>
       <v-menu  v-if="isLoggedIn" offset-y open-on-hover>
@@ -95,19 +97,10 @@
       }
     },
     computed: {
-      ...mapGetters('app', [
-        'items'
-      ]),
-      ...mapGetters('auth', [
-        'isLoggedIn',
-        'thumbnailUrl'
-      ]),
-      ...mapGetters('messages', [
-        'message',
-        'color',
-        'timeout',
-        'mode'
-      ]),
+      ...mapGetters('app', ['items']),
+      ...mapGetters('projectList', ['filterString']),
+      ...mapGetters('auth', ['isLoggedIn', 'thumbnailUrl']),
+      ...mapGetters('messages', ['message', 'color', 'timeout', 'mode']),
       snackbar: {
         get () {
           return this.$store.getters['messages/snackbar']
@@ -124,7 +117,8 @@
       ...mapActions('auth', [
         'login',
         'logout'
-      ])
+      ]),
+      ...mapActions('projectList', ['search'])
     },
     mounted () {
       this.$store.dispatch('auth/loadThumbnail')

diff --git a/ui/src/components/ProjectsList.vue b/ui/src/components/ProjectsList.vue
@@ -1,18 +1,37 @@
 <template>
-  <v-container fill-height>
-    <v-layout v-if="projectList.length > 0">
-      <v-flex>
-        <v-card flat>
-          <v-card-text>
-            <Project v-for="(project, i) in projectList" :key="i" :project="project" :mentor="false"/>
-          </v-card-text>
+  <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">Projects</h2>
+              <v-layout v-if="filteredProjectList.length > 0">
+                <v-flex>
+                  <v-card flat>
+                    <v-card-text v-for="(project, i) in filteredProjectList" :key="i">
+                      <Project :project="project" :mentor="false"/>
+                      <v-divider class="mt-3" v-if="i !== filteredProjectList.length - 1"></v-divider>
+                    </v-card-text>
+                  </v-card>
+                </v-flex>
+              </v-layout>
+              <v-layout v-else align-center justify-center row fill-height>
+                <p class="headline">Projects will start appearing here once they are floated. Check back again!</p>
+              </v-layout>
+            </v-container>
+          </v-card>
         </v-card>
       </v-flex>
     </v-layout>
-    <v-layout v-else align-center justify-center row fill-height>
-      <p class="headline">Projects will start appearing here once they are floated. Check back again!</p>
-    </v-layout>
-  </v-container>
+  </v-card>
 </template>
 
 <script>
@@ -23,7 +42,7 @@
     name: 'ProjectsList',
     components: {Project},
     computed: {
-      ...mapGetters('projectList', ['projectList'])
+      ...mapGetters('projectList', ['filteredProjectList'])
     },
     methods: {
       ...mapActions('projectList', ['fetchProjectList'])
@@ -33,3 +52,9 @@
     }
   }
 </script>
+
+<style scoped>
+  .card--flex-toolbar {
+    margin-top: -64px;
+  }
+</style>
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
@@ -3,7 +3,7 @@ const state = {
     {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-code', text: 'Projects', path: '/projects', search: true},
     {icon: 'fa-tachometer', text: 'Dashboard', path: '/dashboard', requiresAuth: true},
     {icon: 'help', text: 'Help', path: '/help'}
   ]

diff --git a/ui/src/store/modules/projectList.js b/ui/src/store/modules/projectList.js
@@ -1,5 +1,14 @@
 import {httpClient} from '../../plugins/httpClient'
 
+function arrayUnique (a) {
+  for (let i = 0; i < a.length; ++i) {
+    for (let j = i + 1; j < a.length; ++j) {
+      if (a[i] === a[j]) a.splice(j--, 1)
+    }
+  }
+  return a
+}
+
 const state = {
   projectList: [{
     id: '',
@@ -10,13 +19,33 @@ const state = {
     technologies: [],
     students: [],
     mentors: []
-  }]
+  }],
+  filterString: ''
 }
 
 const getters = {
   projectList: (state, getters) => state.projectList[0] ? state.projectList : [],
   mentorProjectList: (state, getters, rootState, rootGetters) => state.projectList
-    .filter(project => project.mentors.indexOf(rootGetters['mentorProfile/mentorProfile'].id) >= 0)
+    .filter(project => project.mentors.indexOf(rootGetters['mentorProfile/mentorProfile'].id) >= 0),
+  filteredProjectList: (state, getters) => {
+    if (state.filterString.length > 2 && state.filterString.replace(/\s/g, '').length) {
+      return state.filterString
+        .split(' ')
+        .filter(value => !!value)
+        .map(arg => RegExp(arg, 'i'))
+        .reduce((previousValue, arg) => arrayUnique(previousValue.concat(
+          state.projectList
+            .filter(project =>
+              project.name.search(arg) !== -1 ||
+              project.short_description.search(arg) !== -1 ||
+              project.description.search(arg) !== -1 ||
+              project.technologies.some(technology => technology.search(arg) !== -1)
+            )
+          )
+        ), [])
+    } else return getters.projectList
+  },
+  filterString: state => state.filterString
 }
 
 const mutations = {
@@ -34,6 +63,9 @@ const mutations = {
       ...state.projectList.filter(project => project.id !== updatedProject.id),
       updatedProject
     ].sort((a, b) => a.id - b.id)
+  },
+  'SET_FILTER_STRING' (state, filterString) {
+    state.filterString = filterString
   }
 }
 
@@ -51,6 +83,9 @@ const actions = {
   },
   update ({commit}, project) {
     commit('UPDATE_PROJECT', project)
+  },
+  search ({commit}, filterString) {
+    commit('SET_FILTER_STRING', filterString)
   }
 }