Add actions for custom content blocks

client/src/components/Chapter.vue

@@ -10,7 +10,7 @@
 
     <content-block :contentBlock="contentBlock"
                    :parent="chapter.id"
-                   :key="contentBlock.id" v-for="contentBlock in filteredContentBlocks">
+                   :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
     </content-block>
   </div>
 </template>
@@ -30,29 +30,8 @@
     },
 
     computed: {
-      filteredContentBlocks() {
-        return this.chapter && this.chapter.contentBlocks
-          ? this.chapter.contentBlocks.filter(contentBlock => this.visibleFor(contentBlock, this.currentFilter))
-          : [];
-      },
-      currentFilter() {
-        return this.$store.state.filterForSchoolClass;
-      },
       ...mapGetters(['editModule'])
     },
-
-    methods: {
-      visibleFor(contentBlock, schoolClassId) {
-        if (contentBlock.userCreated) {
-          if (schoolClassId === '') {
-            return true;
-          }
-          return contentBlock.visibleFor.map(entry => entry.id).includes(schoolClassId);
-        } else {
-          return !contentBlock.hiddenFor.map(entry => entry.id).includes(schoolClassId);
-        }
-      }
-    }
   }
 </script>
 

client/src/components/ContentBlock.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="content-block__container">
+  <div class="content-block__container" :class="{'content-block__container--hidden': hidden}">
     <div class="content-block" :class="specialClass">
-      <div class="content-block__actions">
+      <div class="content-block__actions" v-if="canEditContentBlock">
+        <more-options-widget>
+          <li class="popover-links__link"><a @click="deleteContentBlock()">Löschen</a></li>
+          <li class="popover-links__link"><a @click="editContentBlock()">Bearbeiten</a></li>
+        </more-options-widget>
+      </div>
+      <div class="content-block__visibility">
         <visibility-action
           v-if="!contentBlock.indent"
           :block="contentBlock"></visibility-action>
         <!--<a @click="editContentBlock()" v-if="canEditContentBlock" class="content-block__action-button">-->
-          <!--<pen-icon class="content-block__action-icon action-icon"></pen-icon>-->
+        <!--<pen-icon class="content-block__action-icon action-icon"></pen-icon>-->
         <!--</a>-->
         <!--<a @click="deleteContentBlock(contentBlock.id)" v-if="canEditContentBlock" class="content-block__action-button">-->
-          <!--<trash-icon class="content-block__action-icon action-icon"></trash-icon>-->
+        <!--<trash-icon class="content-block__action-icon action-icon"></trash-icon>-->
         <!--</a>-->
       </div>
 
@@ -24,7 +30,8 @@
 
     </div>
 
-    <add-content-block-button :after="contentBlock.id" v-if="!contentBlock.indent && editModule"></add-content-block-button>
+    <add-content-block-button :after="contentBlock.id"
+                              v-if="!contentBlock.indent && editModule"></add-content-block-button>
 
   </div>
 
@@ -47,6 +54,7 @@
   import Survey from '@/components/content-blocks/SurveyBlock';
   import Solution from '@/components/content-blocks/Solution';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
+  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import VisibilityAction from '@/components/visibility/VisibilityAction';
   import EyeIcon from '@/components/icons/EyeIcon';
   import PenIcon from '@/components/icons/PenIcon';
@@ -55,6 +63,8 @@
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
+  import {meQuery} from '@/graphql/queries';
+
   import {mapGetters} from 'vuex';
 
   const instruments = {
@@ -87,7 +97,8 @@
       VisibilityAction,
       EyeIcon,
       PenIcon,
-      TrashIcon
+      TrashIcon,
+      MoreOptionsWidget
     },
 
     computed: {
@@ -150,11 +161,24 @@
               return [...newContents, content]
             }
           }
-        }, [])
+        }, []);
 
         return Object.assign({}, this.contentBlock, {
           contents: newContent
         });
+      },
+      schoolClass() {
+        return this.me.selectedClass;
+      },
+      hidden() {
+        if (this.contentBlock.userCreated) {
+          if (this.schoolClass.id === '') {
+            return false;
+          }
+          return !this.contentBlock.visibleFor.map(entry => entry.id).includes(this.schoolClass.id);
+        } else {
+          return this.contentBlock.hiddenFor.map(entry => entry.id).includes(this.schoolClass.id);
+        }
       }
     },
 
@@ -203,8 +227,13 @@
     },
     data() {
       return {
-        showVisibility: false
+        showVisibility: false,
+        me: {}
       }
+    },
+
+    apollo: {
+      me: meQuery
     }
   }
 </script>
@@ -217,6 +246,23 @@
     margin-bottom: 2.5em;
     position: relative;
 
+    &__container {
+      position: relative;
+
+      &--hidden {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          background: rgba(255,255,255,0.5);
+          z-index: 10;
+        }
+      }
+    }
+
     &__title {
       line-height: 1.5;
     }
@@ -226,13 +272,19 @@
       @include regular-text();
     }
 
-    &__actions {
+    &__visibility {
       position: absolute;
       left: -70px;
       top: -4px;
       display: grid;
     }
 
+    &__actions {
+      position: absolute;
+      top: 10px;
+      right: -45px;
+    }
+
     &__action-button {
       cursor: pointer;
     }
@@ -275,13 +327,15 @@
       }
     }
 
-    /deep/ ul {
-      padding-left: 25px;
-    }
+    /deep/ .text-block {
+      ul {
+        padding-left: 25px;
+      }
 
-    /deep/ li {
-      list-style: disc;
-      line-height: 1.5;
+      li {
+        list-style: disc;
+        line-height: 1.5;
+      }
     }
 
   }

client/src/components/visibility/VisibilityAction.vue

@@ -31,7 +31,7 @@
         return this.block.__typename === 'ContentBlockNode';
       },
       schoolClass() {
-        return this.me.selectedClass || {id: 'U2Nob29sQ2xhc3NOb2RlOjE='}; // todo: remove after merge with select class feature
+        return this.me.selectedClass;
       },
       hidden() {
         // is this content block / objective group user created?