From 7f4458cdc3debbed70ed3eab99dfcbc181c09faa Mon Sep 17 00:00:00 2001 From: mariateresa Date: Fri, 22 Sep 2023 16:56:19 +0200 Subject: [PATCH] Solved problems with autocomplete and form validation (reactive forms) --- .../app/rsc-tree/rsc-tree.component.html | 106 +++++++----------- .../app/rsc-tree/rsc-tree.component.scss | 4 + .../webapp/app/rsc-tree/rsc-tree.component.ts | 87 ++++++-------- .../app/services/contexts-loader.service.ts | 5 +- .../webapp/app/services/i-context-node.ts | 14 +++ 5 files changed, 96 insertions(+), 120 deletions(-) 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 3449fe9..0293aca 100644 --- a/src/main/webapp/app/rsc-tree/rsc-tree.component.html +++ b/src/main/webapp/app/rsc-tree/rsc-tree.component.html @@ -1,5 +1,5 @@
-
+
@@ -9,17 +9,8 @@
- - Context name - - - - {{ ctx.name }} + Please enter context! + + + {{ ctx.name }} + | ID: {{ ctx.id }} + - Context UUID - - +
- -
-

Resource tree

-
- - - - - -
- - - -
-
- -
- - -
-
- -
-
+
+
+
+
+

Resource tree

+ + + + + +
+ + + +
+
+ +
+ + +
+
+
diff --git a/src/main/webapp/app/rsc-tree/rsc-tree.component.scss b/src/main/webapp/app/rsc-tree/rsc-tree.component.scss index 1070e5c..5675c11 100644 --- a/src/main/webapp/app/rsc-tree/rsc-tree.component.scss +++ b/src/main/webapp/app/rsc-tree/rsc-tree.component.scss @@ -47,3 +47,7 @@ font-size: 14px; width: 40%; } + +.icon-wide2 { + transform: scale(2); +} 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 0b5bbba..0e53332 100644 --- a/src/main/webapp/app/rsc-tree/rsc-tree.component.ts +++ b/src/main/webapp/app/rsc-tree/rsc-tree.component.ts @@ -5,9 +5,9 @@ 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 { ContextNode, IContextNode } from 'app/services/i-context-node'; import { Observable, map, startWith } from 'rxjs'; -import { FormControl, FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ selector: 'jhi-rsc-tree', @@ -20,58 +20,63 @@ export class RscTreeComponent implements OnInit { nestedDataSource = new MatTreeNestedDataSource(); @Output() treeNode = new EventEmitter(); //emitting event to parent - allContexts: IContextNode[]; - filteredContexts: Observable | any; + contexts: ContextNode[]; + filteredContexts: Observable | any; + chooseContextForm: FormGroup | any; - chooseContextForm = new FormGroup({ - namefield: new FormControl(''), - uidfield: new FormControl(''), - }); - - constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService, private formBuilder: FormBuilder) { - this.allContexts = {} as IContextNode[]; + constructor(private fb: FormBuilder, private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) { + this.contexts = []; } - //MT: per chiamare le direttive formControlName 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'); } - /* - onSubmit(): void { - console.log(this.chooseContextForm.value); - }*/ - ngOnInit(): void { - /* - this.myForm = this.formBuilder.group({ - context: [],}); - */ - this.resLoader.getResourcesByContext().subscribe(res => { this.nestedDataSource.data = res; }); + + this.chooseContextForm = this.fb.group({ + namefield: null, + uidfield: null, + }); + // per la form dei contesti this.ctxLoader.getData().subscribe(res => { - this.allContexts = res; + this.contexts = res; console.log('*******numero contesti...', res.length); }); - this.filteredContexts = this.chooseContextForm.get('namefield')?.valueChanges.pipe( + + this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe( startWith(''), - map(name => (name ? this.doFilter(name) : this.allContexts.slice())) + map(ctx => (ctx ? this.filterContexts(ctx) : this.contexts.slice())) ); + } //fine oninit - /* - this.myForm = this.formBuilder.group({ - context: [], - }); - - */ + //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(name: string): string { + return name ? name : ''; + } + + /* +//mettendo ID come value da passare +displayFn(name: string): string { + if (!id) return ''; + let index = this.states.findIndex(state => state.id === id); + return this.states[index].name; + } + */ + hasNestedChild(_: number, node: IResource): boolean { if (node.children == null) { return false; @@ -79,24 +84,4 @@ export class RscTreeComponent implements OnInit { return node.children.length > 0; } } - - private doFilter(name: string): IContextNode[] { - //return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase())); - return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase())); - } - - /* - onEnter(evt: any){ - if (evt.source.selected) { - alert("hello "); - } - }*/ - - /* - //TODO: modificare per gestire eventuali eventi sulla onselect - private onSelectedContext(uid:string):void { - this.resLoader.getResourcesByContext().subscribe(res => { - this.nestedDataSource.data = res; - }); - }*/ } diff --git a/src/main/webapp/app/services/contexts-loader.service.ts b/src/main/webapp/app/services/contexts-loader.service.ts index b6861a2..bd0281e 100644 --- a/src/main/webapp/app/services/contexts-loader.service.ts +++ b/src/main/webapp/app/services/contexts-loader.service.ts @@ -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,10 +16,9 @@ export class ContextsLoaderService { getData(): Observable { //TODO: pipe per gestione errori - // eslint-disable-next-line @typescript-eslint/restrict-plus-operands - // return this.http.get(appProperties.BASEURL_API + 'is/allcontext'); return this.http.get(appProperties.MOCK_BASEURL_API + '/allcontext'); } + getRawData(): Observable { //TODO: pipe per gestione errori return this.http.get(appProperties.BASEURL_API + 'is/allcontext'); diff --git a/src/main/webapp/app/services/i-context-node.ts b/src/main/webapp/app/services/i-context-node.ts index f3f1af9..3f2eb90 100644 --- a/src/main/webapp/app/services/i-context-node.ts +++ b/src/main/webapp/app/services/i-context-node.ts @@ -4,3 +4,17 @@ 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; + } +}