diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue index 97c2491c..3a4aae3c 100644 --- a/client/src/components/ContentBlock.vue +++ b/client/src/components/ContentBlock.vue @@ -168,7 +168,11 @@ const { mutate: duplicateContentBlock } = useMutation(DUPLICATE_CONTENT_BLOCK_MU const variables = { id, }; - const { chapter }: any = store.readQuery({ query, variables }); + + const { chapter }: any = store.readQuery({ + query, + variables, + }); const index = chapter.contentBlocks.findIndex( (contentBlock: ExtendedContentBlockNode) => contentBlock.id === contentBlockId ); @@ -179,7 +183,12 @@ const { mutate: duplicateContentBlock } = useMutation(DUPLICATE_CONTENT_BLOCK_MU contentBlocks, }, }; - store.writeQuery({ query, variables, data }); + + store.writeQuery({ + query, + variables, + data, + }); } }, })); @@ -200,35 +209,53 @@ const { mutate: doDeleteContentBlock } = useMutation(DELETE_CONTENT_BLOCK_MUTATI ) => { if (success) { const query = CHAPTER_QUERY; + const variables = { id: props.parent.id, }; - const { chapter }: any = store.readQuery({ query, variables }); + + const { chapter }: any = store.readQuery({ + query, + variables, + }); const index = chapter.contentBlocks.findIndex( (contentBlock: ExtendedContentBlockNode) => contentBlock.id === props.contentBlock.id ); + if (index < 0) { throw Error('ContentBlock not found'); } + const contentBlocks = removeAtIndex(chapter.contentBlocks, index); + const data = { chapter: { ...chapter, contentBlocks, }, }; - store.writeQuery({ query, variables, data }); + + store.writeQuery({ + query, + variables, + data, + }); } }, })); onMounted(() => { const element = wrapper.value; + if (element !== null) { if (route.hash === `#${props.contentBlock.id}`) { setTimeout(() => { const rect = element.getBoundingClientRect(); - window.scrollTo({ top: rect.y, behavior: 'smooth' }); + + window.scrollTo({ + top: rect.y, + behavior: 'smooth', + }); }, PAGE_LOAD_TIMEOUT); } @@ -277,15 +304,10 @@ const deleteContentBlock = () => { }; // computed properties -const canEditModule = computed(() => { - return !props.contentBlock.indent && props.editMode; -}); -const specialClass = computed(() => { - return `content-block--${props.contentBlock.type.toLowerCase()}`; -}); -const isInstrumentBlock = computed(() => { - return !!props.contentBlock.instrumentCategory; -}); +const canEditModule = computed(() => !props.contentBlock.indent && props.editMode); +const specialClass = computed(() => `content-block--${props.contentBlock.type.toLowerCase()}`); +const isInstrumentBlock = computed(() => !!props.contentBlock.instrumentCategory); + // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css const instrumentStyle = computed(() => { if (isInstrumentBlock.value) { @@ -313,11 +335,12 @@ const instrumentLabelStyle = computed(() => { color: props.contentBlock.instrumentCategory.foreground, }; } + return {}; }); -const isMine = computed(() => { - return props.contentBlock.mine; -}); + +const isMine = computed(() => props.contentBlock.mine); + const contentBlocksWithContentLists = computed(() => { /* collects all content_list_items in content_lists: @@ -359,19 +382,18 @@ const contentBlocksWithContentLists = computed(() => { contents: newContent, }); }); -const isHidden = computed(() => { - return hidden({ + +const isHidden = computed(() => + hidden({ block: props.contentBlock, schoolClass: schoolClass.value, type: CONTENT_TYPE, - }); -}); -const root = computed(() => { - // we need the root content block id, not the generated content block if inside a content list block - return props.contentBlock.root ? props.contentBlock.root : props.contentBlock.id; -}); - + }) +); +// we need the root content block id, not the generated content block if inside a content list block +const root = computed(() => (props.contentBlock.root ? props.contentBlock.root : props.contentBlock.id)); +