MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

dropdownlist with autocomplete & wordlist options

This commit is contained in:
annampak 2017-12-04 17:02:52 +02:00
parent 888f1141bc
commit 6bb4b4f3e0
11 changed files with 134 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dmp-admin/src/app/app.module.ts
View File

@ -67,6 +67,9 @@ import { GroupFieldFormComponent } from './groupfield-form/groupfield-form.compo
import { RuleFormComponent } from './rule-component/rule.component';
import { SectionFormComponent } from './section-form/section-form.component';
import { CompositeFieldFormComponent } from './compositefield-form/compositefield-form.component';
import { ComboboxComponent } from './combobox/combobox-component';
import { AutocompleteComponent } from './autocomplete/autocomplete-component';
import { WordlistComponent } from './wordlist/wordlist-component';
@ -91,6 +94,9 @@ import { CompositeFieldFormComponent } from './compositefield-form/compositefiel
RuleFormComponent,
SectionFormComponent,
CompositeFieldFormComponent,
ComboboxComponent,
AutocompleteComponent,
WordlistComponent,
DatasetsViewerComponent,
ProfileEditorComponent,
PropertiesEditorComponent,

9
dmp-admin/src/app/autocomplete/autocomplete-component.html Normal file
View File

@ -0,0 +1,9 @@
<div [formGroup]="form">
<div formGroupName="data" class="form-row">
<div class="form-group col-md-12" >
<label>Url</label>
<input type="string" class="form-control" formControlName="url">
</div>
</div>
</div>

24
dmp-admin/src/app/autocomplete/autocomplete-component.ts Normal file
View File

@ -0,0 +1,24 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { Component, Input, OnInit } from '@angular/core';
import { AutocompleteData } from '../models/DataField/AutocompleteData';
import { FormArray } from '@angular/forms/src/model';
import { JsonSerializer } from '../utilities/JsonSerializer';
@Component({
selector: 'autocomplete-component',
templateUrl: './autocomplete-component.html'
})
export class AutocompleteComponent implements OnInit{
@Input() dataModel: Field;
@Input() form: FormGroup;
private data:AutocompleteData = new AutocompleteData();
ngOnInit(){
let autocomplete: AutocompleteData = new AutocompleteData();
this.dataModel.data = new JsonSerializer<AutocompleteData>().fromJSONObject(this.data,AutocompleteData);
//(<FormArray>this.form.get("data")).push(autocomplete.buildForm());
if (this.form.get("data")) this.form.removeControl("data");
this.form.addControl("data", this.data.buildForm());
}
}

16
dmp-admin/src/app/combobox/combobox-component.html Normal file
View File

@ -0,0 +1,16 @@
<div class="form-group col-md-12">
<label>Type of Combobox</label>
<select class="form-control" [(ngModel)]="type">
<option *ngFor="let option of options" [value]="option.value">{{option.value}}</option>
</select>
<div class="form-row" [ngSwitch]="type">
<div *ngSwitchCase="'autocomplete'">
<autocomplete-component [form]="form" [dataModel]="dataModel"></autocomplete-component>
</div>
</div>
<div class="form-row" [ngSwitch]="type">
<div *ngSwitchCase="'wordlist'">
<wordlist-component [form]="form" [dataModel]="dataModel"></wordlist-component>
</div>
</div>
</div>

18
dmp-admin/src/app/combobox/combobox-component.ts Normal file
View File

@ -0,0 +1,18 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'combobox-component',
templateUrl: './combobox-component.html'
})
export class ComboboxComponent implements OnInit{
@Input() dataModel: Field;
@Input() form: FormGroup;
options = [{id:"autocomplete", value: "autocomplete"}, {id:"wordlist", value: "wordlist"}];
ngOnInit(){
}
}

3
dmp-admin/src/app/field-form/field-form.component.html
View File

@ -26,8 +26,7 @@
</div>
<div class="form-row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
<div *ngSwitchCase="'combobox'">
<label>Type</label>
<input type="text" class="form-control" formControlName="description">
<combobox-component [form]="form" [dataModel]= "dataModel"></combobox-component>
</div>
</div>
<div class="form-row">

1
dmp-admin/src/app/field-form/field-form.component.ts
View File

@ -4,6 +4,7 @@ import { Field } from '../models/Field';
import { Rule } from '../models/Rule';
import { Multiplicity } from '../models/Multiplicity';
import { FormArray } from '@angular/forms/src/model';
import {ComboboxComponent} from '../combobox/combobox-component';
@Component({
selector: 'field-form',

3
dmp-admin/src/app/models/Field.ts
View File

@ -67,7 +67,8 @@ export class Field extends BaseModel implements Serializable<Field>,FormGenerato
formGroup.addControl("defaultValue", this.defaultValue.buildForm());
formGroup.addControl("viewStyle", this.viewStyle.buildForm());
formGroup.addControl("visible", this.visible.buildForm());
if(this.data)formGroup.addControl("data", this.data.buildForm());
//formGroup.addControl("data",this.data? this.data.buildForm():this.formBuilder.group({}));
if(this.data)formGroup.addControl("data",this.data.buildForm());
return formGroup;
}

2
dmp-admin/src/app/services/rest-base.ts
View File

@ -18,7 +18,7 @@ export class RestBase {
/*
*/
protocol: string = "http";
hostname: string = "localhost";
hostname: string = "192.168.32.103";
port: number = 8080;
webappname: string = "dmp-backend";
restpath: string = "rest";

24
dmp-admin/src/app/wordlist/wordlist-component.html Normal file
View File

@ -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>Value</label>
<input type="text" class="form-control" formControlName="label">
</div>
<div class="form-group col-md-6">
<label>Id</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>

32
dmp-admin/src/app/wordlist/wordlist-component.ts Normal file
View File

@ -0,0 +1,32 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { Component, Input, OnInit } from '@angular/core';
import { WordListData } from '../models/DataField/WordListData';
import { FormArray } from '@angular/forms/src/model';
import { ListingItem } from '../models/Commons/ListingItem';
import { JsonSerializer } from '../utilities/JsonSerializer';
@Component({
selector: 'wordlist-component',
templateUrl: './wordlist-component.html'
})
export class WordlistComponent implements OnInit{
@Input() dataModel: Field;
@Input() form: FormGroup;
private data: WordListData = new WordListData();
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 wordListOptions:ListingItem = new ListingItem();
(<FormArray>this.form.get("data").get("options")).push(wordListOptions.buildForm());
this.data.options = [];
this.data.options.push(wordListOptions);
this.dataModel.data = new JsonSerializer<WordListData>().fromJSONObject(this.data,WordListData);
}
}