Form field and error binding + autocompletion and css debugging
This commit is contained in:
parent
adb31ae1a2
commit
52a534d232
|
@ -24,6 +24,7 @@ import { SharedModule } from 'app/shared/shared.module';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
|
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
|
||||||
|
import { TableScreenComponent } from './table-screen/table-screen.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -38,6 +39,7 @@ import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
|
TableScreenComponent,
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
|
|
|
@ -1,50 +1,62 @@
|
||||||
<div class="d-flex py-4">
|
<div class="d-flex flex-row py-4">
|
||||||
<div id="btn-group" class="m-2">
|
<div id="btn-group" class="col-md-3 mt-2">
|
||||||
<button mat-raised-button color="primary"><mat-icon>source</mat-icon> <span>File</span></button>
|
<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>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>explore</mat-icon> <span>View</span></button>
|
||||||
<button mat-raised-button color="primary"><mat-icon>help</mat-icon><span>Help</span></button>
|
<button mat-raised-button color="primary"><mat-icon>help</mat-icon><span>Help</span></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="form-container" class="ml-4 px-4 flex-grow-1">
|
|
||||||
<form>
|
<div id="form-container" class="col-md-9 mt-2">
|
||||||
|
VALUE:...{{ contextInput.value }}
|
||||||
|
<form [formGroup]="myForm">
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-label class="ml-4 px-4 flex-grow-1">Select a context</mat-label>
|
<mat-label class="ml-4 flex-grow-1">Select Context</mat-label>
|
||||||
<input matInput [matAutocomplete]="auto" [formControl]="contextCtrl" />
|
<input #contextInput (keyup)="(0)" matInput placeholder="Context" [matAutocomplete]="auto" [formControl]="contextCtrl" required />
|
||||||
|
<!--<div *ngIf="contextCtrl.errors?.['required']">
|
||||||
|
Context is required.
|
||||||
|
</div>-->
|
||||||
<mat-autocomplete #auto="matAutocomplete">
|
<mat-autocomplete #auto="matAutocomplete">
|
||||||
<mat-option *ngFor="let item of filteredContexts | async" [value]="item.name">
|
<mat-option
|
||||||
<span>{{ item.name }}</span> |
|
(onSelectionChange)="(contextInput.value != undefined)"
|
||||||
<small>UUID: {{ item.id }}</small>
|
*ngFor="let ctx of filteredContexts | async"
|
||||||
|
[value]="ctx.name"
|
||||||
|
>
|
||||||
|
<span>{{ ctx.name }}</span> |
|
||||||
|
<small>UUID: {{ ctx.id }}</small>
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-autocomplete>
|
</mat-autocomplete>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row">
|
||||||
<h3>Resource tree</h3>
|
<h3>Resource tree</h3>
|
||||||
<div class="d-flex flex-row">
|
<div class="d-flex flex-row col-md-3">
|
||||||
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
|
<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
|
||||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
|
<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)">
|
<button mat-button (click)="treeNode.emit(node)">
|
||||||
{{ node.name }}
|
{{ node.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</mat-tree-node>
|
||||||
<div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
|
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
|
||||||
<ng-container matTreeNodeOutlet></ng-container>
|
<div class="mat-tree-node">
|
||||||
</div>
|
<button mat-icon-button matTreeNodeToggle>
|
||||||
</mat-nested-tree-node>
|
<mat-icon class="mat-icon-rtl-mirror">
|
||||||
</mat-tree>
|
{{ 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>
|
</div>
|
||||||
|
|
|
@ -37,3 +37,8 @@
|
||||||
/* Do you changes here */
|
/* Do you changes here */
|
||||||
min-width: 450px;
|
min-width: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mat-mdc-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
|
@ -6,8 +6,8 @@ import { ResourcesLoaderService } from 'app/services/resources-loader.service';
|
||||||
import { IResource } from 'app/services/i-resource';
|
import { IResource } from 'app/services/i-resource';
|
||||||
import { ContextsLoaderService } from 'app/services/contexts-loader.service';
|
import { ContextsLoaderService } from 'app/services/contexts-loader.service';
|
||||||
import { IContextNode } from 'app/services/i-context-node';
|
import { IContextNode } from 'app/services/i-context-node';
|
||||||
import { FormControl } from '@angular/forms';
|
|
||||||
import { Observable, map, startWith } from 'rxjs';
|
import { Observable, map, startWith } from 'rxjs';
|
||||||
|
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'jhi-rsc-tree',
|
selector: 'jhi-rsc-tree',
|
||||||
|
@ -19,32 +19,34 @@ export class RscTreeComponent implements OnInit {
|
||||||
nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
|
nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
|
||||||
nestedDataSource = new MatTreeNestedDataSource<IResource>();
|
nestedDataSource = new MatTreeNestedDataSource<IResource>();
|
||||||
@Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
|
@Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
|
||||||
|
|
||||||
allContexts: IContextNode[];
|
allContexts: IContextNode[];
|
||||||
rootName: string;
|
filteredContexts: Observable<IContextNode[]> | any;
|
||||||
|
myForm: FormGroup | any;
|
||||||
|
|
||||||
filteredContexts: Observable<IContextNode[]>;
|
contextCtrl: FormControl;
|
||||||
contextCtrl: FormControl = new FormControl();
|
|
||||||
|
|
||||||
constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
|
constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService, private formBuilder: FormBuilder) {
|
||||||
// this.selected = "option2";
|
|
||||||
this.allContexts = {} as IContextNode[];
|
this.allContexts = {} as IContextNode[];
|
||||||
this.rootName = '';
|
this.contextCtrl = new FormControl();
|
||||||
this.filteredContexts = {} as Observable<IContextNode[]>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.resLoader.getResourcesByContext().subscribe(res => {
|
this.resLoader.getResourcesByContext().subscribe(res => {
|
||||||
this.nestedDataSource.data = res;
|
this.nestedDataSource.data = res;
|
||||||
});
|
});
|
||||||
|
// per la form dei contesti
|
||||||
this.ctxLoader.getData().subscribe(res => {
|
this.ctxLoader.getData().subscribe(res => {
|
||||||
this.allContexts = res;
|
this.allContexts = res;
|
||||||
console.log('*******numero contesti...', res.length);
|
console.log('*******numero contesti...', res.length);
|
||||||
this.rootName = this.allContexts[0].name;
|
|
||||||
console.log('*******contesto root...', this.rootName);
|
|
||||||
});
|
});
|
||||||
|
this.myForm = this.formBuilder.group({
|
||||||
|
context: [],
|
||||||
|
});
|
||||||
|
|
||||||
this.filteredContexts = this.contextCtrl.valueChanges.pipe(
|
this.filteredContexts = this.contextCtrl.valueChanges.pipe(
|
||||||
startWith(''),
|
startWith(''),
|
||||||
map(ctx => (ctx ? this._filterContexts(ctx) : Array.from(this.allContexts).slice()))
|
map(val => (val ? this.filterContexts(val) : Array.from(this.allContexts).slice()))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -56,11 +58,10 @@ export class RscTreeComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private _filterContexts(value: string): IContextNode[] {
|
private filterContexts(value: string): IContextNode[] {
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(filterValue));
|
return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(value.toLowerCase()));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TODO: modificare per gestire eventuali eventi sulla onselect
|
/* TODO: modificare per gestire eventuali eventi sulla onselect
|
||||||
onSelectedContext(uid:string):void {
|
onSelectedContext(uid:string):void {
|
||||||
this.resLoader.getResourcesByContext().subscribe(res => {
|
this.resLoader.getResourcesByContext().subscribe(res => {
|
||||||
|
|
|
@ -6,8 +6,9 @@ import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatMenuModule } from '@angular/material/menu';
|
import { MatMenuModule } from '@angular/material/menu';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||||
|
import { TableScreenComponent } from 'app/table-screen/table-screen.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [],
|
declarations: [],
|
||||||
|
@ -20,9 +21,9 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||||
MatIconModule,
|
MatIconModule,
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
FormsModule,
|
FormsModule,
|
||||||
FormsModule,
|
|
||||||
MatAutocompleteModule,
|
MatAutocompleteModule,
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
|
TableScreenComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class RscTreeModule {}
|
export class RscTreeModule {}
|
||||||
|
|
Loading…
Reference in New Issue