Move edit mode to local GraphQL property of module node

client/src/components/Chapter.vue

@@ -19,12 +19,13 @@
     <visibility-action
       :block="chapter"
       type="chapter-title"
-      v-if="editModule"
+      v-if="editMode"
     />
 
     <bookmark-actions
-      :bookmarked="chapter.bookmark"
+      :bookmarked="!!chapter.bookmark"
       :note="note"
+      :edit-mode="editMode"
       class="chapter__bookmark-actions"
       data-cy="chapter-bookmark-actions"
       @add-note="addNote"
@@ -40,7 +41,7 @@
         :block="chapter"
         :chapter="true"
         type="chapter-description"
-        v-if="editModule"
+        v-if="editMode"
       />
       <p
         class="chapter__description"
@@ -51,12 +52,13 @@
 
     <add-content-button
       :parent="chapter"
-      v-if="editModule"
+      v-if="editMode"
     />
 
     <content-block
       :content-block="contentBlock"
       :parent="chapter.id"
+      :edit-mode="editMode"
       v-for="contentBlock in filteredContentBlocks"
       :key="contentBlock.id"
     />
@@ -69,7 +71,6 @@
   import BookmarkActions from '@/components/notes/BookmarkActions';
   import VisibilityAction from '@/components/visibility/VisibilityAction';
 
-  import {mapState} from 'vuex';
   import {hidden} from '@/helpers/visibility';
   import {CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE} from '@/consts/types';
 
@@ -79,7 +80,20 @@
   import me from '@/mixins/me';
 
   export default {
-    props: ['chapter', 'index'],
+    props: {
+      chapter: {
+        type: Object,
+        default: () => ({})
+      },
+      index: {
+        type: Number,
+        default: 0
+      },
+      editMode: {
+        type: Boolean,
+        default: false
+      }
+    },
 
     mixins: [me],
 
@@ -91,12 +105,11 @@
     },
 
     computed: {
-      ...mapState(['editModule']),
       filteredContentBlocks() {
         if (!(this.chapter && this.chapter.contentBlocks)) {
           return [];
         }
-        if (this.editModule) {
+        if (this.editMode) {
           return this.chapter.contentBlocks;
         }
         return this.chapter.contentBlocks.filter(contentBlock => !hidden({
@@ -112,24 +125,24 @@
         return false;
       },
       titleGreyedOut() {
-        return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
+        return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
       },
       // never hidden when editing the module
       titleHidden() {
         if (this.chapter.titleHidden === true) {
           return true;
         }
-        return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editModule;
+        return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
       },
       descriptionGreyedOut() {
-        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editModule;
+        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
       },
       // never hidden when editing the module
       descriptionHidden() {
         if (this.chapter.descriptionHidden === true) {
           return true;
         }
-        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editModule;
+        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
       },
     },
 

client/src/components/ContentBlock.vue

@@ -9,7 +9,7 @@
     >
       <div
         class="block-actions"
-        v-if="canEditContentBlock && editModule"
+        v-if="canEditContentBlock && editMode"
       >
         <user-widget
           v-bind="me"
@@ -58,6 +58,7 @@
         :parent="contentBlock"
         :bookmarks="contentBlock.bookmarks"
         :notes="contentBlock.notes"
+        :edit-mode="editMode"
         v-for="component in contentBlocksWithContentLists.contents"
         :key="component.id"
       />
@@ -79,8 +80,6 @@
   import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
-  import {mapState} from 'vuex';
-
   import me from '@/mixins/me';
   import {hidden} from '@/helpers/visibility';
   import {CONTENT_TYPE} from '@/consts/types';
@@ -96,7 +95,20 @@
 
   export default {
     name: 'ContentBlock',
-    props: ['contentBlock', 'parent'],
+    props: {
+      contentBlock: {
+        type: Object,
+        default: () => ({})
+      },
+      parent: {
+        type: String,
+        default: ''
+      },
+      editMode: {
+        type: Boolean,
+        default: true
+      }
+    },
 
     mixins: [me],
 
@@ -110,9 +122,8 @@
     },
 
     computed: {
-      ...mapState(['editModule']),
       canEditModule() {
-        return !this.contentBlock.indent && this.editModule;
+        return !this.contentBlock.indent && this.editMode;
       },
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`;

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

@@ -7,6 +7,7 @@
     <bookmark-actions
       :bookmarked="bookmarked"
       :note="note"
+      :edit-mode="editMode"
       v-if="showBookmarkActions"
       @add-note="addNote(component.id)"
       @edit-note="editNote"
@@ -21,8 +22,6 @@
 </template>
 
 <script>
-import {mapState} from 'vuex';
-
 import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
 
 const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
@@ -46,7 +45,32 @@ const Instruction = () => import(/* webpackChunkName: "content-components" */'@/
 const BookmarkActions = () => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions');
 
 export default {
-  props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
+  props: {
+    component: {
+      type: Object,
+      default: () => ({})
+    },
+    parent: {
+      type: Object,
+      default: () => ({})
+    },
+    bookmarks: {
+      type: Array,
+      default: () => ([])
+    },
+    notes: {
+      type: Array,
+      default: () => ([])
+    },
+    root: {
+      type: String,
+      default: ''
+    },
+    editMode: {
+      type: Boolean,
+      default: false
+    }
+  },
 
   components: {
     'text_block': TextBlock,
@@ -72,7 +96,6 @@ export default {
   },
 
   computed: {
-    ...mapState(['editModule']),
     bookmarked() {
       return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
     },
@@ -81,7 +104,7 @@ export default {
       return bookmark && bookmark.note;
     },
     showBookmarkActions() {
-      return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
+      return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editMode;
     },
     componentClass() {
       let classes = ['content-component', `content-component--${this.component.type}`];

client/src/components/modules/Module.vue

@@ -24,8 +24,9 @@
 
     <div class="module__intro-wrapper">
       <bookmark-actions
-        :bookmarked="module.bookmark"
+        :bookmarked="!!module.bookmark"
         :note="note"
+        :edit-mode="module.inEditMode"
         class="module__bookmark-actions"
         data-cy="module-bookmark-actions"
         @add-note="$emit('addNote')"
@@ -53,6 +54,7 @@
     <chapter
       :chapter="chapter"
       :index="index"
+      :edit-mode="module.inEditMode"
       v-for="(chapter, index) in module.chapters"
       :key="chapter.id"
     />

client/src/components/notes/BookmarkActions.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="bookmark-actions"
-    v-if="!editModule"
+    v-if="!editMode"
   >
     <a
       :class="{'bookmark-actions__action--bookmarked': bookmarked}"
@@ -32,22 +32,30 @@
 </template>
 
 <script>
-  import {mapState} from 'vuex';
-
   const BookmarkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon');
   const AddNoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon');
   const NoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon');
 
   export default {
-    props: ['bookmarked', 'note'],
+    props: {
+      bookmarked: {
+        type: Boolean,
+        default: false
+      },
+      note: {
+        type: [Object, Boolean],
+        default: false
+      },
+      editMode: {
+        type: Boolean,
+        default: false
+      }
+    },
     components: {
       BookmarkIcon,
       AddNoteIcon,
       NoteIcon
     },
-    computed: {
-      ...mapState(['editModule'])
-    }
   };
 </script>
 

client/src/components/objective-groups/Objective.vue

@@ -2,16 +2,16 @@
   <li
     :class="{'hideable-element--greyed-out': hidden}"
     class="objective hideable-element"
-    v-if="editModule || !hidden"
+    v-if="editMode || !hidden"
   >
     <visibility-action
       :block="objective"
       :type="type"
-      v-if="editModule"
+      v-if="editMode"
     />
     <div
       class="block-actions"
-      v-if="editModule && canEdit"
+      v-if="editMode && canEdit"
     >
       <user-widget
         v-bind="me"
@@ -39,7 +39,6 @@
   import {hidden} from '@/helpers/visibility';
   import {OBJECTIVE_TYPE} from '@/consts/types';
 
-  import editModule from '@/mixins/edit-module';
   import me from '@/mixins/me';
 
   export default {
@@ -47,10 +46,14 @@
       objective: {
         type: Object,
         default: null
+      },
+      editMode: {
+        type: Boolean,
+        default: false
       }
     },
 
-    mixins: [me, editModule],
+    mixins: [me],
 
     components: {
       MoreOptionsWidget,

client/src/components/objective-groups/ObjectiveGroup.vue

@@ -2,12 +2,12 @@
   <div
     :class="{'hideable-element--greyed-out': hidden}"
     class="objective-group hideable-element"
-    v-if="editModule || !hidden"
+    v-if="editMode || !hidden"
   >
     <visibility-action
       :block="group"
       :type="type"
-      v-if="editModule"
+      v-if="editMode"
     />
 
     <h4>{{ group.displayTitle }}</h4>
@@ -16,13 +16,14 @@
       <objective
         :objective="objective"
         class="objective-group__objective"
+        :edit-mode="group.module.inEditMode"
         v-for="objective in group.objectives"
         :key="objective.id"
       />
     </ul>
     <add-content-button
       :parent="group"
-      v-if="editModule"
+      v-if="editMode"
     />
   </div>
 </template>
@@ -33,7 +34,6 @@
   import AddContentButton from '@/components/AddContentButton';
 
   import me from '@/mixins/me';
-  import editModule from '@/mixins/edit-module';
 
   import {OBJECTIVE_GROUP_TYPE} from '@/consts/types';
   import {hidden} from '@/helpers/visibility';
@@ -46,7 +46,7 @@
       }
     },
 
-    mixins: [me, editModule],
+    mixins: [me],
 
     components: {
       AddContentButton,
@@ -61,6 +61,9 @@
     },
 
     computed: {
+      editMode() {
+        return this.group.module.inEditMode;
+      },
       hidden() {
         return hidden({
           block: this.group,

client/src/components/toggle-menu/ToggleEditing.vue

@@ -1,6 +1,6 @@
 <template>
   <toggle
-    :checked="checked"
+    :checked="module.inEditMode"
     data-cy="toggle-editing"
     label="Modul anpassen"
     @input="toggle"
@@ -8,24 +8,68 @@
 </template>
 
 <script>
-  import {mapState, mapActions} from 'vuex';
   import Toggle from '@/components/ui/Toggle';
+  // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+  import {gql} from '@apollo/client/core';
+
+  const QUERY = gql`
+          query ModuleEditModeQuery ($slug: String) {
+              module(slug: $slug) {
+                inEditMode @client
+                slug
+              }
+          }
+          `;
 
   export default {
     components: {
       Toggle
     },
 
+    data: () => ({
+      module: {
+        inEditMode: false
+      }
+    }),
+
     computed: {
-      ...mapState({
+      checked() {
-        checked: 'editModule',
+        return false;
-      }),
+      },
+      slug() {
+        return this.$route.params.slug;
+      }
+    },
+
+
+
+    apollo: {
+      module() {
+        return {
+          query: QUERY,
+          variables: {
+            slug: this.slug
+          }
+        };
+      }
     },
 
     methods: {
-      ...mapActions({
+      toggle(newChecked){
-        toggle: 'editModule',
+        const cache = this.$apollo.provider.defaultClient.cache;
-      }),
+        const id = cache.identify({
+          __typename: 'ModuleNode',
+          slug: this.slug
+        });
+        cache.modify({
+          id,
+          fields: {
+            inEditMode() {
+              return newChecked;
+            },
+          }
+        });
+      }
     },
   };
 </script>

client/src/graphql/cache.js

@@ -23,6 +23,13 @@ const typePolicies = {
     keyFields: ['slug']
   },
   ModuleNode: {
+    fields: {
+      inEditMode: {
+        read(previous) {
+          return previous !== undefined ? previous : false;
+        }
+      }
+    },
     keyFields: ['slug']
   },
   RoomEntryNode: {

client/src/graphql/gql/fragments/moduleParts.gql

@@ -7,6 +7,7 @@ fragment ModuleParts on ModuleNode {
   slug
   heroImage
   solutionsEnabled
+  inEditMode @client
   topic {
       slug
       title

client/src/graphql/gql/fragments/objectiveGroupParts.gql

@@ -2,6 +2,10 @@ fragment ObjectiveGroupParts on ObjectiveGroupNode {
   id
   title
   displayTitle
+  module {
+    slug
+    inEditMode @client
+  }
   hiddenFor {
     id
     name