autocomplete, radio box fields, bugs fixes
This commit is contained in:
parent
6bb4b4f3e0
commit
95c5dd4a60
|
@ -70,6 +70,7 @@ import { CompositeFieldFormComponent } from './compositefield-form/compositefiel
|
|||
import { ComboboxComponent } from './combobox/combobox-component';
|
||||
import { AutocompleteComponent } from './autocomplete/autocomplete-component';
|
||||
import { WordlistComponent } from './wordlist/wordlist-component';
|
||||
import { RadioBoxComponent } from './radiobox/radiobox-component';
|
||||
|
||||
|
||||
|
||||
|
@ -97,6 +98,7 @@ import { WordlistComponent } from './wordlist/wordlist-component';
|
|||
ComboboxComponent,
|
||||
AutocompleteComponent,
|
||||
WordlistComponent,
|
||||
RadioBoxComponent,
|
||||
DatasetsViewerComponent,
|
||||
ProfileEditorComponent,
|
||||
PropertiesEditorComponent,
|
||||
|
|
|
@ -15,6 +15,7 @@ export class AutocompleteComponent implements OnInit{
|
|||
private data:AutocompleteData = new AutocompleteData();
|
||||
|
||||
ngOnInit(){
|
||||
this.data.type= "autocomplete";
|
||||
let autocomplete: AutocompleteData = new AutocompleteData();
|
||||
this.dataModel.data = new JsonSerializer<AutocompleteData>().fromJSONObject(this.data,AutocompleteData);
|
||||
//(<FormArray>this.form.get("data")).push(autocomplete.buildForm());
|
||||
|
|
|
@ -18,11 +18,11 @@
|
|||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label>Ordinal</label>
|
||||
<input type="nymber" class="form-control" formControlName="ordinal">
|
||||
<input type="number" class="form-control" formControlName="ordinal">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label>Id</label>
|
||||
<input type="nymber" class="form-control" formControlName="id">
|
||||
<input type="string" class="form-control" formControlName="id">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@ addNewField(){
|
|||
(<FormArray>this.form.get("fields")).push(field.buildForm());
|
||||
}
|
||||
DeleteField(index){
|
||||
this.dataModel.fields.splice(index);
|
||||
this.dataModel.fields.splice(index, 1);
|
||||
(<FormArray>this.form.get("fields")).removeAt(index);
|
||||
}
|
||||
}
|
|
@ -19,6 +19,7 @@
|
|||
<option value='combobox'>combobox</option>
|
||||
<option value="checkBox">checkBox</option>
|
||||
<option value="freetext">freetext</option>
|
||||
<option value="radiobox">radiobox</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -28,6 +29,9 @@
|
|||
<div *ngSwitchCase="'combobox'">
|
||||
<combobox-component [form]="form" [dataModel]= "dataModel"></combobox-component>
|
||||
</div>
|
||||
<div *ngSwitchCase="'radiobox'">
|
||||
<radiobox-component [form]="form" [dataModel]= "dataModel"></radiobox-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
|
@ -77,7 +81,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div *ngFor="let rule of dataModel.visible.rules let i=index;">
|
||||
<div *ngFor="let rule of dataModel.visible.rules let i=index;">
|
||||
<h4 style="text-decoration: underline;">Rules <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);"><span class="glyphicon glyphicon-erase"></span></button></h4>
|
||||
<rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form>
|
||||
<div>
|
||||
|
@ -90,6 +94,6 @@
|
|||
<a (click)="addNewRule(form)" style="cursor: pointer">
|
||||
Add another rule +
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -30,7 +30,7 @@ addNewRule(){
|
|||
}
|
||||
|
||||
DeleteRule(index){
|
||||
this.dataModel.visible.rules.splice(index);
|
||||
this.dataModel.visible.rules.splice(index, 1);
|
||||
(<FormArray>this.form.get("visible").get("rules")).removeAt(index);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,12 @@
|
|||
<div class="container">
|
||||
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12">
|
||||
<label>Label</label>
|
||||
<input type="text" class="form-control" formControlName="label">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let section of dataModel.sections; let i=index;">
|
||||
<h4 style="text-decoration: underline;">Section
|
||||
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
|
||||
|
@ -13,7 +19,11 @@
|
|||
Add another section +
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div *ngIf="dataModel.sections.length == 0;" style="margin-top:20px; padding-left: 15px;">
|
||||
<a (click)="addSection()" style="cursor: pointer">
|
||||
Add another section +
|
||||
|
|
|
@ -55,7 +55,7 @@ export class FormComponent {
|
|||
}
|
||||
|
||||
DeleteSection(index) {
|
||||
this.dataModel.sections.splice(index);
|
||||
this.dataModel.sections.splice(index,1);
|
||||
(<FormArray>this.form.get("sections")).removeAt(index)
|
||||
}
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@ export class GroupFieldFormComponent {
|
|||
}
|
||||
|
||||
DeleteFieldSet(index){
|
||||
this.dataModel.compositeFields.splice(index);
|
||||
this.dataModel.compositeFields.splice(index, 1);
|
||||
(<FormArray>this.form.get("compositeFields")).removeAt(index);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { BaseModel } from './BaseModel';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
|
||||
import { FormGenerator } from './interfaces/FormGenerator';
|
||||
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||
import { Section } from './Section';
|
||||
|
@ -7,9 +7,11 @@ import { Serializable } from './interfaces/Serializable';
|
|||
export class DatasetProfileModel extends BaseModel implements Serializable<DatasetProfileModel>,FormGenerator<FormGroup>{
|
||||
|
||||
public sections:Array<Section> = new Array<Section>();
|
||||
public label: string;
|
||||
|
||||
fromJSONObject(item:any):DatasetProfileModel{
|
||||
this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections,Section);
|
||||
this.label = item.label;
|
||||
return this;
|
||||
}
|
||||
|
||||
|
@ -21,6 +23,7 @@ export class DatasetProfileModel extends BaseModel implements Serializable<Datas
|
|||
sectionsFormArray.push(form)
|
||||
})
|
||||
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
|
||||
formGroup.addControl('label', new FormControl(this.label));
|
||||
return formGroup;
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
<div [formGroup]="form" class="form-row">
|
||||
<div formGroupName="data">
|
||||
<div formArrayName="options">
|
||||
<div *ngFor="let option of form.get('data').get('options').controls index as i">
|
||||
<div [formGroupName]="i">
|
||||
<div class="form-group col-md-6">
|
||||
<label>Label</label>
|
||||
<input type="text" class="form-control" formControlName="label">
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label>Value</label>
|
||||
<input type="text" class="form-control" formControlName="value">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a (click)="addNewRow(form)" style="cursor: pointer">
|
||||
Add +
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
|
@ -0,0 +1,32 @@
|
|||
import { FormGroup } from '@angular/forms';
|
||||
import { Field } from '../models/Field';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { RadioBoxData } from '../models/DataField/RadioBoxData';
|
||||
import { FormArray } from '@angular/forms/src/model';
|
||||
import { ListingItem } from '../models/Commons/ListingItem';
|
||||
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||
|
||||
@Component({
|
||||
selector: 'radiobox-component',
|
||||
templateUrl: './radiobox-component.html'
|
||||
})
|
||||
export class RadioBoxComponent implements OnInit{
|
||||
@Input() dataModel: Field;
|
||||
@Input() form: FormGroup;
|
||||
private data: RadioBoxData = new RadioBoxData();
|
||||
private options = new Array<ListingItem>();
|
||||
|
||||
ngOnInit(){
|
||||
if (this.form.get("data")) this.form.removeControl("data");
|
||||
this.form.addControl("data", this.data.buildForm());
|
||||
this.addNewRow();
|
||||
}
|
||||
|
||||
addNewRow(){
|
||||
let radioListOptions:ListingItem = new ListingItem();
|
||||
(<FormArray>this.form.get("data").get("options")).push(radioListOptions.buildForm());
|
||||
this.data.options = [];
|
||||
this.data.options.push(radioListOptions);
|
||||
this.dataModel.data = new JsonSerializer<RadioBoxData>().fromJSONObject(this.data,RadioBoxData);
|
||||
}
|
||||
}
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label>Target</label>
|
||||
<input type="text" class="form-control" placeholder="field id" formControlName="target">
|
||||
<input type="text" class="form-control" placeholder="field id" formControlName="target" (change)="TargetValidation()">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label>Rule style</label>
|
||||
|
|
|
@ -12,4 +12,8 @@ export class RuleFormComponent {
|
|||
@Input() form: FormGroup;
|
||||
@Input() dataModel: FormGroup;
|
||||
|
||||
TargetValidation(){
|
||||
debugger;
|
||||
}
|
||||
|
||||
}
|
|
@ -27,6 +27,11 @@
|
|||
</div>
|
||||
<div *ngIf="dataModel.sections">
|
||||
<div *ngFor="let section of dataModel.sections let i=index;">
|
||||
<h4 style="text-decoration: underline;">Section
|
||||
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSectionInSection(i);">
|
||||
<span class="glyphicon glyphicon-erase"></span>
|
||||
</button>
|
||||
</h4>
|
||||
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section"></section-form>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -48,10 +53,10 @@
|
|||
</div>
|
||||
|
||||
<div style="margin-top:20px; padding-left: 15px;">
|
||||
<a (click)="addSectioninSection()" style="cursor: pointer">
|
||||
Add section +
|
||||
</a>
|
||||
</div>
|
||||
<a (click)="addSectioninSection()" style="cursor: pointer">
|
||||
Add section +
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div *ngIf="dataModel.fieldGroups.length == 0;">
|
||||
<a (click)="addGroupField()" style="cursor: pointer">
|
||||
|
|
|
@ -30,7 +30,7 @@ export class SectionFormComponent {
|
|||
}
|
||||
|
||||
DeleteFieldGroup(index){
|
||||
this.dataModel.fieldGroups.splice(index);
|
||||
this.dataModel.fieldGroups.splice(index, 1);
|
||||
(<FormArray>this.form.get("fieldGroups")).removeAt(index)
|
||||
}
|
||||
|
||||
|
@ -40,4 +40,9 @@ export class SectionFormComponent {
|
|||
(<FormArray>this.form.get("sections")).push(section.buildForm());
|
||||
}
|
||||
|
||||
DeleteSectionInSection(index){
|
||||
this.dataModel.sections.splice(index);
|
||||
(<FormArray>this.form.get("sections")).removeAt(index);
|
||||
}
|
||||
|
||||
}
|
|
@ -4,11 +4,11 @@
|
|||
<div *ngFor="let option of form.get('data').get('options').controls index as i">
|
||||
<div [formGroupName]="i">
|
||||
<div class="form-group col-md-6">
|
||||
<label>Value</label>
|
||||
<label>Label</label>
|
||||
<input type="text" class="form-control" formControlName="label">
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label>Id</label>
|
||||
<label>Value</label>
|
||||
<input type="text" class="form-control" formControlName="value">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,6 +17,7 @@ export class WordlistComponent implements OnInit{
|
|||
private options = new Array<ListingItem>();
|
||||
|
||||
ngOnInit(){
|
||||
this.data.type = "wordlist";
|
||||
if (this.form.get("data")) this.form.removeControl("data");
|
||||
this.form.addControl("data", this.data.buildForm());
|
||||
this.addNewRow();
|
||||
|
|
Loading…
Reference in New Issue