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

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >
  <div uk-grid >
    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
      <div class="">

        <div   [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle uk- light '+searchFormClass" >
          <div   class="uk-width-1-1">
            <div   class="uk-width-1-1">
              <search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form>
            </div>
            <div   class="uk-width-1-1  ">
              <!--link to advanced search -->
              <a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" [class]="(disableForms)?'uk-float-right   uk-disabled uk-link-muted uk-light ':'uk-float-right  uk-light'" [routerLink]=advancedSearchLink [queryParams]=advancedSearchParameters >More search options <span class="uk-icon">
                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
                  </span>
              </a>
              <div *ngIf="isFiltered()" class = "uk-container uk-width-1-2@m uk-width-1-2@s uk-align-center uk-text-center uk-text-small">
                <span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span [innerHtml]="searchUtils.keyword"></span><a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon">
                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
                  </span></span></a>
                </span>
                <span *ngFor="let filter of filters " >
                  <span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}:
                    <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " ><span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" title="value.name"></span><a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
                      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
                      </span></span></a>
                      <span *ngIf="!end">, </span>
                    </span>
                  </span>
                </span>

                <a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">
                 Clear All
                </a>
              </div>
              <div *ngIf= "showUnknownFilters"  class = " uk-text-center ">
                <a (click) = "clearFilters() " >Try new Query</a>
              </div>
            </div>

          </div>
        </div>
        <div  class="uk-container">
          <helper position="top"></helper>
          <div  [class]="(showRefine)? 'uk-width-3-5@m  uk-width-3-5@l  uk-width-1-1@s' :'uk-width-1-1'">
            <div  *ngIf="showRefine" class="uk-offcanvas-content uk-hidden@m">

              <a href="#offcanvas-usage" uk-toggle><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect><rect x="6" y="14" width="12" height="1"></rect><rect x="2" y="4" width="2" height="1"></rect><rect x="2" y="9" width="2" height="1"></rect><rect x="2" y="14" width="2" height="1"></rect></svg></a>

              <div id="offcanvas-usage" uk-offcanvas>
                <div class="uk-offcanvas-bar">
                  <button class="uk-offcanvas-close" type="button" uk-close></button>
                  <div class="uk-text-large">Filter By:</div>
                  <search-filter  *ngFor="let filter of filters "  [addShowMore]=false [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)" [(connectCommunityId)]=connectCommunityId></search-filter>
                </div>
              </div>

            </div>
          </div>


          <div  class="uk-grid uk-width-1-1">
            <div  *ngIf="showRefine" class="helper-left-right search-filters uk-visible@m">
               <helper position="left" before="true"></helper>
               <search-filter  *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter"  [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)" [(connectCommunityId)]=connectCommunityId></search-filter>
               <helper position="left" before="false"></helper>
            </div>
            <helper *ngIf="!showRefine" class="helper-left-right uk-visible@m" position="left"></helper>

            <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
            <!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->
              <div *ngIf="openaireLink"> <a class="uk-margin-top   uk-button uk-button-text"  [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
              <div  class="uk-align-center uk-margin-remove-bottom">
                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
              </div>

              <div  *ngIf="tableViewLink || searchUtils.totalResults <= csvLimit"  class="uk-width-1-1@s uk-hidden@m">
                <span *ngIf="tableViewLink" class="uk-margin-medium-right">
                  <a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >
                    <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
                  </a>

                  <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
                </span>
                <search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
              </div>

              <div *ngIf="(searchUtils.page <= pagingLimit)" class="uk-margin-top">
                <search-result    *ngIf="!tableView"
                                  [results]="results"
                                  [status]="searchUtils.status"
                                  [type]="entityType"
                                  [showLoading]="true" [(properties)]=properties>
                </search-result>
              </div>

              <div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > resultsPerPage*pagingLimit)">
                  <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
              </div>

              <div  class="uk-align-center uk-margin-remove-bottom">
                <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
              </div>

              <helper class="uk-hidden@m" position="left" styleName="uk-width-1-1@s"></helper>
              <helper class="uk-hidden@m" position="right" styleName="uk-width-1-1@s"></helper>
            </div>

            <div *ngIf="tableViewLink || searchUtils.totalResults <= csvLimit" class="helper-left-right uk-visible@m">
              <helper position="right" before="true"></helper>
              <div>
                <span *ngIf="tableViewLink" class="uk-margin-medium-right">
                  <a routerLinkActive="router-link-active" [class]="(disableForms)?'uk-disabled uk-link-muted':''" [routerLink]=tableViewLink >
                    <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="2" y="2" width="3" height="3"></rect><rect x="8" y="2" width="3" height="3"></rect><rect x="14" y="2" width="3" height="3"></rect><rect x="2" y="8" width="3" height="3"></rect><rect x="8" y="8" width="3" height="3"></rect><rect x="14" y="8" width="3" height="3"></rect><rect x="2" y="14" width="3" height="3"></rect><rect x="8" y="14" width="3" height="3"></rect><rect x="14" y="14" width="3" height="3"></rect></svg></span>
                  </a>

                  <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="table" ratio="1"><rect x="1" y="3" width="18" height="1"></rect><rect x="1" y="7" width="18" height="1"></rect><rect x="1" y="11" width="18" height="1"></rect><rect x="1" y="15" width="18" height="1"></rect></svg></span>
                </span>
                <search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
              </div>
              <helper position="right" before="false"></helper>
            </div>
            <helper *ngIf="!tableViewLink && searchUtils.totalResults > csvLimit" class="helper-left-right uk-visible@m" position="right"></helper>
          </div>
          <!-- <div [class]="(showRefine)? 'uk-width-3-5@m  uk-width-3-5@l  uk-width-1-1@s uk-align-center uk-margin-remove-bottom' : 'uk-width-1-1'">
            <search-paging [loadPaging]="loadPaging" [type]="type" [oldTotalResults]="oldTotalResults" [(searchUtils)] = "searchUtils"  [(results)] = "results"  [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-paging>
          </div> -->
          <div class="uk-width-1-1">
            <helper position="bottom"></helper>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>