Merge branch 'auto-collapse' into 'develop'

Start with collapsed nodes

See merge request medina/cce-frontend!3

src/components/Tree.vue

@@ -23,11 +23,19 @@
       <p v-if="hoveredNode?.resource?.weight != null"><b>Resource weight:</b> {{hoveredNode.resource.weight}}</p>
       <p v-if="hoveredNode?.description != null"><b>Description:</b> {{hoveredNode.description}}</p>
     </div>
-    <div style="display: flex;">
+    <div>
+      <span class="btn-group">
         <button class="btn btn-outline-primary" @click="controlScale('bigger')">Zoom in</button>
         <button class="btn btn-outline-primary" @click="controlScale('smaller')">Zoom out</button>
         <button class="btn btn-outline-primary" @click="controlScale('restore')">Reset zoom</button>
+      </span>
+      <span class="btn-group">
+        <button class="btn btn-outline-primary" @click="collapseAll">Collapse all</button>
+        <button class="btn btn-outline-primary" @click="expandAll">Expand all</button>
+      </span>
+      <span class="btn-group">
         <button class="btn btn-outline-success" @click="toogleInstructions">Instructions</button>
+      </span>
     </div>
     <div class="box" id="instructions" v-show="showInstructions">
       <div class="close-button"><i @click="toogleInstructions" title="Close" class="fa fa-solid fa-xmark"></i></div>
@@ -70,6 +78,7 @@ import VueTree from "@ssthouse/vue3-tree-chart";
 import "@ssthouse/vue3-tree-chart/dist/vue3-tree-chart.css";
 import {formatDateHelper} from '../helpers/dataFormat';
 import $ from 'jquery';
+import { collapseExpandTree } from '@/mixins/collapseExpandTree';
 
 export default {
   name: 'Tree',
@@ -77,6 +86,7 @@ export default {
     'vue-tree': VueTree
   },
   props: ['treeData'],
+  mixins: [collapseExpandTree],
   data() {
     return {
       treeConfig: { nodeWidth: 230, nodeHeight: 80, levelHeight: 200 },
@@ -127,6 +137,16 @@ export default {
       this.infoBoxHide(el);
     },
 
+    collapseAll() {
+      this.collapseRecursively(this.$refs.scaleTree.nodeDataList[0].data)
+      this.$refs.scaleTree.draw();
+    },
+
+    expandAll() {
+      this.expandRecursively(this.$refs.scaleTree.nodeDataList[0].data);
+      this.$refs.scaleTree.draw();
+    },
+
     toogleInstructions() {
       this.showInstructions = !this.showInstructions;
     },
@@ -175,7 +195,7 @@ export default {
 
   padding-top: 10px;
   position: fixed;
-  top: 128px;
+  top: 134px;
   min-width: 340px;
   background-color: white;
   border: 1px solid;
@@ -202,9 +222,12 @@ export default {
   }
 }
 
+.btn-group {
+  margin: 3px 3px;
   .btn {
     margin: 5px 5px;
   }
+}
 
 .node-unset {
   background-color: $node-yellow-background;

src/mixins/collapseExpandTree.js

+export const collapseExpandTree = {
+  methods: {
+    collapseRecursively(node) {
+      if(!node.children) {
+        return;
+      }
+    
+      node.children.forEach(i => {
+        this.collapseRecursively(i);
+      });
+      
+      node._children = node.children;
+      node.children = null;
+      node._collapsed = true;
+    },
+
+    collapseAllFromLevel(node, level) {
+      if (level <= 0) {
+        this.collapseRecursively(node);
+      } else {
+        node.children?.forEach(i => {
+          this.collapseAllFromLevel(i, level - 1);
+        });
+      }
+    },                       
+
+    expandRecursively(node) {
+      if (node._children) {
+        node.children = node._children;
+        node._children = null;
+        node._collapsed = false;
+      }
+      node.children?.forEach(n => {
+        this.expandRecursively(n);
+      });
+    },
+  }
+}
\ No newline at end of file

src/store/index.js

 import {createStore} from 'vuex';
 import {ApiService} from '../services/ApiService';
+import { collapseExpandTree } from '../mixins/collapseExpandTree';
 
 const store = createStore({
   state: {
@@ -16,6 +17,9 @@ const store = createStore({
   actions: {
     async getTreeData({commit}) {
       await ApiService.getEvaluationTreeData().then((response) => {
+        // collapse all except root
+        collapseExpandTree.methods.collapseAllFromLevel(response.data.root, 1);
+
         commit('SAVE_TREE_DATA', response.data);
       }).catch((err) => {
         console.log("ERROR at action getTreeData: " + err);