Add option filter to by types, fix #6 (#7)

Author: s4k1b

src/components/FilterType.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-group pull-left">
+    <label for="filer-org">Type: </label>
+    <select class="form-control" v-model="filterType" @change="handleTypeChange">
+      <option value=''>All</option>
+      <option value="pr">PR</option>
+      <option value="issue">Issue</option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters(['getFilterType']),
+    filterType: {
+      get() {
+        return this.getFilterType;
+      },
+      set(type) {
+        this.$store.dispatch('setFilterType', type);
+      },
+    },
+  },
+  methods: {
+    handleTypeChange(e) {
+      const type = e.currentTarget.value;
+      const query = {};
+      if (this.$route.query) {
+        Object.assign(query, this.$route.query);
+      }
+      if (type) {
+        Object.assign(query, { type });
+      } else {
+        delete query.type;
+      }
+
+      if (Object.keys(query).length) {
+        this.$router.push({ name: 'Search', query });
+      } else {
+        this.$router.push({ name: 'MyVuetable' });
+      }
+    },
+  },
+};
+</script>

src/components/MyVuetable.vue

@@ -28,6 +28,7 @@
 
           <filter-org></filter-org>
           <filter-time></filter-time>
+          <filter-type></filter-type>
           <filter-bar></filter-bar>
         </div>
     </form>
@@ -124,13 +125,15 @@ import GithubToken from './GithubToken';
 import FilterBar from './FilterBar';
 import FilterTime from './FilterTime';
 import FilterOrg from './FilterOrg';
+import FilterType from './FilterType';
 import VuetablePaginationBootstrap from './VuetablePaginationBootstrap';
 
 Vue.component('tags-input', VoerroTagsInput);
 Vue.use(VueEvents);
 Vue.component('github-token', GithubToken);
 Vue.component('filter-bar', FilterBar);
 Vue.component('filter-time', FilterTime);
+Vue.component('filter-type', FilterType);
 Vue.component('filter-org', FilterOrg);
 
 export default {
@@ -163,6 +166,11 @@ export default {
       } else {
         this.$store.dispatch('setFilterTime', '');
       }
+      if (query.type) {
+        this.$store.dispatch('setFilterType', query.type);
+      } else {
+        this.$store.dispatch('setFilterType', '');
+      }
     }
   },
   props: {

src/store/actions.js

@@ -233,6 +233,10 @@ const setFilterTime = ({ commit }, filterTime) => {
   commit('SET_FILTER_TIME', filterTime);
   commit('UPDATE_FILTER_ISSUES');
 };
+const setFilterType = ({ commit }, filterType) => {
+  commit('SET_FILTER_TYPE', filterType);
+  commit('UPDATE_FILTER_ISSUES');
+};
 const getRepoIssues = ({ state, dispatch }) => {
   const orgs = state.orgs && state.orgs.split(',');
 
@@ -319,6 +323,7 @@ export default {
   setFilterText,
   setFilterOrg,
   setFilterTime,
+  setFilterType,
   getRepoIssues,
   issuesUpdateTimer,
 };

src/store/getters.js

@@ -5,6 +5,7 @@ const getCheckboxSelectedIssues = state => state.checkboxSelectedIssues;
 const getFilterText = state => state.filterText;
 const getFilterOrg = state => state.filterOrg;
 const getFilterTime = state => state.filterTime;
+const getFilterType = state => state.filterType;
 const getGithubToken = state => state.githubToken;
 
 export default {
@@ -14,5 +15,6 @@ export default {
   getFilterText,
   getFilterOrg,
   getFilterTime,
+  getFilterType,
   getGithubToken,
 };

src/store/mutations.js

@@ -45,6 +45,9 @@ const SET_FILTER_ORG = (state, filterOrg) => {
 const SET_FILTER_TIME = (state, filterTime) => {
   state.filterTime = filterTime;
 };
+const SET_FILTER_TYPE = (state, filterType) => {
+  state.filterType = filterType;
+};
 const UPDATE_FILTER_ISSUES = (state) => {
   let filteredIssues = ''; // [...state.issues]
   if (state.filterTime) {
@@ -100,6 +103,16 @@ const UPDATE_FILTER_ISSUES = (state) => {
       issue.number.search(regexp) >= 0 ||
       issue.repoName.search(regexp) >= 0);
   }
+
+  if (state.filterType) {
+    const type = state.filterType;
+    if (type === 'pr') {
+      filteredIssues = filteredIssues.filter(issue => issue.isPR);
+    } else {
+      filteredIssues = filteredIssues.filter(issue => !issue.isPR);
+    }
+  }
+
   state.filteredIssues = filteredIssues;
 };
 
@@ -115,5 +128,6 @@ export default {
   SET_FILTER_TEXT,
   SET_FILTER_ORG,
   SET_FILTER_TIME,
+  SET_FILTER_TYPE,
   UPDATE_FILTER_ISSUES,
 };

src/store/store.js

@@ -28,6 +28,7 @@ export default new Vuex.Store({
     filterText: '',
     filterOrg: '',
     filterTime: '',
+    filterType: '',
   },
 
   getters,