Project

General

Profile

« Previous | Next » 

Revision 58105

Added by Konstantina Galouni about 4 years ago

[Trunk | Library]: Filters according to new UI/UX design.
1. utils/rangeFilter/: range filters added to describe year range queries (currently used in types: result & project).
2. utils/properties/searchFields.ts:
'uniqueValue: boolean' changed to 'filterType: string' with value among: null (if this is not a range/refine filter), radio, checkbox, range.
RANGE_FIELDS added for each type needed.
'fieldHasUniqueValue()' method renamed to 'getFieldFilterType()' method.
'getFieldParam()' method added.
3. utils/properties/searchFields.ts & services/servicesUtils/refineResults.class.ts & searchPages/searchUtils/searchHelperClasses.class.ts
& searchPages/dataProviders/ & searchPages/searchDataProviders.component.ts & searchPages/searchOrganizations.component.ts: 'filterType' field is used.
4. searchPages/searchProjects.component.ts & searchPages/searchResearchResults.component.ts: Initialize and use in calculations range filters.
5. searchPages/searchUtils/searchFilter.component: Update filters to match redesign & use them everywhere (not special case if search or deposit).
6. searchPages/searchUtils/newSearchPage.component: Update filters to match redesign and add range filters.

View differences:

searchFilter.component.html
1 

  		




  2
  
  
    
<ul *ngIf= "filter.values.length >0" class="uk-list">


  		




  3
  
  
    
<li class="uk-open">


  		




  4
  
  
    
    <h5  class="uk-margin-bottom-remove searchFilterTitle">{{_formatTitle(filter.title,filter.values.length)}}


  		




  5
  
  
    
    </h5>


  		




  
  1
  
    
<div *ngIf= "filter.values.length >0" class="uk-margin-small-bottom">


  		




  
  2
  
    
  <div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">


  		




  
  3
  
    
    <h5  class="uk-margin-bottom-remove">{{_formatTitle(filter.title,filter.values.length)}}</h5>


  		




  
  4
  
    
    <a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()" class="portal-link">


  		




  
  5
  
    
      Clear


  		




  
  6
  
    
    </a>


  		




  
  7
  
    
  </div>


  		




  6
  8
  
    
    <div  aria-expanded="false">


  		




  7
  
  
    
      <div [class]="showMoreInline ? '' : 'searchFilterBoxValues' ">


  		




  8
  
  
    
        <div *ngFor = "let value of getSelectedValues(filter,'num')"  class="uk-animation-fade filterItem">


  		




  9
  
  
    
              <div title = "{{value.name}}">


  		




  10
  
  
    
                <input *ngIf="!filter.valueIsUnique" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  11
  
  
    
                <input *ngIf="filter.valueIsUnique" type="radio" (click)="uniqueFilterChange(value)"


  		




  12
  
  
    
                        [name]=filter.filterId checked/>


  		




  13
  
  
    
                {{' '+_formatName(value)}}


  		




  14
  
  
    
                <span *ngIf = "showResultCount === true" >


  		




  15
  
  
    
                  {{' ('+(value.number|number)+')'}}</span>


  		




  16
  
  
    
              </div>


  		




  17
  
  
    
        </div>


  		




  18
  
  
    
        <!-- <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small"-->


  		




  
  9
  
    
      <div>


  		




  
  10
  
    
        <ng-container  *ngIf="!isOpen">


  		




  
  11
  
    
          <div *ngFor = "let value of getSelectedValues(filter,'num')"  class="uk-animation-fade filterItem searchFilterItem uk-text-small">


  		




  
  12
  
    
                <div title = "{{value.name}}">


  		




  
  13
  
    
                  <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">


  		




  
  14
  
    
                    <input *ngIf="filter.filterType == 'checkbox'" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  
  15
  
    
                    <input *ngIf="filter.filterType == 'radio'" type="radio" (click)="uniqueFilterChange(value)"


  		




  
  16
  
    
                           [name]=filter.filterId checked/>


  		




  
  17
  
    
                    {{' '+_formatName(value)}}


  		




  
  18
  
    
                    <span *ngIf = "showResultCount === true" >


  		




  
  19
  
    
                      {{' ('+(value.number|number)+')'}}</span>


  		




  
  20
  
    
                  </ng-container>


  		




  
  21
  
    
                </div>


  		




  
  22
  
    
          </div>


  		




  19
  23
  
    

  		




  20
  
  
    
        <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem">


  		




  21
  
  
    
              <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >


  		




  22
  
  
    
                <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  23
  
  
    
                <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio"  (click)="uniqueFilterChange(value)"


  		




  24
  
  
    
                      [name]=filter.filterId value=false  />


  		




  25
  
  
    
                {{' '+ _formatName(value) }}


  		




  26
  
  
    
                <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >


  		




  27
  
  
    
                 {{' ('+(value.number|number)+')'}}


  		




  28
  
  
    
                </span>


  		




  29
  
  
    
              </div>


  		




  30
  
  
    
        </div>


  		




  
  24
  
    
          <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem searchFilterItem uk-text-small">


  		




  
  25
  
    
                <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >


  		




  
  26
  
    
                  <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  
  27
  
    
                  <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"


  		




  
  28
  
    
                         [name]=filter.filterId value=false  />


  		




  
  29
  
    
                  {{' '+ _formatName(value) }}


  		




  
  30
  
    
                  <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >


  		




  
  31
  
    
                   {{' ('+(value.number|number)+')'}}


  		




  
  32
  
    
                  </span>


  		




  
  33
  
    
                </div>


  		




  
  34
  
    
          </div>


  		




  
  35
  
    
        </ng-container>


  		




  31
  36
  
    

  		




  32
  
  
    
        <div *ngIf=" addShowMore && showMoreInline && (filter.values.length) > filterValuesNum">


  		




  33
  
  
    
          <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':''"


  		




  34
  
  
    
             [attr.uk-toggle]="'target: #toggle-'+filter.filterId">View


  		




  35
  
  
    
            <span *ngIf="filter.values.length >= 99">more</span>


  		




  36
  
  
    
            <span *ngIf="filter.values.length < 99">all</span>


  		




  
  37
  
    
        <div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">


  		




  
  38
  
    
          <a *ngIf="!isOpen"


  		




  
  39
  
    
             [class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"


  		




  
  40
  
    
             [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">


  		




  
  41
  
    
            + View more


  		




  37
  42
  
    
          </a>


  		




  38
  
  
    
          <div hidden [id]="'toggle-'+filter.filterId">


  		




  39
  
  
    
<!--            <div *ngIf="filter.values.length >= 99" class="uk-alert uk-alert-primary   uk-text-center uk-margin-right uk-margin-left uk-margin-small-top uk-margin-small-bottom  ">Showing top {{filter.values.length}} values. </div>-->


  		




  
  43
  
    

  		




  
  44
  
    
          <div hidden [id]="'toggle-'+filter.filterId" class="uk-text-small uk-margin-small-bottom">


  		




  40
  45
  
    
            <div class="">


  		




  
  46
  
    
              <span *ngIf="filter.values.length >= 99">* only the Top 100 values are shown</span>


  		




  41
  47
  
    
              <input   class="uk-input uk-margin-small-bottom uk-width-1-1  " name="filter-keyword"  placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">


  		




  42
  
  
    
              <select *ngIf = "showResultCount === true" [(ngModel)]="sortBy"


  		




  43
  
  
    
                      class="uk-text-muted uk-select  uk-margin-small-bottom uk-width-1-1"  name="select_order"  (ngModelChange)="sortByChanged = true;" >


  		




  44
  
  
    
                <option  value="num">Sorted by results number</option>


  		




  45
  
  
    
                <option  value="name">Sorted by name</option>


  		




  46
  
  
    
              </select>


  		




  
  48
  
    

  		




  
  49
  
    
              <span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">


  		




  
  50
  
    
                <span class="uk-width-1-4"> Sort by:</span>


  		




  
  51
  
    
                <select [(ngModel)]="sortBy"


  		




  
  52
  
    
                        class="uk-select uk-width-3-4@m uk-width-auto"


  		




  
  53
  
    
                        id="form-horizontal-select" name="select_order">


  		




  
  54
  
    
                  <option  value="num">Results number</option>


  		




  
  55
  
    
                  <option  value="name">Name</option>


  		




  
  56
  
    
                </select>


  		




  
  57
  
    
              </span>


  		




  47
  58
  
    
            </div>


  		




  48
  59
  
    

  		




  49
  
  
    
            <div   class="uk-modal-body uk-overflow-auto uk-height-small uk-padding-remove


  		




  50
  
  
    
                      uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-margin-bottom">


  		




  
  60
  
    
            <div   class="uk-modal-body uk-overflow-auto uk-height-max-small uk-padding-remove


  		




  
  61
  
    
                      uk-margin-small-left uk-margin-small-right uk-margin-small-top">


  		




  51
  62
  
    
              <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">


  		




  52
  
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">


  		




  
  63
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">


  		




  53
  64
  
    

  		




  54
  65
  
    
                      <div title = "{{value.name}}">


  		




  55
  
  
    
                        <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />


  		




  56
  
  
    
                        <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"


  		




  57
  
  
    
                             [name]=filter.filterId checked/>


  		




  
  66
  
    
                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  
  67
  
    
                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"


  		




  
  68
  
    
                               [name]=filter.filterId checked/>


  		




  58
  69
  
    
                        {{' ' + _formatName(value) + ' '}}


  		




  59
  70
  
    
                        <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>


  		




  60
  71
  
    
                      </div>


  		




  61
  72
  
    

  		




  62
  73
  
    
                </div>


  		




  63
  74
  
    
              </ng-container>


  		




  64
  
  
    
              <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">


  		




  
  75
  
    

  		




  65
  76
  
    
              <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">


  		




  66
  
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">


  		




  
  77
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem searchFilterItem">


  		




  67
  78
  
    

  		




  68
  79
  
    
                      <div title = "{{value.name}}">


  		




  69
  
  
    
                        <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />


  		




  70
  
  
    
                        <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio"  (click)="uniqueFilterChange(value)"


  		




  71
  
  
    
                                [name]=filter.filterId value=false  />


  		




  
  80
  
    
                        <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />


  		




  
  81
  
    
                        <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"


  		




  
  82
  
    
                               [name]=filter.filterId value=false  />


  		




  72
  83
  
    
                        {{' ' + _formatName(value) + ' '}}


  		




  73
  84
  
    
                        <span   *ngIf = "showResultCount === true" > ({{value.number|number}})</span>


  		




  74
  85
  
    
                      </div>


  		




  75
  
  
    

  		




  76
  86
  
    
                </div>


  		




  77
  87
  
    
              </ng-container>


  		




  78
  88
  
    
            </div>


  		




  79
  89
  
    
          </div>


  		




  
  90
  
    
          <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"


  		




  
  91
  
    
             [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">


  		




  
  92
  
    
            <span *ngIf="isOpen">- View less</span>


  		




  
  93
  
    
          </a>


  		




  80
  94
  
    
        </div>


  		




  81
  
  
    

  		




  82
  
  
    
        <a *ngIf=" addShowMore && !showMoreInline&& (filter.values.length) > filterValuesNum" (click)="open()"


  		




  83
  
  
    
          [class]="(isDisabled)?'uk-disabled uk-link-muted':''">View more


  		




  84
  
  
    
        </a>


  		




  85
  
  
    

  		




  86
  
  
    

  		




  87
  
  
    
        <div *ngIf="addShowMore && !showMoreInline" [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal  [open]="!isOpen" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" bg-close="true">


  		




  88
  
  
    
          <div class="filtersModal uk-modal-dialog uk-small-1-2 uk-width-medium-1-3 uk-width-1-3 uk-padding-small uk-padding-remove-top uk-padding-remove-horizontal">


  		




  89
  
  
    

  		




  90
  
  
    
            <button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button>


  		




  91
  
  
    
            <h5  class="uk-margin-remove uk-padding uk-padding-remove-bottom uk-text-center">


  		




  92
  
  
    
              {{filter.title}}


  		




  93
  
  
    
            </h5>


  		




  94
  
  
    

  		




  95
  
  
    
            <div *ngIf="filter.values.length >= 99" class="uk-alert uk-alert-primary   uk-text-center uk-margin-right uk-margin-left uk-margin-small-top uk-margin-small-bottom  ">Showing top {{filter.values.length}} values. </div>


  		




  96
  
  
    
            <div class="uk-grid uk-margin-left uk-margin-right">


  		




  97
  
  
    
              <input   class="uk-input   uk-margin-small-bottom uk-width-1-2  " name="filter-keyword"  placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">


  		




  98
  
  
    
              <select *ngIf = "showResultCount === true" [(ngModel)]="sortBy"      class="uk-select  uk-margin-small-bottom uk-width-1-2 uk-padding-remove"  name="select_order"  (ngModelChange)="sortByChanged = true;" >


  		




  99
  
  
    
                <option  value="num"  >Sort by results number</option>


  		




  100
  
  
    
                <option  value="name"  >Sort by name</option>


  		




  101
  
  
    
              </select>


  		




  102
  
  
    
            </div>


  		




  103
  
  
    
            <div class="uk-modal-body uk-overflow-auto uk-height-medium uk-padding-remove


  		




  104
  
  
    
                        uk-margin-medium-left uk-margin-medium-right uk-margin-small-top uk-margin-bottom">


  		




  105
  
  
    
              <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">


  		




  106
  
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">


  		




  107
  
  
    
                  <div title = "{{value.name}}">


  		




  108
  
  
    
                        <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />


  		




  109
  
  
    
                        <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />


  		




  110
  
  
    
                    {{' ' + (value.name) + ' '}}


  		




  111
  
  
    
                        <span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>


  		




  112
  
  
    
                      </div>


  		




  113
  
  
    

  		




  114
  
  
    
                 </div>


  		




  115
  
  
    
              </ng-container>


  		




  116
  
  
    
              <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">


  		




  117
  
  
    
              <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">


  		




  118
  
  
    
                <div *ngIf="filterKeywords(value.name)"  class = "uk-animation-fade filterItem">


  		




  119
  
  
    

  		




  120
  
  
    
                      <div title = "{{value.name}}">


  		




  121
  
  
    
                        <input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />


  		




  122
  
  
    
                        <input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />


  		




  123
  
  
    
                        {{' ' + (value.name) + ' '}}


  		




  124
  
  
    
                        <span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>


  		




  125
  
  
    
                      </div>


  		




  126
  
  
    
               </div>


  		




  127
  
  
    
             </ng-container>


  		




  128
  
  
    
            </div>


  		




  129
  
  
    
          </div>


  		




  130
  
  
    
        </div>


  		




  131
  
  
    

  		




  132
  
  
    

  		




  133
  
  
    

  		




  134
  95
  
    
   </div>


  		




  135
  96
  
    
  </div>


  		




  136
  
  
    
</li>


  		




  137
  
  
    
</ul>


  		




  
  97
  
    
</div>


  		












Also available in:  Unified diff