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

adding support for tabbed component (work in progress)

This commit is contained in:
Maria Teresa Paratore 2023-09-26 17:39:15 +02:00
parent cafa1e7ceb
commit bc4e947f05
5 changed files with 141 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/webapp/app/rsc-tree/rsc-tree.component.html
View File

@ -1,4 +1,4 @@
<div class="d-flex flex-row py-4">
<div class="d-flex flex-row py-4" id="riga-superiore-controlli">
<div id="btn-group" class="col-md-3 mt-3">
<button mat-raised-button color="primary"><mat-icon>source</mat-icon> <span>File</span></button>
<button mat-raised-button color="primary"><mat-icon>edit</mat-icon> <span>Edit</span></button>
@ -25,13 +25,15 @@
<mat-label for="uidfield">Context UUID</mat-label>
<input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly [value]="namefield.value.id" />
</mat-form-field>
<button mat-button (click)="copyUid(namefield)" color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
<button mat-button (click)="copyUid(namefield)" color="primary" matTooltip="copy UUID" matTooltipPosition="below">
<mat-icon class="icon-wide2">content_copy</mat-icon>
</button>
</form>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-3">
<div class="col-md-3" id="riga-inferiore-view">
<h3>Resource tree</h3>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>

12
src/main/webapp/app/rsc-tree/rsc-tree.component.ts
View File

@ -1,5 +1,5 @@
/* eslint-disable no-console */
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Output, EventEmitter, QueryList, ViewChildren, ViewChild } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { NestedTreeControl } from '@angular/cdk/tree';
import { ResourcesLoaderService } from 'app/services/resources-loader.service';
@ -20,7 +20,6 @@ export class RscTreeComponent implements OnInit {
nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
nestedDataSource = new MatTreeNestedDataSource<IResource>();
@Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
contexts: IContextNode[];
public filteredContexts: Observable<IContextNode[]> | undefined;
chooseContextForm: FormGroup | any;
@ -97,19 +96,10 @@ export class RscTreeComponent implements OnInit {
}
copyUid(val: any): void {
// const res = this.uidfield ? this.uidfield.value : '';
//const res = this.uidfield.value;
//this.clipboard.copy(res);
if (val instanceof FormControl) {
this.clipboard.copy(val.getRawValue().id);
alert('copied!');
} else {
this.clipboard.copy('invalid value');
}
}
//TODO: modificare per gestire eventuali eventi sulla onselect
assignUid(uid: string): void {
// console.debug('------------UUID:.....' + uid);
}
}

5
src/main/webapp/app/rsc-tree/rsc-tree.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CommonModule, NgFor } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
@ -10,6 +10,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { TableScreenComponent } from 'app/table-screen/table-screen.component';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
declarations: [],
@ -26,6 +27,8 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
ReactiveFormsModule,
TableScreenComponent,
ClipboardModule,
MatTabsModule,
NgFor,
],
})
export class RscTreeModule {}

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

@ -1,55 +1,94 @@
<mat-form-field>
<mat-label>Search by UUID</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="UUID" #input />
</mat-form-field>
<div class="p-3">
<mat-form-field>
<mat-label>Search by UUID</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="UUID" #input />
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header color="primary">Name</th>
<td mat-cell *matCellDef="let item">{{ item.name }}</td>
</ng-container>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header color="primary">Name</th>
<td mat-cell *matCellDef="let item">{{ item.name }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let item">{{ item.id }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let item">{{ item.id }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let item">{{ item.status }}</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let item">{{ item.status }}</td>
</ng-container>
<ng-container matColumnDef="lastmod">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Last Modified</th>
<td mat-cell *matCellDef="let item">{{ item.lastmod }}</td>
</ng-container>
<ng-container matColumnDef="lastmod">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Last Modified</th>
<td mat-cell *matCellDef="let item">{{ item.lastmod }}</td>
</ng-container>
<ng-container matColumnDef="memavailable">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Available Memory</th>
<td mat-cell *matCellDef="let item">{{ item.memavailable }}</td>
</ng-container>
<ng-container matColumnDef="memavailable">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Available Memory</th>
<td mat-cell *matCellDef="let item">{{ item.memavailable }}</td>
</ng-container>
<ng-container matColumnDef="hdspace">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>HD Space</th>
<td mat-cell *matCellDef="let item">{{ item.hdspace }}</td>
</ng-container>
<ng-container matColumnDef="hdspace">
<th mat-header-cell *matHeaderCellDef mat-sort-header disabled>HD Space</th>
<td mat-cell *matCellDef="let item">{{ item.hdspace }}</td>
</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"><mat-icon>visibility</mat-icon></button>
</td>
</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>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<!-- Row 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>
</table>
<mat-paginator [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons> </mat-paginator>
<!-- Row 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>
</table>
<mat-paginator [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons> </mat-paginator>
</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">
<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)">
<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>
</mat-tab>
</ng-container>
</mat-tab-group>
<!--
--></div>

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

@ -1,4 +1,17 @@
import { Component, Output, EventEmitter, OnInit, ViewChild, AfterViewInit, OnChanges, SimpleChanges, Input } from '@angular/core';
/* eslint-disable no-console */
import {
Component,
Output,
EventEmitter,
OnInit,
ViewChild,
AfterViewInit,
OnChanges,
SimpleChanges,
Input,
QueryList,
} from '@angular/core';
import { IHostingnode } from 'app/services/i-hostinngnode';
import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
import { ResourcesLoaderService } from 'app/services/resources-loader.service';
@ -7,6 +20,7 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
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';
@Component({
standalone: true,
@ -28,6 +42,17 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
//per tabbed view
//@ViewChild(MatTabGroup)
@ViewChild(MatTab)
public tabGroup: MatTabGroup | any;
public tabNodes: QueryList<MatTab> | any;
public closedTabs = [];
public tabs = ['Main'];
selectedIdx = 0;
////////// fine tabbed view
constructor(private myDataService: ResourcesLoaderService) {
this.myCtx = {} as IContextNode;
this.tableDetail = {} as IHostingnode;
@ -71,10 +96,26 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
// per tabbed pane (versione con aggiunta dinamica)
/*
onChangePage(pe:PageEvent) {
console.log(pe.pageIndex);
console.log(pe.pageSize);
}
*/
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);
}
closeTab(index: number): void {
// this.closedTabs.push(index);
this.tabGroup.selectedIndex = this.tabNodes.length - 1;
}
}