new pipe filter table + rm display all tables on search page

src/CustomInfoTableSearchPipe.ts

@@ -0,0 +1,21 @@
+import { InfoTable } from './app/model/info-table';
+import { Pipe, PipeTransform } from '@angular/core';
+
+
+@Pipe({
+    name: 'filtertable',
+    pure: false
+})
+export class CustomFilterTable implements PipeTransform {
+    transform(items: InfoTable[], filter: string): any {
+        if (!items || !filter) {
+            return items;
+        }
+        // filter items array, items which match and return true will be
+        // kept, false will be filtered out
+        if(filter){
+          return items.filter(item => item.nameTable.toLowerCase().indexOf(filter) !== -1);
+        }
+
+    }
+}

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { ScriptManagementComponent } from './manager/script-management/script-ma
 import { AddScriptComponent } from './manager/add-script/add-script.component';
 import { DndDirective } from './directives/dnd.directive'
 import { CustomFilterScript } from 'src/CustomFilterScript';
+import { CustomFilterTable } from 'src/CustomInfoTableSearchPipe';
 import { EditScriptComponent } from './manager/edit-script/edit-script.component';
 import { TagsManagementComponent } from './manager/tags-management/tags-management.component';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
@@ -43,6 +44,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     RequestPageComponent,
     Custom_Ng2SearchPipe,
     CustomFilterScript,
+    CustomFilterTable,
     JoinsPageComponent,
     CreateJoinsPageComponent,
     JoinsTableComponent,

src/app/joins/joins-page/joins-page.component.html

@@ -20,7 +20,7 @@
           <input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterFirstTable" placeholder="Rechercher...">
 
           <select [(ngModel)]="firstTableData" (change)="getColumnsForJoinTwo()" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5">
-            <option *ngFor="let table of tablesByFirstSchema | filter : filterFirstTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+            <option *ngFor="let table of tablesByFirstSchema | filtertable : filterFirstTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
           </select>
           </div>
     </div>
@@ -50,7 +50,7 @@
           <input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterSecondTable" placeholder="Rechercher...">
 
           <select [(ngModel)]="secondTableData" (change)="getColumnsForJoinTwo()"  size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5">
-            <option *ngFor="let table of tablesBySecondSchema | filter : filterSecondTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
+            <option *ngFor="let table of tablesBySecondSchema | filtertable : filterSecondTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>
           </select>
         </div>
     </div>

src/app/search/request-page/request-page.component.html

@@ -24,7 +24,7 @@
       <div class="my-2">
 
         <label class="text-black">Tables : </label>
-        <input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterTable" placeholder="Rechercher...">
+        <input type="text" class="block w-full my-2 pl-2 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-slate-800 focus:border-slate-800" [(ngModel)]="filterTable" (ngModelChange)="sortCorrectly()" placeholder="Rechercher..." >
 
         <select [(ngModel)]="tableData" (change)="useSchemaWithTableName()" *ngIf="!tablesBySchema" size="5" class="mb-4 bg-gray-50 text-sm text-slate-800 rounded-lg focus:ring-slate-800 focus:border-slate-800 block w-full p-2.5">
           <option *ngFor="let table of infoTable | filter : filterTable" id="{{ table.id }}" [ngValue]="table">{{ table.nameTable }}</option>

src/app/search/request-page/request-page.component.ts

@@ -47,7 +47,7 @@ export class RequestPageComponent implements OnInit {
 
   ngOnInit(): void {;
       this.getSchemas();
-      this.getTables();
+      //this.getTables();
   }
 
   public getSchemas():void {
@@ -72,6 +72,25 @@ export class RequestPageComponent implements OnInit {
     );
   }
 
+  public sortCorrectly(){
+    if(this.filterTable.length > 2){
+      if(this.schemaName){
+        this.infoTableService.getTablesWithFilterAndSchema(this.filterTable, this.schemaName).subscribe(
+          (response: InfoTable[]) => {
+            console.log(response);
+            this.tablesBySchema = response;
+        });
+      } else {
+        this.infoTableService.getTablesWithFilter(this.filterTable).subscribe(
+          (response: InfoTable[]) => {
+            console.log(response);
+            this.infoTable = response;
+        });
+      }
+
+    }
+  }
+
   public divideColumns(nameSch: String, tempsTab: InfoTable):void {
     console.log(nameSch, tempsTab.nameTable)
       this.infoColumnService.getSelectedColumns(nameSch, tempsTab.nameTable).subscribe(
@@ -110,18 +129,17 @@ export class RequestPageComponent implements OnInit {
       if(this.schemaName){
         this.selectedSchema = this.schemaName;
       } else {
-        console.log(this.schemaData)
         this.selectedSchema = this.schemaData.nameSchema;
       }
       if(this.selectedSchema){
-        this.infoTableService.getTablesBySchema(this.selectedSchema).subscribe(
+        // this.infoTableService.getTablesBySchema(this.selectedSchema).subscribe(
-          (response : InfoTable[]) => {
+        //   (response : InfoTable[]) => {
-            this.tablesBySchema = response;
+        //     this.tablesBySchema = response;
-          },
+        //   },
-          (error: HttpErrorResponse) => {
+        //   (error: HttpErrorResponse) => {
-            alert(error.message)
+        //     alert(error.message)
-          }
+        //   }
-        );
+        // );
         if(this.tableData){
           this.divideColumns(this.selectedSchema, this.tableData);
         }
@@ -158,6 +176,9 @@ export class RequestPageComponent implements OnInit {
     this.infoColumn = undefined;
     this.currentTable = undefined;
     this.tableData = undefined;
+    this.filterTable = "";
+    this.infoTable = undefined;
+    this.schemaName = undefined;
   }
 
 }

src/app/service/info-table.service.ts

@@ -32,4 +32,12 @@ export class InfoTableService {
   public getSchemasByTable(nameTable : String): Observable<InfoTable[]>{
     return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/schemas/${nameTable}`);
   }
+
+  public getTablesWithFilter(filter : String): Observable<InfoTable[]>{
+    return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/filter/${filter}`);
+  }
+
+  public getTablesWithFilterAndSchema(filter : String, schema: String): Observable<InfoTable[]>{
+    return this.http.get<InfoTable[]>(`${this.apiServerUrl}/api/tables/filter/${schema}/${filter}`);
+  }
 }