69 lines
4.4 KiB
HTML
69 lines
4.4 KiB
HTML
|
|
<span class="uk-h6">{{filter.title}}</span>
|
|
<div *ngIf="filter.values.length == 0" class="uk-alert uk-alert-primary" role="alert">No {{filter.title}} statistics found</div>
|
|
<ul *ngIf="filter.values.length > 0 && !viewAll" class="uk-list browseFilters">
|
|
|
|
<li *ngFor= "let value of filter.values.slice(0,5)" class= " uk-margin-remove-top"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
|
<a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
|
<div title = "{{value.name}}">{{_formatName(value)}} ({{value.number |
|
|
number}})</div>
|
|
</a>
|
|
</li>
|
|
<li *ngIf= " filter.values.length > 5 " class= "uk-padding-small-top">
|
|
<a href="#modal-{{filter.filterId}}" uk-toggle class="uk-text-secondary ">View more <!--span class="uk-text-muted">View more </span>
|
|
<span class="uk-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-right" ratio="1"><polygon points="8 5 13 10 8 15"></polygon></svg>
|
|
</span-->
|
|
</a>
|
|
|
|
<!--
|
|
uk-toggle="target: modal-"
|
|
uk-toggle='{"target": modal-}'>
|
|
uk-toggle target="modal-"
|
|
-->
|
|
<!--span uk-toggle='{"target": modal-}'><span class="uk-text-muted clickable">View more </span><a><span class="uk-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-right" ratio="1"><polygon points="8 5 13 10 8 15"></polygon></svg>
|
|
</span></a></span-->
|
|
</li>
|
|
</ul>
|
|
<ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-divider browseFilters">
|
|
<li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
|
<a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
|
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
|
|
</li>
|
|
<li *ngIf= " filter.values.length > 5 && viewAll " (click)="viewAll=false;">
|
|
<span ><span class="uk-text-muted clickable">View less </span><a><span class="uk-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span></a></span>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<!-- This is the modal -->
|
|
<div id="modal-{{filter.filterId}}" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
|
|
<h4 class="tm-article-subtitle">{{filter.title}}</h4>
|
|
<div class="uk-grid uk-margin-left uk-margin-right">
|
|
<input class="uk-input uk-margin-small-bottom uk-width-1-2 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
|
|
<mat-select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove matSelection"
|
|
name="select_order"
|
|
[disableOptionCentering]="true"
|
|
panelClass="matSelectionPanel">
|
|
<mat-option value="num" >Sort by results number</mat-option>
|
|
<mat-option value="name" >Sort by name</mat-option>
|
|
</mat-select>
|
|
</div>
|
|
|
|
<ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line browseFilters">
|
|
<ng-container *ngFor = "let value of getValues(filter,sortBy)">
|
|
<li *ngIf="filterKeywords(value.name)" ><!--*ngFor= "let value of filter.values"--><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
|
|
|
|
<a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
|
|
<div title = "{{value.name}}">{{ value.name +' (' +(value.number | number)+')'}}</div></a>
|
|
</li>
|
|
</ng-container>
|
|
</ul>
|
|
</div>
|
|
</div>
|