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

        <td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" 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 uk-input"

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

                               (updateValueLabel)="updatedValueLabel($event, i)"></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)"

                                 (updateValueLabel)="updatedValueLabel($event, i)">

          </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  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"

                                              xmlns="http://www.w3.org/2000/svg" data-svg="minus"><rect height="1" width="18" y="9" x="1"></rect></svg></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  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"

                                             xmlns="http://www.w3.org/2000/svg" data-svg="plus"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></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]="((isDisabled )?'uk-disabled ':'') + ' uk-margin-medium-bottom uk-margin-top' ">

    <div class="uk-grid uk-margin-small-left uk-flex" [class.uk-flex-center]="entityType != 'community' && entityType !== 'stakeholder'">

      <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="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" [class.quickSelectionsBox]="(resultTypes || quickFilter)">

          <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 !='all' && 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 !='all' && 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>

          <a *ngIf="this.entityType=='all'"  class="portal-link  uk-margin-left">Advanced Search</a>

          <div *ngIf="this.entityType =='all'" uk-dropdown class="uk-dropdown default-dropdown">

            <ul class="uk-list uk-margin-remove-bottom">

              <li><a

                [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters"

              >Research

                outcomes</a></li>

              <li><a

                [routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="advancedSearchLinkParameters" >

                Projects</a></li>

              <li><a

                [routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="advancedSearchLinkParameters">

                Content providers</a></li>

              <li><a

                [routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="advancedSearchLinkParameters">

                Organizations</a></li>

            </ul>

          </div>

        </div>

      </div>

    </div>

  </form>

</div>