ui search bars

reqtool/ReqmanAngular11/src/app/components/boilerplate-details/boilerplate-details.component.html

@@ -11,15 +11,15 @@
 <div class="first">
     <div *ngIf="currentboilerplate.id" class="edit-form">
       <form>
-        <div class="form-group" style="width: 63%;">
-          <label for="title">Boilerplate title</label>
+        <div class="form-group"  style="display:flex; flex-direction: row; align-items: center">
+          <label for="title" style="margin-right: 50px;">Boilerplate title</label>
           <input
+            name="title"
+            id="title"
             type="text"
             class="form-control"
-            id="title"
             [(ngModel)]="currentboilerplate.title"
-            name="title"
-          />
+            style="width: 63%;"/>
         </div>
         <div  style="display: flex; flex-grow: grow; margin-top: 50px;">
           <form class="form-group form-inline ">
@@ -87,7 +87,7 @@
 <!-- Dictionary -->
 <div class="second">
   <div class="search-hero">
-    <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="&#61442;  Start searching for a hero by id or name or country">
+    <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Start searching for a System, Function, etc.">
   </div>
   <mat-tab-group mat-align-tabs="center">
     <div *ngFor="let section of systems| filter:searchText">
@@ -168,5 +168,8 @@
       </mat-tab>
     </div>
   </mat-tab-group>
+  <div *ngIf="!checklen(systems)">
+    <mat-spinner style="margin: auto;"></mat-spinner>
+  </div>
 </div>
   
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/boilerplate-list/boilerplate-list.component.html

@@ -5,23 +5,14 @@
   </ol>
 </nav>
 <div class="list row">
-    <div class="col-md-8">
-      <div class="input-group mb-3">
+    <div class="col-md-14">
+      <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
         <input
           type="text"
           class="form-control"
-          placeholder="Search by title"
-          [(ngModel)]="title"
-          (keyup.enter)="SearchTitle()"
-        />
-        <div class="input-group-append">
-          <button
-            class="btn btn-primary"
-            type="button"
-            (click)="SearchTitle()"
-          >Search
-          </button>
-        </div>
+          placeholder="Search"
+          (keyup)="applyFilter($event)"
+          #input/>
       </div>
         <div fxFlex fxLayout fxHide.xs fxLayoutAlign="end">
           <ul fxLayout fxLayoutGap="15px" class="navigation-items">
@@ -43,8 +34,7 @@
       
     </div>
 </div>
-
-
+<div>
 <table mat-table [dataSource]="newdataSource" class="mat-elevation-z8">
   <!-- Position Column -->
   <ng-container matColumnDef="id">
@@ -84,3 +74,4 @@
   <tr mat-header-row *matHeaderRowDef="newdisplayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: newdisplayedColumns;"></tr>
 </table>
+</div>

reqtool/ReqmanAngular11/src/app/components/boilerplate-list/boilerplate-list.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { Boilerplate } from 'src/app/models/boilerplate.model';
 import { BoilerplateData } from 'src/app/models/boilerplate.model';
 import { InferenceResults } from 'src/app/models/boilerplate.model';
 import { BoilerplateService } from 'src/app/services/boilerplate.service';
 import { PrefixService } from 'src/app/services/prefix.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import {MatTableDataSource} from '@angular/material/table';
 
 
 
@@ -14,6 +15,7 @@ import { ActivatedRoute, Router } from '@angular/router';
   styleUrls: ['./boilerplate-list.component.scss']
 })
 
+
 export class BoilerplateListComponent implements OnInit {
   
   boilerplates?: Boilerplate[];
@@ -29,7 +31,8 @@ export class BoilerplateListComponent implements OnInit {
   displayedColumns: string[] = ['id', 'title', 'has_prefix', 'has_main', 'has_suffix', 'action'];
   newdisplayedColumns: string[] = ['id','title_data' ,'prefix_data', 'main_data', 'suffix_data', 'action'];
   dataSource :Boilerplate[] = [{}];
-  newdataSource:BoilerplateData[] = [{}];
+  thenewdataSource:BoilerplateData[] = [{}];
+  newdataSource = new MatTableDataSource(this.thenewdataSource);
   infer:InferenceResults[] = [{}];
 
   dataofboilerplates: any [] = [];
@@ -65,7 +68,8 @@ export class BoilerplateListComponent implements OnInit {
       .subscribe(
         data => {
           this.boilerplatesdata =data;
-          this.newdataSource = data;
+          this.thenewdataSource = data;
+          this.newdataSource = new MatTableDataSource(this.thenewdataSource);
           console.log(data)
         },
         error => {
@@ -136,4 +140,9 @@ export class BoilerplateListComponent implements OnInit {
       });
   }
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.newdataSource.filter = filterValue.trim().toLowerCase();
+  }
+
 }

reqtool/ReqmanAngular11/src/app/components/groupboil/groupboil.component.html

@@ -11,6 +11,8 @@
             class="form-control"
             placeholder="Search"
             [(ngModel)]="title"
+            name="search" 
+            autocomplete="off"
         />
             <!-- (keyup.enter)="SearchTitle()"-->
             <!-- (click)="SearchTitle()" -->
@@ -32,7 +34,7 @@
         
     </div>
 </div>
-<div *ngFor="let gb of grouboilerplates">
+<div *ngFor="let gb of grouboilerplates| filter:title">
         <mat-card class="example-card">
             <a routerLink="/groupboilerplates/{{gb.id}}/boilerplates">
             <mat-card-header>