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

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

@ -155,34 +155,21 @@
content_list: [content_list_item: [contents...], content_list_item: [contents...]], content_list: [content_list_item: [contents...], content_list_item: [contents...]],
text_block 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 contentList = [];
let startingIndex = 0;
let newContent = this.contentBlock.contents.reduce((newContents, content, index) => { let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
// collect content_list_items // collect content_list_items
if (content.type === 'content_list_item') { if (content.type === 'content_list_item') {
contentList = [...contentList, content]; contentList = [...contentList, content];
if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array 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 updatedContent;
} }
return newContents; return newContents;
} else { } else {
// handle all other items and reset current content_list if necessary // handle all other items and reset current content_list if necessary
if (contentList.length !== 0) { if (contentList.length !== 0) {
newContents = [...newContents, ...this.createContentListOrBlocks(contentList, startingIndex), content]; newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
startingIndex = this.updateStartingIndex(startingIndex, contentList);
contentList = []; contentList = [];
return newContents; return newContents;
} else { } else {
@ -191,7 +178,7 @@
} }
}, []); }, []);
return Object.assign({}, this.contentBlock, { return Object.assign({}, this.contentBlock, {
contents: this.removeSingleContentListItem(newContent, startingIndex) contents: newContent
}); });
}, },
hidden() { hidden() {
@ -246,35 +233,13 @@
} }
}); });
}, },
createContentListOrBlocks(contentList, startingIndex) { createContentListOrBlocks(contentList) {
return [{ return [{
type: 'content_list', type: 'content_list',
contents: contentList, 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> </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 {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers';
import ContentElementActions from '@/components/content-block-form/ContentElementActions'; import ContentElementActions from '@/components/content-block-form/ContentElementActions';
// TODO: refactor this file, it's huuuuuge!
export default { export default {
props: { props: {

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

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