From cf60efd67d2f469e56ff0da8bc50d85e0b85d894 Mon Sep 17 00:00:00 2001 From: mariateresa Date: Wed, 10 Jan 2024 17:02:09 +0100 Subject: [PATCH] fixing html and javascript features --- src/main/webapp/app/home/home.component.html | 22 +++--- src/main/webapp/app/home/home.component.ts | 72 ++++++++--------- .../app/layouts/navbar/navbar.component.html | 8 +- .../app/rsc-tree/rsc-tree.component.html | 1 - .../webapp/app/rsc-tree/rsc-tree.component.ts | 5 +- .../app/services/resources-impl.service.ts | 4 +- .../table-screen-es.component.html | 5 +- .../table-screen-es.component.ts | 79 ++++++++++--------- .../table-screen/table-screen.component.html | 22 +++--- .../table-screen/table-screen.component.ts | 49 ++++++++---- 10 files changed, 145 insertions(+), 122 deletions(-) diff --git a/src/main/webapp/app/home/home.component.html b/src/main/webapp/app/home/home.component.html index 856d86d..d6a8c21 100644 --- a/src/main/webapp/app/home/home.component.html +++ b/src/main/webapp/app/home/home.component.html @@ -25,7 +25,7 @@
-

Root Context: {{[allCtxs[0].path]}} - UUID: {{allCtxs[0].id}}

+
@@ -33,13 +33,16 @@ - + {{item.path}} +
@@ -53,25 +56,22 @@ - - - - - -
+ + +
- +
- +
-
Please navigate the resource type tree and select one
+
Qui mettere Tipo e bottone per aggiungere
diff --git a/src/main/webapp/app/home/home.component.ts b/src/main/webapp/app/home/home.component.ts index 267a49e..d51ea33 100644 --- a/src/main/webapp/app/home/home.component.ts +++ b/src/main/webapp/app/home/home.component.ts @@ -5,17 +5,16 @@ /* eslint-disable @typescript-eslint/no-unnecessary-condition */ /* eslint-disable @typescript-eslint/restrict-plus-operands */ // eslint-disable-next-line @typescript-eslint/no-unsafe-return -import { Component, OnDestroy, OnInit, ViewChild,ElementRef, AfterContentInit, AfterViewInit } from '@angular/core'; - +import { Component, OnDestroy, OnInit } from '@angular/core'; import { LoginService } from 'app/login/login.service'; import { AccountService } from 'app/core/auth/account.service'; import { Account } from 'app/core/auth/account.model'; -import { FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Clipboard } from '@angular/cdk/clipboard' -import { Observable, Subject, Subscription, delay, map, startWith, takeUntil } from 'rxjs'; +import { Subscription } from 'rxjs'; import { ContextsLoaderService } from 'app/services/contexts-loader.service'; import { IContextNode } from 'app/services/i-context-node'; -import { AutofillValidator, instanceOfContext } from './autofill-validator'; +import { AutofillValidator } from './autofill-validator'; import { SpinnerLoadingService } from 'app/services/spinner-loading.service'; @@ -27,21 +26,19 @@ import { SpinnerLoadingService } from 'app/services/spinner-loading.service'; }) export class HomeComponent implements OnInit, OnDestroy { + account: Account | null = null; - myContext: IContextNode | null = null; - //stringCtxs: string[]; + myContext: IContextNode; allCtxs: IContextNode[] | null = null; filteredContexts: IContextNode[] | null = null; - //public filteredContexts: Observable | null = null; - //public filteredContextsStr: Observable| undefined; chooseContextForm: FormGroup | any; resType: string; isLoading: boolean = false; subscriptions: Subscription[] = []; + //@Output() public contextPathEm = new EventEmitter(); + - //@ViewChild('leftTree') leftTree: ElementRef | undefined; - constructor( private accountService: AccountService, private loginService: LoginService, @@ -52,6 +49,8 @@ export class HomeComponent implements OnInit, OnDestroy { //initialise on HostingNodes this.resType="HostingNode"; this.allCtxs = []; + this.myContext = {} as IContextNode; + } get pathfield(): any { @@ -78,13 +77,14 @@ export class HomeComponent implements OnInit, OnDestroy { }); - // per la form dei contesti + //for the contexts form this.ctxLoaderService.fetchAll().subscribe(res => { this.allCtxs = res; this.filteredContexts = this.allCtxs.slice(); + //initialize to root + this.myContext = this.allCtxs[0]; }); - this.subscriptions.push(this.progressService.getState() .pipe() .subscribe(res => { @@ -93,37 +93,15 @@ export class HomeComponent implements OnInit, OnDestroy { } /* - ngAfterViewInit(): void { - - - - this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe( - startWith(''), - map(ctx => (ctx ? this.filterContexts(ctx) : this.allCtxs.slice())) - ); - } - */ - + reloadResourceTable():void { + //alert('reloading'); + this.contextPathEm.emit(this.myContext.path); + }*/ ngOnDestroy(): void { //alert(this.subscriptions.length); this.subscriptions.forEach(sub => sub.unsubscribe()); } - - //mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!! - /* - filterContexts( item: any): IContextNode[] { - alert('filtering!'); - if(!instanceOfContext(item)){ - return this.allCtxs.filter(ctx => ctx.name.toLowerCase().includes(item.toLowerCase())); - }else{ - return []; - } - }*/ - - displayFn(ctx: IContextNode): string { - return ctx.path; - } copyUid(val: any): void { @@ -135,12 +113,26 @@ export class HomeComponent implements OnInit, OnDestroy { } } + copyPath(val: any): void { + if (val instanceof FormControl) { + this.clipboard.copy(val.getRawValue().path); + } else { + //this.clipboard.copy('invalid value'); + this.clipboard.copy('invalid value'); + } + } + login(): void { this.loginService.login(); } buildTableData(newType:string):void{ this.resType = newType; - console.log("++++++resType..."+this.resType); + } + + + setNewContext(newCtx: IContextNode): void { + //this.contextEm.emit(ctx); + this.myContext = newCtx } } diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.html b/src/main/webapp/app/layouts/navbar/navbar.component.html index b57429a..2654352 100644 --- a/src/main/webapp/app/layouts/navbar/navbar.component.html +++ b/src/main/webapp/app/layouts/navbar/navbar.component.html @@ -142,8 +142,12 @@ data-cy="accountMenu"> - Account + Account bla + Avatar @@ -152,7 +156,7 @@
  • - Sign out + Sign out
  • diff --git a/src/main/webapp/app/rsc-tree/rsc-tree.component.html b/src/main/webapp/app/rsc-tree/rsc-tree.component.html index 55cf6e5..5f2049c 100644 --- a/src/main/webapp/app/rsc-tree/rsc-tree.component.html +++ b/src/main/webapp/app/rsc-tree/rsc-tree.component.html @@ -12,7 +12,6 @@ {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }} - diff --git a/src/main/webapp/app/rsc-tree/rsc-tree.component.ts b/src/main/webapp/app/rsc-tree/rsc-tree.component.ts index 514b5bd..16e127b 100644 --- a/src/main/webapp/app/rsc-tree/rsc-tree.component.ts +++ b/src/main/webapp/app/rsc-tree/rsc-tree.component.ts @@ -40,12 +40,13 @@ hasNestedChild(_: number, node: IResource): boolean { } } - //TODO: InformationSystemResourceClient shoud pass a code, not a name! + //TODO: InformationSystemResourceClient should pass a code, not a name (API feature request)! onClickNodeTree(node:IResource):void{ - //this.setActiveClass(); this.resourceTypeEm.emit(node.name); } + + setActiveClass():void{ this.statusClass = 'active'; } diff --git a/src/main/webapp/app/services/resources-impl.service.ts b/src/main/webapp/app/services/resources-impl.service.ts index 22da579..1ac272a 100644 --- a/src/main/webapp/app/services/resources-impl.service.ts +++ b/src/main/webapp/app/services/resources-impl.service.ts @@ -25,10 +25,10 @@ export class ResourcesImplService { } //TODO: paginate when APIs are ready - fetchResourceImpls(ctx:string, type:string): Observable { + fetchResourceImpls(ctxPath:string, type:string): Observable { const resourceUrl = this.applicationConfigService.getEndpointFor('api/is/resourceinstances'); let queryParams = new HttpParams(); - queryParams = queryParams.append("currentContext",ctx).append("resourceType",type); + queryParams = queryParams.append("currentContext",ctxPath).append("resourceType",type); // eslint-disable-next-line @typescript-eslint/no-unsafe-return if(type==='HostingNode'){ //console.debug("******GETTING HOSTING NODE*****"); diff --git a/src/main/webapp/app/table-screen-es/table-screen-es.component.html b/src/main/webapp/app/table-screen-es/table-screen-es.component.html index e1eff9a..414d6c8 100644 --- a/src/main/webapp/app/table-screen-es/table-screen-es.component.html +++ b/src/main/webapp/app/table-screen-es/table-screen-es.component.html @@ -1,7 +1,10 @@
    -

    Type: {{resourceType}}

    +

    Type: {{resourceType}}

    +
    diff --git a/src/main/webapp/app/table-screen-es/table-screen-es.component.ts b/src/main/webapp/app/table-screen-es/table-screen-es.component.ts index 9b3c95e..d40a8df 100644 --- a/src/main/webapp/app/table-screen-es/table-screen-es.component.ts +++ b/src/main/webapp/app/table-screen-es/table-screen-es.component.ts @@ -32,7 +32,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'; providers: [ResourcesImplService], }) -export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges { +export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{ //NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata //displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'artifact', 'group', 'version', 'endpoint','actions']; displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'endpoint','actions']; @@ -41,7 +41,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges tableDetail: IEService; dialogRef: MatDialogRef |undefined; - @Input() myCtx: IContextNode; //fetching event from parent + @Input() currentCtx: IContextNode; //fetching event from parent @Input() resourceType: string; @Output() jsonEmitter = new EventEmitter(); @ViewChild(MatSort) sort: MatSort; @@ -60,7 +60,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) { - this.myCtx = {} as IContextNode; + this.currentCtx = {} as IContextNode; this.tableDetail = {} as IEService; this.dataFromService = []; this.sort = new MatSort(); @@ -75,51 +75,27 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges } ngOnInit(): void { - this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => { + + let ctxPath = ''; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if(this.currentCtx.path !== undefined){ + ctxPath = this.currentCtx.path; + } + + this.myDataService.fetchResourceImpls(ctxPath,this.resourceType).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; - } - //console.debug(res); }); } - ngOnChanges(changes: SimpleChanges): void { - // console.log('---NELLA ONCHANGES...' + this.myCtx.name); - for (const propName in changes) { - if (propName === 'myCtx') { - const param = changes[propName]; - //TODO: questo รจ un tipo - this.myCtx = param.currentValue; - //controllo che l'oggetto non sia vuoto - if (Object.keys(this.myCtx).length !== 0) { - //mt qui va passato il parametro ResourceType (preso dall'albero) al rest - this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => { - this.dataFromService = res; - this.dataSource.data = res; - }); - } - } - } - } - + applyFilter(event: Event): void { const filterValue = (event.target as HTMLInputElement).value; console.debug("++++++DATASOURCE:"); console.debug(this.dataSource); this.dataSource.filter = filterValue.trim().toLowerCase(); } - /* - filterTable(): void { - this.dataSource.filterPredicate = (data: IEService, filter: string): boolean => { - return ( - data.name.toLocaleLowerCase().includes(filter) - ) - } - } - */ + // per tabbed pane (versione con aggiunta dinamica) @@ -161,16 +137,41 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges } openDialogAdd(): void { - // alert('contesto...'+this.myCtx.name); + // alert('contesto...'+this.currentCtx.name); this.dialogRef = this.myDialog.open(ResourceAddComponent, { //TODO: passare tipo e contesto - data: {type: this.resourceType, context: this.myCtx}, + data: {type: this.resourceType, context: this.currentCtx}, }); + this.dialogRef.afterClosed().subscribe(result => { console.log('The dialog was closed'); this.dummyRes = result; }); } + reloadTable():void{ + this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => { + this.dataFromService = res; + this.dataSource.data = res; + }) + } + + + ngOnChanges(changes: SimpleChanges): void { + for (const propName in changes) { + if (propName === 'currentCtx') { + const param = changes[propName]; + this.currentCtx = param.currentValue; + //controllo che l'oggetto non sia vuoto + if (Object.keys(this.currentCtx).length !== 0) { + this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => { + this.dataFromService = res; + this.dataSource.data = res; + }); + } + } + } + } + } diff --git a/src/main/webapp/app/table-screen/table-screen.component.html b/src/main/webapp/app/table-screen/table-screen.component.html index 9804c6e..4d1600d 100644 --- a/src/main/webapp/app/table-screen/table-screen.component.html +++ b/src/main/webapp/app/table-screen/table-screen.component.html @@ -1,16 +1,20 @@
    -
    -

    Type: {{resourceType}}

    -
    - -
    -
    - - + + +

    Type: {{resourceType}}

    + +
    + Search by Name - +
    + + +
    +
    diff --git a/src/main/webapp/app/table-screen/table-screen.component.ts b/src/main/webapp/app/table-screen/table-screen.component.ts index 139b6ba..00f09e6 100644 --- a/src/main/webapp/app/table-screen/table-screen.component.ts +++ b/src/main/webapp/app/table-screen/table-screen.component.ts @@ -1,4 +1,7 @@ +/* eslint-disable @typescript-eslint/restrict-plus-operands */ +/* eslint-disable @typescript-eslint/no-unnecessary-condition */ /* eslint-disable no-console */ + import { Component, Output, @@ -6,10 +9,10 @@ import { OnInit, ViewChild, AfterViewInit, - OnChanges, - SimpleChanges, Input, QueryList, + OnChanges, + SimpleChanges, } from '@angular/core'; import { MatTableDataSource } from '@angular/material/table'; @@ -40,7 +43,8 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { tableDetail: IHostingNode; dialogRef: MatDialogRef |undefined; - @Input() myCtx: IContextNode; //fetching event from parent + @Input() currentCtx: IContextNode; //fetching event from parent + @Input() currentCtxPath: string; //fetching event from parent @Input() resourceType: string; @Output() jsonEmitter = new EventEmitter(); @ViewChild(MatSort) sort: MatSort; @@ -60,12 +64,13 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { ////////// fine tabbed view constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) { - this.myCtx = {} as IContextNode; + this.currentCtx = {} as IContextNode; this.tableDetail = {} as IHostingNode; this.dataFromService = []; this.sort = new MatSort(); this.paginator = {} as MatPaginator; this.resourceType = ''; + this.currentCtxPath = ''; this.dummyRes = ''; } @@ -75,29 +80,35 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { } ngOnInit(): void { - this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => { + + let ctxPath = ''; + if(this.currentCtx.path !== undefined){ + ctxPath = this.currentCtx.path; + }else if(this.currentCtxPath !== undefined){ + ctxPath = this.currentCtxPath + } + + this.myDataService.fetchResourceImpls(ctxPath,this.resourceType).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.dataSource.filterPredicate = - (data: IHostingNode, filter: string) => !filter || data.level == filter; - */ }); } + ngOnChanges(changes: SimpleChanges): void { - // console.log('---NELLA ONCHANGES...' + this.myCtx.name); + for (const propName in changes) { - if (propName === 'myCtx') { + if (propName === 'currentCtx') { const param = changes[propName]; - this.myCtx = param.currentValue; + this.currentCtx = param.currentValue; //controllo che l'oggetto non sia vuoto - if (Object.keys(this.myCtx).length !== 0) { - this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => { + if (Object.keys(this.currentCtx).length !== 0) { + this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => { this.dataFromService = res; this.dataSource.data = res; }); @@ -105,6 +116,7 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { } } } + applyFilter(event: Event): void { const filterValue = (event.target as HTMLInputElement).value; @@ -132,6 +144,13 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { } } + reloadTable():void{ + this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => { + this.dataFromService = res; + this.dataSource.data = res; + }) + } + closeTab(index: number): void { /* console.debug('---------'); @@ -166,7 +185,7 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { // alert('contesto...'+this.myCtx.name); this.dialogRef = this.myDialog.open(ResourceAddComponent, { //TODO: passare tipo e contesto - data: {type: this.resourceType, context: this.myCtx}, + data: {type: this.resourceType, context: this.currentCtx}, }); this.dialogRef.afterClosed().subscribe(result => {