Add filter for content blocks

client/src/components/Chapter.vue

@@ -4,7 +4,8 @@
 
     <add-content-block-button :parent="chapter.id"></add-content-block-button>
 
-    <content-block v-if="visibleFor(contentBlock, 'VXNlckdyb3VwTm9kZTo2')" :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
+    <content-block :contentBlock="contentBlock"
+                   :key="contentBlock.id" v-for="contentBlock in filteredContentBlocks">
     </content-block>
   </div>
 </template>
@@ -21,6 +22,17 @@
       AddContentBlockButton
     },
 
+    computed: {
+      filteredContentBlocks() {
+        return this.chapter && this.chapter.contentBlocks
+          ? this.chapter.contentBlocks.filter(contentBlock => this.visibleFor(contentBlock, this.currentFilter))
+          : [];
+      },
+      currentFilter() {
+        return this.$store.state.filterForGroup;
+      }
+    },
+
     methods: {
       visibleFor(contentBlock, userGroup) {
         return !contentBlock.hiddenFor.map(entry => entry.id).includes(userGroup);

client/src/components/FilterBar.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="filter-bar">
 
-    <checkbox label="Alles" :checked="true"></checkbox>
-    <checkbox v-for="group in userGroups" :key="group.id" :label="group.name"></checkbox>
+    <radiobutton label="Alles" :checked="!currentFilter" v-on:input="updateFilter(false)"></radiobutton>
+    <radiobutton
+      v-for="group in userGroups"
+      :key="group.id"
+      :label="group.name"
+      :item="group"
+      :checked="group.id === currentFilter"
+      v-on:input="updateFilter(group.id)"
+    ></radiobutton>
   </div>
 </template>
 
 <script>
   import {userGroupsQuery} from '@/helpers/user-groups'
-
-  import Checkbox from '@/components/Checkbox.vue';
+  import {mapActions} from 'vuex';
+  import Radiobutton from '@/components/Radiobutton';
 
   export default {
     components: {
-      Checkbox
+      Radiobutton
     },
 
     apollo: {
@@ -24,6 +31,18 @@
       return {
         userGroups: []
       }
+    },
+
+    computed: {
+      currentFilter() {
+        return this.$store.state.filterForGroup;
+      }
+    },
+
+    methods: {
+      ...mapActions({
+        updateFilter: 'setFilterForGroup'
+      })
     }
   }
 </script>

client/src/store/index.js

@@ -13,7 +13,8 @@ export default new Vuex.Store({
     contentBlockPosition: {},
     scrollPosition: 0,
     moduleSlug: 'mein-neues-umfeld',
-    updateContentBlocks: false
+    updateContentBlocks: false,
+    filterForGroup: false
   },
 
   getters: {},
@@ -48,6 +49,9 @@ export default new Vuex.Store({
     },
     resetUpdateContentBlocksFlag({commit}) {
       commit('updateContentBlocks', false);
+    },
+    setFilterForGroup({commit}, payload) {
+      commit('setFilterForGroup', payload);
     }
   },
 
@@ -72,6 +76,9 @@ export default new Vuex.Store({
     },
     setContentBlockPosition(state, payload) {
       state.contentBlockPosition = payload;
+    },
+    setFilterForGroup(state, payload) {
+      state.filterForGroup = payload;
     }
   }
 })