adding filter by type on route list

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { RouteDetailComponent } from './routes/route-detail/route-detail.compone
 import { RouteEditComponent } from './routes/routes-edit/route-edit.component';
 import { RouteDeleteComponent } from './routes/route-delete/route-delete.component';
 import { RouteSearchComponent } from './routes/route-search/route-search.component';
+import { RouteFilterComponent } from './routes/route-filter/route-filter.component';
 
 
 @NgModule({
@@ -49,7 +50,8 @@ import { RouteSearchComponent } from './routes/route-search/route-search.compone
     RouteDetailComponent,
     RouteEditComponent,
     RouteDeleteComponent,
-    RouteSearchComponent
+    RouteSearchComponent,
+    RouteFilterComponent
 
 
   ],

src/app/navbar/navbar.component.html

@@ -22,7 +22,7 @@
         <a class="nav-link dropdown-toggle" id="routeDropdown" role="button"
            aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Routes</a>
         <div class="dropdown-menu" aria-labelledby="routeDropdown" ngbDropdownMenu>
-          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+          <a class="dropdown-item" *ngIf="isRole('user')" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
              [routerLink]="['/routes/create']"><span class="fas fa-user-circle"></span> Create</a>
           <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
              [routerLink]="['/routes']"><span class="fas fa-user-circle"></span> List</a>

src/app/routes/route-create/route-create.component.html

@@ -25,8 +25,8 @@
     <!-- Type selection -->
     <div class="form-group mb-3">
       <label class="control-label" for="type">Type</label>
-      <select class="form-select" aria-label="type" id="type" name="type" [(ngModel)]="route.type" #type="ngModel" required>
-        <option *ngFor="let typ of types" value="{{typ}}">{{typ}}</option>
+      <select class="form-select" aria-label="type" id="type" name="type" [(ngModel)]="route.type" #type="ngModel">
+        <option *ngFor="let typ of types;let i=index" [value]="typ" [selected]="i === 0">{{typ}}</option>
       </select>
     </div>
 

src/app/routes/route-create/route-create.component.ts

@@ -40,7 +40,7 @@ export class RouteCreateComponent implements OnInit {
     this.creationDate = new Date();
     this.http.get<any>(`${environment.API}/profile/routes`)
       .subscribe(data => {
-        this.types = (data.alps.descriptor[0].descriptor[2].doc.value).split(',');
+        this.types = (data.alps.descriptor[0].descriptor[2].doc.value).split(',').sort();
       });
 
     this.userService.getPage({ pageParams:  { size: this.pageSize }, sort: { username: 'ASC' } }).subscribe(
@@ -64,9 +64,4 @@ export class RouteCreateComponent implements OnInit {
   isRole(role: string): boolean {
     return this.authenticationService.isRole(role);
   }
-
-  defaultRoute(endpoint: string): string {
-    //return `http://192.168.1.95:8080/${endpoint}`;
-    return `http://localhost:8080/${endpoint}`;
-  }
 }

src/app/routes/route-filter/route-filter.component.html

@@ -0,0 +1,12 @@
+<div class="input-group mb-3">
+  <div class="input-group-prepend">
+    <label class="input-group-text" for="type">Filter routes by type: </label>
+  </div>
+  <select id="type" class="form-control custom-select"
+          (change)="filterRoutes($event.target.value)">
+    <option *ngFor="let type of types;let i = index"
+            [value]="type"
+            [selected]="i === 0">
+      {{type}}</option>
+  </select>
+</div>

src/app/routes/route-filter/route-filter.component.ts

@@ -0,0 +1,61 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import {RouteService} from "../route.service";
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+import {Route} from "../route";
+import {environment} from "../../../environments/environment";
+import {HttpClient} from "@angular/common/http";
+import {User} from "../../login-basic/user";
+
+@Component({
+  selector: 'app-route-filter',
+  templateUrl: './route-filter.component.html',
+  styleUrls: ['./route-filter.component.css']
+})
+export class RouteFilterComponent {
+  @Output() emitResults: EventEmitter<Route> = new EventEmitter();
+  private routes: Array<Route>;
+  public types: [];
+  private pageSize: 5;
+  private routesPagedResource: PagedResourceCollection<Route>;
+
+  constructor(private routeService: RouteService, private http: HttpClient) {
+    this.http.get<any>(`${environment.API}/profile/routes`)
+      .subscribe(data => {
+        this.types = (data.alps.descriptor[0].descriptor[2].doc.value).split(',').sort().reverse();
+        // @ts-ignore
+        this.types.push('Choose a type to filter');
+        this.types.reverse()
+      });
+  }
+
+  filterRoutes(type: String) {
+    if (typeof type === 'string' &&   type.trim() != 'Choose a type to filter') {
+      this.routeService.findByType(type)
+        .subscribe((page: PagedResourceCollection<Route>) => {
+          this.routes = page.resources;
+          this.routesPagedResource = page;
+          this.routes.map(routes => {
+            routes.getRelation('createdBy')
+              .subscribe((user: User) => {
+                routes.createdBy = user;
+              });
+          });
+          this.emitResults.emit(this.routesPagedResource as any);
+        });
+    }
+    else {
+      this.routeService.getPage({ pageParams: { size: this.pageSize }, sort: { username: 'ASC' } }).subscribe(
+        (page: PagedResourceCollection<Route>) => {
+          this.routes = page.resources;
+          this.routesPagedResource = page;
+          this.routes.map(routes => {
+            routes.getRelation('createdBy')
+              .subscribe((user: User) => {
+                routes.createdBy = user;
+              });
+          });
+          this.emitResults.emit(this.routesPagedResource as any);
+        });
+    }
+  }
+}

src/app/routes/route-list/route-list.component.html

@@ -1,4 +1,7 @@
-<app-route-search (emitResults)="detail($event)"></app-route-search>
+<div class="row">
+<app-route-search class="col-lg-6 col-md-6 col-sm-12 col-xs-12" (emitResults)="detail($event)"></app-route-search>
+<app-route-filter class="col-lg-6 col-md-6 col-sm-12 col-xs-12" (emitResults)="reBind($event)"></app-route-filter>
+</div>
 <div class="row">
   <hr class="my-3">
 </div>

src/app/routes/route-list/route-list.component.ts

@@ -5,6 +5,10 @@ import { Route } from '../route';
 import { PagedResourceCollection } from '@lagoshny/ngx-hateoas-client';
 import { User } from 'src/app/login-basic/user';
 import { AuthenticationBasicService } from 'src/app/login-basic/authentication-basic.service';
+import {map} from "rxjs/operators";
+import {environment} from "../../../environments/environment";
+import {HttpClient} from "@angular/common/http";
+import {routes} from "../../login-basic/login-basic.routing";
 
 @Component({
   selector: 'app-routes-list',
@@ -18,15 +22,22 @@ export class RouteListComponent implements OnInit {
   public pageSize = 5;
   public page = 1;
   public totalRoutes = 0;
+  public types: [];
+  public type: string;
 
 
   constructor(
     public router: Router,
     private routesService: RouteService,
-    private authenticationService: AuthenticationBasicService) {
+    private authenticationService: AuthenticationBasicService,
+    private http: HttpClient) {
   }
 
   ngOnInit(): void {
+    this.http.get<any>(`${environment.API}/profile/routes`)
+      .subscribe(data => {
+        this.types = (data.alps.descriptor[0].descriptor[2].doc.value).split(',');
+      });
     this.routesService.getPage({ pageParams: { size: this.pageSize }, sort: { username: 'ASC' } }).subscribe(
       (page: PagedResourceCollection<Route>) => {
       this.routes = page.resources;
@@ -75,7 +86,10 @@ export class RouteListComponent implements OnInit {
   }
 
   detail(route: Route): void {
-    console.log(route.id);
     this.router.navigate([route.uri]);
   }
+
+  reBind(routes: any): void {
+    this.modifyList(routes);
+  }
 }

src/app/routes/route-search/route-search.component.html

@@ -1,10 +1,12 @@
-<div class="col form-group">
+<div class="input-group mb-3 form-group">
+  <div class="input-group-prepend">
+    <span class="input-group-text" id="basic-addon1">Search all routes by Title</span>
+  </div>
   <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
-         [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search all routes"
+         [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search all routes by title"
          [class.loading]="searching" (selectItem)="select($event.item)"/>
   <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
 </div>
-
 <ng-template #rt let-r="result" let-t="term">
   <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
   <div class="row"><small>{{r.title}}</small></div>

src/app/routes/route-search/route-search.component.ts

@@ -14,6 +14,7 @@ export class RouteSearchComponent {
   @Output() emitResults: EventEmitter<Route> = new EventEmitter();
   searchFailed = false;
   searching = false;
+  minLength = 3;
 
   constructor(private routeService: RouteService) {
   }
@@ -23,7 +24,7 @@ export class RouteSearchComponent {
       debounceTime(500),
       distinctUntilChanged(),
       tap(() => this.searching = true),
-      switchMap(term => term.length < 3 ? of([]) :
+      switchMap(term => term.length < this.minLength ? of([]) :
         this.routeService.findByTitleContainingIgnoreCase(term).pipe(
           map((collection: ResourceCollection<Route>) => collection.resources),
           tap(() => this.searchFailed = false),

src/app/routes/route.service.ts

@@ -21,4 +21,8 @@ export class RouteService extends HateoasResourceOperation<Route> {
   public findByTitleContainingIgnoreCase(title: string): Observable<ResourceCollection<Route>> {
     return this.searchCollection("findByTitleContainingIgnoreCase", { params: { title: title } })
   }
+
+  public findByType(type: string): Observable<ResourceCollection<Route>> {
+    return this.searchCollection("findByType", { params: { type: type } })
+  }
 }

src/app/routes/routes-edit/route-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {RouteService} from "../route.service";
 import {Route} from "../route";
@@ -11,7 +11,7 @@ import { Location } from '@angular/common'
   templateUrl: './route-edit.component.html',
   styleUrls: ['./route-edit.component.css']
 })
-export class RouteEditComponent {
+export class RouteEditComponent implements OnInit{
   public route: Route = new Route();
 
   constructor(private activatedRoute: ActivatedRoute,