Add visibility menu to Chapter component

client/src/components/Chapter.vue

@@ -2,7 +2,20 @@
   <div
     :data-scrollto="chapter.id"
     class="chapter">
-    <h3 :id="'chapter-' + index">{{ chapter.title }}</h3>
+    <div
+      :class="{'hideable-element--hidden': titleGreyedOut}"
+      class="hideable-element"
+      v-if="!titleHidden">
+      <h3
+        :id="'chapter-' + index"
+      >{{ chapter.title }}</h3>
+    </div>
+
+    <visibility-action
+      :block="chapter"
+      type="chapter-title"
+      v-if="editModule"
+    />
 
     <bookmark-actions
       :bookmarked="chapter.bookmark"
@@ -12,9 +25,22 @@
       @edit-note="editNote"
       @bookmark="bookmark(!chapter.bookmark)"
     />
-    <p class="chapter__description intro">
+    <div
+      :class="{'hideable-element--hidden': descriptionGreyedOut}"
+      class="chapter__intro intro hideable-element"
+      v-if="!descriptionHidden"
+    >
+      <visibility-action
+        :block="chapter"
+        :chapter="true"
+        type="chapter-description"
+        v-if="editModule"
+      />
+      <p
+        class="chapter__description">
         {{ chapter.description }}
       </p>
+    </div>
 
     <add-content-button
       :parent="chapter"
@@ -32,29 +58,29 @@
 import ContentBlock from '@/components/ContentBlock';
 import AddContentButton from '@/components/AddContentButton';
 import BookmarkActions from '@/components/notes/BookmarkActions';
+import VisibilityAction from '@/components/visibility/VisibilityAction';
 
 import {mapState} from 'vuex';
-  import {isHidden} from '@/helpers/content-block';
+import {hidden} from '@/helpers/visibility';
-  import {meQuery} from '@/graphql/queries';
+import {CONTENT_TYPE, CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE} from '@/consts/types';
 
 import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
 import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
 
+import me from '@/mixins/me';
+
 export default {
   props: ['chapter', 'index'],
 
+  mixins: [me],
+
   components: {
     BookmarkActions,
+    VisibilityAction,
     ContentBlock,
     AddContentButton
   },
 
-    data() {
-      return {
-        me: {}
-      };
-    },
-
   computed: {
     ...mapState(['editModule']),
     filteredContentBlocks() {
@@ -64,16 +90,31 @@
       if (this.editModule) {
         return this.chapter.contentBlocks;
       }
-        return this.chapter.contentBlocks.filter(contentBlock => !isHidden(contentBlock, this.schoolClass));
+      return this.chapter.contentBlocks.filter(contentBlock => !hidden({
-      },
+        block: contentBlock,
-      schoolClass() {
+        schoolClass: this.schoolClass,
-        return this.me.selectedClass;
+        type: CONTENT_TYPE
+      }));
     },
     note() {
       if (!(this.chapter && this.chapter.bookmark)) {
         return;
       }
       return this.chapter.bookmark.note;
+    },
+    titleGreyedOut() {
+      return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
+    },
+    // never hidden when editing the module
+    titleHidden() {
+      return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editModule;
+    },
+    descriptionGreyedOut() {
+      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editModule;
+    },
+    // never hidden when editing the module
+    descriptionHidden() {
+      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editModule;
     }
   },
 
@@ -133,11 +174,15 @@
     editNote() {
       this.$store.dispatch('editNote', this.chapter.bookmark.note);
     },
+    textHidden(type) {
+      return hidden({
+        block: this.chapter,
+        schoolClass: this.schoolClass,
+        type
+      });
+    }
   },
 
-    apollo: {
-      me: meQuery
-    }
 };
 </script>
 
@@ -151,6 +196,10 @@
     margin-top: 3px;
   }
 
+  &__intro {
+    position: relative;
+  }
+
   &__description {
     @include lead-paragraph;