information-system-gui/src/main/webapp/app/table-screen-vs/table-screen-vs.component.ts

/* eslint-disable @typescript-eslint/no-unnecessary-condition */
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 { ResourcesImplService } from 'app/services/resources-impl.service';
import { IResource } from 'app/services/i-resource';
import { IResourceType } from 'app/services/i-resource-type';
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';
import { IVirtualService } from 'app/services/i-virtual-service';


@Component({
  selector: 'jhi-table-screen-vs',
  templateUrl: './table-screen-vs.component.html',
  styleUrls: ['./table-screen-vs.component.scss'],
    //NB->dialog form is a provider
  providers: [{provide:MatFormFieldControl,
 // useExisting:ResourceAddComponent },
  useExisting:FacetComposerComponent },
  ResourcesImplService]
})


export class TableScreenVsComponent implements OnInit, AfterViewInit, OnChanges {
 displayedColumns: string[] = ['id','lastMod'];
  dataFromService: IVirtualService[];
  dataSource = new MatTableDataSource();
  tableDetail: IVirtualService;
  dialogAddRef: MatDialogRef<TableScreenVsComponent> |undefined;
  errorMessage = '';
  
  @Input() currentCtx: IContextNode; //fetching event from parent
  @Input() currentCtxPath: string; //fetching event from parent
  @Input() typeObject: IResource; 
  @Output() jsonEmitter = new EventEmitter<IVirtualService>();
  @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

	constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) {
	    this.currentCtx = {} as IContextNode;
	    this.tableDetail = {} as IVirtualService;
	    this.dataFromService = [];
	    this.sort = new MatSort();
	    this.paginator = {} as MatPaginator;
	    //this.resourceType = '';
	    this.typeObject = {} as IResourceType;
	    this.currentCtxPath = '';
	    this.rawJson = '';
	  }
  
	    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;
  		}
    });
  }

  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);
  }
  
}