From 66842ac1d85c9ec196a963819732472d0c31516e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 5 Feb 2020 11:33:32 +0100
Subject: [PATCH] Add instruments to the my activity page

---
 .../components/profile/ContentBookmark.vue    |   5 +-
 .../components/profile/InstrumentActivity.vue | 112 ++++++++++++++++++
 client/src/graphql/gql/myActivity.gql         |  24 ++++
 client/src/pages/activity.vue                 |  17 +++
 server/basicknowledge/queries.py              |   1 -
 server/users/schema.py                        |   6 +
 6 files changed, 163 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/profile/InstrumentActivity.vue

diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index fcc6a828..978670c2 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -12,12 +12,15 @@
 
 <script>
   import LinkBlock from '@/components/content-blocks/LinkBlock';
+
   export default {
     components: {LinkBlock},
     props: ['bookmark'],
     computed: {
       content() {
-        return this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
+        return this.bookmark.contentBlock
+          ? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
+          : this.bookmark.instrument.contents.find(e => e.id === this.bookmark.uuid)
       },
       text() {
         return this.content.value.text ? this.content.value.text : 'TO BE DEFINED'
diff --git a/client/src/components/profile/InstrumentActivity.vue b/client/src/components/profile/InstrumentActivity.vue
new file mode 100644
index 00000000..22556484
--- /dev/null
+++ b/client/src/components/profile/InstrumentActivity.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="instrument-activity" v-if="!empty">
+    <h3 class="instrument-activity__module-name">{{type}}</h3>
+    <h2 class="instrument-activity__title">{{instrument.title}}</h2>
+    <div class="instrument-activity__tasks activity-tasks">
+      <activity-entry title="Lesezeichen" class="instrument-activity__entry"
+                      v-for="bookmark in instrument.bookmarks"
+                      :key="bookmark.id"
+                      v-if="applyFilter('bookmarks')"
+                      @link="goTo(bookmark.uuid)">
+        <content-bookmark :bookmark="bookmark"></content-bookmark>
+      </activity-entry>
+      <activity-entry title="Notiz" class="instrument-activity__entry"
+                      v-if="applyFilter('notes')"
+                      v-for="note in notes"
+                      :key="note.id"
+                      @link="goTo(note.id)">
+        {{note.text}}
+      </activity-entry>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import {mapActions} from 'vuex'
+  import ContentBookmark from '@/components/profile/ContentBookmark';
+  import ActivityEntry from '@/components/profile/ActivityEntry';
+
+  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
+
+  export default {
+    props: ['instrument', 'filter'],
+    components: {
+      ContentBookmark,
+      ActivityEntry
+    },
+    computed: {
+      empty() {
+        return false
+      },
+      notes() {
+        return this.instrument.bookmarks
+          .filter(b => b.note)
+          .map(b => b.note);
+      },
+      type() {
+        if (this.instrument.type === 'LANGUAGE_COMMUNICATION') {
+          return 'Sprache & Kommunikation';
+        } else {
+          return 'Gesellschaft';
+        }
+      }
+    },
+    methods: {
+      ...mapActions(['scrollToAssignmentId']),
+      goTo(scrollTo) {
+        const url = `/instrument/${this.instrument.slug}/`;
+        this.$apollo.mutate({
+          mutation: SCROLL_TO_MUTATION,
+          variables: {
+            scrollTo
+          }
+        });
+        this.$router.push(url);
+      },
+      applyFilter(filterCriteria) {
+        return !this.filter || this.filter === filterCriteria;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .instrument-activity {
+    max-width: 640px;
+
+    @include desktop {
+      max-width: 1020px;
+    }
+
+    @media (max-width: 639px) {
+      max-width: 400px;
+    }
+
+    @media (max-width: 401px) {
+      max-width: 320px;
+    }
+
+    margin-bottom: 2*$large-spacing;
+
+    &__module-name {
+      @include regular-text;
+      margin-bottom: $small-spacing;
+    }
+
+    &__title {
+      @include heading-2;
+    }
+
+    &__entry {
+      &:first-of-type {
+
+        border-top: 1px solid $color-silver;
+      }
+    }
+  }
+
+</style>
diff --git a/client/src/graphql/gql/myActivity.gql b/client/src/graphql/gql/myActivity.gql
index bfaa796b..46201edc 100644
--- a/client/src/graphql/gql/myActivity.gql
+++ b/client/src/graphql/gql/myActivity.gql
@@ -1,4 +1,28 @@
 query MyActivityQuery {
+  myInstrumentActivity {
+	  edges {
+	    node {
+	      id
+        title
+        contents
+        type
+        slug
+	      bookmarks {
+	        id
+          uuid
+          note {
+            id
+            text
+          }
+          instrument {
+            id
+            type
+            contents
+          }
+	      }
+	    }
+	  }
+	}
   myActivity {
     edges {
       node {
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index 6a53f648..ca488882 100644
--- a/client/src/pages/activity.vue
+++ b/client/src/pages/activity.vue
@@ -13,17 +13,26 @@
         :key="id"
         class="activity"></module-activity>
     </div>
+    <instrument-activity
+      v-for="(instrument, id) in instruments"
+      :key="id"
+      :filter="filter"
+      :instrument="instrument">
+    </instrument-activity>
+
   </div>
 </template>
 
 <script>
   import ModuleActivity from '@/components/profile/ModuleActivity';
+  import InstrumentActivity from '@/components/profile/InstrumentActivity';
   import ActivityFilter from '@/components/profile/ActivityFilter';
   import MY_ACTIVITY_QUERY from '@/graphql/gql/myActivity.gql'
 
   export default {
     components: {
       ModuleActivity,
+      InstrumentActivity,
       ActivityFilter
     },
 
@@ -34,12 +43,20 @@
           return this.$getRidOfEdges(data).myActivity;
         },
         pollInterval: 5000,
+      },
+      instruments: {
+        query: MY_ACTIVITY_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).myInstrumentActivity;
+        },
+        pollInterval: 5000,
       }
     },
 
     data() {
       return {
         modules: [],
+        instruments: [],
         filter: ''
       }
     }
diff --git a/server/basicknowledge/queries.py b/server/basicknowledge/queries.py
index cf4a9127..8f3f6a20 100644
--- a/server/basicknowledge/queries.py
+++ b/server/basicknowledge/queries.py
@@ -26,7 +26,6 @@ class InstrumentNode(DjangoObjectType):
             instrument=self
         )
 
-
 class BasicKnowledgeQuery(object):
     instrument = graphene.Field(InstrumentNode, slug=graphene.String(), id=graphene.ID())
     instruments = DjangoFilterConnectionField(InstrumentNode)
diff --git a/server/users/schema.py b/server/users/schema.py
index 11192d55..398c6202 100644
--- a/server/users/schema.py
+++ b/server/users/schema.py
@@ -5,6 +5,8 @@ from graphene_django.filter import DjangoFilterConnectionField
 
 from assignments.models import StudentSubmission
 from assignments.schema.types import StudentSubmissionNode
+from basicknowledge.models import BasicKnowledge
+from basicknowledge.queries import InstrumentNode
 from books.models import Module
 from books.schema.queries import ModuleNode
 from users.models import User, SchoolClass
@@ -48,6 +50,7 @@ class UsersQuery(object):
     me = graphene.Field(UserNode)
     all_users = DjangoFilterConnectionField(UserNode)
     my_activity = DjangoFilterConnectionField(ModuleNode)
+    my_instrument_activity = DjangoFilterConnectionField(InstrumentNode)
 
     def resolve_me(self, info, **kwargs):
         return info.context.user
@@ -61,6 +64,9 @@ class UsersQuery(object):
     def resolve_my_activity(self, info, **kwargs):
         return Module.objects.all()
 
+    def resolve_my_instrument_activity(self, info, **kwargs):
+        return BasicKnowledge.objects.all()
+
 
 class AllUsersQuery(object):
     me = graphene.Field(UserNode)