Add NotificationsDropdownFilter story, refactor

- rename incorrectly named varaibles
- use filterOptions to remove unneccessary computed routes

Co-authored-by: @alina-beck

webapp/components/NotificationsDropdownFilter/NotificationsDropdownFilter.story.js

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

webapp/components/NotificationsDropdownFilter/NotificationsDropdownFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <dropdown>
+  <dropdown offset="8">
     <a
       slot="default"
       slot-scope="{ toggleMenu }"
@@ -7,7 +7,7 @@
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon style="margin-right: 2px;" name="sort" />
+      <ds-icon style="margin-right: 2px;" name="filter" />
       {{ selected }}
       <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
     </a>
@@ -15,7 +15,7 @@
       slot="popover"
       slot-scope="{ toggleMenu }"
       class="locale-menu-popover"
-      :routes="routes"
+      :routes="filterOptions"
     >
       <ds-menu-item
         slot="menuitem"
@@ -23,7 +23,7 @@
         class="locale-menu-item"
         :route="item.route"
         :parents="item.parents"
-        @click.stop.prevent="sortNotifications(item.route, toggleMenu)"
+        @click.stop.prevent="filterNotifications(item.route, toggleMenu)"
       >
         {{ item.route.label }}
       </ds-menu-item>
@@ -39,28 +39,17 @@ export default {
   },
   data() {
     return {
-      selected: this.$t('notifications.sortingLabel.all'),
+      selected: this.$t('notifications.filterLabel.all'),
-      sortingOptions: [
+      filterOptions: [
-        { label: this.$t('notifications.sortingLabel.all'), value: null },
+        { label: this.$t('notifications.filterLabel.all'), value: null },
-        { label: this.$t('notifications.sortingLabel.read'), value: true },
+        { label: this.$t('notifications.filterLabel.read'), value: true },
-        { label: this.$t('notifications.sortingLabel.unread'), value: false },
+        { label: this.$t('notifications.filterLabel.unread'), value: false },
       ],
     }
   },
-  computed: {
-    routes() {
-      let routes = this.sortingOptions.map(option => {
-        return {
-          label: option.label,
-          value: option.value,
-        }
-      })
-      return routes
-    },
-  },
   methods: {
-    sortNotifications(option, toggleMenu) {
+    filterNotifications(option, toggleMenu) {
-      this.$emit('sortNotifications', option)
+      this.$emit('filterNotifications', option.value)
       this.selected = option.label
       toggleMenu()
     },

webapp/locales/de.json

@@ -181,7 +181,7 @@
     "post": "Beitrag",
     "user": "Benutzer",
     "content": "Inhalt",
-    "sortingLabel": {
+    "filterLabel": {
       "all": "Alle",
       "read": "Lesen  ",
       "unread": "Ungelesen"

webapp/locales/en.json

@@ -182,7 +182,7 @@
     "post": "Post",
     "user": "User",
     "content": "Content",
-    "sortingLabel": {
+    "filterLabel": {
       "all": "All",
       "read": "Read",
       "unread": "Unread"

webapp/locales/pt.json

@@ -194,7 +194,7 @@
     "post": "Post",
     "user": "Usuário",
     "content": "Conteúdo",
-    "sortingLabel": {
+    "filterLabel": {
       "all": "Todos",
       "read": "Lido",
       "unread": "Não lido"

webapp/pages/notifications/index.vue

@@ -6,7 +6,7 @@
       </ds-flex-item>
       <ds-flex-item class="sorting-dropdown">
         <client-only>
-          <notifications-dropdown-filter @sortNotifications="sortNotifications" />
+          <notifications-dropdown-filter @filterNotifications="filterNotifications" />
         </client-only>
       </ds-flex-item>
     </ds-flex>
@@ -48,8 +48,8 @@ export default {
     },
   },
   methods: {
-    sortNotifications(option) {
+    filterNotifications(value) {
-      this.notificationRead = option.value
+      this.notificationRead = value
       this.$apollo.queries.notifications.refresh()
     },
     async markNotificationAsRead(notificationSourceId) {