first implementation

webapp/components/FilterPosts/FilterPosts.vue

@@ -14,6 +14,7 @@
       <ds-container>
         <categories-filter-menu-items :chunk="chunk" />
         <general-filter-menu-items :user="currentUser" />
+        <language-filter-menu-items :user="currentUser" />
       </ds-container>
     </template>
   </dropdown>
@@ -24,12 +25,14 @@ import Dropdown from '~/components/Dropdown'
 import { mapGetters } from 'vuex'
 import CategoriesFilterMenuItems from './CategoriesFilterMenuItems'
 import GeneralFilterMenuItems from './GeneralFilterMenuItems'
+import LanguageFilterMenuItems from './LanguageFilterMenuItems'
 
 export default {
   components: {
     Dropdown,
     CategoriesFilterMenuItems,
     GeneralFilterMenuItems,
+    LanguageFilterMenuItems,
   },
   props: {
     placement: { type: String },

webapp/components/FilterPosts/LanguageFilterMenuItems.vue

@@ -0,0 +1,102 @@
+<template>
+  <ds-space margin-top="large">
+    <ds-flex id="filter-posts-header">
+      <ds-heading tag="h4">{{ $t('filter-posts.language.header') }}</ds-heading>
+      <ds-space margin-bottom="large" />
+    </ds-flex>
+    <ds-flex :gutter="{ lg: 'small' }">
+      <ds-flex-item
+        :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
+        class="language-menu-item"
+      >
+        <ds-flex>
+          <ds-flex-item width="10%" />
+          <ds-flex-item width="100%">
+            <ds-button
+              icon="check"
+              @click.stop.prevent="resetLanguages"
+              :primary="!filteredLanguagesCodes.length"
+            />
+            <ds-flex-item>
+              <label class="language-labels">{{ $t('filter-posts.language.all') }}</label>
+            </ds-flex-item>
+            <ds-space />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
+      <ds-flex-item
+        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
+        id="languages-menu-divider"
+      />
+      <ds-flex v-for="language in locales" :key="language.code" class="languages-menu">
+        <ds-flex class="languages-menu">
+          <ds-flex-item width="100%" class="language-menu-item">
+            <ds-button
+              icon="flag"
+              :primary="filteredLanguagesCodes.includes(language.code)"
+              @click.stop.prevent="toggleLanguage(language.code)"
+            />
+            <ds-space margin-bottom="small" />
+          </ds-flex-item>
+          <ds-flex>
+            <ds-flex-item class="language-menu-item">
+              <label class="language-labels">
+                {{ language.name }}
+              </label>
+            </ds-flex-item>
+            <ds-space margin-bottom="xx-large" />
+          </ds-flex>
+        </ds-flex>
+      </ds-flex>
+    </ds-flex>
+  </ds-space>
+</template>
+<script>
+import locales from '~/locales'
+import orderBy from 'lodash/orderBy'
+import { mapGetters, mapMutations } from 'vuex'
+
+export default {
+  props: {
+    chunk: { type: Array, default: () => [] },
+  },
+  computed: {
+    ...mapGetters({
+      filteredLanguagesCodes: 'posts/filteredLanguagesCodes',
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      resetLanguages: 'posts/RESET_LANGUAGES',
+      toggleLanguage: 'posts/TOGGLE_LANGUAGE',
+    }),
+  },
+  data() {
+    return {
+      locales: orderBy(locales, 'name'),
+    }
+  },
+}
+</script>
+<style lang="scss">
+.language-menu-item {
+  text-align: center;
+}
+
+.languages-menu {
+  justify-content: center;
+}
+
+.language-labels,
+.follow-label {
+  font-size: $font-size-small;
+}
+
+@media only screen and (min-width: 960px) {
+  #languages-menu-divider {
+    border-left: 1px solid $border-color-soft;
+    margin: 9px 0px 40px 0px;
+  }
+}
+</style>

webapp/locales/de.json

@@ -86,6 +86,10 @@
     },
     "followers": {
       "label": "Benutzern, denen ich folge"
+    },
+      "language": {
+	  "header": "Sprachen",
+	  "all": "Alle"
       }
   },
   "site": {

webapp/locales/en.json

@@ -87,6 +87,10 @@
     },
     "followers": {
       "label": "Users I follow"
+    },
+      "language": {
+	  "header": "Languages",
+	  "all": "All"
       }
   },
   "site": {

webapp/store/posts.js

@@ -48,12 +48,23 @@ export const mutations = {
     delete filter.categories_some
     state.filter = filter
   },
+  RESET_LANGUAGES(state) {
+    const filter = clone(state.filter)
+    delete filter.language_in
+    state.filter = filter
+  },
   TOGGLE_CATEGORY(state, categoryId) {
     const filter = clone(state.filter)
     update(filter, 'categories_some.id_in', categoryIds => xor(categoryIds, [categoryId]))
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
+  TOGGLE_LANGUAGE(state, languageCode) {
+    const filter = clone(state.filter)
+    update(filter, 'language_in', languageCodes => xor(languageCodes, [languageCode]))
+    if (isEmpty(get(filter, 'language_in'))) delete filter.language_in
+    state.filter = filter
+  },
   TOGGLE_EMOTION(state, emotion) {
     const filter = clone(state.filter)
     update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
@@ -75,6 +86,9 @@ export const getters = {
   filteredCategoryIds(state) {
     return get(state.filter, 'categories_some.id_in') || []
   },
+  filteredLanguagesCodes(state) {
+    return get(state.filter, 'language_in') || []
+  },
   filteredByUsersFollowed(state) {
     return !!get(state.filter, 'author.followedBy_some.id')
   },