From 6d9b16172d28915cd81dac0b49744e99ede86e85 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 27 Mar 2023 19:42:51 +0200
Subject: [PATCH] Display learning unit icons based on name

---
 client/src/components/learningPath/CircleDiagram.vue       | 3 ++-
 client/src/components/learningPath/LearningSequence.vue    | 7 ++++---
 .../src/components/learningPath/learningSequenceUtils.ts   | 3 +++
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/learningPath/learningSequenceUtils.ts

diff --git a/client/src/components/learningPath/CircleDiagram.vue b/client/src/components/learningPath/CircleDiagram.vue
index d2c03848..30269f1b 100644
--- a/client/src/components/learningPath/CircleDiagram.vue
+++ b/client/src/components/learningPath/CircleDiagram.vue
@@ -5,6 +5,7 @@ import * as d3 from "d3";
 import pick from "lodash/pick";
 import * as log from "loglevel";
 import { computed, onMounted } from "vue";
+import { showIcon } from "./learningSequenceUtils";
 
 // @ts-ignore
 import colors from "@/colors.json";
@@ -208,7 +209,7 @@ function render() {
     const learningSequenceIcon = learningSequences
       .append("svg:image")
       .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 "";
diff --git a/client/src/components/learningPath/LearningSequence.vue b/client/src/components/learningPath/LearningSequence.vue
index 6f57cd46..eb10152b 100644
--- a/client/src/components/learningPath/LearningSequence.vue
+++ b/client/src/components/learningPath/LearningSequence.vue
@@ -10,11 +10,12 @@ import { humanizeDuration } from "@/utils/humanizeDuration";
 import findLast from "lodash/findLast";
 import { computed } from "vue";
 import LearningContentBadge from "./LearningContentTypeBadge.vue";
+import { showIcon } from "./learningSequenceUtils";
 
-interface Props {
+type Props = {
   learningSequence: LearningSequence;
   readonly?: boolean;
-}
+};
 
 const props = withDefaults(defineProps<Props>(), {
   readonly: false,
@@ -91,7 +92,7 @@ const learningSequenceBorderClass = computed(() => {
 <template>
   <div :id="learningSequence.slug" class="learning-sequence mb-8">
     <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">
         {{ learningSequence.title }}
       </h3>
diff --git a/client/src/components/learningPath/learningSequenceUtils.ts b/client/src/components/learningPath/learningSequenceUtils.ts
new file mode 100644
index 00000000..dd5bfe0b
--- /dev/null
+++ b/client/src/components/learningPath/learningSequenceUtils.ts
@@ -0,0 +1,3 @@
+export function showIcon(iconName: string): boolean {
+  return ["it-icon-ls-start", "it-icon-ls-end"].some((icon) => icon === iconName);
+}