Add readonly blocks for contents not editable by users

Relates to MS-589

client/src/components/content-block-form/ContentBlockForm.vue

@@ -138,7 +138,13 @@
   import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
 
   import ContentElement from '@/components/content-block-form/ContentElement.vue';
-  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations';
+  import {
+    insertAtIndex,
+    moveToIndex,
+    removeAtIndex,
+    replaceAtIndex,
+    swapElements
+  } from '@/graphql/immutable-operations';
 
   import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
   import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
@@ -147,7 +153,7 @@
 
   // TODO: refactor this file, it's huuuuuge!
   interface ContentBlockFormData {
-   localContentBlock: any;
+    localContentBlock: any;
   }
 
   export default Vue.extend({
@@ -201,26 +207,16 @@
       update(index: number, element: any, parent?: number) {
         if (parent === undefined) {
           // element is top level
-          this.localContentBlock.contents = [
+          this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, index, element);
-            ...this.localContentBlock.contents.slice(0, index),
-            element,
-            ...this.localContentBlock.contents.slice(index + 1),
-          ];
         } else {
           const parentBlock = this.localContentBlock.contents[parent];
 
-          this.localContentBlock.contents = [
+          const newElementContents = insertAtIndex(parentBlock.contents, index, element);
-            ...this.localContentBlock.contents.slice(0, parent),
+          const newBlock = {
-            {
+            ...parentBlock,
-              ...parentBlock,
+            contents: newElementContents,
-              contents: [
+          };
-                ...parentBlock.contents.slice(0, index),
+          this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, index, newBlock);
-                element,
-                ...parentBlock.contents.slice(index + 1),
-              ],
-            },
-            ...this.localContentBlock.contents.slice(parent + 1),
-          ];
         }
       },
       addBlock(afterOuterIndex: number, innerIndex?: number) {
@@ -254,7 +250,7 @@
         }
       },
       remove(outer: number, inner?: number, askForConfirmation = true) {
-        if(askForConfirmation) {
+        if (askForConfirmation) {
           this.$modal.open('confirm')
             .then(() => {
               this.executeRemoval(outer, inner);

client/src/components/content-block-form/ContentElement.vue

@@ -9,6 +9,7 @@
       @remove="$emit('remove', false)"
     />
 
+
     <!-- Content Forms -->
     <content-form-section
       :title="title"
@@ -55,6 +56,13 @@
   const AssignmentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm');
   const TextForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TipTap.vue');
   const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/SubtitleForm');
+  // readonly blocks
+  const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/SurveyBlock');
+  const Solution = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Solution');
+  const ImageBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ImageBlock');
+  const Instruction = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Instruction');
+  const ModuleRoomSlug = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ModuleRoomSlug');
+  const  CmsDocumentBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/CmsDocumentBlock');
 
   const CHOOSER = 'content-block-element-chooser-widget';
 
@@ -91,6 +99,12 @@
       AssignmentForm,
       TextForm,
       SubtitleForm,
+      SurveyBlock,
+      Solution,
+      ImageBlock,
+      Instruction,
+      ModuleRoomSlug,
+      CmsDocumentBlock,
     },
 
     computed: {
@@ -163,6 +177,36 @@
               title: 'Dokument',
               icon: 'document-icon',
             };
+          case 'survey':
+            return {
+              component: 'survey-block',
+              title: 'Umfrage'
+            };
+          case 'solution':
+            return {
+              component: 'solution',
+              title: 'Lösung'
+            };
+          case 'image_block':
+            return {
+              component: 'image-block',
+              title: 'Bild'
+            };
+          case 'instruction':
+            return {
+              component: 'instruction',
+              title: 'Instruktion'
+            };
+          case 'module_room_slug':
+            return {
+              component: 'module-room-slug',
+              title: 'Raum'
+            };
+          case 'cms_document_block':
+            return {
+              component: 'cms-document-block',
+              title: 'Dokument'
+            };
         }
         return {
           component: CHOOSER,

client/src/components/content-block-form/helpers.js

@@ -1,5 +1,22 @@
 export const CHOOSER = 'content-block-element-chooser-widget';
 export const chooserFilter = value => value.type !== CHOOSER;
+export const USER_CONTENT_TYPES = ['subtitle', 'link_block', 'video_block', 'image_url_block', 'text_block', 'assignment', 'document_block'];
+
+/*
+  Users can only edit certain types of contents, the rest can only be re-ordered. We only care about their id, we won't
+  send anything else to the server about them
+ */
+export const simplifyContents = (contents) => {
+  return contents.map(c => {
+    if (USER_CONTENT_TYPES.includes(c.type)) {
+      return c;
+    }
+    return {
+      id: c.id,
+      type: 'readonly'
+    };
+  });
+};
 
 export const cleanUpContents = (contents) => {
   let filteredContents = contents

client/src/pages/editContentBlock.vue

@@ -14,7 +14,7 @@
   import EDIT_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/editContentBlock.gql';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
   import {setUserBlockType} from '@/helpers/content-block';
-  import {cleanUpContents} from '@/components/content-block-form/helpers';
+  import {cleanUpContents, simplifyContents} from '@/components/content-block-form/helpers';
 
   // import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
 
@@ -62,10 +62,11 @@
 
     methods: {
       save({title, contents, isAssignment, id}) {
-        let cleanedContents = cleanUpContents(contents);
+        const cleanedContents = cleanUpContents(contents);
+        const simplifiedContents = simplifyContents(cleanedContents);
         const contentBlock = {
           title: title,
-          contents: cleanedContents,
+          contents: simplifiedContents,
           type: setUserBlockType(isAssignment),
         };
         const { slug } = this.$route.params;