Add bookmark action for modules

client/src/components/Chapter.vue

@@ -3,6 +3,7 @@
     <h3 :id="'chapter-' + index">{{chapter.title}}</h3>
 
     <bookmark-actions
+      class="chapter__bookmark-actions"
       :bookmarked="chapter.bookmark"
       @bookmark="bookmark(!chapter.bookmark)"
     ></bookmark-actions>
@@ -123,6 +124,10 @@
   .chapter {
     position: relative;
 
+    &__bookmark-actions {
+      margin-top: 3px;
+    }
+
     &__description {
       @include lead-paragraph;
 

client/src/components/modules/Module.vue

@@ -5,7 +5,14 @@
     <img
       :src="module.heroImage"
       alt="" class="module__hero">
-    <div class="module__intro" v-html="module.intro"></div>
+
+    <div class="module__intro-wrapper">
+      <bookmark-actions
+        class="module__bookmark-actions"
+        :bookmarked="module.bookmark"
+        @bookmark="bookmark(!module.bookmark)"></bookmark-actions>
+      <div class="module__intro" v-html="module.intro"></div>
+    </div>
 
     <h3 id="objectives">Lernziele</h3>
 
@@ -26,13 +33,17 @@
 
   import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
   import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
+  import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
   import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
 
   import {withoutOwnerFirst} from '@/helpers/sorting';
+  import BookmarkActions from '@/components/notes/BookmarkActions';
 
   export default {
     components: {
+      BookmarkActions,
       ObjectiveGroups,
       ObjectiveGroupControl,
       AddObjectiveGroupButton,
@@ -112,6 +123,52 @@
           }
         })
       },
+      bookmark(bookmarked) {
+        const id = this.module.id;
+        this.$apollo.mutate({
+          mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
+          variables: {
+            input: {
+              module: id,
+              bookmarked
+            }
+          },
+          update: (store, response) => {
+            const query = MODULE_QUERY;
+            const variables = {id};
+            const data = store.readQuery({
+              query,
+              variables
+            });
+
+            const module = data.module;
+
+            if (bookmarked) {
+              module.bookmark = {
+                __typename: 'ModuleBookmarkNode',
+                note: null
+              }
+            } else {
+              module.bookmark = null;
+            }
+
+            data.module = module;
+
+            store.writeQuery({
+              data,
+              query,
+              variables
+            });
+          },
+          optimisticResponse: {
+            __typename: 'Mutation',
+            updateModuleBookmark: {
+              __typename: 'UpdateModuleBookmarkPayload',
+              success: true
+            }
+          }
+        });
+      }
     },
 
     apollo: {
@@ -138,6 +195,7 @@
   .module {
     display: flex;
     justify-self: center;
+
     @include desktop {
       width: 800px;
     }
@@ -157,6 +215,10 @@
       @include meta-title;
     }
 
+    &__intro-wrapper {
+      position: relative;
+    }
+
     &__intro {
       line-height: 1.5;
       margin-bottom: 3em;
@@ -171,5 +233,9 @@
       }
     }
 
+    &__bookmark-actions {
+      margin-top: 3px;
+    }
+
   }
 </style>

client/src/graphql/gql/mutations/updateModuleBookmark.gql

@@ -0,0 +1,5 @@
+mutation UpdateModuleBookmark($input: UpdateModuleBookmarkInput!) {
+  updateModuleBookmark(input: $input) {
+    success
+  }
+}

server/core/management/commands/data/module_data.py

@@ -47,7 +47,7 @@ objective_groups_1 = [
 
 module_1_chapter_1 = {
     'title': '1.1 Lehrbeginn',
-    'description': 'Hello World',
+    'description': 'Wie sieht Ihr Konsumverhalten aus?',
     'content_blocks': [
         {
             'type': 'task',
@@ -187,7 +187,7 @@ module_1_chapter_1 = {
 }
 module_1_chapter_2 = {
     'title': '1.2 Die drei Lernorte',
-    'description': 'Hello World',
+    'description': 'Haben Sie sich beim Shoppen schon mal überlegt, aus welchem Beweggrund Sie ein bestimmtes Produkt eigentlich unbedingt haben wollten? Wir gehen im Folgenden anhand Ihres letzten Kleiderkaufs dieser Frage nach.',
     'content_blocks': [
         {
             'type': 'base_society',

server/notes/mutations.py

@@ -5,9 +5,9 @@ import json
 from graphene import relay
 
 from api.utils import get_object
-from books.models import ContentBlock, Chapter
+from books.models import ContentBlock, Chapter, Module
 from notes.inputs import AddNoteArgument, UpdateNoteArgument
-from notes.models import ContentBlockBookmark, Note, ChapterBookmark
+from notes.models import ContentBlockBookmark, Note, ChapterBookmark, ModuleBookmark
 from notes.schema import NoteNode
 
 
@@ -105,10 +105,10 @@ class UpdateChapterBookmark(relay.ClientIDMutation):
     @classmethod
     def mutate_and_get_payload(cls, root, info, **kwargs):
         user = info.context.user
-        content_block_id = kwargs.get('chapter')
+        chapter_id = kwargs.get('chapter')
         bookmarked = kwargs.get('bookmarked')
 
-        chapter = get_object(Chapter, content_block_id)
+        chapter = get_object(Chapter, chapter_id)
 
         if bookmarked:
             ChapterBookmark.objects.create(
@@ -124,6 +124,34 @@ class UpdateChapterBookmark(relay.ClientIDMutation):
         return cls(success=True)
 
 
+class UpdateModuleBookmark(relay.ClientIDMutation):
+    class Input:
+        module = graphene.ID(required=True)
+        bookmarked = graphene.Boolean(required=True)
+
+    success = graphene.Boolean()
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+        user = info.context.user
+        module_id = kwargs.get('module')
+        bookmarked = kwargs.get('bookmarked')
+
+        module = get_object(Module, module_id)
+
+        if bookmarked:
+            ModuleBookmark.objects.create(
+                module=module,
+                user=user
+            )
+        else:
+            ModuleBookmark.objects.get(
+                module=module,
+                user=user
+            ).delete()
+
+        return cls(success=True)
+
 
 
 class NoteMutations:
@@ -131,3 +159,4 @@ class NoteMutations:
     update_note = UpdateNote.Field()
     update_content_bookmark = UpdateContentBookmark.Field()
     update_chapter_bookmark = UpdateChapterBookmark.Field()
+    update_module_bookmark = UpdateModuleBookmark.Field()