adding support for editing and FormArrays to manage custom properties
This commit is contained in:
parent
750fe4b0b5
commit
441e1a7530
|
|
@ -8,10 +8,7 @@ import { Authority } from 'app/config/authority.constants';
|
|||
|
||||
import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AddResourceComponent } from './add-resource/add-resource.component';
|
||||
import { FormComposerComponent } from './form-composer/form-composer.component';
|
||||
import { FacetComposerComponent } from './facet-composer/facet-composer.component';
|
||||
import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
|
||||
|
||||
//const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
|
||||
|
||||
|
|
@ -28,24 +25,10 @@ import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
|
|||
canActivate: [UserRouteAccessService],
|
||||
loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule),
|
||||
},
|
||||
|
||||
{
|
||||
path: 'addResource',
|
||||
component: AddResourceComponent
|
||||
},
|
||||
{
|
||||
path: 'formComposer',
|
||||
component: FormComposerComponent
|
||||
},
|
||||
{
|
||||
path: 'facetComposer',
|
||||
component: FacetComposerComponent
|
||||
},
|
||||
{
|
||||
path: 'dynamicFormComponent',
|
||||
component: DynamicFormComponent
|
||||
},
|
||||
|
||||
navbarRoute,
|
||||
...errorRoute,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -49,12 +49,31 @@
|
|||
<input matInput formControlName="{{prop.name}}" id="{{prop.name}}"
|
||||
type="{{prop.type}}"/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ADDITIONAL PROPERTIES -->
|
||||
<!--
|
||||
<div formArrayName="extrapropsArray" style="border: 3px solid rgb(202, 198, 57); padding: 10px; margin: 5px;">
|
||||
<div [formGroupName] ="i" *ngFor="let extraCtrl of myForm.get([facetTemplate.key,ind,'additionalProps']).controls; let i=index;">
|
||||
<mat-form-field>
|
||||
<mat-label for="deno">name</mat-label>
|
||||
<input matInput formControlName="deno" type="text"/>
|
||||
</mat-form-field>
|
||||
<button mat-flat-button color="accent"
|
||||
(click)="addFacet(facetTemplate.key)" >
|
||||
Remove custom prop</button>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-flat-button color="accent"
|
||||
(click)="addFacet(facetTemplate.key)" >
|
||||
Add new custom prop</button>
|
||||
</div>
|
||||
-->
|
||||
<!-- FINE ADDITIONAL PROPERTIES -->
|
||||
|
||||
<input matInput formControlName="isAdded" style="display: none;"/>
|
||||
|
||||
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
|
||||
<button mat-icon-button color="primary"
|
||||
|
||||
[disabled]="facetTemplate.value.min==='1' && !myForm.get([facetTemplate.key,ind,'isAdded'])!.value"
|
||||
(click)="removeFacet(facetTemplate.key,ind)" matTooltip="remove {{facetTemplate.key}}" matTooltipClass="tableTooltip"
|
||||
matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
/* eslint-disable no-console */
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, Inject, Input, OnInit } from '@angular/core';
|
||||
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { IContextNode } from 'app/services/i-context-node';
|
||||
import { IResource } from 'app/services/i-resource';
|
||||
import { FacetComposerService, ITypeSpecification } from './facet-composer.service';
|
||||
|
|
@ -16,7 +16,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|||
import { IFacetComposer, IFacetProps } from './i-facet-composer';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { MatSelectFilterModule } from 'mat-select-filter';
|
||||
import { faAssistiveListeningSystems } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
|
||||
|
||||
|
|
@ -38,11 +37,10 @@ export class FacetComposerComponent implements OnInit {
|
|||
selectedOption: string;
|
||||
|
||||
myForm: FormGroup; //form complessiva
|
||||
// relSelect: FormGroup<any>;
|
||||
// facetData: IFacetComposer[];
|
||||
typeSpec: ITypeSpecification;
|
||||
fieldsMap: Map<string, IFacetComposer>;
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
||||
private dialogRef:MatDialogRef<FacetComposerComponent>,
|
||||
|
|
@ -78,24 +76,29 @@ export class FacetComposerComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
createFacetArrayEntry(item: IFacetComposer):void{
|
||||
const nameplus:string = item.name+'_'+item.relation;
|
||||
const singleFacetArray: FormArray = this.fb.array([]);
|
||||
singleFacetArray.push(this.createFacetGroup(item,false));
|
||||
this.myForm.addControl(nameplus,singleFacetArray);
|
||||
}
|
||||
|
||||
|
||||
|
||||
addFacet(deno:string): void {
|
||||
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
|
||||
//TODO CHECK THIS
|
||||
const singleFacetArray = this.myForm.controls[deno] as FormArray;
|
||||
singleFacetArray.push(this.createFacetGroup(icf,true));
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
createExtraPropGroup(): FormGroup{
|
||||
const extraFg: FormGroup = this.fb.group({});
|
||||
extraFg.addControl('deno', '');
|
||||
return extraFg;
|
||||
}
|
||||
|
||||
createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
|
||||
const facetFg: FormGroup = this.fb.group({});
|
||||
const nameFc = this.fb.control(item.name);
|
||||
|
|
@ -110,19 +113,13 @@ export class FacetComposerComponent implements OnInit {
|
|||
const descriptionFc = this.fb.control(item.description);
|
||||
facetFg.addControl('facetDescription', descriptionFc);
|
||||
|
||||
// const relFg: FormGroup = this.fb.group({});
|
||||
|
||||
/*
|
||||
console.debug(item.relationOptions);
|
||||
console.debug('+++++++++++++++++')
|
||||
*/
|
||||
const relationFc = this.fb.control(item.relation);
|
||||
facetFg.addControl('relationFacet', relationFc);
|
||||
//this.itemRelations = item.relationOptions;
|
||||
|
||||
const addedFc = this.fb.control(isAdded);
|
||||
facetFg.addControl('isAdded', addedFc);
|
||||
|
||||
|
||||
//1. creo group con le properties
|
||||
//2. aggiungo formgroup delle properties ai controls per la facet
|
||||
// facetFg.addControl('properties',this.createPropertyControls(item.guiProps));
|
||||
|
|
@ -159,8 +156,17 @@ export class FacetComposerComponent implements OnInit {
|
|||
}
|
||||
facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
||||
}
|
||||
console.debug("----------- facetFg -------");
|
||||
console.debug(facetFg)
|
||||
console.debug("-----------------");
|
||||
|
||||
return facetFg;
|
||||
}
|
||||
/*
|
||||
getExtraPropsArray(nameplus:string): FormArray {
|
||||
const fa = this.getSingleFacetArray(nameplus);
|
||||
return fa.controls['extraPropsArray'] as FormArray
|
||||
}*/
|
||||
|
||||
getSingleFacetArray(nameplus:string): FormArray {
|
||||
return this.myForm.controls[nameplus] as FormArray;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<h3 mat-dialog-title>Edit Component: {{titleType}} ({{titlePath}}) - {{uid}}</h3>
|
||||
|
||||
<!-- myForm inizio form globale -->
|
||||
<mat-dialog-content>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<h2>{{typeSpec.name}}</h2>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
<!--la descrizione è lunga e non posso metterla qua-->
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p> {{typeSpec.description}} </p>
|
||||
</mat-expansion-panel>
|
||||
|
||||
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button type="submit">Submit</button>
|
||||
<button mat-button (click)="close()">Cancel</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FacetEditorComponent } from './facet-editor.component';
|
||||
|
||||
describe('FacetEditorComponent', () => {
|
||||
let component: FacetEditorComponent;
|
||||
let fixture: ComponentFixture<FacetEditorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ FacetEditorComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(FacetEditorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
/* eslint-disable no-console */
|
||||
/* eslint-disable guard-for-in */
|
||||
/* eslint-disable @typescript-eslint/restrict-plus-operands */
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { FacetComposerService, ITypeSpecification } from 'app/facet-composer/facet-composer.service';
|
||||
import { IFacetComposer, IFacetProps } from 'app/facet-composer/i-facet-composer';
|
||||
import { IContextNode } from 'app/services/i-context-node';
|
||||
import { IResource } from 'app/services/i-resource';
|
||||
import { ResourcesImplService } from 'app/services/resources-impl.service';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { MatSelectFilterModule } from 'mat-select-filter';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: 'jhi-facet-editor',
|
||||
templateUrl: './facet-editor.component.html',
|
||||
styleUrls: ['./facet-editor.component.scss'],
|
||||
imports:[CommonModule,MatFormFieldModule,SharedModule,
|
||||
ReactiveFormsModule,MatButtonModule,
|
||||
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
|
||||
providers: [ResourcesImplService]
|
||||
|
||||
})
|
||||
|
||||
//TODO: a regime usare lo stesso html di facet-composer
|
||||
export class FacetEditorComponent implements OnInit {
|
||||
|
||||
titleType: string;
|
||||
titlePath: string;
|
||||
selectedOption: string;
|
||||
uid:string;
|
||||
|
||||
myForm: FormGroup; //form complessiva
|
||||
// relSelect: FormGroup<any>;
|
||||
// facetData: IFacetComposer[];
|
||||
typeSpec: ITypeSpecification;
|
||||
fieldsMap: Map<string, IFacetComposer>;
|
||||
rawjson: string|any;
|
||||
|
||||
//TODO: PASSARE UID COME STRINGA
|
||||
constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder,
|
||||
private dialogRef:MatDialogRef<FacetEditorComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode, uid:string}){
|
||||
this.titleType = data.type.name;
|
||||
this.titlePath = data.context.path;
|
||||
this.uid = data.uid;
|
||||
this.selectedOption = '';
|
||||
this.typeSpec = {} as ITypeSpecification;
|
||||
this.fieldsMap = new Map<string,IFacetComposer>();
|
||||
this.myForm = this.fb.group({});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
/*
|
||||
if(this.resourceTypeName===''){
|
||||
paramType = 'HostingNode';
|
||||
}else{
|
||||
paramType = this.resourceTypeName;
|
||||
}
|
||||
this.service.getJsonDetails('',paramType,this.chosenId).subscribe(res => {
|
||||
this.fetchedRawData = res;
|
||||
});
|
||||
*/
|
||||
|
||||
//TODO: al posto di '' metti titlePath (sembra dare errore)
|
||||
this.dataService.getJsonDetails('',this.titleType,this.uid).subscribe(res => {
|
||||
console.debug("*******RAW OBJECT*********");
|
||||
this.lookoutObject(res);
|
||||
console.debug("****************");
|
||||
});
|
||||
|
||||
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
||||
this.typeSpec = res;
|
||||
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
|
||||
});
|
||||
|
||||
this.createAndFillForm(this.rawjson,this.typeSpec);
|
||||
}
|
||||
|
||||
|
||||
lookoutObject(obj:any){
|
||||
for(const key in obj){
|
||||
console.debug("key: " + key + ", value: " + obj[key]);
|
||||
if(obj[key] instanceof Object){
|
||||
this.lookoutObject(obj[key]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
createAndFillForm(rawSource:string, fData:ITypeSpecification):void{
|
||||
/*
|
||||
console.debug("*******RAW STRING*********");
|
||||
console.debug(rawSource);
|
||||
console.debug("****************");
|
||||
*/
|
||||
//const formDataObj = JSON.parse(rawSource);
|
||||
// this.lookoutObject(formDataObj);
|
||||
|
||||
for(let i=0; i<fData.facetSpecs.length; i++){
|
||||
const facetSpec = fData.facetSpecs[i];
|
||||
this.createFacetArrayEntry(facetSpec);
|
||||
}
|
||||
}
|
||||
|
||||
createFacetArrayEntry(item: IFacetComposer):void{
|
||||
const nameplus:string = item.name+'_'+item.relation;
|
||||
const singleFacetArray: FormArray = this.fb.array([]);
|
||||
singleFacetArray.push(this.createFacetGroup(item,false));
|
||||
this.myForm.addControl(nameplus,singleFacetArray);
|
||||
}
|
||||
|
||||
|
||||
createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
|
||||
const facetFg: FormGroup = this.fb.group({});
|
||||
const nameFc = this.fb.control(item.name);
|
||||
facetFg.addControl('facetName', nameFc);
|
||||
|
||||
const maxFc = this.fb.control(item.max);
|
||||
facetFg.addControl('max', maxFc);
|
||||
|
||||
const minFc = this.fb.control(item.min);
|
||||
facetFg.addControl('min', minFc);
|
||||
|
||||
const descriptionFc = this.fb.control(item.description);
|
||||
facetFg.addControl('facetDescription', descriptionFc);
|
||||
|
||||
// const relFg: FormGroup = this.fb.group({});
|
||||
|
||||
/*
|
||||
console.debug(item.relationOptions);
|
||||
console.debug('+++++++++++++++++')
|
||||
*/
|
||||
const relationFc = this.fb.control(item.relation);
|
||||
facetFg.addControl('relationFacet', relationFc);
|
||||
//this.itemRelations = item.relationOptions;
|
||||
|
||||
const addedFc = this.fb.control(isAdded);
|
||||
facetFg.addControl('isAdded', addedFc);
|
||||
|
||||
//1. creo group con le properties
|
||||
//2. aggiungo formgroup delle properties ai controls per la facet
|
||||
// facetFg.addControl('properties',this.createPropertyControls(item.guiProps));
|
||||
return this.addPropertyControls(facetFg,item.guiProps);
|
||||
}
|
||||
|
||||
addPropertyControls(facetFg:FormGroup, props: IFacetProps[]){
|
||||
let fc:FormControl;
|
||||
for(let i=0; i<props.length; i++){
|
||||
const prop=props[i];
|
||||
if(prop.type==="date"){
|
||||
fc = this.fb.control(new Date())
|
||||
}
|
||||
if(prop.type==="number"){
|
||||
fc = this.fb.control(0)
|
||||
}
|
||||
if(prop.type==="boolean"){
|
||||
fc = this.fb.control(true)
|
||||
}
|
||||
else{
|
||||
fc = this.fb.control('') //text
|
||||
}
|
||||
if (prop.validations.length>0){
|
||||
for (let k=0; k<prop.validations.length; k++){
|
||||
if(prop.validations[k].name==='required'){
|
||||
fc.addValidators(Validators.required)
|
||||
}
|
||||
if(prop.validations[k].name==='pattern'){
|
||||
fc.addValidators(Validators.pattern(prop.pattern))
|
||||
}
|
||||
}
|
||||
}
|
||||
facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
||||
}
|
||||
return facetFg;
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
if (this.myForm.valid) {
|
||||
const formData = this.myForm.value;
|
||||
// console.log("***** FORMDATA *****");
|
||||
//console.log(formData);
|
||||
//TODO Process formData
|
||||
}
|
||||
}
|
||||
|
||||
getSingleFacetArray(nameplus:string): FormArray {
|
||||
return this.myForm.controls[nameplus] as FormArray;
|
||||
}
|
||||
|
||||
|
||||
removeFacet(deno:string, index: number): void {
|
||||
this.getSingleFacetArray(deno).removeAt(index);
|
||||
this.typeSpec.facetSpecs.splice(index,1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
resetForm():void {
|
||||
this.myForm.reset();
|
||||
}
|
||||
|
||||
close():void {
|
||||
this.resetForm();
|
||||
this.dialogRef.close({event:'cancel'});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -45,7 +45,6 @@ export class ResourcesImplService {
|
|||
|
||||
getJsonDetails(ctx:string, type:string, uid: string): Observable<string> {
|
||||
const resourceUrl = this.applicationConfigService.getEndpointFor('api/is/resourcejson');
|
||||
// const SERVICE_URL = appProperties.BASEURL_API+'is/resourcejson';
|
||||
let queryParams = new HttpParams();
|
||||
queryParams = queryParams.append("currentContext",ctx).append("resourceType",type).append("uid",uid);
|
||||
return this.http.get<string>(resourceUrl,{params:queryParams});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<button mat-raised-button color="primary" (click)="reloadTable()" >
|
||||
<mat-icon>replay</mat-icon><span>Reload</span>
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="openDialogAdd()">
|
||||
<button mat-raised-button color="primary" (click)="openFacetComposer()">
|
||||
<mat-icon>add</mat-icon><span>Add new</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<!--<div class="d-flex flex-row py-4">-->
|
||||
<div class="d-flex flex-row">
|
||||
<button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary" ><mat-icon>edit</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary" (click)="openFacetEditor(this.item.id)"><mat-icon>edit</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import { MatSort} from '@angular/material/sort';
|
|||
import { IContextNode } from 'app/services/i-context-node';
|
||||
import { MatPaginator} from '@angular/material/paginator';
|
||||
import { MatTab, MatTabGroup } from '@angular/material/tabs';
|
||||
import { MatDialogRef, MatDialog } from '@angular/material/dialog';
|
||||
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
||||
import { ITabbedEntity } from 'app/i-tabbed-entity';
|
||||
import { IEService } from 'app/services/i-e-service';
|
||||
import { ResourcesImplService } from 'app/services/resources-impl.service';
|
||||
|
|
@ -27,6 +27,8 @@ import { ResourceAddComponent } from 'app/resource-add/resource-add.component';
|
|||
import { GenericInfoComponent } from 'app/generic-info/generic-info.component';
|
||||
import { IResource } from 'app/services/i-resource';
|
||||
import { IResourceType } from 'app/services/i-resource-type';
|
||||
import { FacetComposerComponent } from 'app/facet-composer/facet-composer.component';
|
||||
import { FacetEditorComponent } from 'app/facet-editor/facet-editor.component';
|
||||
|
||||
@Component({
|
||||
selector: 'jhi-table-screen-es',
|
||||
|
|
@ -66,7 +68,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{
|
|||
|
||||
|
||||
|
||||
constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) {
|
||||
constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) {
|
||||
this.currentCtx = {} as IContextNode;
|
||||
this.tableDetail = {} as IEService;
|
||||
this.dataFromService = [];
|
||||
|
|
@ -166,25 +168,29 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{
|
|||
//this.chosenIds.indexOf();
|
||||
this.tabs.splice(index, 1);
|
||||
}
|
||||
|
||||
openDialogAdd(): void {
|
||||
// alert('contesto...'+this.currentCtx.name);
|
||||
this.dialogAddRef = this.myDialog.open(ResourceAddComponent, {
|
||||
//TODO: passare tipo e contesto
|
||||
data: {type: this.typeObject, context: this.currentCtx},
|
||||
});
|
||||
|
||||
this.dialogAddRef.afterClosed().subscribe(result => {
|
||||
console.log('The dialog was closed');
|
||||
this.dummyRes = result;
|
||||
});
|
||||
}
|
||||
|
||||
openDialogDescription(): void {
|
||||
this.dialogInfoRef = this.myDialog.open(GenericInfoComponent, {
|
||||
openDialogDescription(): void {
|
||||
this.dialogInfoRef = this.createDialog.open(GenericInfoComponent, {
|
||||
data: {description: this.typeObject.description}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
openFacetComposer(): void {
|
||||
const dialogConfig = new MatDialogConfig();
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.autoFocus = true;
|
||||
dialogConfig.data= {type: this.typeObject, context: this.currentCtx};
|
||||
this.createDialog.open(FacetComposerComponent,dialogConfig);
|
||||
}
|
||||
|
||||
openFacetEditor(uid: string): void {
|
||||
const dialogConfig = new MatDialogConfig();
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.autoFocus = true;
|
||||
dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid};
|
||||
this.editDialog.open(FacetEditorComponent,dialogConfig);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,37 +8,12 @@
|
|||
<button mat-raised-button color="primary" (click)="reloadTable()" >
|
||||
<mat-icon>replay</mat-icon><span>Reload</span>
|
||||
</button>
|
||||
<!--
|
||||
<button mat-raised-button color="primary" (click)="openDialogAdd()">
|
||||
<mat-icon>add</mat-icon><span>Add new</span>
|
||||
</button>
|
||||
-->
|
||||
<button mat-raised-button color="primary" (click)="openFacetComposer()">
|
||||
<mat-icon>add</mat-icon><span>Add new</span>
|
||||
</button>
|
||||
<!--
|
||||
<button mat-raised-button color="primary" routerLink="/addResource">New Resource</button>
|
||||
<button mat-raised-button color="primary" routerLink="/facetComposer">Facet Composer</button>
|
||||
<button mat-raised-button color="primary" routerLink="/dynamicFormComponent">Form Dinamica</button>
|
||||
<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
|
||||
-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TEST-CRUD begin -->
|
||||
|
||||
-------
|
||||
<h2>Form da dialog: </h2>
|
||||
<ul>
|
||||
<li *ngFor="let dm of dummies">
|
||||
Id: {{dm.uid}}, Name: {{dm.name}}, Type: {{dm.type}}
|
||||
</li>
|
||||
</ul>
|
||||
-------
|
||||
|
||||
<!-- TEST-CRUD end -->
|
||||
|
||||
<div class="mat-elevation-z4">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="name">
|
||||
|
|
@ -77,7 +52,7 @@
|
|||
<!--<div class="d-flex flex-row py-4">-->
|
||||
<div class="d-flex flex-row">
|
||||
<button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary" ><mat-icon>edit</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary" (click)="openFacetEditor(this.item.id)"><mat-icon>edit</mat-icon></button>
|
||||
<button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,8 @@ import { IResourceType } from 'app/services/i-resource-type';
|
|||
import { DummyService } from 'app/services/dummy.service';
|
||||
import { MatFormFieldControl } from '@angular/material/form-field';
|
||||
|
||||
import { Router } from '@angular/router';
|
||||
import { IDummy } from 'app/services/i-dummy';
|
||||
import { FacetComposerComponent } from 'app/facet-composer/facet-composer.component';
|
||||
import { FacetEditorComponent } from 'app/facet-editor/facet-editor.component';
|
||||
|
||||
@Component({
|
||||
selector: 'jhi-table-screen',
|
||||
|
|
@ -74,13 +73,10 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
rawJson: string;
|
||||
////////// fine tabbed view
|
||||
//TODO: a regime questa sarà la nuova resource creata (visualizzerò il titolo)
|
||||
dummyResource :IDummy;
|
||||
dummies : IDummy[];
|
||||
// dummyResource :IDummy;
|
||||
// dummies : IDummy[];
|
||||
|
||||
constructor(private myDataService: ResourcesImplService,
|
||||
private myDialog: MatDialog,
|
||||
private router:Router
|
||||
) {
|
||||
constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) {
|
||||
this.currentCtx = {} as IContextNode;
|
||||
this.tableDetail = {} as IHostingNode;
|
||||
this.dataFromService = [];
|
||||
|
|
@ -90,8 +86,8 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
this.typeObject = {} as IResourceType;
|
||||
this.currentCtxPath = '';
|
||||
this.rawJson = '';
|
||||
this.dummyResource = {} as IDummy;
|
||||
this.dummies = [];
|
||||
// this.dummyResource = {} as IDummy;
|
||||
// this.dummies = [];
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
|
|
@ -194,37 +190,23 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
const dialogConfig = new MatDialogConfig();
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.autoFocus = true;
|
||||
dialogConfig.data= {type: this.typeObject, myObject: this.dummyResource, context: this.currentCtx};
|
||||
//questa qua sotto serve?
|
||||
this.myDialog.open(FacetComposerComponent,dialogConfig);
|
||||
|
||||
const dialogRef = this.myDialog.open(FacetComposerComponent,dialogConfig);
|
||||
dialogConfig.data= {type: this.typeObject, context: this.currentCtx};
|
||||
this.createDialog.open(FacetComposerComponent,dialogConfig);
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if(result.event === 'add'){
|
||||
this.addNewData(result.data);
|
||||
}else if(result.event ==='update'){
|
||||
//TODO
|
||||
//this.updateRowData(result.data);
|
||||
}else if(result.event === 'delete'){
|
||||
//TODO
|
||||
// this.deleteRowData(result.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
openDialogAdd(): void {
|
||||
}
|
||||
|
||||
openFacetEditor(uid: string): void {
|
||||
const dialogConfig = new MatDialogConfig();
|
||||
dialogConfig.disableClose = true;
|
||||
dialogConfig.autoFocus = true;
|
||||
dialogConfig.data= {type: this.typeObject, myObject: this.dummyResource, context: this.currentCtx};
|
||||
//questa qua sotto serve?
|
||||
this.myDialog.open(ResourceAddComponent,dialogConfig);
|
||||
|
||||
const dialogRef = this.myDialog.open(ResourceAddComponent,dialogConfig);
|
||||
|
||||
dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid};
|
||||
this.editDialog.open(FacetEditorComponent,dialogConfig);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
//TODO: GUARDA QUESTI METODI PER GESTIRE IL DOPO CREAZIONE/AGGIORNAMENTO
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if(result.event === 'add'){
|
||||
this.addNewData(result.data);
|
||||
|
|
@ -237,10 +219,6 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
}
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
showNewData(data: any):void{
|
||||
const rsc = {} as IDummy;
|
||||
rsc.type = this.typeObject.name;
|
||||
|
|
@ -269,5 +247,6 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
|||
removeData(uid: string):void{
|
||||
//TODO: chiama il metodo delle API per fare la remove
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,13 @@ import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/d
|
|||
import { ResourceAddComponent } from 'app/resource-add/resource-add.component';
|
||||
import { TypeHeadlineModule } from 'app/type-headline/type-headline.module';
|
||||
import { AsyncPipe } from '@angular/common';
|
||||
import { DynamicFormComponent } from 'app/dynamic-form/dynamic-form.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,MatTableModule,MatIconModule,MatSortModule,
|
||||
MatPaginatorModule, MatDialogModule, RawjsonPaneComponent,
|
||||
TypeHeadlineModule, AsyncPipe, RouterModule, DynamicFormComponent
|
||||
TypeHeadlineModule, AsyncPipe, RouterModule
|
||||
],
|
||||
declarations:[TableScreenComponent],
|
||||
exports: [TableScreenComponent],
|
||||
|
|
|
|||
Loading…
Reference in New Issue