mariateresa
/
isdashboard
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed select component and added autocompletion + minor changes (css)

This commit is contained in:
Maria Teresa Paratore 2023-09-15 16:07:30 +02:00
parent 3dafb27bb8
commit adb31ae1a2
6 changed files with 100 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/webapp/app/app-routing.module.ts
View File

@ -37,7 +37,7 @@ import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
},
{
//TEST
path: 'res-tree',
path: 'rsc-tree',
component: RscTreeComponent,
},

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

@ -1,50 +1,50 @@
<!--<h2 class="display-8" id="tree-title"><span>Available resources</span></h2>-->
<div class="d-flex flex-row">
<div id="btn-group" class="py-4">
<div class="d-flex py-4">
<div id="btn-group" class="m-2">
<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>
<!--
<mat-select [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
-->
<mat-form-field class="flex-grow-1 px-4">
<mat-label>Select a context</mat-label>
<mat-select [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value" />
</mat-select>
</mat-form-field>
<div id="form-container" class="ml-4 px-4 flex-grow-1">
<form>
<mat-form-field>
<mat-label class="ml-4 px-4 flex-grow-1">Select a context</mat-label>
<input matInput [matAutocomplete]="auto" [formControl]="contextCtrl" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of filteredContexts | async" [value]="item.name">
<span>{{ item.name }}</span> |
<small>UUID: {{ item.id }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</div>
</div>
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<!--<button mat-button (click)="loadTable(node)">-->
<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)">-->
<h3>Resource tree</h3>
<div class="d-flex flex-row">
<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>
</div>
</mat-tree-node>
<div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<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>

15
src/main/webapp/app/rsc-tree/rsc-tree.component.scss
View File

@ -6,12 +6,12 @@
padding-bottom: 3%;
}
.example-tree-invisible {
.resources-tree-invisible {
display: none;
}
.example-tree ul,
.example-tree li {
.resources-tree ul,
.resources-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
@ -20,7 +20,7 @@
/*
* This padding sets alignment of the nested nodes.
*/
.example-tree .mat-nested-tree-node div[role='group'] {
.resources-tree .mat-nested-tree-node div[role='group'] {
padding-left: 25px;
}
@ -29,6 +29,11 @@
* Leaf nodes need to have padding so as to align with other non-leaf nodes
* under the same parent.
*/
.example-tree div[role='group'] > .mat-tree-node {
.resources-tree div[role='group'] > .mat-tree-node {
padding-left: 25px;
}
::ng-deep .cdk-overlay-pane {
/* Do you changes here */
min-width: 450px;
}

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

@ -1,10 +1,13 @@
import { Component, OnInit, Output, EventEmitter, AfterViewInit } from '@angular/core';
/* eslint-disable no-console */
import { Component, OnInit, Output, EventEmitter } 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 { FormControl } from '@angular/forms';
import { Observable, map, startWith } from 'rxjs';
@Component({
selector: 'jhi-rsc-tree',
@ -12,17 +15,37 @@ import { IContextNode } from 'app/services/i-context-node';
styleUrls: ['./rsc-tree.component.scss'],
providers: [ResourcesLoaderService, ContextsLoaderService],
})
export class RscTreeComponent implements OnInit, AfterViewInit {
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
allContexts: IContextNode[];
rootName: string;
filteredContexts: Observable<IContextNode[]>;
contextCtrl: FormControl = new FormControl();
constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
// this.selected = "option2";
this.allContexts = {} as IContextNode[];
this.rootName = '';
this.filteredContexts = {} as Observable<IContextNode[]>;
}
ngOnInit(): void {
this.resLoader.getResourcesByContext().subscribe(res => {
this.nestedDataSource.data = res;
});
this.ctxLoader.getData().subscribe(res => {
this.allContexts = res;
console.log('*******numero contesti...', res.length);
this.rootName = this.allContexts[0].name;
console.log('*******contesto root...', this.rootName);
});
this.filteredContexts = this.contextCtrl.valueChanges.pipe(
startWith(''),
map(ctx => (ctx ? this._filterContexts(ctx) : Array.from(this.allContexts).slice()))
);
}
hasNestedChild(_: number, node: IResource): boolean {
@ -33,28 +56,16 @@ export class RscTreeComponent implements OnInit, AfterViewInit {
}
}
ngOnInit(): void {
this.ctxLoader.getData().subscribe(res => {
this.allContexts = res;
this.rootName = this.allContexts[0].name;
});
private _filterContexts(value: string): IContextNode[] {
const filterValue = value.toLowerCase();
return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(filterValue));
}
ngAfterViewInit(): void {
//TODO: qui va passato il CONTEXT_ID alla get
this.resLoader.getResourcesByContext().subscribe(res => {
/* TODO: modificare per gestire eventuali eventi sulla onselect
onSelectedContext(uid:string):void {
this.resLoader.getResourcesByContext().subscribe(res => {
this.nestedDataSource.data = res;
});
}
}
*/
}
/*
}
*/

17
src/main/webapp/app/rsc-tree/rsc-tree.module.ts
View File

@ -5,9 +5,24 @@ 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';
@NgModule({
declarations: [],
imports: [CommonModule, MatFormFieldModule, MatSelectModule, MatButtonModule, MatMenuModule, MatIconModule],
imports: [
CommonModule,
MatFormFieldModule,
MatSelectModule,
MatButtonModule,
MatMenuModule,
MatIconModule,
MatInputModule,
FormsModule,
FormsModule,
MatAutocompleteModule,
ReactiveFormsModule,
],
})
export class RscTreeModule {}

2
src/main/webapp/app/services/contexts-loader.service.ts
View File

@ -18,7 +18,7 @@ export class ContextsLoaderService {
//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 + 'is/allcontext');
return this.http.get<IContextNode[]>(appProperties.MOCK_BASEURL_API + '/allcontext');
}
getRawData(): Observable<string> {
//TODO: pipe per gestione errori