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]="(isDisabled)?'uk-disabled':''">

        <table   >

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

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

                    <td *ngIf = "i != 0" class=""><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}}"  (ngModelChange)="fieldIdsChanged(i,selectedField.id)" ><!--(click)="fieldIdsChanged(i)"  -->

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

                    </select> </td>

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

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

                    <td *ngIf = "selectedField.type == 'date'" >

                    <date-filter [(dateValue)]=selectedField.dateValue ></date-filter>

                    </td>

                    <td *ngIf = " selectedField.id && selectedField.type == 'vocabulary'"  >

                      <static-autocomplete *ngIf = " selectedField.id" [(vocabularyId)] = selectedField.param [fieldId]=selectedField.id

                        [(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.id &&  selectedField.type == 'refine'" >

                      <static-autocomplete [(list)] = this.fieldList[selectedField.id] [fieldId]=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'"  ><entities-autocomplete  [fieldId]=selectedField.id [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 class=" " >

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

                      <span uk-icon="icon: minus"></span>

                    </button>

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

                      <span uk-icon="icon: minus"></span>

                    </button>

                  </td>

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

                      <span uk-icon="icon: plus"></span>

                  </button></td>

            </tr>

            </table>

            <div  class="-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[];

  @Input() isDisabled: boolean = false;

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

     }

    ngOnInit() {

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

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

        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, fieldId:string ) {

      console.log("Field index::"+index + "  " + this.selectedFields[index].id + " function id:" +fieldId);

          var id= this.fieldIds[0];

          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;

         var id =fieldId;//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;

    }

}