feat: show multiple files settings button is moved to settings modal

cypress/support/commands.ts

@@ -147,13 +147,8 @@ Cypress.Commands.add(
   (node) => selectIfNotSelected(node)
 );
 
-function enableShowMultiple() {
-  cy.get('[data-cy-record-table-index="0"]').click();
+Cypress.Commands.add('enableShowMultipleInDebugTree' as keyof Chainable, () => {
+  cy.get('[data-cy-open-settings-modal]').click();
   cy.get('input[data-cy-toggle-show-amount]').click();
-  cy.get('button#CloseAllButton').click();
-}
-
-Cypress.Commands.add(
-  'enableShowMultipleInDebugTree' as keyof Chainable,
-  enableShowMultiple
-);
+  cy.get('[data-cy-settings-modal-save-changes]').click();
+});

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { Report } from './shared/interfaces/report';
 import { TestComponent } from './test/test.component';
 import { DynamicService } from './shared/services/dynamic.service';
 import { CompareData } from './compare/compare-data';
+import { SettingsService } from './shared/services/settings.service';
 
 declare var require: any;
 const { version: appVersion } = require('../../package.json');
@@ -31,7 +32,9 @@ export class AppComponent implements AfterViewInit {
     private inj: Injector,
     private titleService: Title,
     private httpService: HttpService,
-    private dynamicService: DynamicService
+    private dynamicService: DynamicService,
+    //make sure settings are retrieved from localstorage on startup by initializing the service on startup
+    private settingsService: SettingsService
   ) {
     this.appVersion = appVersion;
     this.titleService.setTitle('Ladybug - v' + this.appVersion);

src/app/app.module.ts

@@ -25,7 +25,7 @@ import { CookieService } from 'ngx-cookie-service';
 import { jqxTreeModule } from 'jqwidgets-ng/jqxtree';
 import { CompareTreeComponent } from './compare/compare-tree/compare-tree.component';
 import { EditDisplayComponent } from './report/edit-display/edit-display.component';
-import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { DebugTreeComponent } from './debug/debug-tree/debug-tree.component';
 import { ToggleComponent } from './shared/components/toggle/toggle.component';
 import { EditorComponent } from './shared/components/editor/editor.component';

src/app/debug/debug-tree/debug-tree.component.css

@@ -24,19 +24,3 @@ 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;
-  }
-}

src/app/debug/debug-tree/debug-tree.component.html

@@ -14,10 +14,6 @@
       </div>
     </div>
     <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 data-cy-toggle-show-amount id="show-multiple" [checked]="showMultipleAtATime" type="checkbox" (change)="toggleShowAmount()">
-    </div>
   </div>
   <jqxTree id="debug-tree" #treeReference (onSelect)="selectReport($event)" [auto-create]="false"></jqxTree>
 </div>

src/app/debug/debug-tree/debug-tree.component.ts

@@ -1,21 +1,23 @@
-import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { Report } from '../../shared/interfaces/report';
 import { jqxTreeComponent } from 'jqwidgets-ng/jqxtree';
 import { HelperService } from '../../shared/services/helper.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { HttpService } from '../../shared/services/http.service';
+import { SettingsService } from '../../shared/services/settings.service';
 
 @Component({
   selector: 'app-debug-tree',
   templateUrl: './debug-tree.component.html',
   styleUrls: ['./debug-tree.component.css'],
 })
-export class DebugTreeComponent implements AfterViewInit {
+export class DebugTreeComponent implements AfterViewInit, OnDestroy {
   @ViewChild('treeReference') treeReference!: jqxTreeComponent;
   @Output() selectReportEvent = new EventEmitter<any>();
   @Output() closeEntireTreeEvent = new EventEmitter<any>();
   loaded: boolean = false;
-  showMultipleAtATime: boolean = false;
+  showMultipleAtATime!: boolean;
+  showMultipleAtATimeSubscription!: Subscription;
   private _currentView: any;
 
   private lastReport?: Report;
@@ -34,7 +36,25 @@ export class DebugTreeComponent implements AfterViewInit {
 
   @Input() adjustWidth: Observable<void> = {} as Observable<void>;
 
-  constructor(private helperService: HelperService, private httpService: HttpService) {}
+  constructor(
+    private helperService: HelperService,
+    private httpService: HttpService,
+    private settingsService: SettingsService
+  ) {
+    this.subscribeToSettingsServiceObservables();
+  }
+
+  ngOnDestroy() {
+    this.showMultipleAtATimeSubscription.unsubscribe();
+  }
+
+  subscribeToSettingsServiceObservables(): void {
+    this.showMultipleAtATimeSubscription = this.settingsService.showMultipleAtATimeObservable.subscribe(
+      (value: boolean) => {
+        this.showMultipleAtATime = value;
+      }
+    );
+  }
 
   ngAfterViewInit(): void {
     setTimeout(() => {

src/app/debug/table/table-settings-modal/table-settings-modal.component.css

@@ -1,3 +1,21 @@
 .fa-info-circle:hover {
   cursor: pointer;
 }
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /*margin: 0 1rem 0 0;*/
+  /*font-size: 10pt;*/
+  cursor: default !important;
+  height: fit-content;
+
+  > input {
+    margin-left: 0.25rem;
+  }
+
+  > label {
+    margin-bottom: 0;
+  }
+}

src/app/debug/table/table-settings-modal/table-settings-modal.component.html

@@ -1,20 +1,33 @@
-<ng-template #modal let-modal >
+<ng-template #modal let-modal>
   <div class="modal-header">
     <h5 class="modal-title" id="settingsModal">Options</h5>
     <button id="debugSettingsModalClose" type="button" class="close" (click)="modal.dismiss()">
       <span>&times;</span>
     </button>
   </div>
 
-  <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()" >
+  <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
+
     <div class="modal-body container">
+      <div class="form-group">
+        <h5>Debug tree</h5>
+        <div class="checkbox " title="When checked, file tree shows multiple files">
+          <label for="show-multiple">Show multiple files in debug file-tree</label>
+          <input class="btn btn-info my-2 p-1 w-fit" data-cy-toggle-show-amount id="show-multiple"
+                 [checked]="showMultipleAtATime" type="checkbox"
+                 (change)="setShowMultipleAtATime()">
+        </div>
+      </div>
+      <hr>
       <div class="form-group">
         <label>Report generator</label>
         <select class="form-control custom-select mr-sm-2" formControlName="generatorEnabled">
           <option>Enabled</option>
           <option>Disabled</option>
         </select>
       </div>
+
+
       <div class="form-group">
         <label for="openLatestReports">Open latest reports</label>
         <div class="input-group">
@@ -41,7 +54,7 @@ <h5 class="modal-title" id="settingsModal">Options</h5>
 
 Example 3 (only store report when name doesn't start with Hello World):
 ^(?!Hello World).*"
-          class="form-control" formControlName="regexFilter"/>
+                 class="form-control" formControlName="regexFilter"/>
         </div>
       </div>
       <div class="dropdown-divider"></div>
@@ -52,14 +65,18 @@ <h5 class="modal-title" id="settingsModal">Options</h5>
         </label>
       </div>
       <div class="form-group">
-        <label>Transformation <i class="fa fa-info-circle" title="To see the change of the transformation, please reopen the current report or open a new one."></i></label>
+        <label>Transformation <i class="fa fa-info-circle"
+                                 title="To see the change of the transformation, please reopen the current report or open a new one."></i></label>
         <textarea class="form-control" rows="10" formControlName="transformation"></textarea>
       </div>
     </div>
     <div class="modal-footer">
-      <button title="Reset and save factory settings" type="button" class="btn btn-info" (click)="factoryReset()"><i class="fa fa-refresh"></i></button>
-      <button title="Revert changes" type="button" class="btn btn-info" (click)="loadSettings()"><i class="fa fa-undo"></i></button>
-      <button title="Save changes" type="submit" id="saveTableSettings" class="btn btn-info" (click)="modal.dismiss()"><i class="fa fa-save"></i></button>
+      <button title="Reset and save factory settings" type="button" class="btn btn-info" (click)="factoryReset()"><i
+        class="fa fa-refresh"></i></button>
+      <button title="Revert changes" type="button" class="btn btn-info" (click)="loadSettings()"><i
+        class="fa fa-undo"></i></button>
+      <button data-cy-settings-modal-save-changes title="Save changes" type="submit" id="saveTableSettings"
+              class="btn btn-info" (click)="modal.dismiss()"><i class="fa fa-save"></i></button>
     </div>
   </form>
 </ng-template>

src/app/debug/table/table-settings-modal/table-settings-modal.component.ts

@@ -1,16 +1,18 @@
-import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { HttpService } from '../../../shared/services/http.service';
 import { CookieService } from 'ngx-cookie-service';
 import { ToastComponent } from '../../../shared/components/toast/toast.component';
+import { SettingsService } from '../../../shared/services/settings.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-table-settings-modal',
   templateUrl: './table-settings-modal.component.html',
   styleUrls: ['./table-settings-modal.component.css'],
 })
-export class TableSettingsModalComponent {
+export class TableSettingsModalComponent implements OnDestroy {
   @ViewChild('modal') modal!: ElementRef;
   settingsForm = new UntypedFormGroup({
     generatorEnabled: new UntypedFormControl('Enabled'),
@@ -22,8 +24,33 @@ export class TableSettingsModalComponent {
   @Output() openLatestReportsEvent = new EventEmitter<any>();
   @ViewChild(ToastComponent) toastComponent!: ToastComponent;
   saving: boolean = false;
+  showMultipleAtATime!: boolean;
+  showMultipleAtATimeSubscription!: Subscription;
 
-  constructor(private modalService: NgbModal, private httpService: HttpService, private cookieService: CookieService) {}
+  constructor(
+    private modalService: NgbModal,
+    private httpService: HttpService,
+    private cookieService: CookieService,
+    private settingsService: SettingsService
+  ) {
+    this.subscribeToSettingsServiceObservables();
+  }
+
+  ngOnDestroy() {
+    this.showMultipleAtATimeSubscription.unsubscribe();
+  }
+
+  subscribeToSettingsServiceObservables() {
+    this.showMultipleAtATimeSubscription = this.settingsService.showMultipleAtATimeObservable.subscribe(
+      (value: boolean) => {
+        this.showMultipleAtATime = value;
+      }
+    );
+  }
+
+  setShowMultipleAtATime() {
+    this.settingsService.setShowMultipleAtATime(!this.showMultipleAtATime);
+  }
 
   open(): void {
     this.loadSettings();

src/app/debug/table/table.component.html

@@ -1,7 +1,7 @@
 <div class="row" id="tableContent" *ngIf="tableSettings.tableLoaded">
   <div class="row">
     <app-button [icon]="'fa fa-refresh'" [title]="'Refresh'" (click)="refresh()"></app-button>
-    <app-button [icon]="'fa fa-cog'" [title]="'Settings'" (click)="openSettingsModal()"></app-button>
+    <app-button data-cy-open-settings-modal [icon]="'fa fa-cog'" [title]="'Settings'" (click)="openSettingsModal()"></app-button>
     <app-button [icon]="'fa fa-filter'" [title]="'Filter'" (click)="toggleFilter()"></app-button>
     <div ngbDropdown title="Download">
       <button class="btn btn-info my-2 mx-1" id="dropdownDownloadTable" ngbDropdownToggle>

src/app/shared/services/settings.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SettingsService } from './settings.service';
+
+describe('SettingsService', () => {
+  let service: SettingsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SettingsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/services/settings.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SettingsService {
+  constructor() {
+    this.loadSettingsFromLocalStorage();
+  }
+
+  //Show multiple files in debug tre
+  private showMultipleAtATimeKey: string = 'showMultipleFilesAtATime';
+  private showMultipleAtATime: boolean = false;
+  private showMultipleAtATimeSubject: Subject<boolean> = new ReplaySubject(1);
+  public showMultipleAtATimeObservable: Observable<boolean> = this.showMultipleAtATimeSubject.asObservable();
+
+  public setShowMultipleAtATime(value: boolean): void {
+    this.showMultipleAtATime = value;
+    this.showMultipleAtATimeSubject.next(this.showMultipleAtATime);
+    localStorage.setItem(this.showMultipleAtATimeKey, String(this.showMultipleAtATime));
+  }
+
+  private loadSettingsFromLocalStorage(): void {
+    this.setShowMultipleAtATime(Boolean(localStorage.getItem(this.showMultipleAtATimeKey)));
+  }
+}

src/styles.css

@@ -134,3 +134,11 @@ html, body {
 .modal-backdrop {
   z-index: 1 !important;
 }
+
+.w-fit {
+  width: fit-content;
+}
+
+.h-fit {
+  height: fit-content;
+}