diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue index 3cf3c57f..89fbcb59 100644 --- a/client/src/components/ui/ItCheckbox.vue +++ b/client/src/components/ui/ItCheckbox.vue @@ -2,10 +2,22 @@ import type { CheckboxItem } from "@/components/ui/checkbox.types"; import log from "loglevel"; -const props = defineProps<{ +interface Props { checkboxItem: CheckboxItem; disabled?: boolean; -}>(); + iconCheckedPath?: string; + iconCheckedHoverPath?: string; + iconUncheckedPath?: string; + iconUncheckedHoverPath?: string; +} + +const props = withDefaults(defineProps(), { + disabled: false, + iconCheckedPath: "/static/icons/icon-checkbox-checked.svg", + iconCheckedHoverPath: "/static/icons/icon-checkbox-checked-hover.svg", + iconUncheckedPath: "/static/icons/icon-checkbox-unchecked.svg", + iconUncheckedHoverPath: "/static/icons/icon-checkbox-unchecked-hover.svg", +}); const emit = defineEmits(["toggle"]); const toggle = () => { @@ -39,8 +51,8 @@ const input = () => { class="flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50" :class=" checkboxItem.checked - ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]' - : 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]' + ? `bg-[url(${props.iconCheckedPath})] hover:bg-[url(${props.iconCheckedHoverPath})]` + : `bg-[url(${props.iconUncheckedPath})] hover:bg-[url(${props.iconUncheckedHoverPath})]` " tabindex="0" @keydown.stop="keydown" diff --git a/client/src/pages/learningPath/circlePage/LearningSequence.vue b/client/src/pages/learningPath/circlePage/LearningSequence.vue index 0eaaba36..17ec7657 100644 --- a/client/src/pages/learningPath/circlePage/LearningSequence.vue +++ b/client/src/pages/learningPath/circlePage/LearningSequence.vue @@ -5,6 +5,7 @@ import { showIcon } from "@/pages/learningPath/circlePage/learningSequenceUtils" import { useCircleStore } from "@/stores/circle"; import type { CourseCompletionStatus, + LearningContent, LearningContentInterface, LearningSequence, } from "@/types"; @@ -87,6 +88,45 @@ const learningSequenceBorderClass = computed(() => { return result; }); + +function belongsToCompetenceCertificate(lc: LearningContent) { + return ( + (lc.content_type === "learnpath.LearningContentAssignment" || + lc.content_type === "learnpath.LearningContentEdoniqTest") && + lc.competence_certificate?.frontend_url + ); +} + +function checkboxIconCheckedPath(lc: LearningContent) { + if (belongsToCompetenceCertificate(lc)) { + return "/static/icons/icon-lc-competence-certificate-checked.svg"; + } + return "/static/icons/icon-checkbox-checked.svg"; +} + +function checkboxIconCheckedHoverPath(lc: LearningContent) { + if (belongsToCompetenceCertificate(lc)) { + return "/static/icons/icon-lc-competence-certificate-checked.svg"; + } + + return "/static/icons/icon-checkbox-checked-hover.svg"; +} + +function checkboxIconUncheckedPath(lc: LearningContent) { + if (belongsToCompetenceCertificate(lc)) { + return "/static/icons/icon-lc-competence-certificate.svg"; + } + + return "/static/icons/icon-checkbox-unchecked.svg"; +} + +function checkboxIconUncheckedHoverPath(lc: LearningContent) { + if (belongsToCompetenceCertificate(lc)) { + return "/static/icons/icon-lc-competence-certificate.svg"; + } + + return "/static/icons/icon-checkbox-unchecked-hover.svg"; +}