mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-19 08:02:55 +00:00
79 lines
3.8 KiB
HTML
79 lines
3.8 KiB
HTML
<ion-menu type="overlay" menuId="context" contentId="data-list" side="end">
|
|
<ion-list-header>
|
|
<ion-toolbar>
|
|
<h3>{{'menu.context.title' | translate | titlecase}}</h3>
|
|
</ion-toolbar>
|
|
</ion-list-header>
|
|
<ion-content>
|
|
<!-- Sort Context -->
|
|
<ion-list>
|
|
<ion-radio-group class="context-sort" *ngIf="sortOption" [value]="0">
|
|
<ion-list-header>
|
|
<ion-icon name="swap-vertical-outline"></ion-icon>
|
|
<ion-title>{{'menu.context.sort.title' | translate | titlecase}}</ion-title>
|
|
</ion-list-header>
|
|
<ion-item class="sort-item"
|
|
*ngFor="let value of sortOption.values, index as i"
|
|
(click)="sortChanged(sortOption, sortOption.values[i])">
|
|
<ion-label>{{'menu.context.sort.' + value.value | translate | titlecase}}
|
|
<span *ngIf="sortOption.value === value.value && value.reversible">
|
|
<ion-icon *ngIf="sortOption.reversed" name="arrow-down-outline"></ion-icon>
|
|
<ion-icon *ngIf="!sortOption.reversed" name="arrow-up-outline"></ion-icon>
|
|
</span>
|
|
</ion-label>
|
|
<ion-radio slot="end" [value]="i">
|
|
</ion-radio>
|
|
</ion-item>
|
|
</ion-radio-group>
|
|
</ion-list>
|
|
<!-- Filter Context -->
|
|
<div class="context-filter" *ngIf="filterOption">
|
|
<ion-list-header>
|
|
<ion-icon name="filter-outline"></ion-icon>
|
|
<ion-title>{{'menu.context.filter.title' | translate | titlecase}}</ion-title>
|
|
<ion-button class="resetFilterButton" fill="clear" color="dark" (click)="resetFilter(filterOption)">
|
|
<ion-icon name="trash"></ion-icon>
|
|
</ion-button>
|
|
</ion-list-header>
|
|
|
|
<ion-list class="filter-group"
|
|
*ngFor="let facet of !filterOption.compact ?
|
|
filterOption.options.slice(0, compactFilterOptionCount) : filterOption.options">
|
|
<div *ngIf="!facet.field.includes('.')">
|
|
<ion-list-header class="h3">
|
|
<ion-label>
|
|
{{(facet.onlyOnType ? getTranslatedPropertyName(facet.field, facet.onlyOnType) : (getTranslatedPropertyName(facet.field))) | titlecase}}
|
|
{{facet.onlyOnType ? ' | ' + (getTranslatedPropertyValue(facet.onlyOnType, 'type') | titlecase) : ''}}
|
|
</ion-label>
|
|
</ion-list-header>
|
|
<div *ngIf="facet.buckets.length > 0">
|
|
<ion-item
|
|
*ngFor="let bucket of !facet.compact ?
|
|
facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets">
|
|
<ion-label class="filter-item-label">
|
|
({{bucket.count}}) {{facet.field === 'type' ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase) :
|
|
getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key) | titlecase}}
|
|
</ion-label>
|
|
<ion-checkbox
|
|
[(ngModel)]="bucket.checked"
|
|
(ngModelChange)="filterChanged()"
|
|
[value]="{field: facet.field, value: bucket.key, onlyOnType: facet.onlyOnType}">
|
|
</ion-checkbox>
|
|
</ion-item>
|
|
<ion-button fill="clear"
|
|
*ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount"
|
|
(click)="facet.compact = true">
|
|
{{'menu.context.filter.showAll' | translate}}
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
</ion-list>
|
|
<ion-button fill="clear"
|
|
*ngIf="!filterOption.compact && filterOption.options.length > compactFilterOptionCount"
|
|
(click)="filterOption.compact = true">
|
|
{{'menu.context.filter.showAll' | translate}}
|
|
</ion-button>
|
|
</div>
|
|
</ion-content>
|
|
</ion-menu>
|