Adding filtering

src/app/method-list/subsystem-item/subsystem-item.component.html

 <div class="card-header pointerCursor" (click)="isHidden = !isHidden">
-    {{subsystemName}}
+    {{subsystem.fullSubsystemName}}
     <span class="badge badge-secondary" *ngIf="!subsystem.methods.length && subsystem.subsystemStatus == 'OK'">Empty</span>
     <span class="badge badge-danger" *ngIf="subsystem.subsystemStatus == 'ERROR'">Error</span>
   </div>
@@ -8,8 +8,9 @@
   </div>
   <div class="card-body" [hidden]="isHidden" *ngIf="subsystem.methods.length">
     <p *ngFor="let method of subsystem.methods">
-      {{subsystemName}}/{{method.serviceCode}}/{{method.serviceVersion}}
-      <a href="{{methodsService.apiUrlBase}}{{method.wsdl}}" class="badge badge-success" *ngIf="method.wsdl">WSDL</a>
+      {{method.fullMethodName}}
+      <a href="{{methodsService.apiUrlBase}}{{method.wsdl}}" class="badge badge-success"
+        *ngIf="method.wsdl">WSDL</a>
       <span class="badge badge-danger" *ngIf="!method.wsdl">Error while downloading or parsing of WSDL</span>
     </p>
   </div>

src/app/method-list/subsystem-item/subsystem-item.component.ts

@@ -10,14 +10,25 @@ import { MethodsService } from '../../methods.service';
 export class SubsystemItemComponent implements OnInit {
 
   @Input() subsystem: Subsystem;
-  subsystemName: string;
   isHidden: boolean = true;
 
-  constructor(private methodsService: MethodsService) { }
+  constructor(private methodsService: MethodsService) {
+    // Service will tell when detail should be opened or closed
+    this.methodsService.hideDetails.subscribe(signal => {
+      if (signal) {
+        this.isHidden = true
+      } else if (this.subsystem.methods.length) {
+        // Force opening only subsystems with methods
+        this.isHidden = false
+      }
+    });
+  }
 
   ngOnInit() {
-    this.subsystemName = this.subsystem.xRoadInstance + '/' + this.subsystem.memberClass
-      + '/' + this.subsystem.memberCode + '/' + this.subsystem.subsystemCode
+    // New component asks service if detail should be opened or closed
+    if (this.subsystem.methods.length) {
+      // Force opening only subsystems with methods
+      this.isHidden = this.methodsService.getHideDetails()
+    }
   }
-
 }

src/app/method.ts

@@ -3,4 +3,5 @@ export class Method {
     serviceCode: string;
     wsdl: string;
     serviceVersion: string;
+    fullMethodName: string;
 }

src/app/methods.service.ts

@@ -3,22 +3,25 @@ import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { Subsystem } from './subsystem';
+import { Method } from './method';
 
 @Injectable({
   providedIn: 'root'
 })
 export class MethodsService {
 
-  //private apiUrlBase = 'https://www.x-tee.ee/catalogue/EE/wsdls/';
-  public apiUrlBase = 'http://localhost/';
+  private apiUrlBase = 'https://www.x-tee.ee/catalogue/EE/wsdls/';
+  //public apiUrlBase = 'http://localhost/';
   private limit: number = 10;
   private offset: number = 0;
   private nonEmpty: boolean = false;
+  private filter: string = "";
   private apiService = 'index.json';
   private apiUrl = this.apiUrlBase + this.apiService;
   private subsystems: Subsystem[];
 
   @Output() subsystemsUpdated: EventEmitter<any> = new EventEmitter();
+  @Output() hideDetails: EventEmitter<boolean> = new EventEmitter();
 
   constructor(private http: HttpClient) {
     this.http.get<Subsystem[]>(this.apiUrl)
@@ -26,6 +29,7 @@ export class MethodsService {
       catchError(this.handleError('getMethods', []))
     ).subscribe(subsystems => {
       this.subsystems = subsystems;
+      this.setFullNames();
       this.signalRefresh();
     })
   }
@@ -34,14 +38,69 @@ export class MethodsService {
     this.subsystemsUpdated.emit(null);
   }
 
-  private filtered(data: Subsystem[]): Subsystem[] {
-    return data
-      .filter(subsystem => (!this.nonEmpty || subsystem.methods.length))
-      .slice(this.offset, this.limit);
+  private signalHideDetails(signal: boolean) {
+    this.hideDetails.emit(signal);
+  }
+
+  private filteredSubsystems(): Subsystem[] {
+    let filtered: Subsystem[] = []
+    let limit: number = this.limit
+    for (let subsystem of this.subsystems) {
+      if (this.nonEmpty && !subsystem.methods.length) {
+        // Filtering out empty subsystems
+        continue
+      }
+      if (
+        this.filter != ''
+        && !subsystem.methods.length
+      ) {
+        // Subsystem without methods
+        if (subsystem.fullSubsystemName.toLowerCase().indexOf(this.filter.toLowerCase()) < 0) {
+          // Subsystem name does not match the filter
+          continue
+        }
+      } else if (this.filter != '') {
+        // Subsystem with methods
+        let filteredMethods: Method[] = []
+        for (let method of subsystem.methods) {
+          if(method.fullMethodName.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0) {
+            filteredMethods.push(method)
+          }
+        }
+        if (!filteredMethods.length) {
+          // No matching method names found
+          continue
+        }
+        // Leaving only matcing methods
+        subsystem.methods = filteredMethods
+      }
+
+      filtered.push(subsystem)
+      limit -= 1
+      if (limit == 0) {
+        break
+      }
+    }
+
+    return filtered.slice(this.offset, this.limit);
+  }
+
+  private setFullNames() {
+    for (let i in this.subsystems) {
+      this.subsystems[i].fullSubsystemName = this.subsystems[i].xRoadInstance
+        + '/' + this.subsystems[i].memberClass
+        + '/' + this.subsystems[i].memberCode
+        + '/' + this.subsystems[i].subsystemCode
+      for (let j in this.subsystems[i].methods) {
+        this.subsystems[i].methods[j].fullMethodName = this.subsystems[i].fullSubsystemName
+        + '/' + this.subsystems[i].methods[j].serviceCode
+        + '/' + this.subsystems[i].methods[j].serviceVersion
+      }
+    }
   }
 
   getMethods(): Subsystem[] {
-    return this.filtered(this.subsystems);
+    return this.filteredSubsystems();
   }
 
   setNonEmpty(nonEmpty: boolean) {
@@ -66,6 +125,27 @@ export class MethodsService {
     this.signalRefresh();
   }
 
+  setFilter(filter: string) {
+    if (this.filter != filter.trim()) {
+      if (filter.trim() == '') {
+        // Always close methods when filter is deleted
+        this.signalHideDetails(true)
+      } else {
+        // Always open methods when filter is inserted
+        this.signalHideDetails(false)
+      }
+      this.filter = filter.trim();
+      this.signalRefresh();
+    }
+  }
+
+  getHideDetails(): boolean {
+    if (this.filter == '') {
+      return true
+    } else {
+      return false
+    }
+  }
 
   /**
    * Handle Http operation that failed.

src/app/search.service.spec.ts

-import { TestBed } from '@angular/core/testing';
-
-import { SearchService } from './search.service';
-
-describe('SearchService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: SearchService = TestBed.get(SearchService);
-    expect(service).toBeTruthy();
-  });
-});

src/app/search.service.ts

-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SearchService {
-
-  constructor() { }
-}

src/app/search/search.component.html

@@ -5,19 +5,24 @@
   <div class="card-body">
     <div class="form-group form-check">
       <input type="checkbox" class="form-check-input" id="exampleCheck1" 
-      [(ngModel)]="nonEmpty" (change)="methodsService.setNonEmpty(nonEmpty)">
+        [(ngModel)]="nonEmpty" (change)="setNonEmpty(nonEmpty)">
       <label class="form-check-label" for="exampleCheck1">Show only producer subsystems</label>
     </div>
     <div class="form-group">
       <label for="exampleFormControlSelect1">Amount of subsystems to display</label>
       <select class="form-control" id="exampleFormControlSelect1"
-      [(ngModel)]="limit" (change)="methodsService.setLimit(limit)">
+        [(ngModel)]="limit" (change)="setLimit(limit)">
         <option>10</option>
         <option>20</option>
         <option>50</option>
         <option>All</option>
       </select>
     </div>
+    <div class="form-group">
+      <label for="exampleFormControlInput1">Filter by method name</label>
+      <input type="text" class="form-control" id="exampleFormControlInput1"
+        [(ngModel)]="filter" (ngModelChange)="setFilter(filter)">
+    </div>
   </div>
 </div>
 <br>
\ No newline at end of file

src/app/search/search.component.ts

@@ -9,11 +9,24 @@ import { MethodsService } from '../methods.service';
 export class SearchComponent implements OnInit {
 
   nonEmpty: boolean = false
-  limit: number = 10
+  limit: string = '10'
+  filter: string = ''
 
   constructor(private methodsService: MethodsService) { }
 
   ngOnInit() {
   }
 
+  setNonEmpty(nonEmpty: boolean) {
+    this.methodsService.setNonEmpty(nonEmpty)
+  }
+
+  setLimit(limit: string) {
+    this.methodsService.setLimit(limit)
+  }
+
+  setFilter(filter: string) {
+    this.methodsService.setFilter(filter)
+  }
+
 }

src/app/subsystem.ts

@@ -6,5 +6,6 @@ export class Subsystem {
     xRoadInstance: string;
     subsystemStatus: string;
     memberCode: string;
+    fullSubsystemName: string;
     methods: Method[];
 }