fix: fix tree appearance

Author: manfredsteyer

apps/backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/detective",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "bin": {
     "detective": "./bin/main.js",
     "@softarc/detective": "./bin/main.js"

apps/frontend/src/app/shell/filter-tree/filter-tree.component.css

@@ -1,40 +0,0 @@
-.example-tree-invisible {
-  visibility: hidden;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
-}
-
-.example-tree ul,
-.example-tree li {
-  margin-top: 0;
-  margin-bottom: 0;
-  list-style-type: none;
-  padding-left: 0; 
-}
-
-.example-tree-node {
-  display: block;
-  line-height: 40px;
-  position: relative; 
-}
-
-.example-tree-node .example-tree-node {
-  padding-left: 20px;
-}
-
-mat-icon {
-  vertical-align: middle;
-  margin-top: 2px;
-}
-
-.node-with-children {
-  cursor: pointer;
-}
-
-@supports (-webkit-overflow-scrolling: touch) {
-  .example-tree-node {
-    display: flex; 
-    align-items: center;
-  }
-}

apps/frontend/src/app/shell/filter-tree/filter-tree.component.html

@@ -1,42 +1,31 @@
-<cdk-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
-  <cdk-nested-tree-node
-    #treeNode="cdkNestedTreeNode"
-    *cdkTreeNodeDef="let node"
-    class="example-tree-node"
+<mat-tree #tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
+  <mat-tree-node
+    *matTreeNodeDef="let node"
+    matTreeNodeToggle
+    matTreeNodePadding
   >
+    <button mat-icon-button disabled></button>
     <mat-checkbox
       [checked]="isChecked(node)"
       (change)="onCheckChange(node, $event)"
-    ></mat-checkbox>
-    {{ node.name }}
-  </cdk-nested-tree-node>
+      >{{ node.name }}</mat-checkbox
+    >
+  </mat-tree-node>
 
-  <cdk-nested-tree-node
-    #treeNode="cdkNestedTreeNode"
-    *cdkTreeNodeDef="let node; when: hasChild"
-    [cdkTreeNodeTypeaheadLabel]="node.name"
-    isExpandable
-    class="example-tree-node node-with-children"
-  >
+  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button
-      cdkTreeNodeToggle
       mat-icon-button
-      [attr.aria-label]="'Toggle ' + node.name"
-      cdkTreeNodeToggle
+      matTreeNodeToggle
+      [attr.aria-label]="'toggle ' + node.filename"
     >
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
       </mat-icon>
     </button>
     <mat-checkbox
       [checked]="isChecked(node)"
       (change)="onCheckChange(node, $event)"
-      (click)="$event.stopPropagation()"
-    ></mat-checkbox>
-    <span cdkTreeNodeToggle>{{ node.name }}</span>
-
-    <div [class.example-tree-invisible]="!tree.isExpanded(node)">
-      <ng-container cdkTreeNodeOutlet></ng-container>
-    </div>
-  </cdk-nested-tree-node>
-</cdk-tree>
+      >{{ node.name }}</mat-checkbox
+    >
+  </mat-tree-node>
+</mat-tree>

apps/frontend/src/app/shell/filter-tree/filter-tree.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject, OnInit, viewChild } from '@angular/core';
 import { Folder } from '../../model/folder';
 import { CdkTree, CdkTreeModule } from '@angular/cdk/tree';
-import { MatTreeNestedDataSource } from '@angular/material/tree';
+import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
 import { FolderService } from '../../data/folder.service';
 import { combineLatest, of } from 'rxjs';
 import { MatIconModule } from '@angular/material/icon';
@@ -19,7 +19,7 @@ const MIN_OPEN_LEVEL = 2;
 @Component({
   selector: 'app-filter-tree',
   standalone: true,
-  imports: [CdkTreeModule, MatIconModule, MatButtonModule, MatCheckboxModule],
+  imports: [MatTreeModule, MatIconModule, MatButtonModule, MatCheckboxModule],
   templateUrl: './filter-tree.component.html',
   styleUrl: './filter-tree.component.css',
 })