ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Change content block rendering of single list items, refactor code

This commit is contained in:
Ramon Wenger 2022-02-15 17:42:37 +01:00
parent d1250e76a4
commit 86591cd69b
5 changed files with 8 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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({

45
client/src/components/ContentBlock.vue
View File

@ -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)];
startingIndex = this.updateStartingIndex(startingIndex, contentList);
let updatedContent = [...newContents, ...this.createContentListOrBlocks(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];
startingIndex = this.updateStartingIndex(startingIndex, contentList);
newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
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,
startingIndex
id: contentList[0].id
}];
},
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>

1
client/src/components/content-block-form/ContentBlockForm.vue
View File

@ -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: {

3
client/src/components/content-blocks/ContentListBlock.vue
View File

@ -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,

240
client/tests/unit/content-block.spec.js
View File

@ -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);
});
});