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

<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"></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"
    ></quick-selections>
    <hr *ngIf="resultTypes || quickFilter">
    <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">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 "
                      (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 "
                (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">
      <div [class]="(entitiesSelection)?'':'uk-width-medium@m uk-width-small@s'">
        <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
                            [properties]="properties"
                            (selectionChange)=" simpleEntityChanged($event)"
                            [onChangeNavigate]="true"></entities-selection>
      </div>
      <div [class]="((resultTypes || quickFilter)?'quickSelectionsBox':'')+' uk-padding-remove-left'">
        <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>
          <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">
        <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>