Add filter for my activity

client/src/components/profile/ActivityFilter.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="activity-filter">
+    <a class="activity-filter__link"
+       :class="{'activity-filter__link--active': filter === entry.tag}"
+       @click="$emit('change-filter', entry.tag)"
+       v-for="(entry, i) in filters"
+       :key="i"
+    >{{entry.label}}</a>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['filter'],
+
+    data() {
+      return {
+        filters: [
+          {tag: '', label: 'Alle'},
+          {tag: 'assignments', label: 'Ergebnisse'},
+          {tag: 'surveys', label: 'Übungen'},
+          {tag: 'bookmarks', label: 'Lesezeichen'},
+          {tag: 'notes', label: 'Notizen'},
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .activity-filter {
+    display: flex;
+    justify-content: space-between;
+
+    &__link {
+      @include small-text;
+      cursor: pointer;
+      padding: $large-spacing 0;
+      color: $color-silver-dark;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>

client/src/components/profile/ModuleActivity.vue

@@ -6,11 +6,13 @@
       <activity-entry title="Aufgabe & Ergebnis" class="module-activity__entry"
                       v-for="submission in module.mySubmissions"
                       :key="submission.id"
+                      v-if="applyFilter('assignments')"
                       @link="goTo(submission.assignment.id)">
         {{submission.text}}
       </activity-entry>
       <activity-entry title="Übung" class="module-activity__entry"
                       v-for="answer in module.myAnswers"
+                      v-if="applyFilter('surveys')"
                       :key="answer.id"
                       @link="goTo(answer.survey.id)">
         {{answer.survey.title}}
@@ -18,16 +20,19 @@
       <activity-entry title="Lesezeichen" class="module-activity__entry"
                       v-for="bookmark in module.myContentBookmarks"
                       :key="bookmark.id"
+                      v-if="applyFilter('bookmarks')"
                       @link="goTo(bookmark.uuid)">
         <content-bookmark :bookmark="bookmark"></content-bookmark>
       </activity-entry>
       <activity-entry title="Lesezeichen" class="module-activity__entry"
                       v-for="bookmark in module.myChapterBookmarks"
+                      v-if="applyFilter('bookmarks')"
                       :key="bookmark.id"
                       @link="goTo(bookmark.chapter.id)">
         {{bookmark.chapter.description}}
       </activity-entry>
       <activity-entry title="Notiz" class="module-activity__entry"
+                      v-if="applyFilter('notes')"
                       v-for="note in notes" :key="note.id"
                       @link="goTo(note.id)">
         {{note.text}}
@@ -45,7 +50,7 @@
   import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
   export default {
-    props: ['module'],
+    props: ['module', 'filter'],
     components: {
       ContentBookmark,
       ActivityEntry
@@ -77,6 +82,9 @@
           }
         });
         this.$router.push(url);
+      },
+      applyFilter(filterCriteria) {
+        return !this.filter || this.filter === filterCriteria;
       }
     }
   }

client/src/pages/activity.vue

@@ -1,21 +1,30 @@
 <template>
   <div class="activity">
     <h1 class="activity__header">Meine Aktivitäten</h1>
+    <activity-filter
+      :filter="filter"
+      @change-filter="filter = $event"
+    ></activity-filter>
     <div class="modules">
-      <module-activity v-for="(module, id) in modules" :module="module" :key="id" class="activity"></module-activity>
-
+      <module-activity
+        v-for="(module, id) in modules"
+        :filter="filter"
+        :module="module"
+        :key="id"
+        class="activity"></module-activity>
     </div>
   </div>
 </template>
 
 <script>
-
   import ModuleActivity from '@/components/profile/ModuleActivity';
+  import ActivityFilter from '@/components/profile/ActivityFilter';
   import MY_ACTIVITY_QUERY from '@/graphql/gql/myActivity.gql'
 
   export default {
     components: {
-      ModuleActivity
+      ModuleActivity,
+      ActivityFilter
     },
 
     apollo: {
@@ -30,7 +39,8 @@
 
     data() {
       return {
-        modules: []
+        modules: [],
+        filter: ''
       }
     }
   }