From c2a5b6fcfacef73849ca222b3e0189fe3f1b6c03 Mon Sep 17 00:00:00 2001 From: ThereseRingPersen Date: Wed, 1 Nov 2023 14:33:29 +0100 Subject: [PATCH] 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 --- .../course-modules/CourseModule.vue | 26 ++++++++------ .../course-modules/CourseModules.stories.js | 6 ++-- .../course-modules/CourseModules.vue | 29 +++++++++------- .../components/course-modules/lang-utils.js | 22 ------------ .../components/course-modules/test-data.js | 28 +++++++++++++++ src/vue/components/tree-view/TreeView.vue | 17 ++++++---- src/vue/utils/lang-utils.js | 34 +++++++++++++++++++ 7 files changed, 106 insertions(+), 56 deletions(-) delete mode 100644 src/vue/components/course-modules/lang-utils.js create mode 100644 src/vue/utils/lang-utils.js diff --git a/src/vue/components/course-modules/CourseModule.vue b/src/vue/components/course-modules/CourseModule.vue index e035c5df..cbd17c59 100644 --- 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'" > -
  • +
    • @@ -48,10 +49,13 @@ 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, }); @@ -59,29 +63,29 @@ const props = defineProps({ 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 index c879de1a..6a7b957c 100644 --- 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 index fb9c83ae..a3fe4675 100644 --- a/src/vue/components/course-modules/CourseModules.vue +++ b/src/vue/components/course-modules/CourseModules.vue @@ -9,14 +9,15 @@
    @@ -28,6 +29,8 @@ 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, @@ -35,27 +38,27 @@ const props = defineProps({ 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; }; diff --git a/src/vue/components/course-modules/lang-utils.js b/src/vue/components/course-modules/lang-utils.js deleted file mode 100644 index e1dc311b..00000000 --- a/src/vue/components/course-modules/lang-utils.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * 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. - */ -function extractLabelForSelectedLanguage(label, param) { - // 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]; - } - - // Return the label, if it is not multilang. - return label; -} diff --git a/src/vue/components/course-modules/test-data.js b/src/vue/components/course-modules/test-data.js index 32e15c04..7626795c 100644 --- 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 index 06d2d8fd..77f23a35 100644 --- a/src/vue/components/tree-view/TreeView.vue +++ b/src/vue/components/tree-view/TreeView.vue @@ -22,10 +22,11 @@