Add new chapter visibility mutations to client

client/src/components/visibility/VisibilityAction.vue

@@ -18,79 +18,51 @@
   import EyeIcon from '@/components/icons/EyeIcon';
   import ClosedEyeIcon from '@/components/icons/ClosedEyeIcon';
 
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import me from '@/mixins/me';
-  import CHANGE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/mutateContentBlock.gql';
+
-  import UPDATE_OBJECTIVE_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveVisibility.gql';
+  import {TYPES} from '@/consts/types';
+  import {createVisibilityMutation, hidden} from '@/helpers/visibility';
 
   export default {
-    props: ['block'],
+    props: {
+      block: {
+        type: Object,
+        default: () => ({})
+      },
+      type: {
+        type: String,
+        default: 'content',
+        validator: value => {
+          // value must be one of TYPES
+          return TYPES.indexOf(value) !== -1;
+        }
+      }
+    },
+
+    mixins: [me],
 
     components: {
       EyeIcon,
       ClosedEyeIcon
     },
 
-    data() {
-      return {
-        showVisibility: false,
-        me: {
-          permissions: []
-        }
-      };
-    },
-
     computed: {
-      canManageContent() {
-        return this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-      isContentBlock() {
-        return this.block.__typename === 'ContentBlockNode';
-      },
-      schoolClass() {
-        return this.me.selectedClass;
-      },
       hidden() {
-        // is this content block / objective group user created?
+        return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
-        return this.block.userCreated
-          // if so, is visibility not explicitly set for this school class?
-          ? this.block.visibleFor.findIndex(el => el.id === this.schoolClass.id) === -1
-          // otherwise, is it explicitly hidden for this school class?
-          : this.block.hiddenFor.findIndex(el => el.id === this.schoolClass.id) > -1;
       }
     },
 
     methods: {
       toggleVisibility() {
-        let hidden = !this.hidden;
+        const hidden = !this.hidden;
-        let schoolClassId = this.schoolClass.id;
+        const schoolClassId = this.schoolClass.id;
 
         const visibility = [{
           schoolClassId,
           hidden
         }];
 
-        let mutation, variables;
+        const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);
-        const id = this.block.id;
-
-        if (this.isContentBlock) {
-          mutation = CHANGE_CONTENT_BLOCK_MUTATION;
-          variables = {
-            input: {
-              id,
-              contentBlock: {
-                visibility
-              }
-            }
-          };
-        } else {
-          mutation = UPDATE_OBJECTIVE_VISIBILITY_MUTATION;
-          variables = {
-            input: {
-              id,
-              visibility
-            }
-          };
-        }
 
         this.$apollo.mutate({
           mutation,
@@ -98,12 +70,6 @@
         });
       },
     },
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-      },
-    },
   };
 </script>
 

client/src/consts/types.js

@@ -0,0 +1,5 @@
+export const CONTENT_TYPE = 'content';
+export const OBJECTIVE_TYPE = 'objective';
+export const CHAPTER_TITLE_TYPE = 'chapter-title';
+export const CHAPTER_DESCRIPTION_TYPE = 'chapter-description';
+export const TYPES = [CONTENT_TYPE, OBJECTIVE_TYPE, CHAPTER_TITLE_TYPE, CHAPTER_DESCRIPTION_TYPE];

client/src/graphql/gql/fragments/chapterParts.gql

@@ -16,4 +16,20 @@ fragment ChapterParts on ChapterNode {
       }
     }
   }
+  titleHiddenFor {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
+  descriptionHiddenFor {
+    edges {
+      node {
+        id
+        name
+      }
+    }
+  }
 }

client/src/graphql/gql/mutations/mutateContentBlock.gql

@@ -5,6 +5,5 @@ mutation MutateContentBlock($input: MutateContentBlockInput!) {
     contentBlock {
       ...ContentBlockParts
     }
-    errors
   }
 }

client/src/graphql/gql/mutations/updateChapterVisibility.gql

@@ -0,0 +1,9 @@
+#import "../fragments/chapterParts.gql"
+mutation UpdateChapterVisibility($input: UpdateChapterVisibilityInput!) {
+  updateChapterVisibility(input: $input) {
+    chapter {
+      ...ChapterParts
+    }
+  }
+}
+

client/src/helpers/visibility.js

@@ -0,0 +1,78 @@
+import {CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE, OBJECTIVE_TYPE} from '@/consts/types';
+import CHANGE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/mutateContentBlock';
+import UPDATE_OBJECTIVE_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveVisibility';
+import UPDATE_CHAPTER_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateChapterVisibility.gql';
+
+export const createVisibilityMutation = (type, id, visibility) => {
+  let mutation, variables;
+  switch (type) {
+    case CONTENT_TYPE:
+      mutation = CHANGE_CONTENT_BLOCK_MUTATION;
+      variables = {
+        input: {
+          id,
+          contentBlock: {
+            visibility
+          }
+        }
+      };
+      break;
+    case OBJECTIVE_TYPE:
+      mutation = UPDATE_OBJECTIVE_VISIBILITY_MUTATION;
+      variables = {
+        input: {
+          id,
+          visibility
+        }
+      };
+      break;
+    case CHAPTER_TITLE_TYPE:
+    case CHAPTER_DESCRIPTION_TYPE:
+      mutation = UPDATE_CHAPTER_VISIBILITY_MUTATION;
+      variables = {
+        input: {
+          id,
+          type,
+          visibility
+        }
+      };
+      break;
+  }
+
+  return {
+    mutation,
+    variables
+  };
+};
+
+const containsClass = (arr, schoolClass) => arr.map(entry => entry.id).includes(schoolClass.id);
+
+export const hidden = ({
+                         type,
+                         block: {
+                           userCreated,
+                           visibleFor,
+                           hiddenFor,
+                           titleHiddenFor,
+                           descriptionHiddenFor
+                         },
+                         schoolClass
+                       }) => {
+  switch (type) {
+    case CONTENT_TYPE:
+    case OBJECTIVE_TYPE:
+      // is this content block / objective group user created?
+      return userCreated
+        // if so, is visibility not explicitly set for this school class?
+        ? !containsClass(visibleFor, schoolClass)
+        // otherwise, is it explicitly hidden for this school class?
+        : containsClass(hiddenFor, schoolClass);
+    case CHAPTER_TITLE_TYPE:
+      console.log(containsClass(titleHiddenFor, schoolClass));
+      return containsClass(titleHiddenFor, schoolClass);
+    case CHAPTER_DESCRIPTION_TYPE:
+      return containsClass(descriptionHiddenFor, schoolClass);
+    default:
+      return false;
+  }
+};

client/src/mixins/me.js

@@ -15,19 +15,25 @@ export default {
     };
   },
 
-   computed: {
+  computed: {
-      topicRoute() {
+    topicRoute() {
-        if (this.me.lastTopic && this.me.lastTopic.slug) {
+      if (this.me.lastTopic && this.me.lastTopic.slug) {
-          return {
+        return {
-            name: 'topic',
+          name: 'topic',
-            params: {
+          params: {
-              topicSlug: this.me.lastTopic.slug
+            topicSlug: this.me.lastTopic.slug
-            }
+          }
-          };
+        };
-        }
-        return '/book/topic/berufliche-grundbildung';
       }
+      return '/book/topic/berufliche-grundbildung';
     },
+    schoolClass() {
+      return this.me.selectedClass;
+    },
+    canManageContent() {
+      return this.me.permissions.includes('users.can_manage_school_class_content');
+    },
+  },
 
   apollo: {
     me: {