copy to clipboard implementation and other changes
This commit is contained in:
parent
7f4458cdc3
commit
daab34df7c
|
@ -25,7 +25,6 @@ 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';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
@ -5,25 +5,17 @@
|
|||
<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_ID -->
|
||||
<!--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"
|
||||
required
|
||||
/>
|
||||
<mat-error>Please enter context!</mat-error>
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
|
||||
<mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx.name">
|
||||
<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>
|
||||
|
@ -31,12 +23,13 @@
|
|||
</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 />
|
||||
<input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly [value]="namefield.value.id" />
|
||||
</mat-form-field>
|
||||
<button mat-button color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
|
||||
<button mat-button (click)="copyUid()" color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-row">
|
||||
<div class="col-md-3">
|
||||
<h3>Resource tree</h3>
|
||||
|
|
|
@ -5,9 +5,10 @@ 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 { ContextNode, IContextNode } from 'app/services/i-context-node';
|
||||
import { IContextNode } from 'app/services/i-context-node';
|
||||
import { Observable, map, startWith } from 'rxjs';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Clipboard } from '@angular/cdk/clipboard';
|
||||
|
||||
@Component({
|
||||
selector: 'jhi-rsc-tree',
|
||||
|
@ -20,12 +21,21 @@ export class RscTreeComponent implements OnInit {
|
|||
nestedDataSource = new MatTreeNestedDataSource<IResource>();
|
||||
@Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
|
||||
|
||||
contexts: ContextNode[];
|
||||
filteredContexts: Observable<ContextNode[]> | any;
|
||||
contexts: IContextNode[];
|
||||
public filteredContexts: Observable<IContextNode[]> | undefined;
|
||||
chooseContextForm: FormGroup | any;
|
||||
|
||||
constructor(private fb: FormBuilder, private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
|
||||
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 {
|
||||
|
@ -42,11 +52,6 @@ export class RscTreeComponent implements OnInit {
|
|||
this.nestedDataSource.data = res;
|
||||
});
|
||||
|
||||
this.chooseContextForm = this.fb.group({
|
||||
namefield: null,
|
||||
uidfield: null,
|
||||
});
|
||||
|
||||
// per la form dei contesti
|
||||
this.ctxLoader.getData().subscribe(res => {
|
||||
this.contexts = res;
|
||||
|
@ -59,23 +64,29 @@ export class RscTreeComponent implements OnInit {
|
|||
);
|
||||
} //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(name: string): string {
|
||||
return name ? name : '';
|
||||
displayFn(ctx: IContextNode): string {
|
||||
return ctx.name ? ctx.name + ' | ' + ctx.id : '';
|
||||
}
|
||||
|
||||
/*
|
||||
//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;
|
||||
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) {
|
||||
|
@ -84,4 +95,16 @@ displayFn(name: string): string {
|
|||
return node.children.length > 0;
|
||||
}
|
||||
}
|
||||
|
||||
copyUid(): void {
|
||||
//const res = this.uidfield ? this.uidfield.value : '';
|
||||
const res = this.uidfield.value;
|
||||
this.clipboard.copy(res);
|
||||
alert(this.uidfield.value);
|
||||
}
|
||||
|
||||
//TODO: modificare per gestire eventuali eventi sulla onselect
|
||||
assignUid(uid: string): void {
|
||||
console.debug('------------UUID:.....' + uid);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@ 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';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
|
|
Loading…
Reference in New Issue