New Feature: overview restriction completion GH-45

vue3/components/nodes/CustomNode.vue

@@ -27,6 +27,7 @@
 import { Handle, Position } from '@vue-flow/core'
 import { defineProps, computed  } from 'vue';
 import { useStore } from 'vuex';
+import OverviewRestrictionCompletion from '../nodes_items/OverviewRestrictionCompletion.vue';
 
 // Load Store 
 const store = useStore();
@@ -79,13 +80,14 @@ const targetHandleStyle = computed(() => ({ backgroundColor: props.data.color, f
     </div>
     <div class="mb-2"><strong>{{ store.state.strings.node_coursefullname }}</strong> {{ data.fullname }}</div>
     <div>
-      <button type="button" class="btn btn-primary m-2" @click="setNodeModal" data-toggle="modal" data-target="#nodeModal">
+      <button type="button" class="btn btn-primary" @click="setNodeModal" data-toggle="modal" data-target="#nodeModal">
         <i class="fa fa-edit"></i> {{ store.state.strings.edit_course_node }}
       </button>
       <button type="button" class="btn btn-secondary" @click="setPretestView">
         <i class="fa fa-tasks"></i> {{ store.state.strings.edit_node_pretest }}
       </button>
     </div>
+    <OverviewRestrictionCompletion :node=data />
   </div>
   <Handle id="target" type="target" :position="Position.Top" :style="targetHandleStyle" @mousedown="() => setStartNode(data.node_id)" />
   <Handle id="source" type="source" :position="Position.Bottom" :style="sourceHandleStyle" @mousedown="() => setStartNode(data.node_id)" />

vue3/components/nodes_items/OverviewRestrictionCompletion.vue

@@ -0,0 +1,172 @@
+<script setup>
+    // Import needed libraries
+    import { defineProps, onMounted, ref } from 'vue';
+    import { useStore } from 'vuex';
+
+    // Colors for restriction and completion
+    const restrictionColor = ref("#0f78e9");
+    const completionColor = ref("#f1b00c");
+
+    // Load Store 
+    const store = useStore();
+    const props = defineProps({
+        node: Object,
+    });
+    // Calculate searched courses
+
+    // Create a ref for conditions
+    const conditions = ref([]);
+    const showCard = ref(false);
+
+    onMounted(async () => {
+        conditions.value = {
+        completion: {
+            count: 0,
+            conditions: null,
+        },
+        restriction: {
+            count: 0,
+            conditions: null,
+        },
+        };
+        store.state.learninggoal[0].json.tree.nodes.forEach((node) => {
+            if (node.id == props.node.node_id) {
+                if (node.completion != undefined) {
+                    conditions.value.completion = getConditions(node.completion.nodes) 
+                }
+                if (node.restriction != undefined) {
+                    conditions.value.restriction = getConditions(node.restriction.nodes) 
+                }
+            }
+        }
+    )
+});
+function getConditions(completion_nodes) {
+    let count = 0
+    let conditions = []
+    completion_nodes.forEach((node_completion) => {
+        if (node_completion.type != 'feedback') {
+            count ++
+            conditions.push(node_completion.data.description)
+        }
+    })
+    return {
+        count: count,
+        conditions: conditions,
+    }
+}
+
+const toggleCards = () => {
+    console.log('inside')
+  showCard.value = !showCard.value;
+};
+
+</script>
+
+<template>
+    <div v-if="conditions.restriction" class="card-container mt-2">
+
+        <div @click="toggleCards" class="card-container">
+            <div class="card">
+                <div class="restriction" :style="{ color: restrictionColor }">
+                    <i class="fa-solid fa-key"></i>
+                    <span class="count" >{{ conditions.restriction.count }}</span>
+                </div>
+                <div class="completion" :style="{ color: completionColor }">
+                    <i class="fa-solid fa-check-to-slot"></i>
+                    <span class="count">{{ conditions.completion.count }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Left Card -->
+        <div v-if="showCard" class="additional-card left" :style="{ backgroundColor: restrictionColor }">
+            <!-- Content for the left card -->
+            <i class="fa-solid fa-key"></i>
+            <b>
+                Restriction
+            </b>
+            <div v-if="conditions.restriction.count > 0 ">
+                <ul class="list-group mt-3">
+                    <li class="list-group-item" v-for="(condition, index) in conditions.restriction.conditions" :key="index">
+                        {{ condition }}
+                    </li>
+                </ul>
+            </div>
+            <div v-else>
+                <ul class="list-group mt-3">
+                    <li class="list-group-item" >
+                        No restrictions are defined
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- Right Card -->
+        <div v-if="showCard" class="additional-card right" :style="{ backgroundColor: completionColor }">
+            <!-- Content for the left card -->
+            <i class="fa-solid fa-key"></i>
+            <b>
+                Completion
+            </b>
+            <div v-if="conditions.completion.count > 0 ">
+                <ul class="list-group mt-3">
+                    <li class="list-group-item" v-for="(condition, index) in conditions.completion.conditions" :key="index">
+                        {{ condition }}
+                    </li>
+                </ul>
+            </div>
+            <div v-else>
+                <ul class="list-group mt-3">
+                    <li class="list-group-item" >
+                        No restrictions are defined
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+.card-container {
+  display: flex;
+  flex-direction: column; /* Stack children vertically */
+  justify-content: flex-end; /* Align items at the bottom */
+  height: 35%; /* Occupy full height of the parent */
+  cursor: pointer;
+}
+
+.card {
+  display: -webkit-box;
+  width: 100%;
+  padding: 5px;
+  border-radius: 8px;
+  background-color: #EAEAEA;
+  font-weight: bold; /* Make the text bold */
+}
+
+.restriction,
+.completion {
+  display: flex;
+  align-items: flex-end; /* Align items at the bottom within each child */
+  margin-right: 10px; /* Add margin to separate items within each child */
+}
+
+.additional-card {
+  width: 300px;
+  padding: 10px;
+  border-radius: 8px;
+  margin-top: 10px;
+  position: absolute;
+}
+
+.left {
+  right: 105%;
+  top: 70%;
+}
+
+.right {
+  left: 105%;
+}
+</style>

vue3/components/restriction/Restriction.vue

@@ -0,0 +1,73 @@
+<template>
+  <button @click="goBack" class="btn btn-outline-primary">
+    <i class="fa fa-arrow-left"></i> Go Back to Learningpath
+  </button>
+
+  <h3>Edit Restrictions to enter course node</h3>
+  <div class="card">
+  <div class="card-body">
+    <h5 class="card-title">
+        <i class="fa fa-check-circle"></i>Restrictions for:
+    </h5>
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item">
+            <i class="fa fa-header"></i> Course Title: {{ store.state.node.fullname }}
+        </li>
+        <li class="list-group-item">
+            <i class="fa fa-tag"></i> Tags: {{ store.state.node.tags }}
+        </li>
+    </ul>
+  </div>
+
+  <div v-if="restrictions !== null">
+    <ParentNodes :parentNodes="parentNodes" />
+
+    <ChildNodes :childNodes="childNodes" />
+  </div>
+  <div v-else>
+      Loading restrictions...
+  </div>
+  </div>
+</template>
+<script setup>
+// Import needed libraries
+import { ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import ChildNodes from '../charthelper/childNodes.vue'
+import ParentNodes from '../charthelper/parentNodes.vue'
+
+// Load Store 
+const store = useStore();
+
+// Get all available restrictions
+const restrictions = ref(null);
+
+// Intersected node
+const parentNodes = ref([]);
+const childNodes = ref([]);
+
+onMounted(async () => {
+    try {
+      restrictions.value = await store.dispatch('fetchCompletions');
+    } catch (error) {
+        console.error('Error fetching completions:', error);
+    }
+    const learningGoal = store.state.learninggoal[0];
+    if (learningGoal && learningGoal.json && learningGoal.json.tree && learningGoal.json.tree.nodes) {
+        learningGoal.json.tree.nodes.forEach((node) => {
+            if (node.childCourse && node.childCourse.includes(store.state.node.node_id)) {
+                parentNodes.value.push(node);
+            } else if (node.parentCourse && node.parentCourse.includes(store.state.node.node_id)) {
+                childNodes.value.push(node);
+            }
+        });
+    }
+});
+
+// Function to go back
+const goBack = () => {
+  store.state.editingadding = !store.state.editingadding
+  store.state.editingrestriction = !store.state.editingrestriction
+}
+
+</script>