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';

import {Dates} from '../../utils/string-utils.class';

@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="uk-button 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="uk-button btn-disabled"  type="button">

                        {{selectedField.name}}

                    </button>

                    </div>

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

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

                    <!-- div *ngIf = "fieldIdsMap[selectedField.id].type == 'year' && !selectedField.valid" class="form-control-feedback">Not a valid year. Insert a date between 1000 - 3000</div-->

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

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

                    </div>

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

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

                    </div>

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

                      <entities-autocomplete [entityType]=selectedField.param   [selectedValue]=selectedField.value [showSelected]=true

                       [placeHolderMessage] = "'Search for '+selectedField.name" [title] = "selectedField.name"  [multipleSelections]=false

                        (selectedValueChanged)="valueChanged($event,i)" (listUpdated) = "listUpdated($event,selectedField.id)" >

                        </entities-autocomplete>

                    </div>

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

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

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

                      </span>

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

                        <input type="radio" [(ngModel)]="selectedField.value"  [name]=selectedField.param 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="uk-button 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="uk-button">Search</button>

        </form>

    `

})

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

export class AdvancedSearchFormComponent {

  @Input() entityType;

  @Input() fieldIds:  string[];

  @Input() fieldIdsMap;

  @Input() selectedFields:AdvancedField[];

  @Output() queryChange  = new EventEmitter();

  newFieldId:string;

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

  public searchFields:SearchFields = new SearchFields();

  public 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].param, this.fieldIdsMap[this.newFieldId].name, type, "true", "and"));

        }else{

          this.selectedFields.push(new AdvancedField(this.newFieldId, this.fieldIdsMap[this.newFieldId].param,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;

    }

    validateDate(index: number, value: string){

      this.selectedFields[index].valid = Dates.isValidYear(value);

    }

    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;

    }

}