adding tabbed view (work in progress)...
This commit is contained in:
parent
bc4e947f05
commit
c4360a6ddb
|
@ -0,0 +1,7 @@
|
|||
export interface ITabbedEntity {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
//prevediamo contenuti di tipo diverso
|
||||
type: number;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
@ -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 {
|
||||
this.tabs.splice(index, 1);
|
||||
}
|
||||
*/
|
||||
|
||||
addTab(selectAfterAdding: boolean): void {
|
||||
console.debug('--------CISIAMO------');
|
||||
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++;
|
||||
alert('ciao');
|
||||
this.tabs.push('New');
|
||||
//this.setValue(this.tabs.length - 1);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue