ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display learning unit icons based on name

This commit is contained in:
Christian Cueni 2023-03-27 19:42:51 +02:00
parent 97879b570c
commit 6d9b16172d
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/learningPath/CircleDiagram.vue
View File

@ -5,6 +5,7 @@ import * as d3 from "d3";
import pick from "lodash/pick"; import pick from "lodash/pick";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed, onMounted } from "vue"; import { computed, onMounted } from "vue";
import { showIcon } from "./learningSequenceUtils";
// @ts-ignore // @ts-ignore
import colors from "@/colors.json"; import colors from "@/colors.json";
@ -208,7 +209,7 @@ function render() {
const learningSequenceIcon = learningSequences const learningSequenceIcon = learningSequences
.append("svg:image") .append("svg:image")
.attr("xlink:href", (d) => { .attr("xlink:href", (d) => {
if (["it-icon-ls-start", "it-icon-ls-end"].some((icon) => icon === d.icon)) { if (showIcon(d.icon)) {
return "/static/icons/" + d.icon.replace("it-", "") + ".svg"; return "/static/icons/" + d.icon.replace("it-", "") + ".svg";
} }
return ""; return "";

7
client/src/components/learningPath/LearningSequence.vue
View File

@ -10,11 +10,12 @@ import { humanizeDuration } from "@/utils/humanizeDuration";
import findLast from "lodash/findLast"; import findLast from "lodash/findLast";
import { computed } from "vue"; import { computed } from "vue";
import LearningContentBadge from "./LearningContentTypeBadge.vue"; import LearningContentBadge from "./LearningContentTypeBadge.vue";
import { showIcon } from "./learningSequenceUtils";
interface Props { type Props = {
learningSequence: LearningSequence; learningSequence: LearningSequence;
readonly?: boolean; readonly?: boolean;
} };
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
readonly: false, readonly: false,
@ -91,7 +92,7 @@ const learningSequenceBorderClass = computed(() => {
<template> <template>
<div :id="learningSequence.slug" class="learning-sequence mb-8"> <div :id="learningSequence.slug" class="learning-sequence mb-8">
<div class="mb-2 flex items-center gap-4 text-blue-900"> <div class="mb-2 flex items-center gap-4 text-blue-900">
<component :is="learningSequence.icon" /> <component v-if="showIcon(learningSequence.icon)" :is="learningSequence.icon" />
<h3 class="text-large font-semibold"> <h3 class="text-large font-semibold">
{{ learningSequence.title }} {{ learningSequence.title }}
</h3> </h3>

3
client/src/components/learningPath/learningSequenceUtils.ts Normal file
View File

@ -0,0 +1,3 @@
export function showIcon(iconName: string): boolean {
return ["it-icon-ls-start", "it-icon-ls-end"].some((icon) => icon === iconName);
}