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,
};
}