explore-services/portal-2/src/app/searchPages/searchUtils/advancedSearchForm.component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable}       from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';


@Component({
    selector: 'advanced-search-form',
    template: `
        <form class="form-inline">
            <div *ngFor="let selectedField of selectedFields; let i = index" class="form-group">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button [style.width]="'120px'" aria-expanded="false" aria-haspopup="true" class="btn btn-info dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
                            {{selectedField['name']}}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li *ngFor="let field of fields">
                                <a (click)="fieldChanged(i, field)">{{field['name']}}</a>
                            </li>
                        </ul>
                    </div>

                    <input type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="keywords[i]" name="keywords[{{i}}]">

                    <div class="input-group-btn">
                        <button [style.width]="'120px'" type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-haspopup="true" aria-expanded="true">
                            {{selectedQuantifiers[i]['name']}}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li *ngFor="let quantifier of quantifiers">
                                <a (click)="quantifierChanged(i, quantifier)">{{quantifier['name']}}</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <button type="button" class="btn btn-success" (click)="addFilter()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-danger" *ngIf="selectedFields.length > 1" (click)="removeFilter(i)">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
            </div>



            <!--div *ngFor="let selectedField of selectedFields; let i = index" class="form-group">
<div class="row">
<div class="col-xs-9 col-sm-9">
                <div class="input-group">
<div class="col-xs-2 col-sm-2">
                    <div class="input-group-btn">
                        <button aria-expanded="false" aria-haspopup="true" class="btn btn-info dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
                            {{selectedField['name']}}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li *ngFor="let field of fields">
                                <a (click)="fieldChanged(i, field)">{{field['name']}}</a>
                            </li>
                        </ul>
                    </div>
</div>

<div class="col-xs-4 col-sm-4">
                    <input type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="keywords[i]" name="keywords[{{i}}]">
</div>

<div class="col-xs-3 col-sm-3">
                    <div class="input-group-btn">
                        <button type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-haspopup="true" aria-expanded="true">
                            {{selectedQuantifiers[i]['name']}}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li *ngFor="let quantifier of quantifiers">
                                <a (click)="quantifierChanged(i, quantifier)">{{quantifier['name']}}</a>
                            </li>
                        </ul>
                    </div>
</div>
                </div>
</div>
<div class="col-xs-3 col-sm-3">
                <button type="button" class="btn btn-success" (click)="addFilter()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>

                <button type="button" class="btn btn-danger" *ngIf="selectedFields.length > 1" (click)="removeFilter(i)">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
</div>
</div>
            </div-->


        </form>

        <button (click)="keywordsChanged()"  type="submit" class="btn btn-default">Search</button>
    `
})

export class AdvancedSearchFormComponent {


    @Input() fields: {"name": string, "value": string}[];
    @Input() selectedFields: {"name": string, "value": string}[];

    @Input() quantifiers: {"name": string, "value": string}[];
    @Input() selectedQuantifiers: {"name": string, "value": string}[];

    @Input() keywords: string[];
    @Output() keywordsChange  = new EventEmitter();

    constructor () {
        console.info("AdvancedSearchFormComponent constructor");
    }

    ngOnInit() {
        console.info("AdvancedSearchFormComponent ngOnInit");
    }

    keywordsChanged() {
        this.keywordsChange.emit({
            selectedFields: this.selectedFields,
            selectedQuantifiers: this.selectedQuantifiers,
            keywords: this.keywords
        });
    }

    addFilter() {
        console.info("add filter");
        //this.values.push({"field": this.fields[0].value, "quantifier": this.quantifiers[0].value, "keywords": []});
        this.selectedFields.push(this.fields[0]);
        this.selectedQuantifiers.push(this.quantifiers[0]);
        this.keywords.push('');
        console.info(this.keywords);
    }

    removeFilter(index: number) {
        console.info("remove filter");
        //this.values.splice(index, 1);
        this.selectedFields.splice(index, 1);
        this.selectedQuantifiers.splice(index, 1);
        this.keywords.splice(index, 1);
        console.info(this.keywords);
    }

    fieldChanged(index: number, field: {"name": string, "value": string}) {
        this.selectedFields[index] = field;
    }

    quantifierChanged(index: number, quantifier: {"name": string, "value": string}) {
        this.selectedQuantifiers[index] = quantifier;
    }
}