Change content block rendering of single list items, refactor code

client/cypress/integration/frontend/read-only/assignment.student.spec.js

@@ -62,7 +62,7 @@ const getOperations = ({final, readOnly, classReadOnly = false}) => ({
 describe('Assignments read-only - Student', () => {
   beforeEach(() => {
     cy.setup();
-  });
+});
 
   it('can edit and turn in', () => {
     cy.mockGraphqlOps({

client/src/components/ContentBlock.vue

@@ -155,34 +155,21 @@
           content_list: [content_list_item: [contents...], content_list_item: [contents...]],
           text_block
         }
-        if there's only a single content_list_item it should not be displayed as list like so
-        {
-          text_block,
-          content_list_item: [text_block, image_block],
-        } becomes
-        {
-          text_block,
-          text_block,
-          image_block
-        }
         */
         let contentList = [];
-        let startingIndex = 0;
         let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
           // collect content_list_items
           if (content.type === 'content_list_item') {
             contentList = [...contentList, content];
             if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
-              let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList, startingIndex)];
+              let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
-              startingIndex = this.updateStartingIndex(startingIndex, contentList);
               return updatedContent;
             }
             return newContents;
           } else {
             // handle all other items and reset current content_list if necessary
             if (contentList.length !== 0) {
-              newContents = [...newContents, ...this.createContentListOrBlocks(contentList, startingIndex), content];
+              newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
-              startingIndex = this.updateStartingIndex(startingIndex, contentList);
               contentList = [];
               return newContents;
             } else {
@@ -191,7 +178,7 @@
           }
         }, []);
         return Object.assign({}, this.contentBlock, {
-          contents: this.removeSingleContentListItem(newContent, startingIndex)
+          contents: newContent
         });
       },
       hidden() {
@@ -246,35 +233,13 @@
           }
         });
       },
-      createContentListOrBlocks(contentList, startingIndex) {
+      createContentListOrBlocks(contentList) {
         return [{
           type: 'content_list',
           contents: contentList,
-          id: contentList[0].id,
+          id: contentList[0].id
-          startingIndex
         }];
       },
-      updateStartingIndex(startingIndex, contentList) {
-        return contentList.length > 0 ? startingIndex + contentList.length : startingIndex;
-      },
-      removeSingleContentListItem(content, index) {
-        // just handle the case where we have one contentlistItem ( no index like "a)"" will be shown)
-
-        if (index === 0) {
-          return content;
-        }
-
-        const contentLists = content.filter(contentItem => contentItem.type === 'content_list');
-        if (contentLists.length !== 1) {
-          return content;
-        }
-
-        const listIndex = content.findIndex(contentItem => contentItem.type === 'content_list');
-        if (content[listIndex].contents.length !== 1) {
-          return content;
-        }
-        return [...content.slice(0, listIndex), ...content[listIndex].contents[0].value, ...content.slice(listIndex + 1)];
-      }
     }
   };
 </script>

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

@@ -126,6 +126,7 @@
   import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers';
   import ContentElementActions from '@/components/content-block-form/ContentElementActions';
 
+  // TODO: refactor this file, it's huuuuuge!
 
   export default {
     props: {

client/src/components/content-blocks/ContentListBlock.vue

@@ -1,7 +1,6 @@
 <template>
   <content-list
     :items="contentBlocks"
-    :starting-index="startingIndex"
   >
     <template #default="{ item }">
       <content-block
@@ -17,7 +16,7 @@
   import ContentList from '@/components/content-blocks/ContentList';
   export default {
     name: 'ContentBlockList',
-    props: ['contents', 'parent', 'startingIndex'],
+    props: ['contents', 'parent'],
 
     components: {
       ContentList,

client/tests/unit/content-block.spec.js

@@ -1,240 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import ContentBlock from '@/components/ContentBlock';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
-describe('ContentBlock.vue', () => {
-
-  let actions;
-  let store;
-  let getters;
-
-  beforeEach(() => {
-    actions = {};
-    getters = {
-      editModule: jest.fn()
-    };
-
-    store = new Vuex.Store({
-      state: {},
-      getters,
-      actions: {}
-    });
-  });
-
-  it('should update index if content list has minimal length', () => {
-    const props = {
-      contentBlock: {id: 'asbd', type: 'content', contents: []},
-      parent: null
-    };
-    const wrapper = shallowMount(ContentBlock, {
-      propsData: props,
-      store,
-      localVue
-    });
-
-    let contentList = [1,2,3,4];
-    let index = 0;
-    let updatedIndex = wrapper.vm.updateStartingIndex(index, contentList);
-    expect(updatedIndex).toEqual(contentList.length + index);
-  });
-
-  it('should not update index if content list has not minimal length', () => {
-    const props = {
-      contentBlock: {id: 'asbd', type: 'content', contents: []},
-      parent: null
-    };
-    const wrapper = shallowMount(ContentBlock, {
-      propsData: props,
-      store,
-      localVue
-    });
-
-    let contentList = [];
-    let index = 2;
-    let updatedIndex = wrapper.vm.updateStartingIndex(index, contentList);
-    expect(updatedIndex).toEqual(index);
-  });
-
-
-  it('should use continuos item numbering', () => {
-
-    const contents = [
-      {
-        type: 'text_block'
-      },
-      {
-        type: 'content_list_item',
-        id: 1,
-        contents: []
-      },
-      {
-        type: 'text_block'
-      },
-      {
-        type: 'content_list_item',
-        id: 2,
-        contents: []
-      },
-      {
-        type: 'content_list_item',
-        id: 3,
-        contents: []
-      },
-      {
-        type: 'text_block'
-      },
-      {
-        type: 'content_list_item',
-        id: 4,
-        contents: []
-      },
-    ];
-
-
-    const props = {
-      contentBlock: {
-        id: 'asbd',
-        type: 'content',
-        contents
-      },
-      parent: null
-    };
-    const wrapper = shallowMount(ContentBlock, {
-      propsData: props,
-      store,
-      localVue
-    });
-
-    /*
-    expected output
-      [ { type: 'text_block' },
-        { type: 'content_list',
-          contents: [ [Object] ],
-          id: 1,
-          startingIndex: 0 },
-        { type: 'text_block' },
-        { type: 'content_list',
-          contents: [ [Object], [Object] ],
-          id: 2,
-          startingIndex: 1 },
-        { type: 'text_block' },
-        { type: 'content_list',
-          contents: [ [Object] ],
-          id: 4,
-          startingIndex: 3 } ]
-    */
-
-    const updatedContents = wrapper.vm.contentBlocksWithContentLists.contents;
-
-    // start at 0
-    expect(updatedContents[1].startingIndex).toEqual(0);
-    // 2nd content list
-    expect(updatedContents[3].startingIndex).toEqual(1);
-    // 3rd content list
-    expect(updatedContents[5].startingIndex).toEqual(3);
-  });
-
-  it('should remove single content items', () => {
-
-    const contents = [
-      {
-        type: 'text_block'
-      },
-      {
-        type: 'content_list',
-        id: 1,
-        contents: [
-        {
-          type: 'content_list_item',
-          value: [
-            {
-              type: 'text_block'
-            }
-          ]
-        }]
-      },
-      {
-        type: 'text_block'
-      }
-    ];
-
-    const props = {
-      contentBlock: {
-        id: 'asbd',
-        type: 'content',
-        contents: []
-      },
-      parent: null
-    };
-    const wrapper = shallowMount(ContentBlock, {
-      propsData: props,
-      store,
-      localVue
-    });
-
-    const contents2 = wrapper.vm.removeSingleContentListItem(contents, 1);
-
-    const expectList = [
-      { type: 'text_block' },
-      { type: 'text_block' },
-      { type: 'text_block' }
-    ];
-    // start at 0
-    expect(contents2).toEqual(expectList);
-  });
-
-  it('should not remove multiple content items', () => {
-
-    const contents = [
-      {
-        type: 'text_block'
-      },
-      {
-        type: 'content_list',
-        id: 1,
-        contents: [
-        {
-          type: 'content_list_item',
-          value: [
-            {
-              type: 'text_block'
-            }
-          ]
-        },
-        {
-          type: 'content_list_item',
-          value: [
-            {
-              type: 'text_block'
-            }
-          ]
-        }]
-      },
-      {
-        type: 'text_block'
-      }
-    ];
-
-    const props = {
-      contentBlock: {
-        id: 'asbd',
-        type: 'content',
-        contents: []
-      },
-      parent: null
-    };
-    const wrapper = shallowMount(ContentBlock, {
-      propsData: props,
-      store,
-      localVue
-    });
-
-    const contents3 = wrapper.vm.removeSingleContentListItem(contents, 1);
-    expect(contents3).toEqual(contents);
-  });
-
-});