D-Net

import {Component, Input, Output, EventEmitter, ElementRef} 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="uk-form">

        <table  class="uk-text-center">

            <tr *ngFor="let selectedField of selectedFields; let i = index" class="uk-form-row  ">

                    <td *ngIf ="i==0 ">Search for:</td>

                    <td *ngIf = "i != 0" ><select [(ngModel)]="selectedField.operatorId" name="selectOp_{{i}}" >

                          <option *ngFor="let op of operators" (change)="fieldOperatorChanged(i, op.id, op.id)" (click)="fieldOperatorChanged(i, op.id, op.id)" [value]="op.id">{{op.id}}</option>

                    </select></td>

                    <td><select [(ngModel)]="selectedField.id" name="selectField_{{i}}"  (click)="fieldIdsChanged(i)" >

                      <option *ngFor="let id of fieldIds"  [value]="id">{{fieldIdsMap[id].name}}</option>

                    </select> </td>

                    <td *ngIf = "selectedField.type == 'keyword'" class="uk-width-1-3" ><input  type="text" class="form-control" placeholder="Type keywords..."

                        [(ngModel)]="selectedField.value" name="value[{{i}}]"></td>

                    <td *ngIf = "selectedField.type == 'year'" class="uk-width-1-3"><input   type="text" class="form-control"  placeholder="Type Year..."

                    [(ngModel)]="selectedField.value" name="value[{{i}}]" (keyup)=validateDate(i,selectedField.value)></td>

                    <td *ngIf = "selectedField.type == 'vocabulary'" class="uk-width-1-3">

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

                    </td>

                    <td  *ngIf = " selectedField.type == 'refine'" class="uk-width-1-3">

                      <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></td>

                    <td  *ngIf = "selectedField.type == 'entity'" class="uk-width-1-3"><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></td>

                    <td *ngIf = "selectedField.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>

                  </td>

                  <td  >

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

                      <i class="uk-icon-minus"></i>

                    </button>

                    <button *ngIf="selectedFields.length == 1" type="button" class="uk-button uk-button-danger"  disabled>

                      <i class="uk-icon-minus" ></i>

                    </button>

                  </td>

                  <td *ngIf="i == selectedFields.length-1 " ><button type="button" class="uk-button uk-button-success" (click)="addField()">

                      <i class="uk-icon-plus"></i>

                  </button></td>

            </tr>

            </table>

            <div  class="uk-form-row uk-text-right">

              <button (click)="queryChanged()"  type="submit" class="uk-button uk-button-primary">Search</button>

            </div>

        </form>

    `

})

export class AdvancedSearchFormComponent {

  @Input() entityType;

  @Input() fieldIds:  string[];

  @Input() fieldIdsMap;

  @Input() selectedFields:AdvancedField[];

  @Output() queryChange  = new EventEmitter();

  newFieldId:string;

  newFieldName: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];

      this.newFieldName = this.fieldIdsMap[this.newFieldId].name;

     }

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

        this.newFieldId = this.fieldIds[0];

        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) {

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

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

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

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

         this.selectedFields[index].param = this.fieldIdsMap[id].param;

         if(this.fieldIdsMap[id].type == "boolean"){

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

         }

    }

    valueChanged($event,index:number){

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

    }

    listUpdated($event,fieldId:number){

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

    }

}