Compare commits

...

16 Commits

Author SHA1 Message Date
Maria Teresa Paratore 1883f3ce77 added support for JSON view (data fetched via service) 2023-09-28 18:04:31 +02:00
Maria Teresa Paratore c4360a6ddb adding tabbed view (work in progress)... 2023-09-27 17:17:31 +02:00
Maria Teresa Paratore bc4e947f05 adding support for tabbed component (work in progress) 2023-09-26 17:39:15 +02:00
Maria Teresa Paratore cafa1e7ceb "copy to clipboard" function implemented 2023-09-26 11:22:59 +02:00
Maria Teresa Paratore daab34df7c copy to clipboard implementation and other changes 2023-09-25 18:12:09 +02:00
Maria Teresa Paratore 7f4458cdc3 Solved problems with autocomplete and form validation (reactive forms) 2023-09-22 16:56:19 +02:00
Maria Teresa Paratore 970b8b87d2 minor changes 2023-09-21 10:47:52 +02:00
Maria Teresa Paratore e9d54e8f37 debugging autocomplete for reactive form type 2023-09-20 16:57:35 +02:00
Maria Teresa Paratore b3ce1d2611 minor changes 2023-09-19 18:04:20 +02:00
Maria Teresa Paratore 52a534d232 Form field and error binding + autocompletion and css debugging 2023-09-19 17:30:31 +02:00
Maria Teresa Paratore adb31ae1a2 removed select component and added autocompletion + minor changes (css) 2023-09-15 16:07:30 +02:00
Maria Teresa Paratore 3dafb27bb8 adding searchable select, plus minor changes (work in progress...) 2023-09-13 16:37:21 +02:00
Maria Teresa Paratore 4c9bed13b5 added support for filtering and pagination in material table 2023-09-12 17:52:13 +02:00
Maria Teresa Paratore 2a8d28acfa working with material tables 2023-09-08 17:37:55 +02:00
Maria Teresa Paratore 218b1fe9c1 working with material tables 2023-09-08 17:36:28 +02:00
Maria Teresa Paratore 7bb80f7701 minor changes 2023-09-08 14:13:13 +02:00
28 changed files with 802 additions and 24 deletions

95
egacy-peer-deps Normal file
View File

@ -0,0 +1,95 @@
[INFO] Scanning for projects...
[INFO]
[INFO] -----------------< org.gcube.isdashboard:isdashboard >------------------
[INFO] Building Isdashboard 0.0.1-SNAPSHOT
[INFO] from pom.xml
[INFO] --------------------------------[ jar ]---------------------------------
[INFO]
[INFO] >>> spring-boot:3.1.1:run (default-cli) > test-compile @ isdashboard >>>
[INFO]
[INFO] --- resources:3.3.1:copy-resources (default-resources) @ isdashboard ---
[INFO] Copying 4 resources from src/main/resources to target/classes
[INFO] Copying 5 resources from src/main/resources to target/classes
[INFO]
[INFO] --- resources:3.3.1:resources (default-resources) @ isdashboard ---
[INFO] Copying 4 resources from src/main/resources to target/classes
[INFO] Copying 5 resources from src/main/resources to target/classes
[INFO]
[INFO] --- enforcer:3.3.0:enforce (enforce-versions) @ isdashboard ---
[INFO] Rule 0: org.apache.maven.enforcer.rules.version.RequireMavenVersion passed
[INFO] Rule 1: org.apache.maven.enforcer.rules.version.RequireJavaVersion passed
[INFO]
[INFO] --- enforcer:3.3.0:enforce (enforce-dependencyConvergence) @ isdashboard ---
[INFO] Rule 0: org.apache.maven.enforcer.rules.dependency.DependencyConvergence passed
[INFO]
[INFO] --- properties:1.1.0:read-project-properties (default) @ isdashboard ---
[INFO]
[INFO] --- jacoco:0.8.10:prepare-agent (pre-unit-tests) @ isdashboard ---
[INFO] argLine set to -javaagent:/Users/mariateresaparatore/.m2/repository/org/jacoco/org.jacoco.agent/0.8.10/org.jacoco.agent-0.8.10-runtime.jar=destfile=/Users/mariateresaparatore/Documents/workspace-spring/isdashboard/target/jacoco.exec -Djava.security.egd=file:/dev/./urandom -Xmx1G
[INFO]
[INFO] --- spotless:2.37.0:apply (spotless) @ isdashboard ---
[INFO] Spotless.Java is keeping 45 files clean - 0 were changed to be clean, 0 were already clean, 45 were skipped because caching determined they were already clean
[INFO]
[INFO] --- checksum:1.11:files (create-pre-compiled-webapp-checksum) @ isdashboard ---
[INFO]
[INFO] --- antrun:3.1.0:run (eval-frontend-checksum) @ isdashboard ---
[INFO] Executing tasks
[INFO] Executed tasks
[INFO]
[INFO] --- frontend:1.13.4:install-node-and-npm (install-node-and-npm) @ isdashboard ---
[INFO] Node v18.16.1 is already installed.
[INFO] NPM 9.8.0 is already installed.
[INFO]
[INFO] --- frontend:1.13.4:npm (npm install) @ isdashboard ---
[INFO] Running 'npm install' in /Users/mariateresaparatore/Documents/workspace-spring/isdashboard
[INFO] npm ERR! code ERESOLVE
[INFO] npm ERR! ERESOLVE unable to resolve dependency tree
[INFO] npm ERR!
[INFO] npm ERR! While resolving: isdashboard@0.0.1-SNAPSHOT
[INFO] npm ERR! Found: @angular/core@16.1.4
[INFO] npm ERR! node_modules/@angular/core
[INFO] npm ERR! @angular/core@"16.1.4" from the root project
[INFO] npm ERR! peer @angular/core@"^16.0.0 || ^17.0.0" from @angular/material-moment-adapter@16.1.4
[INFO] npm ERR! node_modules/@angular/material-moment-adapter
[INFO] npm ERR! @angular/material-moment-adapter@"16.1.4" from the root project
[INFO] npm ERR! 1 more (@angular/material)
[INFO] npm ERR!
[INFO] npm ERR! Could not resolve dependency:
[INFO] npm ERR! peer @angular/core@"16.2.4" from @angular/animations@16.2.4
[INFO] npm ERR! node_modules/@angular/animations
[INFO] npm ERR! @angular/animations@"^16.1.4" from the root project
[INFO] npm ERR! peer @angular/animations@"^16.0.0 || ^17.0.0" from @angular/material@16.1.4
[INFO] npm ERR! node_modules/@angular/material
[INFO] npm ERR! @angular/material@"^16.1.4" from the root project
[INFO] npm ERR! 1 more (@angular/material-moment-adapter)
[INFO] npm ERR!
[INFO] npm ERR! Fix the upstream dependency conflict, or retry
[INFO] npm ERR! this command with --force or --legacy-peer-deps
[INFO] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[INFO] npm ERR!
[INFO] npm ERR!
[INFO] npm ERR! For a full report see:
[INFO] npm ERR! /Users/mariateresaparatore/.npm/_logs/2023-09-13T08_30_20_929Z-eresolve-report.txt
[INFO]
[INFO] npm ERR! A complete log of this run can be found in: /Users/mariateresaparatore/.npm/_logs/2023-09-13T08_30_20_929Z-debug-0.log
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 9.541 s
[INFO] Finished at: 2023-09-13T10:30:23+02:00
[INFO] ------------------------------------------------------------------------
[WARNING]
[WARNING] Plugin validation issues were detected in 2 plugin(s)
[WARNING]
[WARNING] * org.jacoco:jacoco-maven-plugin:0.8.10
[WARNING] * org.apache.maven.plugins:maven-resources-plugin:3.3.1
[WARNING]
[WARNING] For more or less details, use 'maven.plugin.validation' property with one of the values (case insensitive): [BRIEF, DEFAULT, VERBOSE]
[WARNING]
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.13.4:npm (npm install) on project isdashboard: Failed to run task: 'npm install' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

95
legacy-peer-deps Normal file
View File

@ -0,0 +1,95 @@
[INFO] Scanning for projects...
[INFO]
[INFO] -----------------< org.gcube.isdashboard:isdashboard >------------------
[INFO] Building Isdashboard 0.0.1-SNAPSHOT
[INFO] from pom.xml
[INFO] --------------------------------[ jar ]---------------------------------
[INFO]
[INFO] >>> spring-boot:3.1.1:run (default-cli) > test-compile @ isdashboard >>>
[INFO]
[INFO] --- resources:3.3.1:copy-resources (default-resources) @ isdashboard ---
[INFO] Copying 4 resources from src/main/resources to target/classes
[INFO] Copying 5 resources from src/main/resources to target/classes
[INFO]
[INFO] --- resources:3.3.1:resources (default-resources) @ isdashboard ---
[INFO] Copying 4 resources from src/main/resources to target/classes
[INFO] Copying 5 resources from src/main/resources to target/classes
[INFO]
[INFO] --- enforcer:3.3.0:enforce (enforce-versions) @ isdashboard ---
[INFO] Rule 0: org.apache.maven.enforcer.rules.version.RequireMavenVersion passed
[INFO] Rule 1: org.apache.maven.enforcer.rules.version.RequireJavaVersion passed
[INFO]
[INFO] --- enforcer:3.3.0:enforce (enforce-dependencyConvergence) @ isdashboard ---
[INFO] Rule 0: org.apache.maven.enforcer.rules.dependency.DependencyConvergence passed
[INFO]
[INFO] --- properties:1.1.0:read-project-properties (default) @ isdashboard ---
[INFO]
[INFO] --- jacoco:0.8.10:prepare-agent (pre-unit-tests) @ isdashboard ---
[INFO] argLine set to -javaagent:/Users/mariateresaparatore/.m2/repository/org/jacoco/org.jacoco.agent/0.8.10/org.jacoco.agent-0.8.10-runtime.jar=destfile=/Users/mariateresaparatore/Documents/workspace-spring/isdashboard/target/jacoco.exec -Djava.security.egd=file:/dev/./urandom -Xmx1G
[INFO]
[INFO] --- spotless:2.37.0:apply (spotless) @ isdashboard ---
[INFO] Spotless.Java is keeping 45 files clean - 0 were changed to be clean, 0 were already clean, 45 were skipped because caching determined they were already clean
[INFO]
[INFO] --- checksum:1.11:files (create-pre-compiled-webapp-checksum) @ isdashboard ---
[INFO]
[INFO] --- antrun:3.1.0:run (eval-frontend-checksum) @ isdashboard ---
[INFO] Executing tasks
[INFO] Executed tasks
[INFO]
[INFO] --- frontend:1.13.4:install-node-and-npm (install-node-and-npm) @ isdashboard ---
[INFO] Node v18.16.1 is already installed.
[INFO] NPM 9.8.0 is already installed.
[INFO]
[INFO] --- frontend:1.13.4:npm (npm install) @ isdashboard ---
[INFO] Running 'npm install' in /Users/mariateresaparatore/Documents/workspace-spring/isdashboard
[INFO] npm ERR! code ERESOLVE
[INFO] npm ERR! ERESOLVE unable to resolve dependency tree
[INFO] npm ERR!
[INFO] npm ERR! While resolving: isdashboard@0.0.1-SNAPSHOT
[INFO] npm ERR! Found: @angular/core@16.1.4
[INFO] npm ERR! node_modules/@angular/core
[INFO] npm ERR! @angular/core@"16.1.4" from the root project
[INFO] npm ERR! peer @angular/core@"^16.0.0 || ^17.0.0" from @angular/material-moment-adapter@16.1.4
[INFO] npm ERR! node_modules/@angular/material-moment-adapter
[INFO] npm ERR! @angular/material-moment-adapter@"16.1.4" from the root project
[INFO] npm ERR! 1 more (@angular/material)
[INFO] npm ERR!
[INFO] npm ERR! Could not resolve dependency:
[INFO] npm ERR! peer @angular/core@"16.2.4" from @angular/animations@16.2.4
[INFO] npm ERR! node_modules/@angular/animations
[INFO] npm ERR! @angular/animations@"^16.1.4" from the root project
[INFO] npm ERR! peer @angular/animations@"^16.0.0 || ^17.0.0" from @angular/material@16.1.4
[INFO] npm ERR! node_modules/@angular/material
[INFO] npm ERR! @angular/material@"^16.1.4" from the root project
[INFO] npm ERR! 1 more (@angular/material-moment-adapter)
[INFO] npm ERR!
[INFO] npm ERR! Fix the upstream dependency conflict, or retry
[INFO] npm ERR! this command with --force or --legacy-peer-deps
[INFO] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[INFO] npm ERR!
[INFO] npm ERR!
[INFO] npm ERR! For a full report see:
[INFO] npm ERR! /Users/mariateresaparatore/.npm/_logs/2023-09-11T07_58_56_685Z-eresolve-report.txt
[INFO]
[INFO] npm ERR! A complete log of this run can be found in: /Users/mariateresaparatore/.npm/_logs/2023-09-11T07_58_56_685Z-debug-0.log
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 7.200 s
[INFO] Finished at: 2023-09-11T09:58:58+02:00
[INFO] ------------------------------------------------------------------------
[WARNING]
[WARNING] Plugin validation issues were detected in 2 plugin(s)
[WARNING]
[WARNING] * org.jacoco:jacoco-maven-plugin:0.8.10
[WARNING] * org.apache.maven.plugins:maven-resources-plugin:3.3.1
[WARNING]
[WARNING] For more or less details, use 'maven.plugin.validation' property with one of the values (case insensitive): [BRIEF, DEFAULT, VERBOSE]
[WARNING]
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.13.4:npm (npm install) on project isdashboard: Failed to run task: 'npm install' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

View File

@ -67,14 +67,15 @@
},
"dependencies": {
"@angular/animations": "^16.1.4",
"@angular/common": "16.1.4",
"@angular/compiler": "16.1.4",
"@angular/core": "16.1.4",
"@angular/forms": "16.1.4",
"@angular/localize": "16.1.4",
"@angular/material": "^16.1.4",
"@angular/material-moment-adapter": "16.1.4",
"@angular/platform-browser": "16.1.4",
"@angular/platform-browser-dynamic": "16.1.4",
"@angular/platform-browser/animations": "^16.1.4",
"@angular/router": "16.1.4",
"@fortawesome/angular-fontawesome": "0.13.0",
"@fortawesome/fontawesome-svg-core": "6.4.0",

View File

@ -11,7 +11,8 @@ import LoginComponent from './login/login.component';
import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
import { TabbedPageComponent } from './tabbed-page/tabbed-page.component';
import { DynTabsComponent } from './dyn-tabs/dyn-tabs.component';
import { TableScreenComponent } from './table-screen/table-screen.component';
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
@NgModule({
imports: [
@ -24,13 +25,20 @@ import { DynTabsComponent } from './dyn-tabs/dyn-tabs.component';
},
{
//TEST PER DYNAMIC TABS
//TEST
path: 'tabbed-page',
component: TabbedPageComponent,
},
{
path: 'dyn-tabs',
component: DynTabsComponent,
//TEST
path: 'mat-table',
component: TableScreenComponent,
},
{
//TEST
path: 'rsc-tree',
component: RscTreeComponent,
},
{

View File

@ -20,10 +20,12 @@ import { httpInterceptorProviders } from 'app/core/interceptor/index';
import MainComponent from './layouts/main/main.component';
import MainModule from './layouts/main/main.module';
import { AppPageTitleStrategy } from './app-page-title-strategy';
//import { ItemsListComponent } from './items-list/items-list.component';
import { SharedModule } from 'app/shared/shared.module';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
import { TableScreenComponent } from './table-screen/table-screen.component';
import { RawjsonPaneComponent } from './rawjson-pane/rawjson-pane.component';
@NgModule({
imports: [
BrowserModule,
@ -35,7 +37,11 @@ import { MatIconModule } from '@angular/material/icon';
SharedModule,
MainModule,
MatIconModule,
BrowserModule,
BrowserAnimationsModule,
TableScreenComponent,
TabsModule.forRoot(),
RawjsonPaneComponent,
],
providers: [
Title,
@ -45,9 +51,7 @@ import { MatIconModule } from '@angular/material/icon';
{ provide: TitleStrategy, useClass: AppPageTitleStrategy },
],
bootstrap: [MainComponent],
declarations: [
// ItemsListComponent
],
declarations: [RscTreeComponent],
})
export class AppModule {
constructor(applicationConfigService: ApplicationConfigService, iconLibrary: FaIconLibrary, dpConfig: NgbDatepickerConfig) {

View File

@ -1,3 +1,4 @@
export class appProperties {
public static BASEURL_API = 'http://localhost:8080/api/';
public static MOCK_BASEURL_API = 'http://localhost:3002/is/';
}

View File

@ -29,6 +29,7 @@ export class DynTabComponent implements OnInit {
ngOnInit(): void {
this.myContextService.getData().subscribe(res => {
this.nestedContexts = res;
//TODO: IMPORTARE LA RADICE COME UN PARAMETRO INIETTATO DA PARENT
//inizializzo il contesto alla radice
this.myCtx = this.nestedContexts[0];
});

View File

@ -1,14 +1,15 @@
<div class="row">
<!--
<div class="col-md-3">
<!--<span class="hipster img-fluid rounded"></span>-->
<jhi-ctx-tree (treeNode)="loadTreeNode($event)"></jhi-ctx-tree>
</div>
-->
<div class="col-md-9">
<div class="row">
<div [ngSwitch]="account !== null">
<div class="alert alert-success" *ngSwitchCase="true">
<span id="home-logged-message" *ngIf="account">You are logged in as user "{{ account.login }}".</span><br />
<span id="home-logged-message" *ngIf="account">Your context: {{ currentNodeCtx.name }}</span>
<span id="home-logged-message" *ngIf="account">Your context: {{ currentCtx.name }}</span>
</div>
<div class="alert alert-warning" *ngSwitchCase="false">
<span>If you want to </span>
@ -19,7 +20,9 @@
>
</div>
</div>
<!-- TODO: sostituire con pagina completa di tabella
<jhi-ctx-screen [myCtx]="currentNodeCtx"></jhi-ctx-screen>
-->
</div>
</div>
</div>

View File

@ -9,6 +9,7 @@ import { SharedModule } from 'app/shared/shared.module';
import { CtxTreeModule } from 'app/ctx-tree/ctx-tree.module';
import { IContextNode } from 'app/services/i-context-node';
import { CtxScreenModule } from 'app/ctx-screen/ctx-screen.module';
import { IResource } from 'app/services/i-resource';
@Component({
standalone: true,
@ -19,16 +20,18 @@ import { CtxScreenModule } from 'app/ctx-screen/ctx-screen.module';
})
export default class HomeComponent implements OnInit, OnDestroy {
account: Account | null = null;
currentNodeCtx: IContextNode;
currentCtx: IContextNode;
currentResource: IResource;
private readonly destroy$ = new Subject<void>();
constructor(private accountService: AccountService, private router: Router) {
this.currentNodeCtx = {} as IContextNode;
this.currentCtx = {} as IContextNode;
this.currentResource = {} as IResource;
}
loadTreeNode(node: IContextNode): void {
this.currentNodeCtx = node;
loadTreeNode(node: IResource): void {
this.currentResource = node;
}
ngOnInit(): void {

View File

@ -0,0 +1,7 @@
export interface ITabbedEntity {
id: string;
title: string;
content: string;
//prevediamo contenuti di tipo diverso (quindi switch al momento della costruzione dei tab)
type: number;
}

View File

@ -0,0 +1,4 @@
<h2 *ngIf="chosenId" id="detail-title">Raw JSON for UID: {{ chosenId }}</h2>
<div class="bg-light">
<pre>{{ fetchedRawData | json }}</pre>
</div>

View File

@ -0,0 +1,26 @@
import { CommonModule } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';
import { ResourcesLoaderService } from 'app/services/resources-loader.service';
@Component({
standalone: true,
imports: [CommonModule],
selector: 'jhi-rawjson-pane',
templateUrl: './rawjson-pane.component.html',
styleUrls: ['./rawjson-pane.component.scss'],
providers: [ResourcesLoaderService],
})
export class RawjsonPaneComponent implements OnInit {
@Input() chosenId: string;
fetchedRawData: string;
constructor(private myService: ResourcesLoaderService) {
this.fetchedRawData = '';
this.chosenId = '';
}
ngOnInit(): void {
//TODO: passare al servizio qui sotto: chosenItem.id come parametro rest
this.myService.getJsonDetail(this.chosenId).subscribe(res => {
this.fetchedRawData = res;
});
}
}

View File

@ -0,0 +1,65 @@
<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>
<button mat-raised-button color="primary"><mat-icon>explore</mat-icon> <span>View</span></button>
<button mat-raised-button color="primary"><mat-icon>help</mat-icon><span>Help</span></button>
</div>
<!--IMPORTANTE: BINDING FATTO SU CONTEXT_NAME -->
<div class="col-md-9 mt-2">
<form [formGroup]="chooseContextForm">
<mat-form-field appearance="outline" class="form-field">
<mat-label for="namefield" class="ml-4 flex-grow-1">Context name</mat-label>
<input matInput #contextInput (keyup)="(0)" [matAutocomplete]="auto" placeholder="Name" type="text" [formControl]="namefield" />
<mat-error>{{ checkForErrorsIn(namefield) }}</mat-error>
<!--(optionSelected)="assignUid($event.option.value)"-->
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
<mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx">
<span>{{ ctx.name }}</span>
<small> | ID: {{ ctx.id }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline" class="form-field">
<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" 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" id="riga-inferiore-view">
<h3>Resource tree</h3>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<button mat-button (click)="treeNode.emit(node)">
{{ node.name }}
</button>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
<div class="mat-tree-node">
<button mat-icon-button matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
<!--<button mat-button (click)="loadTable(node)">-->
<button mat-button (click)="treeNode.emit(node)">
{{ node.name }}
</button>
</div>
<div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
</div>
<div class="col-md-9">
<jhi-table-screen> </jhi-table-screen>
</div>
</div>

View File

@ -0,0 +1,53 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
#tree-title {
text-align: left;
color: teal;
padding-bottom: 3%;
}
.resources-tree-invisible {
display: none;
}
.resources-tree ul,
.resources-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
/*
* This padding sets alignment of the nested nodes.
*/
.resources-tree .mat-nested-tree-node div[role='group'] {
padding-left: 25px;
}
/*
* Padding for leaf nodes.
* Leaf nodes need to have padding so as to align with other non-leaf nodes
* under the same parent.
*/
.resources-tree div[role='group'] > .mat-tree-node {
padding-left: 25px;
}
::ng-deep .cdk-overlay-pane {
/* Do you changes here */
min-width: 450px;
}
.mat-mdc-form-field {
font-size: 14px;
width: 40%;
}
#uuidInput {
font-size: 14px;
width: 40%;
}
.icon-wide2 {
transform: scale(2);
}

View File

@ -0,0 +1,105 @@
/* eslint-disable no-console */
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';
import { IResource } from 'app/services/i-resource';
import { ContextsLoaderService } from 'app/services/contexts-loader.service';
import { IContextNode } from 'app/services/i-context-node';
import { Observable, map, startWith } from 'rxjs';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Clipboard } from '@angular/cdk/clipboard';
@Component({
selector: 'jhi-rsc-tree',
templateUrl: './rsc-tree.component.html',
styleUrls: ['./rsc-tree.component.scss'],
providers: [ResourcesLoaderService, ContextsLoaderService],
})
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;
constructor(
private fb: FormBuilder,
private resLoader: ResourcesLoaderService,
private ctxLoader: ContextsLoaderService,
private clipboard: Clipboard
) {
this.contexts = [];
this.chooseContextForm = this.fb.group({
namefield: ['', [Validators.required]],
uidfield: [''],
});
}
get namefield(): any {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return this.chooseContextForm.get('namefield');
}
get uidfield(): any {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return this.chooseContextForm.get('uidfield');
}
ngOnInit(): void {
this.resLoader.getResourcesByContext().subscribe(res => {
this.nestedDataSource.data = res;
});
// per la form dei contesti
this.ctxLoader.getData().subscribe(res => {
this.contexts = res;
console.log('*******numero contesti...', res.length);
});
this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe(
startWith(''),
map(ctx => (ctx ? this.filterContexts(ctx) : this.contexts.slice()))
);
} //fine oninit
//TODO: questo metodo va inserito in una classe di utility common
checkForErrorsIn(formControl: AbstractControl): string {
if (formControl.hasError('required')) {
return 'Value is required!';
}
return '';
}
//mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
filterContexts(name: any): IContextNode[] {
return this.contexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
}
displayFn(ctx: IContextNode): string {
return ctx.name ? ctx.name + ' | ' + ctx.id : '';
}
onSelFn(ctx: IContextNode): void {
console.log('-----------' + ctx.id);
this.uidfield.value = ctx.id;
}
// (onSelectionChange)="onSelFn(ctx)"
hasNestedChild(_: number, node: IResource): boolean {
if (node.children == null) {
return false;
} else {
return node.children.length > 0;
}
}
copyUid(val: any): void {
if (val instanceof FormControl) {
this.clipboard.copy(val.getRawValue().id);
} else {
this.clipboard.copy('invalid value');
}
}
}

View File

@ -0,0 +1,34 @@
import { NgModule } from '@angular/core';
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';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
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: [],
imports: [
CommonModule,
MatFormFieldModule,
MatSelectModule,
MatButtonModule,
MatMenuModule,
MatIconModule,
MatInputModule,
FormsModule,
MatAutocompleteModule,
ReactiveFormsModule,
TableScreenComponent,
ClipboardModule,
MatTabsModule,
NgFor,
],
})
export class RscTreeModule {}

View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Observable, map, tap } from 'rxjs';
import { appProperties } from 'app/config/app-properties';
import { IContextNode } from './i-context-node';
@ -16,9 +16,9 @@ export class ContextsLoaderService {
getData(): Observable<IContextNode[]> {
//TODO: pipe per gestione errori
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
return this.http.get<IContextNode[]>(appProperties.BASEURL_API + 'is/allcontext');
return this.http.get<IContextNode[]>(appProperties.MOCK_BASEURL_API + '/allcontext');
}
getRawData(): Observable<string> {
//TODO: pipe per gestione errori
return this.http.get<string>(appProperties.BASEURL_API + 'is/allcontext');

View File

@ -4,3 +4,18 @@ export interface IContextNode {
id: string;
children?: IContextNode[];
}
/*
export class ContextNode implements IContextNode {
parent: string;
name: string;
id: string;
children?: IContextNode[];
constructor(id: string, name: string, parent: string, children: ContextNode[]) {
this.name = name;
this.parent = id;
this.id = id;
this.children = children;
}
}
*/

View File

@ -0,0 +1,6 @@
export interface IResource {
name: string;
id: string;
type: number; //TODO: codice da assegnare in constants per ogni tipo di risorsa
children?: IResource[];
}

View File

@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IHostingnode } from './i-hostinngnode';
import { IResource } from './i-resource';
@Injectable({
providedIn: 'root',
@ -18,7 +19,19 @@ export class ResourcesLoaderService {
//TODO: pipe per gestione errori
return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
}
getResourcesByContext(): Observable<IResource[]> {
//TODO: pipe per gestione errori
return this.http.get<IResource[]>('http://localhost:3002/is/ctxresources');
}
//TODO: a regime questo metodo prende un parametro nella get
//(e probabilmente anche un tipo per fare uno switch sul tipo di risorsa da prendere)
getJsonDetail(uid: string): Observable<string> {
//TODO: pipe per gestione errori
return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
}
getHostingNodeDetail(): Observable<string> {
//TODO: pipe per gestione errori
return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');

View File

@ -23,6 +23,7 @@ import { MatRadioModule } from '@angular/material/radio';
import { MatMenuModule } from '@angular/material/menu';
import { NgModule } from '@angular/core';
import { MatTreeModule } from '@angular/material/tree';
import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [
@ -50,6 +51,7 @@ import { MatTreeModule } from '@angular/material/tree';
MatListModule,
MatIconModule,
MatTreeModule,
MatTableModule,
],
exports: [
MatButtonModule,
@ -76,6 +78,7 @@ import { MatTreeModule } from '@angular/material/tree';
MatListModule,
MatIconModule,
MatTreeModule,
MatTableModule,
],
})
export class MaterialModule {}

View File

@ -9,9 +9,6 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTreeModule } from '@angular/material/tree';
import { MatButtonModule } from '@angular/material/button';
//import { DynamicTabModule } from 'app/dynamic-tab/dynamic-tab.module';
//import { DynamicTabsModule } from 'app/dynamic-tabs/dynamic-tabs.module';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({

View File

@ -24,7 +24,7 @@ export class ListScreenComponent implements OnChanges, OnInit {
constructor(private myServiceTable: ResourcesLoaderService, private myContextService: MockCtxloaderService) {
this.myCtx = {} as IContextNode;
this.tableDetail = {} as IHostingnode;
this.dataSource = [];
this.dataSource = [] as IHostingnode[];
}
openJsonViewer(node: IHostingnode): void {

View File

@ -5,7 +5,7 @@
<div class="col-md-9">
<div class="row">
<jhi-dyn-tabs [myCtx]="currentNodeCtx">
<jhi-dyn-tab [tabTitle]="'Lista'" [myCtx]="currentNodeCtx">
<jhi-dyn-tab [tabTitle]="'Elenco'" [myCtx]="currentNodeCtx">
<jhi-list-screen (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
</jhi-dyn-tab>
</jhi-dyn-tabs>

View File

@ -0,0 +1,78 @@
<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>
<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="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="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>Actions</th>
<td mat-cell *matCellDef="let item">
<button mat-button color="primary" (click)="addTab(this.item.id)"><mat-icon>visibility</mat-icon></button>
</td>
</ng-container>
<!-- rows visualization -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<!-- Rows 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">
<ng-container *ngFor="let tab of tabs; let index = index">
<mat-tab>
<!--stile linguetta tab begin-->
<ng-template mat-tab-label>
<div class="col" style="margin-left: 20px">{{ tab.title }}</div>
<button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
<mat-icon>close</mat-icon>
</button>
</ng-template>
<!--stile linguetta tab close-->
<div *ngIf="tab.title !== 'JSON View'; else mainTabMsg">
<jhi-rawjson-pane [chosenId]="tab.id"></jhi-rawjson-pane>
</div>
<ng-template #mainTabMsg>
<h2>JSON raw data will show here</h2>
</ng-template>
</mat-tab>
</ng-container>
</mat-tab-group>
</div>

View File

@ -0,0 +1,22 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
.mat-row {
width: 32px;
text-align: left;
font-weight: bold;
}
.mat-mdc-header-cell {
font-weight: bold;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
cursor: pointer;
}
.mat-mdc-row:hover .mat-mdc-cell {
border-color: currentColor;
}
.mat-mdc-form-field {
font-size: 14px;
width: 100%;
}

View File

@ -0,0 +1,139 @@
/* 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';
import { MatTableModule, MatTableDataSource } from '@angular/material/table';
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';
import { ITabbedEntity } from 'app/i-tabbed-entity';
import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
@Component({
standalone: true,
selector: 'jhi-table-screen',
templateUrl: './table-screen.component.html',
styleUrls: ['./table-screen.component.scss'],
providers: [MockCtxloaderService, ResourcesLoaderService],
imports: [MatTableModule, MatSortModule, SharedModule, MatPaginatorModule, RawjsonPaneComponent],
})
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
//TODO: questo a regime mettere sotto CONST
displayedColumns: string[] = ['name', 'id', 'status', 'lastmod', 'memavailable', 'hdspace', 'actions'];
dataFromService: IHostingnode[];
dataSource = new MatTableDataSource();
tableDetail: IHostingnode;
@Input() myCtx: IContextNode; //fetching event from parent
@Output() jsonEmitter = new EventEmitter<IHostingnode>();
@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: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
selectedIdx = 0;
chosenIds: string[] = [];
////////// fine tabbed view
constructor(private myDataService: ResourcesLoaderService) {
this.myCtx = {} as IContextNode;
this.tableDetail = {} as IHostingnode;
this.dataFromService = [];
this.sort = new MatSort();
this.paginator = {} as MatPaginator;
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
ngOnInit(): void {
this.myDataService.getHostingNodes().subscribe(res => {
this.dataFromService = res;
this.dataSource.data = res;
});
}
ngOnChanges(changes: SimpleChanges): void {
// console.log('---NELLA ONCHANGES...' + this.myCtx.name);
for (const propName in changes) {
if (propName === 'myCtx') {
const param = changes[propName];
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 myCtx.id al rest
this.myDataService.getHostingNodes().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();
}
// per tabbed pane (versione con aggiunta dinamica)
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);
}
}
closeTab(index: number): void {
console.debug('---------');
console.debug(index);
console.debug('---IDs:');
console.debug(this.chosenIds);
console.debug(this.tabs[index].id);
console.debug('++++++++++');
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);
}
}