feat: show multiple checkbox instead of button, default is show one

wearefrank · Dec 22, 2023 · 45f7a81 · 45f7a81
1 parent e376aeb
commit 45f7a81
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/src/app/debug/debug-tree/debug-tree.component.css b/src/app/debug/debug-tree/debug-tree.component.css
@@ -23,3 +23,20 @@ input[type=text] {
 input[type=text]:focus {
   width: 30%;
 }
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  margin: 0 1rem 0 auto;
+  font-size: 10pt;
+  cursor: default !important;
+  height: fit-content;
+
+  > input {
+    margin-left: 0.25rem;
+  }
+
+  > label {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/app/debug/debug-tree/debug-tree.component.html b/src/app/debug/debug-tree/debug-tree.component.html
@@ -13,8 +13,11 @@
         <button ngbDropdownItem (click)="downloadReports(true, false)">Binary</button>
       </div>
     </div>
-    <app-button [text]="showOneAtATime ? 'Show multiple' : 'Show one'" (click)="toggleShowAmount()"></app-button>
     <input class="my-2 mx-1 pl-1" type="text" name="search" placeholder="&#xF002;" (keyup)="changeSearchTerm($event)"/>
+    <div class="checkbox btn btn-info my-2" title="When checked, file tree shows multiple files">
+      <label for="show-multiple">Show multiple</label>
+      <input id="show-multiple" [checked]="showMultipleAtATime" type="checkbox" (change)="toggleShowAmount()">
+    </div>
   </div>
   <jqxTree id="debug-tree" #treeReference (onSelect)="selectReport($event)" [auto-create]="false"></jqxTree>
 </div>
diff --git a/src/app/debug/debug-tree/debug-tree.component.ts b/src/app/debug/debug-tree/debug-tree.component.ts
@@ -15,9 +15,11 @@ export class DebugTreeComponent implements AfterViewInit {
   @Output() selectReportEvent = new EventEmitter<any>();
   @Output() closeEntireTreeEvent = new EventEmitter<any>();
   loaded: boolean = false;
-  showOneAtATime: boolean = false;
+  showMultipleAtATime: boolean = false;
   private _currentView: any;
 
+  private lastReport?: Report;
+
   @Input() set currentView(value: any) {
     if (this.loaded && this._currentView !== value) {
       // TODO: Check if the current reports are part of the view
@@ -43,7 +45,7 @@ export class DebugTreeComponent implements AfterViewInit {
     });
   }
 
-  hideOrShowCheckpointsBasedOnView(currentView: any) {
+  hideOrShowCheckpointsBasedOnView(currentView: any): void {
     this.getTreeReports().forEach((report) => {
       if (report.value.storageName === currentView.storageName) {
         this.httpService
@@ -60,13 +62,13 @@ export class DebugTreeComponent implements AfterViewInit {
     });
   }
 
-  prepareNextSelect(unmatched: string[], selectedReport: any) {
+  prepareNextSelect(unmatched: string[], selectedReport: any): void {
     if (unmatched.includes(selectedReport.value.uid)) {
       this.recursivelyFindParentThatWontBeDeleted(selectedReport, unmatched);
     }
   }
 
-  hideCheckpoints(unmatched: string[], children: any[]) {
+  hideCheckpoints(unmatched: string[], children: any[]): void {
     if (unmatched.length > 0) {
       children.forEach((node: any) => {
         let oki: any = this.treeReference.getItem(node);
@@ -86,17 +88,27 @@ export class DebugTreeComponent implements AfterViewInit {
     }
   }
 
-  adjustTreeWidth() {
+  adjustTreeWidth(): void {
     this.treeReference.width('100%');
   }
 
   toggleShowAmount(): void {
-    this.showOneAtATime = !this.showOneAtATime;
+    this.showMultipleAtATime = !this.showMultipleAtATime;
+    if (!this.showMultipleAtATime) {
+      this.removeAllReportsButOne();
+    }
+  }
+
+  removeAllReportsButOne(): void {
+    if (this.lastReport) {
+      this.addReportToTree(this.lastReport);
+    }
   }
 
   addReportToTree(report: Report): void {
+    this.lastReport = report;
     let tree = this.helperService.convertReportToJqxTree(report);
-    if (this.showOneAtATime) {
+    if (!this.showMultipleAtATime) {
       this.treeReference.clear();
     }
 
@@ -153,7 +165,7 @@ export class DebugTreeComponent implements AfterViewInit {
     this.helperService.download(queryString, this.currentView.storageName, exportBinary, exportXML);
   }
 
-  changeSearchTerm(event: KeyboardEvent) {
+  changeSearchTerm(event: KeyboardEvent): void {
     const term: string = (event.target as HTMLInputElement).value.toLowerCase();
     this.treeReference.getItems().forEach((item: jqwidgets.TreeItem) => {
       const report = item.value as unknown as Report & { message?: string | null };
@@ -171,7 +183,7 @@ export class DebugTreeComponent implements AfterViewInit {
     });
   }
 
-  getTreeReports() {
+  getTreeReports(): any[] {
     let reports: any[] = [];
     this.treeReference.getItems().forEach((item: any) => {
       if (item.value?.storageId != undefined) {