D-Net

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

import {Observable}       from 'rxjs/Observable';

import { Subject } from 'rxjs/Subject';

import {AdvancedField, OPERATOR} from '../searchUtils/searchHelperClasses.class';

import {SearchFields} from '../../utils/properties/searchFields';

@Component({

    selector: 'advanced-search-form',

    template: `

        <form class="">

            <div *ngFor="let selectedField of selectedFields; let i = index" class="form-group  form-inline">

                <div *ngIf = "i != 0" class="input-group">

                    <button  type="button" id="dropdownMenu1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="true">

                        {{selectedField.operatorId}}

                    </button>

                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                        <li *ngFor="let op of operators">

                            <a (click)="fieldOperatorChanged(i, op.id, op.id)">{{op.id}}</a>

                        </li>

                    </ul>

                </div>

                <div class="input-group">

                    <div class="input-group-btn">

                    <button  class="btn btn-default btn-disabled"  type="button">

                        {{selectedField.name}}

                    </button>

                        <!--button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">

                            {{selectedField.name}}

                        </button>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                            <li *ngFor="let id of fieldIds">

                                <a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>

                            </li>

                        </ul-->

                    </div>

                    <input *ngIf = "fieldIdsMap[selectedField.id].type == 'keyword'"  type="text" class="form-control" placeholder="Type keywords..." [(ngModel)]="selectedField.value" name="value[{{i}}]">

                    <div *ngIf = "fieldIdsMap[selectedField.id].type == 'vocabulary'" class="input-group">

                    <static-autocomplete2  [(vocabularyId)] = selectedField.id [(list)] = this.fieldList[selectedField.id]  [entityName] = "entityType" [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:"  [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2>

                    </div>

                    <div *ngIf = "fieldIdsMap[selectedField.id].type == 'refine'" class="input-group">

                    <static-autocomplete2 [(list)] = this.fieldList[selectedField.id] [entityName] = "entityType" [fieldName] = fieldIdsMap[selectedField.id].indexField [selectedValue]=selectedField.value [showSelected]=true [placeHolderMessage] = "'Search for '+selectedField.name" title = "Languages:"  [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)"></static-autocomplete2>

                    </div>

                    <div *ngIf = "fieldIdsMap[selectedField.id].type == 'boolean'" class="input-group">

                       <span class="input-group-addon">

                          <input type="radio" [(ngModel)]="selectedField.value"  [name]=selectedField.id value="true">Yes<br>

                      </span>

                      <span class="input-group-addon">

                        <input type="radio" [(ngModel)]="selectedField.value"  [name]=selectedField.id value="false">No<br>

                      </span>

                  </div>

                </div>

                <button type="button" class="btn btn-danger" *ngIf="selectedFields.length > 1" (click)="removeField(i)">

                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>

                </button>

            </div>

            <div  class="form-group  form-inline">

              <div class=" input-group">

                  <div class="input-group-btn">

                    <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">

                      {{fieldIdsMap[newFieldId].name}}

                    </button>

                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                        <li *ngFor="let id of fieldIds">

                            <a (click)="fieldIdsChanged(i, id)">{{fieldIdsMap[id].name}}</a>

                        </li>

                    </ul>

                  </div>

                  <button type="button" class="btn btn-success" (click)="addField()">

                      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

                  </button>

              </div>

            </div>

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

        </form>

    `

})

///[style.width]="'120px'"

export class AdvancedSearchFormComponent {

  @Input() entityType;

  @Input() fieldIds:  string[];

  @Input() fieldIdsMap:{ [key:string]:{ name:string, operator:string, type:string, indexField:string }} ;

  @Input() selectedFields:AdvancedField[];

  @Output() queryChange  = new EventEmitter();

  newFieldId:string;

  fieldList:{[id:string]:any[]} = {};

  private searchFields:SearchFields = new SearchFields();

  private operators:  [{name:string, id:string}] = this.searchFields.ADVANCED_SEARCH_OPERATORS;

    constructor () {

      console.log("Constr: Advanced search form");

     }

    ngOnInit() {

      console.log("Init: Advanced search form");

      for(var i = 0; i < this.fieldIds.length; i++){

        this.fieldList[this.fieldIds[i]]=[];

      }

      this.newFieldId = this.fieldIds[0];

     }

    queryChanged() {

        this.queryChange.emit({

            // selectedFields: this.selectedFields,

            // selectedQuantifiers: this.selectedQuantifiers,

            // keywords: this.keywords

        });

    }

    addField() {

        console.info("add filter"+this.fieldIds[0]+this.fieldIdsMap[this.fieldIds[0]].name+this.fieldIdsMap[this.fieldIds[0]].type);

        var type = this.fieldIdsMap[this.newFieldId].type;

        if(type == "boolean"){

          this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].name, type, "true", "and"));

        }else{

          this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].name, type, "", "and"));

        }

    }

    removeField(index: number) {

        console.info("remove filter");

        this.selectedFields.splice(index, 1);

    }

    fieldOperatorChanged(index: number, operatorId: string, operatorName: string) {

         this.selectedFields[index].operatorId = operatorId;

         this.selectedFields[index].operatorName = operatorName;

    }

    fieldIdsChanged(index: number,id) {

         this.newFieldId = id;

        //  this.selectedFields[index].id = id;

        //  this.selectedFields[index].name = this.fieldIdsMap[id].name;

        // //  this.selectedFields[index].type = "keyword";

        //  this.selectedFields[index].type = this.fieldIdsMap[id].type;

        //  this.selectedFields[index].value = "";

    }

    valueChanged($event,index:number){

      this.selectedFields[index].value = $event.value;

    }

    listUpdated($event,fieldId:number){

      this.fieldList[fieldId] = $event.value;

    }

}