openstapps/src/app/modules/menu/context/context-menu.html

<!--
  ~ Copyright (C) 2022 StApps
  ~  This program is free software: you can redistribute it and/or modify it
  ~  under the terms of the GNU General Public License as published by the Free
  ~  Software Foundation, version 3.
  ~
  ~  This program is distributed in the hope that it will be useful, but WITHOUT
  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~  more details.
  ~
  ~  You should have received a copy of the GNU General Public License along with
  ~  this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<ion-menu
  type="overlay"
  menuId="context"
  contentId="{{ contentId }}"
  maxEdgeStart="0"
  side="end"
>
  <ion-toolbar color="primary" mode="ios">
    <ion-label class="ion-padding-horizontal">
      <h1 class="ion-padding-horizontal">
        {{ 'menu.context.title' | translate | titlecase }}
      </h1>
    </ion-label>
  </ion-toolbar>
  <ion-content>
    <!-- Sort Context -->
    <ion-list>
      <ion-radio-group class="context-sort" *ngIf="sortOption" [value]="0">
        <ion-list-header>
          <ion-icon name="sort"></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_downward"
              ></ion-icon>
              <ion-icon
                *ngIf="!sortOption.reversed"
                name="arrow_upward"
              ></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_list"></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="delete"></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>