FEAT #14456 TIME 1 fix tree line + fix current bg selected

src/frontend/app/administration/parameter/customization/parameters-customization.component.html

@@ -27,7 +27,7 @@
         <br />
         <div>{{'lang.chooseLoginBg' | translate}} : </div>
         <div class="backgroundList">
-            <mat-card (click)="selectBg('../rest/images?image=loginPage')" style="opacity: 0.3;" class="backgroundItem"
+            <mat-card style="opacity: 0.3;" class="backgroundItem"
                 [class.disabled]="stepFormGroup.controls['bodyImage'].disabled"
                 [class.selected]="stepFormGroup.controls['bodyImage'].value === '../rest/images?image=loginPage'"
                 style="background:url(../rest/images?image=loginPage);background-size: cover;">

src/frontend/plugins/tree/maarch-flat-tree.component.ts

@@ -141,8 +141,11 @@ export class MaarchFlatTreeComponent implements OnInit {
             };
         });
 
-        let FlatToNested, flatToNested;
+        // order data
+        this.rawData = this.sortPipe.transform(this.rawData, 'text');
 
+        // Convert flat data to nested data
+        let FlatToNested, flatToNested;
         FlatToNested = require('flat-to-nested');
         flatToNested = new FlatToNested({
             id: 'id',
@@ -150,14 +153,17 @@ export class MaarchFlatTreeComponent implements OnInit {
             children: 'children',
             options : { deleteParent: false }
         });
-
-        this.rawData = this.sortPipe.transform(this.rawData, 'text');
         let nestedData = flatToNested.convert(this.rawData);
         nestedData = nestedData.children;
 
+        // Set last child of children nodes to fix css tree lines
+        this.initLastNodes(nestedData);
+
+        // Set data to tree
         this.dataSource.data = nestedData;
         this.treeControl.dataNodes = nestedData;
 
+        // Set search filter
         this.searchTerm.valueChanges
             .pipe(
                 debounceTime(300),
@@ -307,6 +313,25 @@ export class MaarchFlatTreeComponent implements OnInit {
         }
     }
 
+    initLastNodes(data) {
+        // traverse throuh each node
+        if (Array.isArray(data)) { // if data is an array
+            data.forEach((d, index) => {
+                if (index === data.length - 1) {
+                    d.last = true;
+                }
+                this.initLastNodes(d);
+            }); // call the function on each item
+        } else if (data instanceof Object) { // otherwise, if data is an object
+            (data.children || []).forEach((f, index) => {
+                if (index === data.children.length - 1) {
+                    f.last = true;
+                }
+                this.initLastNodes(f);
+            }); // and call function on each child
+        }
+    }
+
     getSelectedNodes() {
         return this.rawData.filter((data: any) => data.state.selected);
     }