mariateresa
/
isdashboard
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding tabbed view (work in progress)...

This commit is contained in:
Maria Teresa Paratore 2023-09-27 17:17:31 +02:00
parent bc4e947f05
commit c4360a6ddb
4 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/webapp/app/i-tabbed-entity.ts Normal file
View File

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

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

@ -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;
}
}
*/

46
src/main/webapp/app/table-screen/table-screen.component.html
View File

@ -37,17 +37,16 @@
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled></th>
<td mat-cell *matCellDef="let row">
<!--<button mat-icon-button color="primary" (click)="openJsonViewer(data)"><mat-icon>insert_drive_file</mat-icon></button>-->
<button mat-button color="primary" (click)="addTab(true)"><mat-icon>visibility</mat-icon></button>
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" (click)="addTab(this.item.id)"><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 *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>
<mat-tab-group [selectedIndex]="selectedIdx">
<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>
<button *ngIf="tab.name !== 'Main'" style="color: black" mat-icon-button (click)="closeTab(index)">
<div class="col" style="margin-left: 20px">{{ tab.title }}</div>
<button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
</ng-template>
<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>
{{ tab.content }}
</mat-tab>
</ng-container>
</mat-tab-group>
<!--
--></div>
</div>

47
src/main/webapp/app/table-screen/table-screen.component.ts
View File

@ -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 {
console.debug('--------CISIAMO------');
this.selectedIdx++;
alert('ciao');
this.tabs.push('New');
//this.setValue(this.tabs.length - 1);
addTab(itemId: string): void {
if (!this.chosenIds.includes(itemId)) {
const newItem = {
id: itemId,
title: itemId.substring(0, 20) + '...',
//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);
}
}