From 6e85b3a9dce05111316f700dfaccda432111e8e1 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Thu, 4 Jan 2024 18:40:44 +0100 Subject: [PATCH] Reformat, refactor some code and fix some linting errors --- client/index.html | 114 +++++++++++++++++-------- client/src/components/ContentBlock.vue | 23 ++--- 2 files changed, 88 insertions(+), 49 deletions(-) diff --git a/client/index.html b/client/index.html index dc2fcbf7..949c9052 100644 --- a/client/index.html +++ b/client/index.html @@ -1,44 +1,88 @@ + + + + _APP_TITLE_ - - - - _APP_TITLE_ + + + - - - + + + + + + + + + - - - - - - - - - - - - - - -
- - + }; + + + +
+ + diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue index 3a4aae3c..2af97c27 100644 --- a/client/src/components/ContentBlock.vue +++ b/client/src/components/ContentBlock.vue @@ -2,7 +2,7 @@
import('@/components/content const { me, schoolClass } = getMe(); -const wrapper = ref(null); +const contentBlockDiv = ref(null); const route = useRoute(); const router = useRouter(); @@ -245,7 +245,7 @@ const { mutate: doDeleteContentBlock } = useMutation(DELETE_CONTENT_BLOCK_MUTATI })); onMounted(() => { - const element = wrapper.value; + const element = contentBlockDiv.value; if (element !== null) { if (route.hash === `#${props.contentBlock.id}`) { @@ -265,7 +265,7 @@ onMounted(() => { }); onUnmounted(() => { - const element = wrapper.value; + const element = contentBlockDiv.value; if (element !== null) { console.log('unmounting'); @@ -309,14 +309,9 @@ const specialClass = computed(() => `content-block--${props.contentBlock.type.to 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) { - return { - backgroundColor: props.contentBlock.instrumentCategory.background, - }; - } - return {}; -}); +const instrumentStyle = computed(() => + isInstrumentBlock.value ? { backgroundColor: props.contentBlock.instrumentCategory?.background || '' } : {} +); const instrumentLabel = computed(() => { const contentType = props.contentBlock.type.toLowerCase(); if (contentType.startsWith('base')) { @@ -324,7 +319,7 @@ const instrumentLabel = computed(() => { return instrumentCategory(contentType); } if (isInstrumentBlock.value) { - return instrumentCategory(props.contentBlock.instrumentCategory.name); + return instrumentCategory(props.contentBlock.instrumentCategory?.name); } return ''; }); @@ -332,7 +327,7 @@ const instrumentLabel = computed(() => { const instrumentLabelStyle = computed(() => { if (isInstrumentBlock.value) { return { - color: props.contentBlock.instrumentCategory.foreground, + color: props.contentBlock.instrumentCategory?.foreground, }; }