Provide translations for filter menu

webapp/components/FilterMenu/FilterMenu.vue

@@ -1,21 +1,38 @@
 <template>
   <ds-card>
-    <ds-form>
+    <ds-radio
-    <ds-radio buttons v-model="filter" label="Filter" :options="['friends', 'friends-of-a-friend', 'all']" />
+      v-model="filter"
-    </ds-form>
+      buttons
+      label="Filter"
+      label-prop="text"
+      @input="handleInput"
+      :options="options"
+    />
   </ds-card>
 </template>
 
 <script>
-import Dropdown from '~/components/Dropdown'
 export default {
-  components: {
-    Dropdown
-  },
   data() {
+    // We have to fix styleguide here. It uses .includes wich will always be
+    // false for arrays of objects.
     return {
-      filter: 'all'
+      filter: { value: 'all', text: this.$t('filter-menu.options.all') },
     }
-  }
+  },
+  computed: {
+    options() {
+      return [
+        { value: 'friends', text: this.$t('filter-menu.options.friends') },
+        { value: 'friends-of-a-friend', text: this.$t('filter-menu.options.friends-of-a-friend') },
+        { value: 'all', text: this.$t('filter-menu.options.all') },
+      ]
+    },
+  },
+  methods: {
+    handleInput(e) {
+      // console.log('handleInput', e)
+    },
+  },
 }
 </script>

webapp/locales/de.json

@@ -1,4 +1,11 @@
 {
+  "filter-menu": {
+    "options": {
+      "friends": "Nur Freunde",
+      "friends-of-a-friend": "Freunde von Freunden",
+      "all": "Alle"
+    }
+  },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
     "login": "Einloggen",

webapp/locales/en.json

@@ -1,4 +1,11 @@
 {
+  "filter-menu": {
+    "options": {
+      "friends": "Only friends",
+      "friends-of-a-friend": "Friends of a friend",
+      "all": "All"
+    }
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",