adding tabbed view (work in progress)...

src/main/webapp/app/i-tabbed-entity.ts

@@ -0,0 +1,7 @@
+export interface ITabbedEntity {
+  id: string;
+  title: string;
+  content: string;
+  //prevediamo contenuti di tipo diverso
+  type: number;
+}

src/main/webapp/app/services/i-context-node.ts

@@ -4,7 +4,7 @@ export interface IContextNode {
   id: string;
   children?: IContextNode[];
 }
-
+/*
 export class ContextNode implements IContextNode {
   parent: string;
   name: string;
@@ -18,3 +18,4 @@ export class ContextNode implements IContextNode {
     this.children = children;
   }
 }
+*/

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

@@ -37,17 +37,16 @@
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header disabled></th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
-        <td mat-cell *matCellDef="let row">
+        <td mat-cell *matCellDef="let item">
-          <!--<button mat-icon-button color="primary" (click)="openJsonViewer(data)"><mat-icon>insert_drive_file</mat-icon></button>-->
+          <button mat-button color="primary" (click)="addTab(this.item.id)"><mat-icon>visibility</mat-icon></button>
-          <button mat-button color="primary" (click)="addTab(true)"><mat-icon>visibility</mat-icon></button>
         </td>
       </ng-container>
-
+      <!-- rows visualization -->
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 
-      <!-- Row shown when there is no matching data.   -->
+      <!-- Rows shown when there is no matching data.   -->
       <tr class="mat-row" *matNoDataRow>
         <td class="mat-cell" colspan="4">No data matching the filter "{{ input.value }}"</td>
       </tr>
@@ -56,39 +55,18 @@
   </div>
 </div>
 <div class="p-3">
-  <!--
+  <mat-tab-group [selectedIndex]="selectedIdx">
-	              
-	<mat-tab-group [selectedIndex]="selectedIdx" >
-	  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" >
-	    Contents for {{tab}} tab
-	
-	    <button mat-raised-button
-	            class="example-delete-tab-button"
-	            [disabled]="tabs.length === 1"
-	            (click)="removeTab(index)">
-	      Delete Tab
-	    </button>
-	  </mat-tab>
-	</mat-tab-group>
-	 -->
-
-  <mat-tab-group>
     <ng-container *ngFor="let tab of tabs; let index = index">
-      <mat-tab *ngIf="closedTabs.indexOf(index) < 0">
+      <mat-tab>
+        <!--stile linguetta tab-->
         <ng-template mat-tab-label>
-          <div class="col" style="margin-left: 20px">{{ tab.name }}</div>
+          <div class="col" style="margin-left: 20px">{{ tab.title }}</div>
-          <button *ngIf="tab.name !== 'Main'" style="color: black" mat-icon-button (click)="closeTab(index)">
+          <button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
             <mat-icon>close</mat-icon>
           </button>
         </ng-template>
-
+        {{ tab.content }}
-        <span [ngSwitch]="tab.tabType">
-          <div *ngSwitchCase="0" style="height: calc(100% - 30px)">Case 2</div>
-          <div *ngSwitchCase="1" style="height: calc(100% - 8px)">Case 1</div>
-          <div *ngSwitchDefault>Default</div>
-        </span>
       </mat-tab>
     </ng-container>
   </mat-tab-group>
-  <!--
+</div>
---></div>

src/main/webapp/app/table-screen/table-screen.component.ts

@@ -21,6 +21,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { IContextNode } from 'app/services/i-context-node';
 import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import { ITabbedEntity } from 'app/i-tabbed-entity';
 
 @Component({
   standalone: true,
@@ -48,9 +49,9 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   public tabGroup: MatTabGroup | any;
   public tabNodes: QueryList<MatTab> | any;
   public closedTabs = [];
-  public tabs = ['Main'];
+  public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
   selectedIdx = 0;
-
+  chosenIds: string[] = [];
   ////////// fine tabbed view
 
   constructor(private myDataService: ResourcesLoaderService) {
@@ -74,8 +75,7 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    // eslint-disable-next-line no-console
+    //  console.log('---NELLA ONCHANGES...' + this.myCtx.name);
-    console.log('---NELLA ONCHANGES...' + this.myCtx.name);
     for (const propName in changes) {
       if (propName === 'myCtx') {
         const param = changes[propName];
@@ -98,24 +98,41 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   // per tabbed pane (versione con aggiunta dinamica)
-  /*
 
-
+  removeTab(index: number): void {
-  removeTab(index: number):void {
     this.tabs.splice(index, 1);
   }
-  */
 
-  addTab(selectAfterAdding: boolean): void {
+  addTab(itemId: string): void {
-    console.debug('--------CISIAMO------');
+    if (!this.chosenIds.includes(itemId)) {
-    this.selectedIdx++;
+      const newItem = {
-    alert('ciao');
+        id: itemId,
-    this.tabs.push('New');
+        title: itemId.substring(0, 20) + '...',
-    //this.setValue(this.tabs.length - 1);
+        //TODO: content a regime è la stringa JSON
+        content: itemId,
+        type: 0,
+      };
+      this.selectedIdx++;
+      this.chosenIds.push(itemId);
+      this.tabs.push(newItem);
+    }
   }
 
   closeTab(index: number): void {
+    console.debug('---------');
+    console.debug(index);
+    console.debug('---IDs:');
+    console.debug(this.chosenIds);
+    console.debug(this.tabs[index].id);
+    console.debug('++++++++++');
+    const x = this.chosenIds.indexOf(this.tabs[index].id);
+    if (x !== -1) {
+      this.chosenIds.splice(x, 1);
+    }
+
     // this.closedTabs.push(index);
-    this.tabGroup.selectedIndex = this.tabNodes.length - 1;
+    this.tabGroup.selectedIndex = this.tabs.length - 1;
+    //this.chosenIds.indexOf();
+    this.tabs.splice(index, 1);
   }
 }