Added service and components for Bootstrap table with searchable fields

and ordering.

src/main/webapp/app/home/home.component.html

@@ -4,8 +4,7 @@
 
 	<div class="col-md-9">
 		<h1 class="display-4"><span jhiTranslate="home.title">Welcome!</span></h1>
-
-
+		<jhi-table-nodes></jhi-table-nodes>
 		<div [ngSwitch]="account !== null">
 			<div class="alert alert-success" *ngSwitchCase="true">
 				<span id="home-logged-message" *ngIf="account" jhiTranslate="home.logged.message"
@@ -16,7 +15,7 @@
 						<label for="contexts">Contexts:</label>
 						<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
 							<button name="contexts" type="button" class="btn btn-outline-primary me-2" id="dropdownManual"
-								ngbDropdownAnchor (focus)="myDrop.open()">Availables
+								ngbDropdownAnchor (focus)="myDrop.open()">Available
 							</button>
 							<div ngbDropdownMenu aria-labelledby="dropdownManual">
 								<div *ngFor="let context of getContexts();let i = index" [attr.data-index]="i">
@@ -25,8 +24,13 @@
 							</div>
 						</div>
 					</div>
+					<div>
+					<!--TODO: formattare correttamente per visualizzare in pagina-->
+					<jhi-table-nodes></jhi-table-nodes>
+					</div>
 				</div>
 			</div>
-
 		</div>
-	</div>
+	</div>
+</div>
+	

src/main/webapp/app/home/home.module.ts

@@ -1,13 +1,15 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { SharedModule } from 'app/shared/shared.module';
 import { HOME_ROUTE } from './home.route';
 import { HomeComponent } from './home.component';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { TableNodesModule } from 'app/table-nodes/table-nodes.module';
 
 @NgModule({
-  imports: [SharedModule, RouterModule.forChild([HOME_ROUTE]),NgbDropdownModule],
+  imports: [SharedModule, RouterModule.forChild([HOME_ROUTE]),NgbDropdownModule, TableNodesModule],
   declarations: [HomeComponent],
+  schemas:[CUSTOM_ELEMENTS_SCHEMA]
 })
 export class HomeModule {}

src/main/webapp/app/services/hnodes-loader.service.ts

@@ -40,7 +40,8 @@ function sort(hnodes: IHostingnode[], column: SortColumn, direction: string): IH
 function matches(hnode: IHostingnode, term: string, pipe: PipeTransform){
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 	return (
-		pipe.transform(hnode.id).includes(term.toLowerCase())
+		//pipe.transform(hnode.id).includes(term.toLowerCase())
+		(hnode.id).includes(term.toLowerCase())
 	);
 }
 
@@ -59,8 +60,8 @@ export class HnodesLoaderService {
 		sortColumn: '',
 		sortDirection: '',
 	};
-
-constructor(private pipe: DecimalPipe) {
+	
+	constructor(private pipe: DecimalPipe) {
 		this._search$
 			.pipe(
 				tap(() => this._loading$.next(true)),

src/main/webapp/app/table-nodes/table-nodes.component.html

@@ -1,6 +1,6 @@
 <form>
 	<div class="mb-3 row">
-		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Full text search:</label>
+		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Filter by name or UUID:</label>
 			<div class="col-xs-3 col-sm-auto">
 			<input type="text" id="table-complete-search"
 				[(ngModel)]="service.searchTerm"
@@ -13,23 +13,23 @@
 	<table class="table table-striped">
 		<thead>
 			<tr>
-				<th scope="col">#</th>
 				<!--<th scope="col" sortable="type" (sort)="onSort($event)">Type</th>-->
+				<th scope="col" sortable="id" (sort)="onSort($event)">UUID</th>
 				<th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-				<th scope="col" sortable="id" (sort)="onSort($event)">Id</th>
 				<th scope="col" sortable="status" (sort)="onSort($event)">Status</th>
-				<th scope="col" sortable="lastmod" (sort)="onSort($event)">Lat Modified</th>
-				<th scope="col" sortable="memavailable" (sort)="onSort($event)">Available Memory</th>
+				<th scope="col" sortable="lastmod" (sort)="onSort($event)">Last Modified</th>
+				<th scope="col" sortable="memavailable">Available Memory</th>
 				<th scope="col" sortable="hdspace" (sort)="onSort($event)">HD Space</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr *ngFor="let hnode of hnodes$ | async">
-				<th scope="row">{{ hnode.id }}</th>
-				<td><ngb-highlight [result]="hnode.name" [term]="service.searchTerm"></ngb-highlight></td>
 				<td><ngb-highlight [result]="hnode.id" [term]="service.searchTerm"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.memavailable" [term]="service.searchTerm"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.hdspace" [term]="service.searchTerm"></ngb-highlight></td>
+				<td><ngb-highlight [result]="hnode.name" [term]="service.searchTerm"></ngb-highlight></td>
+				<td><ngb-highlight [result]="hnode.status"></ngb-highlight></td>
+				<td><ngb-highlight [result]="hnode.lastmod"></ngb-highlight></td>
+				<td><ngb-highlight [result]="hnode.memavailable"></ngb-highlight></td>
+				<td><ngb-highlight [result]="hnode.hdspace"></ngb-highlight></td>
 			</tr>
 		</tbody>
 	</table>

src/main/webapp/app/table-nodes/table-nodes.module.ts

@@ -1,15 +1,15 @@
-import { NgModule } from '@angular/core';
+import { NgModule} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from 'app/shared/shared.module';
 import { TableNodesComponent } from './table-nodes.component';
 
 @NgModule({
   declarations: [TableNodesComponent],
-  entryComponents: [TableNodesComponent],
   imports: [
     CommonModule,
-    SharedModule,
-  ]
+    SharedModule
+  ],
+  exports: [TableNodesComponent]
 })