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;"
     [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'">
          <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="showSwitchSearchLink">
          <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>