openaire-library/searchPages/searchUtils/advancedSearchForm.component.html

<div *ngIf="!simpleView">
  <a *ngIf="showSwitchSearchLink && simpleSearchLink && simpleSearchLink.length > 0"
     routerLinkActive="router-link-active"
     [routerLink]=simpleSearchLink style="z-index:1;"
     [queryParams]="customFilter?customFilter.getParameters():{}"
     [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>
  <h6 class="uk-margin-small-bottom">
    Advanced search in
    <entities-selection [simpleView]="false" [currentEntity]="entityType"
                        [properties]="properties" [customFilter]="customFilter" ></entities-selection>

  </h6>
</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' || selectedField.type == 'identifier'">
          <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>
    <div class="uk-margin-small-bottom uk-flex uk-flex-right" *ngIf="showSwitchSearchLink">
      <a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
         [routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
         [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
      </a>
      <a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
         [routerLink]="selectedEntityAdvancedUrl"
         [queryParams]="{q:this.selectedFields[0].value,op:'and'}"
         [ngClass]="(isDisabled)?'uk-disabled  uk-link-muted':null">Advanced search
      </a>
      <ng-container *ngIf="this.entityType=='all'">
        <a>Advanced Search</a>
        <div uk-dropdown class="uk-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>
      </ng-container>
    </div>
    <div class="uk-flex uk-flex-center">
      <div *ngIf="entitiesSelection">
        <entities-selection [simpleView]="true" [currentEntity]="entityType"
                            [properties]="properties"
                            (selectionChange)=" simpleEntityChanged($event)"
                            [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
      </div>
      <div *ngIf="selectedFields[0] && entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
           [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" class="uk-width-xlarge@l uk-width-large"></div>
    </div>
  </form>
</div>