gCubeSystem
/
information-system-gui
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing html and javascript features

This commit is contained in:
Maria Teresa Paratore 2024-01-10 17:02:09 +01:00
parent a1a69ea801
commit cf60efd67d
10 changed files with 145 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/main/webapp/app/home/home.component.html
View File

@ -25,7 +25,7 @@
</div>
<div class="col-md-9">
<h2 #titleRoot *ngIf="allCtxs && allCtxs.length!==0" class="pt-3">Root Context: {{[allCtxs[0].path]}} - UUID: {{allCtxs[0].id}}</h2>
<!-- <h2 #titleRoot *ngIf="allCtxs && allCtxs.length!==0" class="pt-3">Root Context: {{[allCtxs[0].path]}} - UUID: {{allCtxs[0].id}}</h2> -->
<div>
<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
<form [formGroup]="chooseContextForm">
@ -33,13 +33,16 @@
<mat-form-field id="pathfield" [style.width.px]="400" class="form-field">
<mat-select placeholder="Available Contexts" formControlName="pathfield">
<mat-select placeholder="Available Contexts" formControlName="pathfield" (valueChange)="setNewContext($event)">
<mat-select-filter [placeholder]="'filter by name'" [displayMember]="'path'" [array]="allCtxs" (filteredReturn)="filteredContexts =$event"></mat-select-filter>
<mat-option *ngFor="let item of filteredContexts" [value]="item">
{{item.path}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button (click)="copyPath(pathfield)" color="primary" matTooltip="copy path" matTooltipPosition="below">
<mat-icon class="icon-wide2">content_copy</mat-icon>
</button>
</div>
<mat-form-field id="namefield" [style.width.px]=400 appearance="outline" class="form-field">
@ -53,25 +56,22 @@
<input matInput type="text" placeholder="UUID"
formControlName="uidfield" readonly [value]="pathfield.value.id" />
</mat-form-field>
<button mat-button (click)="copyUid(pathfield)" color="primary" matTooltip="copy UUID" matTooltipPosition="below">
<mat-icon class="icon-wide2">content_copy</mat-icon>
</button>
<button mat-button color="primary" matTooltip="locate" matTooltipPosition="below">
<mat-icon class="icon-wide2">location_searching</mat-icon>
</button>
</form>
<div [ngSwitch]="resType">
</form>
<div [ngSwitch]="resType" class="mt-3">
<div *ngSwitchCase = "'HostingNode'">
<jhi-table-screen [resourceType]="resType"></jhi-table-screen>
<jhi-table-screen [resourceType]="resType" [currentCtx]="myContext"></jhi-table-screen>
</div>
<div *ngSwitchCase = "'EService'">
<jhi-table-screen-es [resourceType]="resType"></jhi-table-screen-es>
<jhi-table-screen-es [resourceType]="resType" [currentCtx]="myContext"></jhi-table-screen-es>
</div>
<div *ngSwitchDefault>Please navigate the resource type tree and select one</div>
<div *ngSwitchDefault>Qui mettere Tipo e bottone per aggiungere</div>
</div>
</div>
</div>

72
src/main/webapp/app/home/home.component.ts
View File

@ -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<IContextNode[]> | null = null;
//public filteredContextsStr: Observable<string[]>| undefined;
chooseContextForm: FormGroup | any;
resType: string;
isLoading: boolean = false;
subscriptions: Subscription[] = [];
//@Output() public contextPathEm = new EventEmitter<string>();
//@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
}
}

8
src/main/webapp/app/layouts/navbar/navbar.component.html
View File

@ -142,8 +142,12 @@
data-cy="accountMenu">
<span *ngIf="!account?.imageUrl">
<fa-icon icon="user"></fa-icon>
<span jhiTranslate="global.menu.account.main">Account</span>
<span>Account bla</span>
</span>
<!--
<div [ngSwitch]="account !== null">
<div *ngSwitchCase="true">
-->
<span *ngIf="account?.imageUrl">
<img [src]="account!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
</span>
@ -152,7 +156,7 @@
<li *ngSwitchCase="true">
<a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
<fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
<span jhiTranslate="global.menu.account.logout">Sign out</span>
<span>Sign out</span>
</a>
</li>
<li *ngSwitchCase="false">

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

@ -12,7 +12,6 @@
{{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
<button mat-button (click)="onClickNodeTree(node)">
{{ node.name }}
</button>

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

@ -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';
}

4
src/main/webapp/app/services/resources-impl.service.ts
View File

@ -25,10 +25,10 @@ export class ResourcesImplService {
}
//TODO: paginate when APIs are ready
fetchResourceImpls(ctx:string, type:string): Observable<any[]> {
fetchResourceImpls(ctxPath:string, type:string): Observable<any[]> {
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*****");

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

@ -1,7 +1,10 @@
<div class="p-3">
<div class="d-flex flex-row">
<h1>Type: {{resourceType}}</h1>
<h4 class="my-3 font-weight-bold">Type: {{resourceType}}</h4>
<div id="btn-group" class="col-md-3 mx-5 mt-2">
<button mat-raised-button color="primary" (click)="reloadTable()" >
<mat-icon>replay</mat-icon><span>Reload</span>
</button>
<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
</div>
</div>

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

@ -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<ResourceAddComponent> |undefined;
@Input() myCtx: IContextNode; //fetching event from parent
@Input() currentCtx: IContextNode; //fetching event from parent
@Input() resourceType: string;
@Output() jsonEmitter = new EventEmitter<IEService>();
@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 = <IContextNode>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 = <IContextNode>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;
});
}
}
}
}
}

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

@ -1,16 +1,20 @@
<div class="p-3">
<div class="d-flex flex-row">
<h1>Type: {{resourceType}}</h1>
<div id="btn-group" class="col-md-3 mx-5 mt-2">
<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
</div>
</div>
<mat-form-field class="my-3">
<!--<h4>Type: {{resourceType}} ({{currentCtx.name}})</h4>-->
<h4 class="my-3 font-weight-bold" >Type: {{resourceType}}</h4>
<div class="d-flex flex-row my-2">
<mat-form-field>
<mat-label>Search by Name</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="type in..." #input />
</mat-form-field>
<div id="btn-group" class="col-md-3 mx-5 mt-2">
<button mat-raised-button color="primary" (click)="reloadTable()" >
<mat-icon>replay</mat-icon><span>Reload</span>
</button>
<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
</div>
</div>
<div class="mat-elevation-z4">
<table mat-table [dataSource]="dataSource" matSort>

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

@ -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<ResourceAddComponent> |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<IHostingNode>();
@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 = <IContextNode>param.currentValue;
this.currentCtx = <IContextNode>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 => {