From d97ad231cc3932ba2fd0ad40e40aeb0a78ac0755 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 18 Feb 2021 17:58:59 +0100
Subject: [PATCH] Add visibility menu to Chapter component

---
 client/src/components/Chapter.vue | 281 ++++++++++++++++++------------
 1 file changed, 165 insertions(+), 116 deletions(-)

diff --git a/client/src/components/Chapter.vue b/client/src/components/Chapter.vue
index 10311cf9..e69859f1 100644
--- a/client/src/components/Chapter.vue
+++ b/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">
-      {{ chapter.description }}
-    </p>
+    <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"
@@ -29,132 +55,155 @@
 </template>
 
 <script>
-  import ContentBlock from '@/components/ContentBlock';
-  import AddContentButton from '@/components/AddContentButton';
-  import BookmarkActions from '@/components/notes/BookmarkActions';
+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 {meQuery} from '@/graphql/queries';
+import {mapState} from 'vuex';
+import {hidden} from '@/helpers/visibility';
+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 UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
+import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
 
-  export default {
-    props: ['chapter', 'index'],
+import me from '@/mixins/me';
 
-    components: {
-      BookmarkActions,
-      ContentBlock,
-      AddContentButton
-    },
+export default {
+  props: ['chapter', 'index'],
 
-    data() {
-      return {
-        me: {}
-      };
-    },
+  mixins: [me],
 
-    computed: {
-      ...mapState(['editModule']),
-      filteredContentBlocks() {
-        if (!(this.chapter && this.chapter.contentBlocks)) {
-          return [];
-        }
-        if (this.editModule) {
-          return this.chapter.contentBlocks;
-        }
-        return this.chapter.contentBlocks.filter(contentBlock => !isHidden(contentBlock, this.schoolClass));
-      },
-      schoolClass() {
-        return this.me.selectedClass;
-      },
-      note() {
-        if (!(this.chapter && this.chapter.bookmark)) {
-          return;
-        }
-        return this.chapter.bookmark.note;
+  components: {
+    BookmarkActions,
+    VisibilityAction,
+    ContentBlock,
+    AddContentButton
+  },
+
+  computed: {
+    ...mapState(['editModule']),
+    filteredContentBlocks() {
+      if (!(this.chapter && this.chapter.contentBlocks)) {
+        return [];
       }
+      if (this.editModule) {
+        return this.chapter.contentBlocks;
+      }
+      return this.chapter.contentBlocks.filter(contentBlock => !hidden({
+        block: contentBlock,
+        schoolClass: this.schoolClass,
+        type: CONTENT_TYPE
+      }));
     },
-
-    methods: {
-      bookmark(bookmarked) {
-        const id = this.chapter.id;
-        this.$apollo.mutate({
-          mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
-          variables: {
-            input: {
-              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
-            }
-          }
-        });
-      },
-      addNote(id) {
-        this.$store.dispatch('addNote', {
-          content: id,
-          parent: this.chapter.id
-        });
-      },
-      editNote() {
-        this.$store.dispatch('editNote', this.chapter.bookmark.note);
-      },
+    note() {
+      if (!(this.chapter && this.chapter.bookmark)) {
+        return;
+      }
+      return this.chapter.bookmark.note;
     },
-
-    apollo: {
-      me: meQuery
+    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;
     }
-  };
+  },
+
+  methods: {
+    bookmark(bookmarked) {
+      const id = this.chapter.id;
+      this.$apollo.mutate({
+        mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
+        variables: {
+          input: {
+            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
+          }
+        }
+      });
+    },
+    addNote(id) {
+      this.$store.dispatch('addNote', {
+        content: id,
+        parent: this.chapter.id
+      });
+    },
+    editNote() {
+      this.$store.dispatch('editNote', this.chapter.bookmark.note);
+    },
+    textHidden(type) {
+      return hidden({
+        block: this.chapter,
+        schoolClass: this.schoolClass,
+        type
+      });
+    }
+  },
+
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+@import "@/styles/_mixins.scss";
 
-  .chapter {
-    position: relative;
+.chapter {
+  position: relative;
 
-    &__bookmark-actions {
-      margin-top: 3px;
-    }
-
-    &__description {
-      @include lead-paragraph;
-
-      margin-bottom: $large-spacing;
-    }
+  &__bookmark-actions {
+    margin-top: 3px;
   }
+
+  &__intro {
+    position: relative;
+  }
+
+  &__description {
+    @include lead-paragraph;
+
+    margin-bottom: $large-spacing;
+  }
+}
 </style>