From da9db179ff78cee86f90ee37864b616572cb706b Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Thu, 12 Oct 2023 17:07:48 +0200
Subject: [PATCH] added components and directives for Bootstrap tables ordering
 and filtering

---
 package.json                                  |  6 ++--
 src/main/webapp/app/app.module.ts             |  6 ++--
 .../app/services/hnodes-loader.service.ts     |  5 ++-
 src/main/webapp/app/shared/shared.module.ts   | 12 +++++--
 .../app/table-nodes/sortable.directive.ts     |  3 +-
 .../table-nodes/table-nodes.component.html    | 36 +++++++++----------
 .../app/table-nodes/table-nodes.component.ts  | 12 +++----
 .../app/table-nodes/table-nodes.module.ts     | 16 +++++++++
 8 files changed, 56 insertions(+), 40 deletions(-)
 create mode 100644 src/main/webapp/app/table-nodes/table-nodes.module.ts

diff --git a/package.json b/package.json
index 59253e3..1481f39 100644
--- a/package.json
+++ b/package.json
@@ -83,11 +83,10 @@
     "@angular/platform-browser": "14.2.0",
     "@angular/platform-browser-dynamic": "14.2.0",
     "@angular/router": "14.2.0",
-    "ng-bootstrap/ng-bootstrap": "15.1.1",
     "@fortawesome/angular-fontawesome": "0.11.1",
     "@fortawesome/fontawesome-svg-core": "6.2.0",
     "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@ng-bootstrap/ng-bootstrap": "13.0.0",
+    "@ng-bootstrap/ng-bootstrap": "15.1.1",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@popperjs/core": "2.11.6",
@@ -98,7 +97,8 @@
     "ngx-webstorage": "10.0.1",
     "rxjs": "7.5.6",
     "tslib": "2.4.0",
-    "zone.js": "0.11.6"
+    "zone.js": "0.11.6",
+    "typescript": "5.0.4"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "14.0.1",
diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index 638812b..8673ed8 100644
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -25,8 +25,8 @@ import { FooterComponent } from './layouts/footer/footer.component';
 import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
 import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
 import { ErrorComponent } from './layouts/error/error.component';
-import { TableNodesComponent } from './table-nodes/table-nodes.component';
 import { SortableDirective } from './table-nodes/sortable.directive';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';   
 
 @NgModule({
   imports: [
@@ -40,8 +40,8 @@ import { SortableDirective } from './table-nodes/sortable.directive';
     HttpClientModule,
     NgxWebstorageModule.forRoot({ prefix: 'jhi', separator: '-', caseSensitive: true }),
     TranslationModule,
-    TableNodesComponent, 
-    SortableDirective
+    SortableDirective,
+    NgbModule
   ],
   providers: [
     Title,
diff --git a/src/main/webapp/app/services/hnodes-loader.service.ts b/src/main/webapp/app/services/hnodes-loader.service.ts
index a12555f..788c3a8 100644
--- a/src/main/webapp/app/services/hnodes-loader.service.ts
+++ b/src/main/webapp/app/services/hnodes-loader.service.ts
@@ -36,12 +36,11 @@ function sort(hnodes: IHostingnode[], column: SortColumn, direction: string): IH
 	}
 }
 
+//matching SOLO sul campo UUID
 function matches(hnode: IHostingnode, term: string, pipe: PipeTransform){
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 	return (
-		hnode.name.toLowerCase().includes(term.toLowerCase()) ||
-		pipe.transform(hnode.id).includes(term) ||
-		pipe.transform(hnode.status).includes(term)
+		pipe.transform(hnode.id).includes(term.toLowerCase())
 	);
 }
 
diff --git a/src/main/webapp/app/shared/shared.module.ts b/src/main/webapp/app/shared/shared.module.ts
index 5a230de..afe6e1f 100644
--- a/src/main/webapp/app/shared/shared.module.ts
+++ b/src/main/webapp/app/shared/shared.module.ts
@@ -14,9 +14,11 @@ import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
 import { FilterComponent } from './filter/filter.component';
 import { ContextTransformPipe } from './pipe/contexttransform.pipe';
+import { NgbPagination, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import { SortableDirective } from 'app/table-nodes/sortable.directive';
 
 @NgModule({
-  imports: [SharedLibsModule],
+  imports: [SharedLibsModule,SortableDirective],
   declarations: [
     FindLanguageFromKeyPipe,
     TranslateDirective,
@@ -30,7 +32,8 @@ import { ContextTransformPipe } from './pipe/contexttransform.pipe';
     SortDirective,
     ItemCountComponent,
     FilterComponent,
-    ContextTransformPipe
+    ContextTransformPipe,
+    
   ],
   exports: [
     SharedLibsModule,
@@ -46,7 +49,10 @@ import { ContextTransformPipe } from './pipe/contexttransform.pipe';
     SortDirective,
     ItemCountComponent,
     FilterComponent,
-    ContextTransformPipe
+    ContextTransformPipe,
+    NgbPagination,
+    NgbTypeahead,
+    SortableDirective
   ],
 })
 export class SharedModule {}
diff --git a/src/main/webapp/app/table-nodes/sortable.directive.ts b/src/main/webapp/app/table-nodes/sortable.directive.ts
index 3600fc8..d447bc1 100644
--- a/src/main/webapp/app/table-nodes/sortable.directive.ts
+++ b/src/main/webapp/app/table-nodes/sortable.directive.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @angular-eslint/directive-selector */
 /* eslint-disable @angular-eslint/no-host-metadata-property */
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
 import { IHostingnode } from 'app/services/i-hostinngnode';
@@ -14,7 +15,7 @@ export interface SortEvent {
 
 
 @Directive({
-  selector: '[jhiSortable]',
+  selector: 'th[sortable]',
   standalone: true,
 	host: {
 		'[class.asc]': 'direction === "asc"',
diff --git a/src/main/webapp/app/table-nodes/table-nodes.component.html b/src/main/webapp/app/table-nodes/table-nodes.component.html
index 37e9d87..f2c16bd 100644
--- a/src/main/webapp/app/table-nodes/table-nodes.component.html
+++ b/src/main/webapp/app/table-nodes/table-nodes.component.html
@@ -1,10 +1,12 @@
-<div class="mb-3 row">
+<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>
 			<div class="col-xs-3 col-sm-auto">
 			<input type="text" id="table-complete-search"
+				[(ngModel)]="service.searchTerm"
 				class="form-control"
 				name="searchTerm"
-				[(ngModel)]="service.searchTerm"/>
+				/>
 			</div>
 		<span class="col col-form-label" *ngIf="service.loading$ | async">Loading...</span>
 	</div>
@@ -12,26 +14,22 @@
 		<thead>
 			<tr>
 				<th scope="col">#</th>
-				<th scope="col" sortable="name" (sort)="onSort($event)">Country</th>
-				<th scope="col" sortable="id" (sort)="onSort($event)">Area</th>
-				<th scope="col" sortable="status" (sort)="onSort($event)">Population</th>
-				<th scope="col" sortable="status" (sort)="onSort($event)">Population</th>
-				<th scope="col" sortable="status" (sort)="onSort($event)">Population</th>
+				<!--<th scope="col" sortable="type" (sort)="onSort($event)">Type</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="hdspace" (sort)="onSort($event)">HD Space</th>
 			</tr>
 		</thead>
 		<tbody>
-			<tr *ngFor="let country of countries$ | async">
-				<th scope="row">{{ country.id }}</th>
-				<td>
-					<img
-						[src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag"
-						class="me-2"
-						style="width: 20px"
-					/>
-					<ngb-highlight [result]="country.name" [term]="service.searchTerm"></ngb-highlight>
-				</td>
-				<td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm"></ngb-highlight></td>
-				<td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm"></ngb-highlight></td>
+			<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>
 			</tr>
 		</tbody>
 	</table>
diff --git a/src/main/webapp/app/table-nodes/table-nodes.component.ts b/src/main/webapp/app/table-nodes/table-nodes.component.ts
index 2335d4d..4df74c0 100644
--- a/src/main/webapp/app/table-nodes/table-nodes.component.ts
+++ b/src/main/webapp/app/table-nodes/table-nodes.component.ts
@@ -1,14 +1,10 @@
-import { Component, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
-import { IContextNode } from 'app/services/i-context-node';
+import { Component, QueryList, ViewChildren } from '@angular/core';
 import { IHostingnode } from 'app/services/i-hostinngnode';
 import { HnodesLoaderService } from 'app/services/hnodes-loader.service';
-//import EventEmitter from 'events';
-/////////
-import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
+import { DecimalPipe, NgIf } from '@angular/common';
 import { Observable } from 'rxjs';
 import { SortableDirective, SortEvent } from './sortable.directive';
-import { FormsModule } from '@angular/forms';
-import { NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+
 /*
 Tabella con paginazione, ordinamento e ricerca - dati presi da servizio
 */
@@ -18,8 +14,8 @@ Tabella con paginazione, ordinamento e ricerca - dati presi da servizio
   selector: 'jhi-table-nodes',
   templateUrl: './table-nodes.component.html',
   styleUrls: ['./table-nodes.component.scss'],
-  standalone: true,
   providers: [HnodesLoaderService, DecimalPipe],
+  
 })
 export class TableNodesComponent{
 
diff --git a/src/main/webapp/app/table-nodes/table-nodes.module.ts b/src/main/webapp/app/table-nodes/table-nodes.module.ts
new file mode 100644
index 0000000..b5dfe41
--- /dev/null
+++ b/src/main/webapp/app/table-nodes/table-nodes.module.ts
@@ -0,0 +1,16 @@
+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,
+  ]
+})
+
+
+export class TableNodesModule { }