Make dropdown filter reusable

webapp/components/DropdownFilter/DropdownFilter.story.js

@@ -1,16 +1,16 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
-import NotificationsDropdownFilter from '~/components/NotificationsDropdownFilter/NotificationsDropdownFilter'
+import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-storiesOf('NotificationsDropdownFilter', module)
+storiesOf('DropdownFilter', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('filter dropdown', () => ({
-    components: { NotificationsDropdownFilter },
+    components: { DropdownFilter },
     methods: {
       filterNotifications: action('filterNotifications'),
     },

webapp/components/DropdownFilter/DropdownFilter.vue

@@ -1,14 +1,16 @@
 <template>
   <dropdown offset="8">
     <a
+      :v-model="selected"
       slot="default"
       slot-scope="{ toggleMenu }"
-      class="locale-menu"
+      name="dropdown"
+      class="dropdown-filter"
       href="#"
       @click.prevent="toggleMenu()"
     >
       <ds-icon style="margin-right: 2px;" name="filter" />
-      {{ selected }}
+      <label for="dropdown">{{ selected }}</label>
       <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
     </a>
     <ds-menu
@@ -37,26 +39,25 @@ export default {
   components: {
     Dropdown,
   },
-  data() {
-    return {
-      selected: this.$t('notifications.filterLabel.all'),
-    }
-  },
-  computed: {
-    filterOptions() {
-      return [
-        { label: this.$t('notifications.filterLabel.all'), value: null },
-        { label: this.$t('notifications.filterLabel.read'), value: true },
-        { label: this.$t('notifications.filterLabel.unread'), value: false },
-      ]
-    },
+  props: {
+    selected: { type: String, default: '' },
+    filterOptions: { type: Array, default: () => [] },
   },
   methods: {
     filterNotifications(option, toggleMenu) {
-      this.$emit('filterNotifications', option.value)
-      this.selected = option.label
+      this.$emit('filterNotifications', option)
       toggleMenu()
     },
   },
 }
 </script>
+<style lang="scss">
+.dropdown-filter {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: $space-xx-small;
+  color: $text-color-soft;
+}
+</style>

webapp/pages/notifications/index.vue

@@ -4,9 +4,13 @@
       <ds-flex-item :width="{ lg: '85%' }">
         <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
       </ds-flex-item>
-      <ds-flex-item width="100px">
+      <ds-flex-item width="110px">
         <client-only>
-          <notifications-dropdown-filter @filterNotifications="filterNotifications" />
+          <dropdown-filter
+            @filterNotifications="filterNotifications"
+            :filterOptions="filterOptions"
+            :selected="selected"
+          />
         </client-only>
       </ds-flex-item>
     </ds-flex>
@@ -21,13 +25,13 @@
 
 <script>
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
-import NotificationsDropdownFilter from '~/components/NotificationsDropdownFilter/NotificationsDropdownFilter'
+import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import Paginate from '~/components/Paginate/Paginate'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 
 export default {
   components: {
-    NotificationsDropdownFilter,
+    DropdownFilter,
     NotificationsTable,
     Paginate,
   },
@@ -40,16 +44,25 @@ export default {
       pageSize,
       first: pageSize,
       hasNext: false,
+      selected: this.$t('notifications.filterLabel.all'),
     }
   },
   computed: {
     hasPrevious() {
       return this.offset > 0
     },
+    filterOptions() {
+      return [
+        { label: this.$t('notifications.filterLabel.all'), value: null },
+        { label: this.$t('notifications.filterLabel.read'), value: true },
+        { label: this.$t('notifications.filterLabel.unread'), value: false },
+      ]
+    },
   },
   methods: {
-    filterNotifications(value) {
-      this.notificationRead = value
+    filterNotifications(option) {
+      this.notificationRead = option.value
+      this.selected = option.label
       this.$apollo.queries.notifications.refresh()
     },
     async markNotificationAsRead(notificationSourceId) {