Add toggle for module editing

client/src/components/Chapter.vue

@@ -6,7 +6,7 @@
       {{chapter.description}}
     </p>
 
-    <add-content-block-button :parent="chapter.id"></add-content-block-button>
+    <add-content-block-button :parent="chapter.id" v-if="editModule"></add-content-block-button>
 
     <content-block :contentBlock="contentBlock"
                    :parent="chapter.id"
@@ -19,6 +19,8 @@
   import ContentBlock from '@/components/ContentBlock';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
 
+  import {mapGetters} from 'vuex';
+
   export default {
     props: ['chapter', 'index'],
 
@@ -36,6 +38,7 @@
       currentFilter() {
         return this.$store.state.filterForSchoolClass;
       },
+      ...mapGetters(['editModule'])
     },
 
     methods: {

client/src/components/ContentBlock.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content-block__container">
     <div class="content-block" :class="specialClass">
-      <!--div class="content-block__actions">
+      <div class="content-block__actions">
         <visibility-action
           v-if="!contentBlock.indent"
           :block="contentBlock"></visibility-action>
@@ -11,7 +11,7 @@
         <a @click="deleteContentBlock(contentBlock.id)" v-if="canEditContentBlock" class="content-block__action-button">
           <trash-icon class="content-block__action-icon action-icon"></trash-icon>
         </a>
-      </div-->
+      </div>
 
       <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
       <h4 class="content-block__title" v-if="!contentBlock.indent">{{contentBlock.title}}</h4>
@@ -24,7 +24,7 @@
 
     </div>
 
-    <add-content-block-button :after="contentBlock.id" v-if="!contentBlock.indent"></add-content-block-button>
+    <add-content-block-button :after="contentBlock.id" v-if="!contentBlock.indent && editModule"></add-content-block-button>
 
   </div>
 
@@ -54,6 +54,8 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
+  import {mapGetters} from 'vuex';
+
   const instruments = {
     base_communication: 'Sprache & Kommunikation',
     base_society: 'Gesellschaft'
@@ -87,6 +89,7 @@
     },
 
     computed: {
+      ...mapGetters(['editModule']),
       specialClass() {
         return `content-block--${this.contentBlock.type.toLowerCase()}`
       },

client/src/components/modules/Module.vue

@@ -46,6 +46,10 @@
       module: {
         required: true,
         type: Object
+      },
+      edit: {
+        type: Boolean,
+        default: false
       }
     },
 

client/src/components/modules/ModuleNavigation.vue

@@ -32,6 +32,10 @@
       </div>
     </div>
 
+    <div class="module-navigation__toggle-menu">
+      <toggle-editing></toggle-editing>
+    </div>
+
     <!--toggle-solutions-for-module
       v-if="onModulePage && module.id"
       :module="module.id"
@@ -47,7 +51,8 @@
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
-  import ToggleSolutionsForModule from '@/components/ToggleSolutionsForModule';
+  import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
+  import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
 
   export default {
     apollo: {
@@ -59,7 +64,8 @@
 
     components: {
       SubNavigationItem,
-      ToggleSolutionsForModule
+      ToggleSolutionsForModule,
+      ToggleEditing
     },
 
     computed: {
@@ -154,7 +160,7 @@
       }
     }
 
-    &__solution-toggle {
+    &__toggle-menu {
       margin-left: auto;
     }
   }

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="toggle-editing">
+    <checkbox label="Modul anpassen" :checked="checked" @input="toggle"></checkbox>
+  </div>
+</template>
+
+<script>
+  import Checkbox from '@/components/Checkbox';
+  import { mapGetters, mapActions } from 'vuex';
+
+  export default {
+    components: {
+      Checkbox,
+    },
+
+    computed: {
+      ...mapGetters({
+        checked: 'editModule',
+      })
+    },
+
+    methods: {
+      ...mapActions({
+        toggle: 'editModule'
+      })
+    }
+  }
+</script>

client/src/pages/module.vue

@@ -1,5 +1,5 @@
 <template>
-  <module :module="module" v-if="module.id"></module>
+  <module :module="module" v-if="module.id" :edit="editModule"></module>
 </template>
 
 <script>
@@ -21,7 +21,8 @@
     computed: {
       ...mapGetters({
           scrollToAssignmentId: 'scrollToAssignmentId',
-          isScrollingToAssignment: 'scrollingToAssignment'
+          isScrollingToAssignment: 'scrollingToAssignment',
+          editModule: 'editModule'
         }),
     },
 

client/src/store/index.js

@@ -29,7 +29,8 @@ export default new Vuex.Store({
     vimeoId: null,
     scrollToAssignmentId: '',
     scrollToAssignmentReady: false,
-    scrollingToAssignment: false
+    scrollingToAssignment: false,
+    editModule: false
   },
 
   getters: {
@@ -43,6 +44,7 @@ export default new Vuex.Store({
     scrollToAssignmentReady: state => state.scrollToAssignmentReady,
     scrollingToAssignment: state => state.scrollingToAssignment,
     currentProjectEntry: state => state.currentProjectEntry,
+    editModule: state => state.editModule
   },
 
   actions: {
@@ -147,6 +149,9 @@ export default new Vuex.Store({
         commit('setScrollingToAssignment', false);
         dispatch('scrollToAssignmentId', '');
       }
+    },
+    editModule({commit}, payload) {
+      commit('setEditModule', payload)
     }
   },
 
@@ -213,6 +218,9 @@ export default new Vuex.Store({
     },
     setScrollingToAssignment(state, payload) {
       state.scrollingToAssignment = payload;
+    },
+    setEditModule(state, payload) {
+      state.editModule = payload;
     }
   }
 })