From 9fb8e13c1c0448e0be74fee6591c58799f785794 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 18 Dec 2019 16:28:24 +0100
Subject: [PATCH] Enable scrolling to the content blocks in a module

---
 client/src/components/Chapter.vue             |  2 +-
 .../content-blocks/ContentComponent.vue       |  4 +-
 .../components/content-blocks/SurveyBlock.vue |  2 +-
 .../content-blocks/assignment/Assignment.vue  |  2 +-
 .../src/components/profile/ModuleActivity.vue | 22 +++--
 .../graphql/gql/local/mutations/scrollTo.gql  |  3 +
 .../src/graphql/gql/local/scrollPosition.gql  |  5 ++
 client/src/pages/module.vue                   | 90 +++++++++++--------
 server/books/schema/queries.py                | 35 ++++----
 9 files changed, 101 insertions(+), 64 deletions(-)
 create mode 100644 client/src/graphql/gql/local/mutations/scrollTo.gql
 create mode 100644 client/src/graphql/gql/local/scrollPosition.gql

diff --git a/client/src/components/Chapter.vue b/client/src/components/Chapter.vue
index b5fd26db..c7332d56 100644
--- a/client/src/components/Chapter.vue
+++ b/client/src/components/Chapter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chapter">
+  <div class="chapter" :data-scrollto="chapter.id">
     <h3 :id="'chapter-' + index">{{chapter.title}}</h3>
 
     <bookmark-actions
diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 3710281c..348bd44a 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
+  <div class="content-component"
+       :class="{'content-component--bookmarked': bookmarked}"
+       :data-scrollto="component.id">
     <bookmark-actions
       v-if="showBookmarkActions"
       @add-note="addNote(component.id)"
diff --git a/client/src/components/content-blocks/SurveyBlock.vue b/client/src/components/content-blocks/SurveyBlock.vue
index aebb695f..736ae333 100644
--- a/client/src/components/content-blocks/SurveyBlock.vue
+++ b/client/src/components/content-blocks/SurveyBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="survey-block">
+  <div class="survey-block" :data-scrollto="value.id">
     <router-link class="button button--primary"
                  :to="{name: 'survey', params: {id:value.id}}">Übung anzeigen
     </router-link>
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 853bec36..cad57597 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="assignment" :data-scrollto="assignment.id">
+  <div class="assignment" :data-scrollto="value.id">
     <p class="assignment__assignment-text">
       {{assignment.assignment}}
     </p>
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 2cb96f9e..4ac7bdd0 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -6,7 +6,7 @@
       <div class="module-activity__entry module-activity-entry"
            v-for="submission in module.mySubmissions"
            :key="submission.id"
-           @click="goToAssignment(submission.assignment.id)">
+           @click="goTo(submission.assignment.id)">
         <h3 class="module-activity-entry__title">Aufgabe & Ergebnis</h3>
         <p class="module-activity-entry__text">
           {{submission.text}}
@@ -14,7 +14,8 @@
       </div>
       <div class="module-activity__entry module-activity-entry"
            v-for="answer in module.myAnswers"
-           :key="answer.id">
+           :key="answer.id"
+           @click="goTo(answer.survey.id)">
         <h3 class="module-activity-entry__title">Übung</h3>
         <p class="module-activity-entry__text">
           {{answer.survey.title}}
@@ -23,12 +24,14 @@
       </div>
       <div class="module-activity__entry"
            v-for="bookmark in module.myContentBookmarks"
-           :key="bookmark.id">
+           :key="bookmark.id"
+           @click="goTo(bookmark.uuid)">
         <content-bookmark :bookmark="bookmark"></content-bookmark>
       </div>
       <div class="module-activity__entry"
            v-for="bookmark in module.myChapterBookmarks"
-           :key="bookmark.id">
+           :key="bookmark.id"
+           @click="goTo(bookmark.chapter.id)">
         <h3 class="module-activity-entry__title">Lesezeichen</h3>
         <p class="module-activity-entry__text">
           {{bookmark.chapter.description}}
@@ -51,6 +54,8 @@
   import {mapActions} from 'vuex'
   import ContentBookmark from '@/components/profile/ContentBookmark';
 
+  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
+
   export default {
     props: ['module'],
     components: {
@@ -74,9 +79,14 @@
     },
     methods: {
       ...mapActions(['scrollToAssignmentId']),
-      goToAssignment(id) {
+      goTo(scrollTo) {
         const url = `/module/${this.module.slug}/`;
-        this.scrollToAssignmentId(id);
+        this.$apollo.mutate({
+          mutation: SCROLL_TO_MUTATION,
+          variables: {
+            scrollTo
+          }
+        });
         this.$router.push(url);
       }
     }
diff --git a/client/src/graphql/gql/local/mutations/scrollTo.gql b/client/src/graphql/gql/local/mutations/scrollTo.gql
new file mode 100644
index 00000000..cf79d083
--- /dev/null
+++ b/client/src/graphql/gql/local/mutations/scrollTo.gql
@@ -0,0 +1,3 @@
+mutation($scrollTo: String!) {
+  scrollTo(scrollTo: $scrollTo) @client
+}
diff --git a/client/src/graphql/gql/local/scrollPosition.gql b/client/src/graphql/gql/local/scrollPosition.gql
new file mode 100644
index 00000000..c4901e51
--- /dev/null
+++ b/client/src/graphql/gql/local/scrollPosition.gql
@@ -0,0 +1,5 @@
+query ScrollPosition {
+  scrollPosition @client {
+    scrollTo
+  }
+}
diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue
index be5f5496..2c30be23 100644
--- a/client/src/pages/module.vue
+++ b/client/src/pages/module.vue
@@ -3,9 +3,12 @@
 </template>
 
 <script>
-  import { mapGetters, mapActions } from 'vuex'
+  import {mapGetters, mapActions} from 'vuex'
   import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
-  import {moduleQuery} from '@/graphql/queries';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+
+  import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
   import Module from '@/components/modules/Module.vue';
 
@@ -16,23 +19,65 @@
 
     methods: {
       ...mapActions(['scrollToAssignmentReady', 'scrollingToAssignment']),
+      scrollTo() {
+        if (this.scrollPosition && this.scrollPosition.scrollTo) {
+          let options = {
+            container: 'body',
+            easing: 'ease',
+            offset: -60,
+            onStart: (element) => {
+            },
+            onDone: (element) => {
+            },
+            onCancel: function () {
+              // scrolling has been interrupted
+            },
+            x: false,
+            y: true
+          };
+          setTimeout(() => {
+            this.$scrollTo(`[data-scrollto="${this.scrollPosition.scrollTo}"]`, 1000, options);
+            this.$apollo.mutate({
+              mutation: SCROLL_TO_MUTATION,
+              variables: {
+                scrollTo: ''
+              }
+            })
+          }, 250); // unfortunately this timeout is needed as it is hard to tell when everything is rendered
+        }
+      }
     },
 
     computed: {
       ...mapGetters({
-          scrollToAssignmentId: 'scrollToAssignmentId',
-          isScrollingToAssignment: 'scrollingToAssignment',
-          editModule: 'editModule'
-        }),
+        editModule: 'editModule'
+      }),
     },
 
     apollo: {
-      module: moduleQuery,
+      module() {
+        return {
+          query: MODULE_DETAILS_QUERY,
+          variables: {
+            slug: this.$route.params.slug
+          },
+          update(data) {
+            return this.$getRidOfEdges(data).module || {};
+          },
+          result() {
+            // scroll only after the module has been loaded completely
+            this.scrollTo();
+          }
+        }
+      },
       assignments() {
         return {
           query: ASSIGNMENTS_QUERY
         }
-      }
+      },
+      scrollPosition: {
+        query: SCROLL_POSITION
+      },
     },
 
     data() {
@@ -41,34 +86,5 @@
         assignments: []
       }
     },
-    mounted () {
-      this.$store.subscribe((mutation, state) => {
-        if (mutation.type === 'setScrollToAssignmentReady' && mutation.payload && !this.isScrollingToAssignment) {
-          this.scrollingToAssignment(true);
-          let options = {
-            container: 'body',
-            easing: 'ease',
-            offset: -60,
-            onStart: (element) => {
-            },
-            onDone: (element) => {
-              this.scrollToAssignmentReady(false);
-              this.scrollingToAssignment(false);
-            },
-            onCancel: function() {
-              // scrolling has been interrupted
-            },
-            x: false,
-            y: true
-          };
-          setTimeout(() => {
-            this.$scrollTo(`[data-scrollto="${this.scrollToAssignmentId}"]`, 1000, options);
-            }, 250) // unfortunately this timeout is needed as it is hard to tell when everything is rendered
-        }
-      })
-    },
-    beforeDestroy () {
-      this.scrollToAssignmentReady(false);
-    }
   }
 </script>
diff --git a/server/books/schema/queries.py b/server/books/schema/queries.py
index 53d0e55f..18b86e46 100644
--- a/server/books/schema/queries.py
+++ b/server/books/schema/queries.py
@@ -225,34 +225,35 @@ class BookNode(DjangoObjectType):
         return Topic.get_by_parent(self)
 
 
-class FilteredChapterNode(DjangoObjectType):
-    content_blocks = DjangoFilterConnectionField(ContentBlockNode)
-
-    class Meta:
-        model = Chapter
-        only_fields = [
-            'slug', 'title', 'description',
-        ]
-        filter_fields = [
-            'slug', 'title',
-        ]
-        interfaces = (relay.Node,)
-
-    def resolve_content_blocks(self, *args, **kwargs):
-        return ContentBlock.get_by_parent(self)
+# todo: do we need this?
+# class FilteredChapterNode(DjangoObjectType):
+#     content_blocks = DjangoFilterConnectionField(ContentBlockNode)
+#
+#     class Meta:
+#         model = Chapter
+#         only_fields = [
+#             'slug', 'title', 'description',
+#         ]
+#         filter_fields = [
+#             'slug', 'title',
+#         ]
+#         interfaces = (relay.Node,)
+#
+#     def resolve_content_blocks(self, *args, **kwargs):
+#         return ContentBlock.get_by_parent(self)
 
 
 class BookQuery(object):
     book = relay.Node.Field(BookNode)
     topic = graphene.Field(TopicNode, slug=graphene.String())
     module = graphene.Field(ModuleNode, slug=graphene.String(), id=graphene.ID())
-    chapter = relay.Node.Field(FilteredChapterNode)
+    chapter = relay.Node.Field(ChapterNode)
     content_block = relay.Node.Field(ContentBlockNode)
 
     books = DjangoFilterConnectionField(BookNode)
     topics = DjangoFilterConnectionField(TopicNode)
     modules = DjangoFilterConnectionField(ModuleNode)
-    chapters = DjangoFilterConnectionField(FilteredChapterNode)
+    chapters = DjangoFilterConnectionField(ChapterNode)
 
     def resolve_books(self, *args, **kwargs):
         return Book.objects.filter(**kwargs).live()