253 lines
7.8 KiB
TypeScript
253 lines
7.8 KiB
TypeScript
/* eslint-disable @typescript-eslint/restrict-plus-operands */
|
|
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
|
/* eslint-disable no-console */
|
|
|
|
import {
|
|
Component,
|
|
Output,
|
|
EventEmitter,
|
|
OnInit,
|
|
ViewChild,
|
|
AfterViewInit,
|
|
OnChanges,
|
|
SimpleChanges,
|
|
Input,
|
|
QueryList,
|
|
} from '@angular/core';
|
|
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
import { MatSort} from '@angular/material/sort';
|
|
import { IContextNode } from 'app/services/i-context-node';
|
|
import { MatPaginator} from '@angular/material/paginator';
|
|
import { MatTab, MatTabGroup } from '@angular/material/tabs';
|
|
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
import { ITabbedEntity } from 'app/i-tabbed-entity';
|
|
import { IHostingNode } from 'app/services/i-hosting-node';
|
|
import { ResourcesImplService } from 'app/services/resources-impl.service';
|
|
//import { ResourceAddComponent } from 'app/resource-add/resource-add.component';
|
|
import { IResource } from 'app/services/i-resource';
|
|
import { IResourceType } from 'app/services/i-resource-type';
|
|
import { DummyService } from 'app/services/dummy.service';
|
|
import { MatFormFieldControl } from '@angular/material/form-field';
|
|
|
|
import { FacetComposerComponent } from 'app/facet-composer/facet-composer.component';
|
|
import { FacetEditorComponent } from 'app/facet-editor/facet-editor.component';
|
|
|
|
@Component({
|
|
selector: 'jhi-table-screen',
|
|
templateUrl: './table-screen.component.html',
|
|
styleUrls: ['./table-screen.component.scss'],
|
|
//NB->dialog form is a provider
|
|
providers: [{provide:MatFormFieldControl,
|
|
// useExisting:ResourceAddComponent },
|
|
useExisting:FacetComposerComponent },
|
|
ResourcesImplService, DummyService],
|
|
})
|
|
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|
//NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
|
|
displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'avMemory', 'hdSpace', 'actions'];
|
|
dataFromService: IHostingNode[];
|
|
dataSource = new MatTableDataSource();
|
|
tableDetail: IHostingNode;
|
|
//dialogAddRef: MatDialogRef<ResourceAddComponent> |undefined;
|
|
dialogAddRef: MatDialogRef<TableScreenComponent> |undefined;
|
|
//dialog di test per creazione risorse
|
|
errorMessage = '';
|
|
|
|
@Input() currentCtx: IContextNode; //fetching event from parent
|
|
@Input() currentCtxPath: string; //fetching event from parent
|
|
@Input() typeObject: IResource;
|
|
@Output() jsonEmitter = new EventEmitter<IHostingNode>();
|
|
@ViewChild(MatSort) sort: MatSort;
|
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
|
|
|
|
|
//per tabbed view
|
|
@ViewChild(MatTab)
|
|
public tabGroup: MatTabGroup | any;
|
|
public tabNodes: QueryList<MatTab> | any;
|
|
public closedTabs = [];
|
|
public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
|
|
selectedIdx = 0;
|
|
chosenIds: string[] = [];
|
|
rawJson: string;
|
|
////////// fine tabbed view
|
|
//TODO: a regime questa sarà la nuova resource creata (visualizzerò il titolo)
|
|
// dummyResource :IDummy;
|
|
// dummies : IDummy[];
|
|
|
|
constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) {
|
|
this.currentCtx = {} as IContextNode;
|
|
this.tableDetail = {} as IHostingNode;
|
|
this.dataFromService = [];
|
|
this.sort = new MatSort();
|
|
this.paginator = {} as MatPaginator;
|
|
//this.resourceType = '';
|
|
this.typeObject = {} as IResourceType;
|
|
this.currentCtxPath = '';
|
|
this.rawJson = '';
|
|
// this.dummyResource = {} as IDummy;
|
|
// this.dummies = [];
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.dataSource.sort = this.sort;
|
|
this.dataSource.paginator = this.paginator;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
|
|
let ctxPath = '';
|
|
if(this.currentCtx.path !== undefined){
|
|
ctxPath = this.currentCtx.path;
|
|
}else if(this.currentCtxPath !== undefined){
|
|
ctxPath = this.currentCtxPath
|
|
}
|
|
|
|
this.myDataService.fetchResourceImpls(ctxPath,this.typeObject.name).subscribe(res => {
|
|
this.dataFromService = res;
|
|
this.dataSource.data = res;
|
|
//this is to filter only on the 'name' property
|
|
this.dataSource.filterPredicate = function (record:any,filter:string) {
|
|
return record.name.indexOf(filter)!==-1;
|
|
}
|
|
});
|
|
//this.fetchDummies();
|
|
/*
|
|
this.dialogAddRef?.afterClosed().subscribe(res=>{
|
|
this.dummyRes = res;}
|
|
);
|
|
*/
|
|
|
|
}
|
|
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
|
|
for (const propName in changes) {
|
|
if (propName === 'currentCtx') {
|
|
const param = changes[propName];
|
|
this.currentCtx = <IContextNode>param.currentValue;
|
|
//controllo che l'oggetto non sia vuoto
|
|
if (Object.keys(this.currentCtx).length !== 0) {
|
|
this.myDataService.fetchResourceImpls(this.currentCtx.path,this.typeObject.name).subscribe(res => {
|
|
this.dataFromService = res;
|
|
this.dataSource.data = res;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
applyFilter(event: Event): void {
|
|
const filterValue = (event.target as HTMLInputElement).value;
|
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
|
}
|
|
|
|
// for the dynamic tabbed pane
|
|
|
|
removeTab(index: number): void {
|
|
this.tabs.splice(index, 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);
|
|
}
|
|
}
|
|
|
|
reloadTable():void{
|
|
this.myDataService.fetchResourceImpls(this.currentCtx.path,this.typeObject.name).subscribe(res => {
|
|
this.dataFromService = res;
|
|
this.dataSource.data = res;
|
|
})
|
|
}
|
|
|
|
closeTab(index: number): void {
|
|
|
|
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.tabs.length - 1;
|
|
//this.chosenIds.indexOf();
|
|
this.tabs.splice(index, 1);
|
|
}
|
|
|
|
openFacetComposer(): void {
|
|
const dialogConfig = new MatDialogConfig();
|
|
dialogConfig.disableClose = true;
|
|
dialogConfig.autoFocus = true;
|
|
dialogConfig.data= {type: this.typeObject, context: this.currentCtx};
|
|
this.createDialog.open(FacetComposerComponent,dialogConfig);
|
|
|
|
}
|
|
|
|
openFacetEditor(uid: string): void {
|
|
const dialogConfig = new MatDialogConfig();
|
|
dialogConfig.disableClose = true;
|
|
dialogConfig.autoFocus = true;
|
|
dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid};
|
|
this.editDialog.open(FacetEditorComponent,dialogConfig);
|
|
}
|
|
|
|
|
|
/*
|
|
//TODO: GUARDA QUESTI METODI PER GESTIRE IL DOPO CREAZIONE/AGGIORNAMENTO
|
|
|
|
dialogRef.afterClosed().subscribe(result => {
|
|
if(result.event === 'add'){
|
|
this.addNewData(result.data);
|
|
}else if(result.event ==='update'){
|
|
//TODO
|
|
//this.updateRowData(result.data);
|
|
}else if(result.event === 'delete'){
|
|
//TODO
|
|
// this.deleteRowData(result.data);
|
|
}
|
|
});
|
|
}
|
|
showNewData(data: any):void{
|
|
const rsc = {} as IDummy;
|
|
rsc.type = this.typeObject.name;
|
|
rsc.uid = data.uid;
|
|
rsc.name = data.name;
|
|
this.dummies.push(rsc);
|
|
}
|
|
addNewData(data: any):void{
|
|
const rsc = {} as IDummy;
|
|
rsc.type = this.typeObject.name;
|
|
rsc.uid = data.uid;
|
|
rsc.name = data.name;
|
|
this.dummies.push(rsc);
|
|
}
|
|
|
|
updateData(uid: string, data:any):void{
|
|
//TODO: recupera resource con uid passato come parametro e type=this.typeObject.name
|
|
//TODO: chiama il metodo delle API per fare la update
|
|
const rsc = {} as IDummy;
|
|
rsc.type = this.typeObject.name;
|
|
rsc.uid = data.uid;
|
|
rsc.name = data.name;
|
|
this.dummies.push(rsc);
|
|
}
|
|
|
|
removeData(uid: string):void{
|
|
//TODO: chiama il metodo delle API per fare la remove
|
|
}
|
|
*/
|
|
|
|
}
|