New Feature: CustomNodes, Sidebar adjustments

Wunderbyte-GmbH · Nov 24, 2023 · 7785e06 · 7785e06
1 parent 3bad5a2
commit 7785e06
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 54 deletions.
diff --git a/classes/external/get_availablecourses.php b/classes/external/get_availablecourses.php
@@ -98,7 +98,7 @@ public static function execute_returns(): external_multiple_structure {
                     'fullname' => new external_value(PARAM_TEXT, 'Historyid id'),
                     'shortname' => new external_value(PARAM_TEXT, 'Item name'),
                     'category' => new external_value(PARAM_TEXT, 'Category level'),
-                    's1' => new external_value(PARAM_TEXT, 'Item tags'),
+                    'tags' => new external_value(PARAM_TEXT, 'Item tags'),
                 ]
             )
         );

diff --git a/classes/learning_path_courses.php b/classes/learning_path_courses.php
@@ -52,8 +52,7 @@ public static function get_availablecourses() {
      */
     public static function buildsqlquery() {
         global $DB, $USER;
-
-        $selectagg = $DB->sql_group_concat('tag.name') . ' as s1';
+        $selectagg = $DB->sql_group_concat('tag.name') . ' as tags';
         $userquery = '';
         $select = "SELECT s1.*
         FROM (
@@ -86,29 +85,9 @@ public static function buildsqlquery() {
 
             $whereparamsquery['params']["userid"] = $USER->id;
         }
-        $select = str_replace( ['%USERQUERY%', '%WHEREQUERY%'], [$userquery, $whereparamsquery['wherequery']], $select);
-        return $DB->get_records_sql($select,
-            ['contextcourse' => CONTEXT_COURSE] + $whereparamsquery['params']);
-    }
 
-    /**
-     * Build sql query with config filters.
-     * @param str $whereclause
-     * @param array $params
-     * @param str $usersql
-     * @return object
-     */
-    protected static function get_course_records($whereclause, $params, $usersql) {
-        global $DB;
-        $fields = ['c.id', 'c.fullname', 'c.shortname'];
-        // TODO  user query includieren 154-157 && available courses anzeigen.
-        $sql = "SELECT ". join(',', $fields).
-                " FROM {course} c " .
-                $usersql .
-                $whereclause."ORDER BY c.sortorder";
-        $list = $DB->get_records_sql($sql,
-            ['contextcourse' => CONTEXT_COURSE] + $params);
-        return $list;
+        $select = str_replace( ['%USERQUERY%', '%WHEREQUERY%'], [$userquery, $whereparamsquery['wherequery']], $select);
+        return $DB->get_records_sql($select, $whereparamsquery['params']);
     }
 
     /**
@@ -142,8 +121,12 @@ protected static function build_where_query($configfilters) {
         $params = [];
         $wherequery = '';
         foreach ($configfilters as $index => $configfilter) {
-            $tagquery = "(s1.tags OPERATOR ':TAG' OR s1.tags OPERATOR ':TAG,%' OR s1.tags
-                OPERATOR '%,:TAG' OR s1.tags OPERATOR '%,:TAG,%')";
+            $tagqueries = [
+                "(s1.tags OPERATOR :TAG OR ",
+                "s1.tags OPERATOR :TAG OR ",
+                "s1.tags OPERATOR :TAG OR ",
+                "s1.tags OPERATOR :TAG)",
+            ];
             if (!empty($configfilter[0])) {
                 $indexfilter = 0;
                 $filtercount = count($configfilter);
@@ -161,8 +144,18 @@ protected static function build_where_query($configfilters) {
                 } else {
                     $operator = $index == 'include' ? 'LIKE' : 'NOT LIKE';
                     foreach ($configfilter as $filter) {
-                        $wherequery .= str_replace(['OPERATOR', ':TAG'], [$operator, $filter], $tagquery);
-                        $indexfilter += 1;
+                        $tagwildcards = [
+                            $filter,
+                            $filter . ",%",
+                            "%," . $filter,
+                            "%," . $filter .",%",
+                        ];
+                        foreach ($tagqueries as $indexquery => $tagquery) {
+                            $wherequery .= str_replace(['OPERATOR', 'TAG'], [$operator, $index . $indexfilter], $tagquery);
+
+                            $params[$index . $indexfilter] = $tagwildcards[$indexquery];
+                            $indexfilter += 1;
+                        }
                     }
                 }
             }

diff --git a/vue3/components/flowchart/CustomNode.vue b/vue3/components/flowchart/CustomNode.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { defineProps, ref } from 'vue';
+import { Handle, Position } from '@vue-flow/core'
+import { defineProps, ref, computed  } from 'vue';
 import Modal from '../modals/Modal.vue';
 import { useStore } from 'vuex';
 
@@ -13,6 +14,9 @@ const props = defineProps({
   },
 });
 
+const sourceHandleStyle = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', width: '10px', height: '10px'}))
+const targetHandleStyle = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', width: '10px', height: '10px'}))
+
 const modalOpen = ref(false);
 
 const editCourse = (context) => {
@@ -26,19 +30,21 @@ const closeModal = () => {
 </script>
 
 <template>
-      <div class="custom-node text-center" >
-        <div class="mb-2"><b>{{ store.state.strings.node_coursefullname }}</b> {{ data.fullname }}</div>
-        <div class="mb-2"><b>{{ store.state.strings.node_courseshortname }}</b> {{ data.shortname }}</div>
-        <button class="btn btn-primary" @click="editCourse('Pretest')">Edit Course</button>
-      </div>
-
-    <teleport v-if="isModalOpen" to="#page-header">
-      <Modal :showModal="isModalOpen" @close="closeModal">
-      <!-- Modal content -->
-      <h1>Hello there</h1>
-      <p>Vue 3 is awesome!!!</p>
-    </Modal>
-    </teleport>
+  <div class="custom-node text-center" >
+    <div class="mb-2"><b>{{ store.state.strings.node_coursefullname }}</b> {{ data.fullname }}</div>
+    <div class="mb-2"><b>{{ store.state.strings.node_courseshortname }}</b> {{ data.shortname }}</div>
+    <button class="btn btn-primary" @click="editCourse('Pretest')">Edit Course</button>
+  </div>
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyle" />
+  <Handle id="b" type="target" :position="Position.Left" :style="targetHandleStyle" />
+
+<teleport v-if="isModalOpen" to="#page-header">
+  <Modal :showModal="isModalOpen" @close="closeModal">
+  <!-- Modal content -->
+  <h1>Hello there</h1>
+  <p>Vue 3 is awesome!!!</p>
+</Modal>
+</teleport>
 
 </template>
 

diff --git a/vue3/components/flowchart/Sidebar.vue b/vue3/components/flowchart/Sidebar.vue
@@ -19,7 +19,7 @@ const props = defineProps({
 const filteredCourses = computed(() => {
   if(searchTerm.value.toLowerCase().startsWith('#')){
     return props.courses.filter(course =>
-      course.s1.toLowerCase().includes(searchTerm.value.toLowerCase().slice(1))
+      course.tags.toLowerCase().includes(searchTerm.value.toLowerCase().slice(1))
     );
   }
   return props.courses.filter(course =>
@@ -30,25 +30,25 @@ const filteredCourses = computed(() => {
 </script>
 
 <template>
-  <aside>
+  <aside class="col-md-2" style="min-width: 10% !important;"> <!-- Adjust the width as needed -->
     <div class="description" type="text">{{ strings.fromavailablecourses }}</div>
-    <input v-model="searchTerm" placeholder="Search courses" />
+    <input class="form-control" v-model="searchTerm" placeholder="Search courses" />
     <div class="nodes-container">
       <div class="nodes">
         <template v-for="course in filteredCourses" :key="course.id">
-          <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, course)" :data ="course">
+          <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, course)" :data="course" style="width: 100%;">
             {{ course.fullname }}
           </div>
         </template>
       </div>
     </div>
-  </aside>
+</aside>
 </template>
 
 <style scoped>
 .nodes-container {
   margin-top: 20px;
-  height: 100%;
+  height: 80%;
   overflow-y: auto;
 }
 </style>
diff --git a/vue3/package.json b/vue3/package.json
@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dev": "webpack serve --config config/webpack.dev.js",
-    "prod": "webpack --config config/webpack.prod.js",
-    "watch": "cross-env webpack --mode development --watch"
+    "dev": "cross-env webpack --mode development --progress",
+    "watch": "cross-env webpack --mode development --watch",
+    "build": "cross-env webpack --mode production --progress"
   },
   "keywords": [],
   "author": "",

diff --git a/vue3/webpack.config.js b/vue3/webpack.config.js
@@ -115,9 +115,7 @@ module.exports = (env, options) => {
         exports.optimization = {
             minimizer: [
                 new TerserPlugin({
-                    cache: true,
                     parallel: true,
-                    sourceMap: true,
                     terserOptions: {
                         // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                     }