KURSP-920-filter label text, refactor code as labels cant reliably be…

… used to check if an item is selected, that is why I know use ids
matematikk-mooc · Nov 1, 2023 · c2a5b6f · c2a5b6f
1 parent 9b28df4
commit c2a5b6f
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 56 deletions.
diff --git a/src/vue/components/course-modules/CourseModule.vue b/src/vue/components/course-modules/CourseModule.vue
@@ -29,14 +29,15 @@
       :aria-hidden="collapsed || isLeaf"
       :role="collapsed || isLeaf ? 'presentation' : 'group'"
     >
-      <li v-for="course in nodes" :key="course.label">
+      <li v-for="course in nodes" :key="course.id">
         <TreeView
           :type="course.type"
-          :label="course.label"
+          :label="extractLabelForSelectedLanguage(course.label, 'nb')"
+          :id="course.id"
           :url="course.url? course.url : ''"
           :nodes="course.nodes"
           :isCompleted="course.isCompleted"
-          :isActive="isActive && course.label === selectedNode"
+          :isActive="isActive && course.id === selectedNode"
           @toggleActiveModule="toggleActiveModule"
         />
       </li>
@@ -48,40 +49,43 @@
 import { ref, computed, defineProps, defineEmits } from 'vue';
 import Icon from '../icon/Icon.vue';
 import TreeView from '../tree-view/TreeView.vue';
+import { extractLabelForSelectedLanguage } from '../../utils/lang-utils';
+
 
 const props = defineProps({
   type: String,
   label: String,
+  id: Number,
   nodes: Array,
   isActive: Boolean,
 });
 
 const emits = defineEmits(['toggleActiveModule']);
 
 const collapsed = ref(true);
-const selectedNode = ref(null);
+const selectedNode = ref(-1);
 
 const isLeaf = computed(() => props.nodes.length === 0);
 
 const toggleCollapse = () => {
   if (!isLeaf.value) {
     collapsed.value = !collapsed.value;
-    emits('toggleActiveModule', { module: props.label, isOpen: !collapsed.value });
+    emits('toggleActiveModule', { moduleId: props.id, isOpen: !collapsed.value });
   }
 };
 
-const toggleActiveModule = ({module, isOpen}) => {
-  if (selectedNode.value === module) {
+const toggleActiveModule = ({moduleId, isOpen}) => {
+  if (selectedNode.value === moduleId) {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
-      selectedNode.value = null;
+      selectedNode.value = -1;
   }
   } else {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
-      selectedNode.value = null;
+      selectedNode.value = -1;
     }
   }
 

diff --git a/src/vue/components/course-modules/CourseModules.stories.js b/src/vue/components/course-modules/CourseModules.stories.js
@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import CourseModules from "./CourseModules.vue"
-import { tree_data_2_levels, tree_data_3_levels } from "./test-data";
+import { tree_data_2_levels, tree_data_3_levels, addPropertiesToTreeData } from "./test-data";
 
 export default {
   title: "Components/CourseModules",
@@ -16,10 +16,10 @@ const Template = (args) =>
 
 export const TwoLevelTree = Template.bind({});
 TwoLevelTree.args = {
-  nodes: tree_data_2_levels,
+  nodes: addPropertiesToTreeData(tree_data_2_levels),
 };
 
 export const ThreeLevelTree = Template.bind({});
 ThreeLevelTree.args = {
-  nodes: tree_data_3_levels,
+  nodes: addPropertiesToTreeData(tree_data_3_levels),
 };
diff --git a/src/vue/components/course-modules/CourseModules.vue b/src/vue/components/course-modules/CourseModules.vue
@@ -9,14 +9,15 @@
     <div class="courses__treeview">
       <div
         class="courses__treeview__item"
-        v-for="(module, index) in treestructure"
-        :key="index"
+        v-for="(module) in treestructure"
+        :key="module.id"
       >
         <CourseModule
           :type="module.type"
-          :label="module.label"
+          :label="extractLabelForSelectedLanguage(module.label, 'nb')"
+          :id="module.id"
           :nodes="module.nodes"
-          :isActive="isActiveModule(module.label)"
+          :isActive="isActiveModule(module.id)"
           @toggleActiveModule="toggleActiveModule"
         />
       </div>
@@ -28,34 +29,36 @@
 import { defineProps, ref } from 'vue';
 import Icon from '../icon/Icon.vue';
 import CourseModule from './CourseModule.vue';
+import { extractLabelForSelectedLanguage } from '../../utils/lang-utils';
+
 
 const props = defineProps({
   nodes: Array,
 });
 
 const treestructure = props.nodes; // Assign nodes prop to treestructure
 
-const selectedNode = ref(null);
+const selectedNode = ref(-1);
 
-const toggleActiveModule = ({module, isOpen}) => {
-  if (selectedNode.value === module) {
+const toggleActiveModule = ({moduleId, isOpen}) => {
+  if (selectedNode.value === moduleId) {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
-      selectedNode.value = null;
+      selectedNode.value = -1;
   }
   } else {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
-      selectedNode.value = null;
+      selectedNode.value = -1;
     }
   }
 
 };
   
-const isActiveModule = (nodeLabel) => {
-  return nodeLabel === selectedNode.value;
+const isActiveModule = (nodeId) => {
+  return nodeId === selectedNode.value;
 };
 </script>
 

diff --git a/src/vue/components/course-modules/lang-utils.js b/src/vue/components/course-modules/lang-utils.js
diff --git a/src/vue/components/course-modules/test-data.js b/src/vue/components/course-modules/test-data.js
@@ -375,3 +375,31 @@ export const tree_data_3_levels = [
     ],
   },
 ];
+
+export function addPropertiesToTreeData(data) {
+  data.forEach((module, moduleIndex) => {
+    const moduleId = `${moduleIndex + 1}`;
+    const moduleUrl = module.label.replace(/ /g, "-");
+    module.id = moduleId;
+
+    if (module.nodes && module.nodes.length > 0) {
+      module.nodes.forEach((node, nodeIndex) => {
+        const nodeId = `${moduleId}-${nodeIndex + 1}`;
+        const nodeUrl = `${moduleUrl}/${node.label.replace(/ /g, "-")}`;
+        node.id = nodeId;
+
+        if (node.nodes && node.nodes.length > 0) {
+          // Add properties to third-level nodes
+          node.nodes.forEach((subNode, subNodeIndex) => {
+            const subNodeId = `${nodeId}-${subNodeIndex + 1}`;
+            const subNodeUrl = `${nodeUrl}/${subNode.label.replace(/ /g, "-")}`;
+            subNode.id = subNodeId;
+            subNode.url = subNodeUrl;
+          });
+        }
+      });
+    }
+  });
+ console.log('Hello the data looks like that:', data)
+  return data;
+}
diff --git a/src/vue/components/tree-view/TreeView.vue b/src/vue/components/tree-view/TreeView.vue
@@ -22,10 +22,11 @@
       </span>
     </span>
     <ul class="tree-node__child-nodes" v-if="!collapsed && !isLeaf">
-      <li v-for="node in nodes" :key="node.label" class="tree-node__child-nodes__node">
+      <li v-for="node in nodes" :key="node.id" class="tree-node__child-nodes__node">
         <TreeView
           :type="node.type"
-          :label="node.label"
+          :label="extractLabelForSelectedLanguage(node.label, 'nb')"
+          :id="node.id"
           :nodes="node.nodes"
           :url = "node.url? node.url : ''"
           :isCompleted="node.isCompleted"
@@ -40,11 +41,13 @@
 <script setup>
 import { ref, computed, defineProps, defineEmits } from 'vue';
 import Icon from '../icon/Icon.vue';
+import { extractLabelForSelectedLanguage } from '../../utils/lang-utils';
 
 const props = defineProps({
   type: String,
   label: String,
   url: String,
+  id: Number,
   nodes: Array,
   isCompleted: Boolean,
   isActive: Boolean,
@@ -59,23 +62,23 @@ const isLeaf = computed(() => props.nodes.length === 0);
 const toggleCollapse = () => {
   if (!isLeaf.value) {
     collapsed.value = !collapsed.value;
-    emits('toggleActiveModule', { module: props.label, isOpen: !collapsed.value });
+    emits('toggleActiveModule', { moduleId: props.id, isOpen: !collapsed.value });
   }
   if (isLeaf.value) {
       window.location.href = url;
   }
 };
 
-const toggleActiveModule = ({module, isOpen}) => {
-  if (selectedNode.value === module) {
+const toggleActiveModule = ({moduleId, isOpen}) => {
+  if (selectedNode.value === moduleId) {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
       selectedNode.value = null;
   }
   } else {
     if (isOpen) {
-      selectedNode.value = module;
+      selectedNode.value = moduleId;
     } else {
       selectedNode.value = null;
     }

diff --git a/src/vue/utils/lang-utils.js b/src/vue/utils/lang-utils.js
@@ -0,0 +1,34 @@
+/**
+ * Cleans a string to extract content based on a specified language code.
+ * @param {string} label - The input string containing language-specific content.
+ * @param {string} param - The language code ('nb' or 'nn') to match.
+ * @returns {string} The extracted content based on the specified language code, the first alternative, or the label as is.
+ */
+export function extractLabelForSelectedLanguage(label, param) {
+  // Check if the label contains language codes or separators.
+  if (/\w\w:/.test(label)) {
+    // Define a regular expression pattern to match the desired language code and text.
+    const pattern = new RegExp(`${param}: (.+?)(?:\\||$)`);
+
+    // Execute the regular expression to find the matching content.
+    const match = pattern.exec(label);
+
+    // Check if a match was found.
+    if (match) {
+      // Extract and return the matched text.
+      return match[1];
+    }
+
+    // Check if there are alternative languages.
+    const alternatives = label.split("|");
+    if (alternatives.length > 1) {
+      // Return the content of the first alternative.
+      const firstAlternative = alternatives[0].trim();
+      // Remove any leading language code if present.
+      return firstAlternative.replace(/^\w\w:/, "").trim();
+    }
+  }
+
+  // If there's no language codes or matches, return the label as is.
+  return label;
+}