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 { 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';
|
import { TableScreenComponent } from './table-screen/table-screen.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
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>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>
|
||||||
<!--IMPORTANTE: BINDING FATTO SU CONTEXT_ID -->
|
<!--IMPORTANTE: BINDING FATTO SU CONTEXT_NAME -->
|
||||||
|
|
||||||
<div class="col-md-9 mt-2">
|
<div class="col-md-9 mt-2">
|
||||||
<form [formGroup]="chooseContextForm">
|
<form [formGroup]="chooseContextForm">
|
||||||
<mat-form-field appearance="outline" class="form-field">
|
<mat-form-field appearance="outline" class="form-field">
|
||||||
<mat-label for="namefield" class="ml-4 flex-grow-1">Context name</mat-label>
|
<mat-label for="namefield" class="ml-4 flex-grow-1">Context name</mat-label>
|
||||||
<input
|
<input matInput #contextInput (keyup)="(0)" [matAutocomplete]="auto" placeholder="Name" type="text" [formControl]="namefield" />
|
||||||
matInput
|
<mat-error>{{ checkForErrorsIn(namefield) }}</mat-error>
|
||||||
#contextInput
|
<!--(optionSelected)="assignUid($event.option.value)"-->
|
||||||
(keyup)="(0)"
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
|
||||||
[matAutocomplete]="auto"
|
<mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx">
|
||||||
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">
|
|
||||||
<span>{{ ctx.name }}</span>
|
<span>{{ ctx.name }}</span>
|
||||||
<small> | ID: {{ ctx.id }}</small>
|
<small> | ID: {{ ctx.id }}</small>
|
||||||
</mat-option>
|
</mat-option>
|
||||||
|
@ -31,12 +23,13 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field appearance="outline" class="form-field">
|
<mat-form-field appearance="outline" class="form-field">
|
||||||
<mat-label for="uidfield">Context UUID</mat-label>
|
<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>
|
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex flex-row">
|
<div class="d-flex flex-row">
|
||||||
<div class="col-md-3">
|
<div class="col-md-3">
|
||||||
<h3>Resource tree</h3>
|
<h3>Resource tree</h3>
|
||||||
|
|
|
@ -5,9 +5,10 @@ import { NestedTreeControl } from '@angular/cdk/tree';
|
||||||
import { ResourcesLoaderService } from 'app/services/resources-loader.service';
|
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 { ContextNode, IContextNode } from 'app/services/i-context-node';
|
import { IContextNode } from 'app/services/i-context-node';
|
||||||
import { Observable, map, startWith } from 'rxjs';
|
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({
|
@Component({
|
||||||
selector: 'jhi-rsc-tree',
|
selector: 'jhi-rsc-tree',
|
||||||
|
@ -20,12 +21,21 @@ export class RscTreeComponent implements OnInit {
|
||||||
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
|
||||||
|
|
||||||
contexts: ContextNode[];
|
contexts: IContextNode[];
|
||||||
filteredContexts: Observable<ContextNode[]> | any;
|
public filteredContexts: Observable<IContextNode[]> | undefined;
|
||||||
chooseContextForm: FormGroup | any;
|
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.contexts = [];
|
||||||
|
this.chooseContextForm = this.fb.group({
|
||||||
|
namefield: ['', [Validators.required]],
|
||||||
|
uidfield: [''],
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get namefield(): any {
|
get namefield(): any {
|
||||||
|
@ -42,11 +52,6 @@ export class RscTreeComponent implements OnInit {
|
||||||
this.nestedDataSource.data = res;
|
this.nestedDataSource.data = res;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.chooseContextForm = this.fb.group({
|
|
||||||
namefield: null,
|
|
||||||
uidfield: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
// per la form dei contesti
|
// per la form dei contesti
|
||||||
this.ctxLoader.getData().subscribe(res => {
|
this.ctxLoader.getData().subscribe(res => {
|
||||||
this.contexts = res;
|
this.contexts = res;
|
||||||
|
@ -59,23 +64,29 @@ export class RscTreeComponent implements OnInit {
|
||||||
);
|
);
|
||||||
} //fine 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!!
|
//mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
|
||||||
filterContexts(name: any): IContextNode[] {
|
filterContexts(name: any): IContextNode[] {
|
||||||
return this.contexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
|
return this.contexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
|
||||||
}
|
}
|
||||||
|
|
||||||
displayFn(name: string): string {
|
displayFn(ctx: IContextNode): string {
|
||||||
return name ? name : '';
|
return ctx.name ? ctx.name + ' | ' + ctx.id : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
onSelFn(ctx: IContextNode): void {
|
||||||
//mettendo ID come value da passare
|
console.log('-----------' + ctx.id);
|
||||||
displayFn(name: string): string {
|
this.uidfield.value = ctx.id;
|
||||||
if (!id) return '';
|
|
||||||
let index = this.states.findIndex(state => state.id === id);
|
|
||||||
return this.states[index].name;
|
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
// (onSelectionChange)="onSelFn(ctx)"
|
||||||
|
|
||||||
hasNestedChild(_: number, node: IResource): boolean {
|
hasNestedChild(_: number, node: IResource): boolean {
|
||||||
if (node.children == null) {
|
if (node.children == null) {
|
||||||
|
@ -84,4 +95,16 @@ displayFn(name: string): string {
|
||||||
return node.children.length > 0;
|
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 { 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';
|
import { TableScreenComponent } from 'app/table-screen/table-screen.component';
|
||||||
|
import { ClipboardModule } from '@angular/cdk/clipboard';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [],
|
declarations: [],
|
||||||
|
|
Loading…
Reference in New Issue