deny to se the create route menu to admin user

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-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, ResourceCollection, Sort} 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

@@ -75,7 +75,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.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 } })
+  }
 }