copy to clipboard implementation and other changes

This commit is contained in:
Maria Teresa Paratore 2023-09-25 18:12:09 +02:00
parent 7f4458cdc3
commit daab34df7c
4 changed files with 52 additions and 36 deletions

View File

@ -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,

View File

@ -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>

View File

@ -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);
}
} }

View File

@ -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: [],