feat: assessment tree view

src/app/modules/data/list/data-list-item.component.ts

@@ -38,6 +38,8 @@ export class DataListItemComponent {
 
   @Input() favoriteButton = true;
 
+  @Input() lines = 'inset';
+
   @ContentChild(TemplateRef) contentTemplateRef: TemplateRef<
     DataListContext<SCThings>
   >;

src/app/modules/data/list/data-list-item.html

@@ -16,7 +16,7 @@
 <ion-item
   class="ion-text-wrap ion-margin"
   button="true"
-  lines="inset"
+  lines="lines"
   detail="false"
   (click)="notifySelect()"
 >

src/app/modules/data/list/tree-list-fragment.html

@@ -13,20 +13,34 @@
   ~  this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-accordion-group *ngIf="entries as entries" [value]="entries[0]?.[0]">
-  <ion-accordion *ngFor="let entry of entries" [value]="entry[0]">
-    <ion-item *ngIf="groupMap[entry[0]] as header" slot="header">
-      <ion-label>{{ header.name }}</ion-label>
-    </ion-item>
-    <ion-list slot="content">
-      <ng-container *ngFor="let item of entry[1]._ || []">
+<ion-accordion-group
+  *ngIf="entries as entries"
+  [readonly]="true"
+  [value]="entries"
+  [multiple]="true"
+>
+  <ion-accordion *ngFor="let entry of entries" [value]="entry">
+    <div
+      *ngIf="groupMap[entry[0]] as header"
+      slot="header"
+      class="tree-indicator"
+    >
+      <ng-container
+        *ngTemplateOutlet="
+          listItemTemplateRef || defaultListItem;
+          context: {$implicit: header}
+        "
+      ></ng-container>
+    </div>
+    <ion-list slot="content" lines="none">
+      <div *ngFor="let item of entry[1]._ || []" class="tree-indicator">
         <ng-container
           *ngTemplateOutlet="
             listItemTemplateRef || defaultListItem;
             context: {$implicit: item}
           "
         ></ng-container>
-      </ng-container>
+      </div>
       <tree-list-fragment
         [groupMap]="groupMap"
         [items]="entry[1]"

src/app/modules/data/list/tree-list-fragment.scss

@@ -16,3 +16,52 @@
 ion-list {
   margin-left: 16px;
 }
+
+:host ::ng-deep ion-item {
+  pointer-events: auto;
+}
+
+.tree-indicator {
+  overflow: hidden;
+  position: relative;
+}
+
+ion-accordion::before,
+.tree-indicator::before,
+.tree-indicator::after {
+  content: "";
+  display: block;
+
+  background-color: grey;
+
+  z-index: 1000;
+  position: absolute;
+  left: 0;
+}
+
+ion-accordion::before,
+.tree-indicator::before {
+  height: 100%;
+  width: 1px;
+
+  top: 0;
+}
+
+.tree-indicator::after {
+  width: 40px;
+  height: 1px;
+
+  transform: translateX(calc(-50% - 8px));
+  top: 50%;
+}
+
+ion-accordion::after {
+  top: 24px;
+}
+
+ion-accordion:last-of-type::before {
+  height: 24px;
+}
+.tree-indicator:last-of-type::before {
+  height: 50%;
+}