From bb93052b88da55c9c551cacd2934a91b38319e28 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 3 Jul 2019 19:46:49 -0300
Subject: [PATCH] Add FilterPosts dropdown with category names

---
 webapp/components/FilterPosts/FilterPosts.vue | 86 +++++++++++++++++++
 webapp/layouts/default.vue                    | 21 ++++-
 webapp/store/categories.js                    | 42 +++++++++
 3 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 webapp/components/FilterPosts/FilterPosts.vue
 create mode 100644 webapp/store/categories.js

diff --git a/webapp/components/FilterPosts/FilterPosts.vue b/webapp/components/FilterPosts/FilterPosts.vue
new file mode 100644
index 000000000..7fff1d477
--- /dev/null
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@@ -0,0 +1,86 @@
+<template>
+  <dropdown class="avatar-menu">
+    <dropdown ref="menu" :placement="placement" :offset="offset">
+      <a
+        slot="default"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <ds-icon style="margin: 5px 0px 0px 10px;" name="filter" size="large" />
+        <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      </a>
+      <ds-menu
+        slot="popover"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu-popover"
+        :routes="routes"
+      >
+        <ds-menu-item
+          slot="menuitem"
+          slot-scope="item"
+          class="locale-menu-item"
+          :route="item.route"
+          :parents="item.parents"
+          @click.stop.prevent="filterPostsByCategory(item.route.name, toggleMenu)"
+        >
+          <ds-icon :name="item.route.icon" />
+          {{ item.route.name }}
+        </ds-menu-item>
+      </ds-menu>
+    </dropdown>
+  </dropdown>
+</template>
+<script>
+import gql from 'graphql-tag'
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-start' },
+    offset: { type: [String, Number], default: '16' },
+    categories: { type: Array, default: () => [] },
+  },
+  computed: {
+    routes() {
+      let routes = this.categories.map(category => {
+        return {
+          name: category.name,
+          id: category.id,
+          icon: category.icon,
+        }
+      })
+      return routes
+    },
+  },
+  methods: {
+    filterPostsByCategory(name) {
+      const filterPostsByCategoryMutation = gql`
+        query($name: String) {
+          Post(filter: { categories_some: { name: $name } }) {
+            title
+            id
+            categories {
+              name
+            }
+          }
+        }
+      `
+      setTimeout(() => {
+        this.$apollo
+          .mutate({
+            mutation: filterPostsByCategoryMutation,
+            variables: { name },
+          })
+          .then(res => {
+            // update the Post query
+          })
+      }, 500)
+    },
+  },
+}
+</script>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index e3fc1cccd..1c1ace9de 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -4,12 +4,12 @@
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex>
-            <ds-flex-item :width="{ base: '49px', md: '150px' }">
+            <ds-flex-item :width="{ base: '49px', md: '150px', lg: '15%' }">
               <a v-router-link style="display: inline-flex" href="/">
                 <ds-logo />
               </a>
             </ds-flex-item>
-            <ds-flex-item>
+            <ds-flex-item :width="{ lg: '50%' }">
               <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
                 <search-input
                   id="nav-search"
@@ -22,6 +22,16 @@
                 />
               </div>
             </ds-flex-item>
+            <ds-flex-item :width="{ lg: '10%' }">
+              <no-ssr>
+                <filter-posts
+                  class="topbar-locale-switch"
+                  placement="bottom"
+                  offset="23"
+                  :categories="categories"
+                />
+              </no-ssr>
+            </ds-flex-item>
             <ds-flex-item width="200px" style="background-color:white">
               <div class="main-navigation-right" style="float:right">
                 <no-ssr>
@@ -109,6 +119,7 @@ import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
 import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
+import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
 
 export default {
   components: {
@@ -118,6 +129,7 @@ export default {
     Modal,
     NotificationMenu,
     HcAvatar,
+    FilterPosts,
   },
   mixins: [seo],
   data() {
@@ -133,6 +145,7 @@ export default {
       isAdmin: 'auth/isAdmin',
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending',
+      categories: 'categories/categories',
     }),
     userName() {
       const { name } = this.user || {}
@@ -171,10 +184,14 @@ export default {
       return routes
     },
   },
+  mounted() {
+    this.fetchCategories()
+  },
   methods: {
     ...mapActions({
       quickSearchClear: 'search/quickClear',
       quickSearch: 'search/quickSearch',
+      fetchCategories: 'categories/fetchCategories',
     }),
     goToPost(item) {
       this.$nextTick(() => {
diff --git a/webapp/store/categories.js b/webapp/store/categories.js
new file mode 100644
index 000000000..5fa67ed66
--- /dev/null
+++ b/webapp/store/categories.js
@@ -0,0 +1,42 @@
+import gql from 'graphql-tag'
+
+export const state = () => {
+  return {
+    categories: null,
+    pending: false,
+  }
+}
+
+export const mutations = {
+  SET_CATEGORIES(state, categories) {
+    state.categories = categories || null
+  },
+  SET_PENDING(state, pending) {
+    state.pending = pending
+  },
+}
+
+export const getters = {
+  categories(state) {
+    return state.categories || []
+  },
+}
+
+export const actions = {
+  async fetchCategories({ commit }) {
+    const client = this.app.apolloProvider.defaultClient
+    const {
+      data: { Category },
+    } = await client.query({
+      query: gql(`{
+          Category {
+            id
+            name
+            icon
+          }
+      }`),
+    })
+    commit('SET_CATEGORIES', Category)
+    return Category
+  },
+}