Add bookmark action to chapter

client/src/components/Chapter.vue

@@ -2,8 +2,10 @@
   <div class="chapter">
     <h3 :id="'chapter-' + index">{{chapter.title}}</h3>
 
-    <h1>Bookmark: {{chapter.bookmark}} <a @click="bookmark">Click</a></h1>
-
+    <bookmark-actions
+      :bookmarked="chapter.bookmark"
+      @bookmark="bookmark(!chapter.bookmark)"
+    ></bookmark-actions>
     <p class="chapter__description">
       {{chapter.description}}
     </p>
@@ -20,17 +22,20 @@
 <script>
   import ContentBlock from '@/components/ContentBlock';
   import AddContentButton from '@/components/AddContentButton';
+  import BookmarkActions from '@/components/notes/BookmarkActions';
 
   import {mapGetters} from 'vuex';
   import {isHidden} from '@/helpers/content-block';
   import {meQuery} from '@/graphql/queries';
 
   import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
+  import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
 
   export default {
     props: ['chapter', 'index'],
 
     components: {
+      BookmarkActions,
       ContentBlock,
       AddContentButton
     },
@@ -58,14 +63,48 @@
     },
 
     methods: {
-      bookmark() {
-        console.log('bookmark');
+      bookmark(bookmarked) {
+        const id = this.chapter.id;
         this.$apollo.mutate({
           mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
           variables: {
             input: {
-              chapter: this.chapter.id,
-              bookmarked: true
+              chapter: id,
+              bookmarked
+            }
+          },
+           update: (store, response) => {
+            const query = CHAPTER_QUERY;
+            const variables = {id};
+            const data = store.readQuery({
+              query,
+              variables
+            });
+
+            const chapter = data.chapter;
+
+            if (bookmarked) {
+              chapter.bookmark = {
+                __typename: 'ChapterBookmarkNode',
+                note: null
+              }
+            } else {
+              chapter.bookmark = null;
+            }
+
+            data.chapter = chapter;
+
+            store.writeQuery({
+              data,
+              query,
+              variables
+            });
+          },
+          optimisticResponse: {
+            __typename: 'Mutation',
+            updateChapterBookmark: {
+              __typename: 'UpdateChapterBookmarkPayload',
+              success: true
             }
           }
         });
@@ -82,6 +121,8 @@
   @import "@/styles/_mixins.scss";
 
   .chapter {
+    position: relative;
+
     &__description {
       @include lead-paragraph;
 

client/src/components/content-blocks/ContentComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
     <bookmark-actions
-      v-if="showBookmarkActions()"
+      v-if="showBookmarkActions"
       @add-note="addNote(component.id)"
       @edit-note="editNote"
       @bookmark="bookmarkContent(component.id, !bookmarked)"
@@ -72,6 +72,9 @@
       note() {
         const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
         return bookmark && bookmark.note;
+      },
+      showBookmarkActions() {
+        return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
       }
     },
 
@@ -136,9 +139,6 @@
             }
           }
         });
-      },
-      showBookmarkActions() {
-        return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
       }
     }
   };

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

@@ -47,6 +47,7 @@ objective_groups_1 = [
 
 module_1_chapter_1 = {
     'title': '1.1 Lehrbeginn',
+    'description': 'Hello World',
     'content_blocks': [
         {
             'type': 'task',
@@ -186,6 +187,7 @@ module_1_chapter_1 = {
 }
 module_1_chapter_2 = {
     'title': '1.2 Die drei Lernorte',
+    'description': 'Hello World',
     'content_blocks': [
         {
             'type': 'base_society',