D-Net

<div *ngIf="!simpleView">

  <a *ngIf="simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active"

     [routerLink]=simpleSearchLink style="z-index:1;"

     [class]="(isDisabled)?'uk-float-right uk-disabled uk-link-muted  portal-link   uk-margin-right ':'uk-float-right  portal-link   uk-margin-right '">Quick search

  </a>

  <div class="uk-h5 uk-margin-small-bottom">

    Advanced search in

    <entities-selection [simpleView]="false" [currentEntity]="entityType"

                        [properties]="properties" [customFilter]="customFilter" ></entities-selection>

  </div>

</div>

<form *ngIf="!simpleView"

      [class]="((isDisabled )?'uk-disabled ':'')

       +' advancedSearchForm uk-tile  uk-padding-small uk-margin-medium-bottom'">

  <div>

    <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"

                      [quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"

                      [properties]="properties" class="uk-grid  "

    ></quick-selections>

    <hr *ngIf="resultTypes || quickFilter" class="uk-margin-small">

    <table class=" uk-table uk-table-responsive uk-table-small uk-margin-remove">

      <tr>

        <td class="uk-text-muted uk-text-uppercase">Field to search</td>

        <td class="uk-text-muted uk-text-uppercase uk-width-1-2">Term</td>

      </tr>

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

        <td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel"

                    (ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)"  -->

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

        </mat-select></td>

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

          <div class="uk-inline uk-width-expand">

            <a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"

               (click)="selectedField.value = ''"

               uk-icon="icon: close"></a>

            <input type="text" class="form-control"

                   placeholder="Type keywords..."

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

          </div>

        </td>

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

          <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"

                       [validDateTo]=validDateTo></date-filter>

        </td>

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

          <static-autocomplete [properties]=properties *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'" class="uk-width-1-3">

          <static-autocomplete [properties]=properties [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 [properties]=properties [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  style="min-width: 75px;"><mat-select *ngIf="i+1 <selectedFields.length"

                                        [(ngModel)]="selectedFields[i+1].operatorId"

                              name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">

          <mat-option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"

                  (click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>

        </mat-select>

          <div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;">

            <span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>

          </div>

        </td>

        <td class=" ">

                <span type="button" class="uk-icon-button portal-button-reverse clickable "

                      (click)="removeField(i)">

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

                </span>

          <div *ngIf="i == selectedFields.length-1 " class="uk-margin-small-top">

          <span  type="button"

                class="uk-icon-button   portal-button clickable "

                (click)="addField()">

                 <span uk-icon="plus">

                 </span>

              </span>

          </div>

        </td>

      </tr>

    </table>

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

      <div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">

        Please check your <u>from</u> date

      </div>

      <div *ngIf="!validDateTo && validDateFrom" class="uk-text-danger">

        Please check your <u>to</u> date

      </div>

      <div *ngIf="!validDateFrom && !validDateTo" class="uk-text-danger">

        Please check your dates

      </div>

    </div>

    <button (click)="queryChanged()" type="submit"

            class=" uk-button  uk-padding uk-padding-remove-top uk-padding-remove-bottom portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom " style="position: absolute;bottom: -19px;left: 45%;"> Search

    </button>

  </div>

</form>

<div *ngIf="simpleView">

  <form class=" uk-margin-medium-bottom uk-margin-top ">

    <div class="uk-grid uk-margin-small-left">

      <div

        [class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">

        <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"

                            [properties]="properties"

                            (selectionChange)=" simpleEntityChanged($event)"

                            [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>

      </div>

      <div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left uk-margin-small-top'">

        <div class="uk-inline">

          <a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"

             (click)="selectedFields[0].value = ''"

             uk-icon="icon: close"></a>

          <input type="text" class="uk-input  uk-width-xlarge@l uk-width-large@m uk-width-medium"

                 [placeholder]="formPlaceholderText" aria-describedby="sizing-addon2"

                 [(ngModel)]="selectedFields[0].value" name="keyword">

        </div>

        <div class=" uk-width-xlarge@l uk-width-large@m uk-width-medium">

          <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"

                            [quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"

                            [properties]="properties">

          </quick-selections>

        </div>

      </div>

      <div class="uk-padding-remove-left uk-margin-small-top">

        <button (click)="simpleKeywordChanged(null)" type="submit"

                class=" uk-button  portal-button uk-margin-small-left uk-text-bold uk-padding uk-padding-remove-top uk-padding-remove-bottom">

          Search

        </button>

        <div class="uk-margin-small-top" *ngIf="showAdvancedSearchLink">

          <a *ngIf ="this.entityType == this.selectedEntity && advancedSearchLink" routerLinkActive="router-link-active"

             [routerLink]="advancedSearchLink" style="z-index:1;" [queryParams]="advancedSearchLinkParameters"

             [class]="(isDisabled)?'  uk-disabled uk-link-muted  portal-link   uk-margin-left ':' portal-link   uk-margin-left '">Advanced search

          </a>

          <a *ngIf ="this.entityType != this.selectedEntity && selectedEntityAdvancedUrl " routerLinkActive="router-link-active"

             [routerLink]="selectedEntityAdvancedUrl" style="z-index:1;"

             [queryParams]="{q:this.selectedFields[0].value,op:'and'}"

             [class]="(isDisabled)?'  uk-disabled uk-link-muted  portal-link   uk-margin-left ':' portal-link   uk-margin-left '">Advanced search

          </a>

        </div>

      </div>

    </div>

  </form>

</div>