New Feature: Teacher view

classes/course_restriction/conditions/specific_course.php

@@ -108,15 +108,17 @@ public function get_restriction_status($node, $userid) {
             if ( $restriction['data']['label'] == 'specific_course') {
                 $coursecompleted = false;
                 // Get grade and check if valid.
-                $course = get_course($restriction['data']['value']['courseid'][0]);
-                // Check if the course completion is enabled.
-                if ($course->enablecompletion) {
-                    // Get the course completion instance.
-                    $completion = new completion_info($course);
-                    // Check if the user has completed the course.
-                    $coursecompleted = $completion->is_course_complete($userid);
-                    if ($coursecompleted) {
-                        $coursecompleted = true;
+                if ($restriction['data']['value'] && $restriction['data']['value']['courseid']) {
+                    $course = get_course($restriction['data']['value']['courseid'][0]);
+                    // Check if the course completion is enabled.
+                    if ($course->enablecompletion) {
+                        // Get the course completion instance.
+                        $completion = new completion_info($course);
+                        // Check if the user has completed the course.
+                        $coursecompleted = $completion->is_course_complete($userid);
+                        if ($coursecompleted) {
+                            $coursecompleted = true;
+                        }
                     }
                 }
                 $specificcourses[$restriction['id']] = $coursecompleted;

vue3/components/flowchart/LearningPath.vue

@@ -97,7 +97,6 @@ import OrCourses from '../nodes/OrCourses.vue'
 import { notify } from "@kyvg/vue3-notification"
 import shiftNodesDown from '../../composables/shiftNodesDown'
 import setStartingNode from '../../composables/setStartingNode';
-import UserList from '../user_view/UserList.vue'
 import addCustomEdge from '../../composables/addCustomEdge';
 import removeDropzones from '../../composables/removeDropzones';
 import addAutoCompletions from '../../composables/conditions/addAutoCompletions'
@@ -128,7 +127,7 @@ const typeChanged = (changedNode) => {
 // load useVueFlow properties / functions
 const { nodes, findNode, onConnect, addEdges, 
     addNodes, removeNodes,
-    toObject, fitView, getEdges } = useVueFlow({
+    toObject, getEdges } = useVueFlow({
 nodes: [],
 })
 

vue3/components/nodes/CustomNodeEdit.vue

@@ -25,7 +25,7 @@
 <script setup>
 // Import needed libraries
 import { Handle, Position } from '@vue-flow/core'
-import { defineProps, computed, ref, watch } from 'vue';
+import { defineProps, computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import CompletionOutPutItem from '../completion/CompletionOutPutItem.vue'
 import RestrictionOutPutItem from '../restriction/RestrictionOutPutItem.vue'
@@ -42,8 +42,13 @@ const props = defineProps({
 
 // Dynamic background color based on data.completion
 const nodeBackgroundColor = computed(() => {
+  if (props.data.completion.completionnode) {
+    return {
+      backgroundColor: props.data.completion.completionnode.valid ? '#5cb85c' : 'rgba(169, 169, 169, 0.5)',
+    };
+  }
   return {
-    backgroundColor: props.data.completion.completionnode.valid ? '#5cb85c' : 'rgba(169, 169, 169, 0.5)',
+    backgroundColor: props.data.completion ? '#5cb85c' : 'rgba(169, 169, 169, 0.5)',
   };
 });
 
@@ -72,7 +77,7 @@ const toggleTable = (condition) => {
       <div class="mb-2">
         <b>{{ store.state.strings.node_coursefullname }}</b> {{ data.fullname }}
       </div>
-      <div v-if="data.manualrestriction">
+      <div v-if="data.manualrestriction && store.state.view!='student'">
         <RestrictionOutPutItem 
           :data="data"
         />

vue3/components/nodes/OrCourses.vue

@@ -72,15 +72,17 @@ onMounted(() => {
 })
 
 const getCourseNamesIds = () => {
-  courses.value = []
-  store.state.availablecourses.forEach(course => {
-    if (props.data.course_node_id.includes(course.course_node_id[0])) {
-      courses.value.push({
-        fullname : course.fullname,
-        id : [course.course_node_id[0]]
-      })
-    }
-  });
+  if (store.state.availablecourses) {
+    courses.value = []
+    store.state.availablecourses.forEach(course => {
+      if (props.data.course_node_id.includes(course.course_node_id[0])) {
+        courses.value.push({
+          fullname : course.fullname,
+          id : [course.course_node_id[0]]
+        })
+      }
+    });
+  }
 }
 
 const calculateHeight = (length) => {
@@ -121,6 +123,11 @@ watch(() => courses.value, () => {
   calculateHeight(courses.value.length)
 }, { deep: true } );
 
+// watch values from selected node
+watch(() => store.state.availablecourses, () => {
+  getCourseNamesIds()
+}, { deep: true } );
+
 const targetHandleStyle = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', width: '10px', height: '10px'}))
 
 // Set the node that handle has been clicked

vue3/components/nodes_items/OverviewRestrictionCompletion.vue

@@ -196,8 +196,9 @@ const toggleCards = () => {
 }
 
 .additional-card {
-  width: 300px;
-  padding: 10px;
+  width: 300px !important;
+  padding: 10px !important;
+  text-align: center !important;
   border-radius: 8px;
   margin-top: 10px;
   position: absolute;

vue3/components/restriction/RestrictionOutPutItem.vue

@@ -8,7 +8,6 @@
         :is="getOutputLabel(output_item)" 
         v-model="data.manualrestrictionvalue" 
         :data="data"
-        @update:modelValue="updatedData"
       />
     </div>
   </div>

vue3/components/user_view/UserList.vue

@@ -74,11 +74,22 @@
 </template>
 
 <script setup>
+import { watch } from 'vue';
 import { useStore } from 'vuex'
 
 // Load Store 
 const store = useStore()
 
+const stop = watch(
+  () => store.state.lpuserpathrelations,
+  () => {
+    if(store.state.view == 'student' && store.state.userlist == 2){
+      store.state.lpuserpathrelations = store.state.lpuserpathrelations.filter(obj =>obj['id'] == store.state.user)
+      stop()
+    }
+  },
+);
+
 </script>
 
 <style scoped>

vue3/components/user_view/UserPath.vue

@@ -27,6 +27,7 @@
     <notifications width="100%" />
     <div>
       <button 
+        v-if="store.state.view!='student'"
         class="btn btn-outline-primary"
         @click="goBack" 
       >

vue3/main.js

@@ -28,6 +28,7 @@ import { store } from './store';
 import Notifications from '@kyvg/vue3-notification'
 import router from './router/router'
 
+
 // Enables the Composition API
 window.__VUE_OPTIONS_API__ = true; 
 // Disable devtools in production
@@ -53,6 +54,8 @@ function init() {
       store.state.learningGoalID = pathAttributeValue;
       const userAttributeValue = localAdeleAppElement.getAttribute('user');
       store.state.user = userAttributeValue;
+      const userListAttributeValue = localAdeleAppElement.getAttribute('userlist');
+      store.state.userlist = userListAttributeValue;
 
       app.use(router);
       app.mount('#local-adele-app');

vue3/store.js

@@ -35,6 +35,7 @@ const store = createStore({
         return {
             view: 'defaultView',
             user: null,
+            userlist: null,
             learningGoalID: 0,
             contextID: 0,
             strings: {},