|
|
|
@ -6,56 +6,18 @@ |
|
|
|
*/ |
|
|
|
|
|
|
|
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; |
|
|
|
import { FormBuilder, Validators, FormGroup } from '@angular/forms'; |
|
|
|
import { FormBuilder } from '@angular/forms'; |
|
|
|
|
|
|
|
import { |
|
|
|
AddFieldDto, |
|
|
|
createProperties, |
|
|
|
fadeAnimation, |
|
|
|
FieldDto, |
|
|
|
fieldTypes, |
|
|
|
SchemaDetailsDto, |
|
|
|
UpdateFieldDto, |
|
|
|
ValidatorsEx |
|
|
|
} from '@app/shared'; |
|
|
|
import { fieldTypes, SchemaDetailsDto } from '@app/shared'; |
|
|
|
|
|
|
|
import { SchemasState } from './../../state/schemas.state'; |
|
|
|
import { SchemasState, AddFieldForm } from './../../state/schemas.state'; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
selector: 'sqx-field-wizard', |
|
|
|
styleUrls: ['./field-wizard.component.scss'], |
|
|
|
templateUrl: './field-wizard.component.html', |
|
|
|
animations: [ |
|
|
|
fadeAnimation |
|
|
|
] |
|
|
|
templateUrl: './field-wizard.component.html' |
|
|
|
}) |
|
|
|
export class FieldWizardComponent { |
|
|
|
public fieldTypes = fieldTypes; |
|
|
|
|
|
|
|
public editFormSubmitted = false; |
|
|
|
public editTab = 0; |
|
|
|
public editForm: FormGroup | null; |
|
|
|
public editField: FieldDto | null; |
|
|
|
|
|
|
|
public addFieldError = ''; |
|
|
|
public addFieldFormSubmitted = false; |
|
|
|
public addFieldForm = |
|
|
|
this.formBuilder.group({ |
|
|
|
type: ['String', |
|
|
|
[ |
|
|
|
Validators.required |
|
|
|
] |
|
|
|
], |
|
|
|
name: ['', |
|
|
|
[ |
|
|
|
Validators.required, |
|
|
|
Validators.maxLength(40), |
|
|
|
ValidatorsEx.pattern('[a-zA-Z0-9]+(\\-[a-zA-Z0-9]+)*', 'Name must be a valid javascript name in camel case.') |
|
|
|
] |
|
|
|
], |
|
|
|
isLocalizable: false |
|
|
|
}); |
|
|
|
|
|
|
|
@ViewChild('nameInput') |
|
|
|
public nameInput: ElementRef; |
|
|
|
|
|
|
|
@ -65,88 +27,37 @@ export class FieldWizardComponent { |
|
|
|
@Output() |
|
|
|
public completed = new EventEmitter(); |
|
|
|
|
|
|
|
constructor( |
|
|
|
private readonly formBuilder: FormBuilder, |
|
|
|
public fieldTypes = fieldTypes; |
|
|
|
|
|
|
|
public addFieldForm: AddFieldForm; |
|
|
|
|
|
|
|
constructor(formBuilder: FormBuilder, |
|
|
|
private readonly schemasState: SchemasState |
|
|
|
) { |
|
|
|
this.addFieldForm = new AddFieldForm(formBuilder); |
|
|
|
} |
|
|
|
|
|
|
|
public complete() { |
|
|
|
this.completed.emit(); |
|
|
|
} |
|
|
|
|
|
|
|
public selectTab(tab: number) { |
|
|
|
this.editTab = tab; |
|
|
|
} |
|
|
|
|
|
|
|
public addField(next: boolean, configure: boolean) { |
|
|
|
this.addFieldFormSubmitted = true; |
|
|
|
|
|
|
|
if (this.addFieldForm.valid) { |
|
|
|
this.addFieldForm.disable(); |
|
|
|
|
|
|
|
const properties = createProperties(this.addFieldForm.controls['type'].value); |
|
|
|
public addField(next: boolean) { |
|
|
|
const value = this.addFieldForm.submit(); |
|
|
|
|
|
|
|
const partitioning = |
|
|
|
this.addFieldForm.controls['isLocalizable'].value ? |
|
|
|
'language' : |
|
|
|
'invariant'; |
|
|
|
|
|
|
|
const requestDto = new AddFieldDto(this.addFieldForm.controls['name'].value, partitioning, properties); |
|
|
|
|
|
|
|
this.schemasState.addField(this.schema, requestDto) |
|
|
|
if (value) { |
|
|
|
this.schemasState.addField(this.schema, value) |
|
|
|
.subscribe(dto => { |
|
|
|
this.resetFieldForm(); |
|
|
|
|
|
|
|
if (configure) { |
|
|
|
this.editField = dto; |
|
|
|
this.editTab = 1; |
|
|
|
this.editForm = new FormGroup({}); |
|
|
|
} else if (next) { |
|
|
|
this.nameInput.nativeElement.focus(); |
|
|
|
} else { |
|
|
|
this.complete(); |
|
|
|
} |
|
|
|
}, error => { |
|
|
|
this.resetFieldForm(error.displayMessage); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
public configureField(next: boolean) { |
|
|
|
this.editFormSubmitted = true; |
|
|
|
|
|
|
|
if (this.editForm!.valid) { |
|
|
|
const properties = createProperties(this.editField!.properties['fieldType'], this.editForm!.value); |
|
|
|
|
|
|
|
this.schemasState.updateField(this.schema, this.editField!, new UpdateFieldDto(properties)) |
|
|
|
.subscribe(() => { |
|
|
|
this.resetEditForm(); |
|
|
|
this.addFieldForm.submitCompleted({ type: fieldTypes[0].type }); |
|
|
|
|
|
|
|
if (next) { |
|
|
|
this.editField = null; |
|
|
|
this.editForm = null; |
|
|
|
this.editTab = 1; |
|
|
|
this.nameInput.nativeElement.focus(); |
|
|
|
} else { |
|
|
|
this.complete(); |
|
|
|
} |
|
|
|
}, error => { |
|
|
|
this.resetEditForm(); |
|
|
|
this.addFieldForm.submitFailed(error); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
private resetEditForm() { |
|
|
|
this.editFormSubmitted = false; |
|
|
|
this.editForm!.enable(); |
|
|
|
this.editForm!.reset(this.editField!.properties); |
|
|
|
} |
|
|
|
|
|
|
|
private resetFieldForm(error = '') { |
|
|
|
this.addFieldFormSubmitted = false; |
|
|
|
this.addFieldError = error; |
|
|
|
this.addFieldForm.enable(); |
|
|
|
this.addFieldForm.reset({ type: 'String' }, { emitEvent: false }); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
Sebastian Stehle
8 years ago