feat(menu): add context menu

Closes #3

src/app/modules/menu/context/context-menu.component.spec.ts

@@ -0,0 +1,274 @@
+/*
+ * Copyright (C) 2020 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/>.
+ */
+import {APP_BASE_HREF, CommonModule, Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormsModule} from '@angular/forms';
+import {ChildrenOutletContexts, RouterModule, UrlSerializer} from '@angular/router';
+import {IonicModule} from '@ionic/angular';
+import {TranslateModule,} from '@ngx-translate/core';
+import {SCFacet, SCThingType} from '@openstapps/core';
+import {ContextMenuComponent} from './context-menu.component';
+import {SettingsModule} from '../../settings/settings.module';
+import {MenuService} from '../menu.service';
+import {FilterContext, SortContext} from './context-type';
+
+describe('ContextMenuComponent', async () => {
+  let fixture: ComponentFixture<ContextMenuComponent>;
+  let instance: ContextMenuComponent;
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [ContextMenuComponent],
+      providers: [
+        ChildrenOutletContexts,
+        Location,
+        UrlSerializer,
+        MenuService,
+        {provide: LocationStrategy, useClass: PathLocationStrategy},
+        {provide: APP_BASE_HREF, useValue: '/'},
+      ],
+      // tslint:disable-next-line:object-literal-sort-keys
+      imports: [
+        FormsModule,
+        IonicModule.forRoot(),
+        TranslateModule.forRoot(),
+        CommonModule,
+        SettingsModule,
+        RouterModule.forRoot([]),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContextMenuComponent);
+    instance = fixture.componentInstance;
+  });
+
+  it('should show items in sort context', () => {
+    instance.sortOption = getSortContextType();
+    fixture.detectChanges();
+    const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
+    const sortItem = sort.querySelector('.sort-item');
+    expect(sortItem!.querySelector('ion-label')!.textContent).toContain('relevance');
+  });
+
+  it('should show items in filter context', () => {
+    instance.filterOption = getFilterContextType();
+    fixture.detectChanges();
+    const filter: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-filter');
+    const filterItem = filter.querySelector('.filter-group');
+    expect(filterItem!.querySelector('ion-list-header')!.textContent).toContain('Type');
+  });
+
+  it('should set sort context value and reverse on click', () => {
+    instance.sortOption = getSortContextType();
+    fixture.detectChanges();
+    const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
+    // @ts-ignore
+    const sortItem: HTMLElement = sort.querySelectorAll('.sort-item')[1];
+    sortItem!.click();
+    expect(instance.sortOption.value).toEqual('name');
+    expect(instance.sortOption.reversed).toBe(false);
+
+    // click again for reverse
+    sortItem!.click();
+    expect(instance.sortOption.reversed).toBe(true);
+  });
+
+  it('should show all filterable facets', () => {
+    // get set facets with non empty buckets
+    const facets: SCFacet[] = getFilterContextType().options;
+
+    instance.filterOption = getFilterContextType();
+    fixture.detectChanges();
+    // get filter context div
+    const filter: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-filter');
+    // get all filter groups that represent a facet
+    const filterGroups = filter.querySelectorAll('.filter-group');
+
+    expect(filterGroups.length).toEqual(facets.length);
+
+    for (const facet of facets) {
+      let filterGroup = undefined;
+
+      // get filter option for facets field
+      filterGroups.forEach((element) => {
+        if (element.querySelector('ion-list-header')!.textContent!.toString().toLowerCase().indexOf(facet.field) > -1) {
+          filterGroup = element;
+          return;
+        }
+      });
+
+      expect(filterGroup).toBeDefined();
+
+      // @ts-ignore
+      const filterItems = filterGroup.querySelectorAll('.filter-item-label');
+
+      if (filterItems.length !== facet.buckets.length) {
+        console.log(JSON.stringify(facet));
+      }
+      expect(filterItems.length).toEqual(facet.buckets.length);
+
+      // check all buckets are shown
+      for (const bucket of facet.buckets) {
+        let filterItem;
+
+        for (let i = 0; i < filterItems.length; i++) {
+          if (filterItems.item(i)
+            .textContent!.toString().toLowerCase()
+            .indexOf(bucket.key.toLowerCase()) > 0) {
+            filterItem = filterItems.item(i);
+            break;
+          }
+        }
+        expect(filterItem).toBeDefined();
+      }
+    }
+  });
+
+  it('should reset filter', () => {
+    instance.filterOption = getFilterContextType();
+    instance.filterOption.options = [{
+      field: 'type',
+      buckets: [
+        {count: 10, key: 'date series', checked: true}
+      ]
+    }];
+
+    fixture.detectChanges();
+
+    // click reset button
+    const resetButton: HTMLElement = fixture.debugElement.nativeElement.querySelector('.resetFilterButton');
+    resetButton.click();
+
+    expect(instance.filterOption.options[0].buckets[0].checked).toEqual(false);
+  });
+});
+
+function getSortContextType(): SortContext {
+  return {
+    name: 'sort',
+    reversed: false,
+    value: 'relevance',
+    values: [
+      {
+        reversible: false,
+        value: 'relevance',
+      },
+      {
+        reversible: true,
+        value: 'name',
+      },
+      {
+        reversible: true,
+        value: 'date',
+      },
+      {
+        reversible: true,
+        value: 'type',
+      },
+    ]
+  }
+}
+
+function getFilterContextType(): FilterContext {
+  return {
+    name: 'filter',
+    compact: false,
+    options: facetsMock.filter((facet) => facet.buckets.length > 0).map((facet) => {
+      return {
+        buckets: facet.buckets.map((bucket) => {
+          return {
+            count: bucket.count,
+            key: bucket.key,
+            checked: false,
+          }
+        }),
+        compact: false,
+        field: facet.field,
+        onlyOnType: facet.onlyOnType
+      }
+    })
+  }
+}
+
+const facetsMock: SCFacet[] = [
+  {
+    'buckets': [
+      {
+        'count': 60,
+        'key': 'academic event',
+      },
+      {
+        'count': 160,
+        'key': 'message',
+      },
+      {
+        'count': 151,
+        'key': 'date series',
+      },
+      {
+        'count': 106,
+        'key': 'dish',
+      },
+      {
+        'count': 20,
+        'key': 'building',
+      },
+    ],
+    'field': 'type',
+  },
+  {
+    'buckets': [
+      {
+        'count': 12,
+        'key': 'Max Mustermann',
+      },
+      {
+        'count': 2,
+        'key': 'Foo Bar',
+      },
+    ],
+    'field': 'performers',
+    'onlyOnType': SCThingType.AcademicEvent,
+  },
+  {
+    'buckets': [
+      {
+        'count': 5,
+        'key': 'colloquium',
+      },
+      {
+        'count': 15,
+        'key': 'course',
+      },
+    ],
+    'field': 'categories',
+    'onlyOnType': SCThingType.AcademicEvent,
+  },
+  {
+    'buckets': [
+      {
+        'count': 5,
+        'key': 'employees',
+      },
+      {
+        'count': 15,
+        'key': 'students',
+      },
+    ],
+    'field': 'audiences',
+    'onlyOnType': SCThingType.Message,
+  },
+];

src/app/modules/menu/context/context-menu.component.ts

@@ -0,0 +1,139 @@
+/*
+ * Copyright (C) 2018, 2019, 2020 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/>.
+ */
+import {Component} from '@angular/core';
+import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {
+  SCLanguage,
+  SCThingTranslator,
+  SCThingType,
+  SCTranslations,
+} from '@openstapps/core';
+import {MenuService} from '../menu.service';
+import {FilterContext, SortContext, SortContextOption} from './context-type';
+
+/**
+ * The context menu
+ *
+ * It can be configured with sorting types and filtering on facets
+ *
+ * Example:<br>
+ *  `<stapps-context (optionChange)="onOptionChange($event)" (settingChange)="onSettingChange($event)"
+ *  [sortOption]="SortContext" [filterOption]="FilterContext"></stapps-context>`
+ */
+@Component({
+  selector: 'stapps-context',
+  templateUrl: 'context-menu.html',
+})
+export class ContextMenuComponent {
+
+  /**
+   * Amount of filter options shown on compact view
+   */
+  compactFilterOptionCount = 5;
+
+  /**
+   * Container for the filter context
+   */
+  filterOption: FilterContext;
+
+  /**
+   * Possible languages to be used for translation
+   */
+  language: keyof SCTranslations<SCLanguage>;
+
+  /**
+   * Mapping of SCThingType
+   */
+  scThingType = SCThingType;
+
+  /**
+   * Container for the sort context
+   */
+  sortOption: SortContext;
+
+  /**
+   * Core translator
+   */
+  translator: SCThingTranslator;
+
+  constructor(private translateService: TranslateService,
+              private readonly menuService: MenuService) {
+    this.language = this.translateService.currentLang as keyof SCTranslations<SCLanguage>;
+    this.translator = new SCThingTranslator(this.language);
+
+    this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.language = event.lang as keyof SCTranslations<SCLanguage>;
+      this.translator = new SCThingTranslator(this.language);
+    });
+
+    this.menuService.filterContextChanged$.subscribe((filterContext) => {
+      this.filterOption = filterContext;
+    });
+
+    this.menuService.sortOptions.subscribe((sortContext) => {
+      this.sortOption = sortContext;
+    });
+  }
+
+  /**
+   * Sets selected filter options and updates listener
+   */
+  filterChanged = () => {
+    this.menuService.contextFilterChanged(this.filterOption);
+  }
+
+  /**
+   * Returns translated property name
+   */
+  getTranslatedPropertyName(property: string, onlyForType?: SCThingType): string {
+    return (this.translator
+      // tslint:disable-next-line:no-any
+      .translatedPropertyNames(onlyForType ? onlyForType : SCThingType.AcademicEvent) as any)[property];
+  }
+
+  /**
+   * Returns translated type of given SCThingType string
+   */
+  getTranslatedType(scThingType: string) {
+    return this.translator.translatedThingType(scThingType as SCThingType);
+  }
+
+  /**
+   * Resets filter options
+   */
+  resetFilter = (option: FilterContext) => {
+    option.options.forEach((filterFacet) => filterFacet.buckets.forEach((filterBucket) => {
+      filterBucket.checked = false;
+    }));
+    this.menuService.contextFilterChanged(this.filterOption);
+  }
+
+  /**
+   * Updates selected sort option and updates listener
+   */
+  sortChanged = (option: SortContext, value: SortContextOption) => {
+    if (option.value === value.value) {
+      if (value.reversible) {
+        option.reversed = !option.reversed;
+      }
+    } else {
+      option.value = value.value;
+      if (value.reversible) {
+        option.reversed = false;
+      }
+    }
+    this.menuService.contextSortChanged(option);
+  }
+}

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

@@ -0,0 +1,80 @@
+<ion-menu type="overlay" menuId="context" side="end">
+  <ion-card-header>
+    <ion-toolbar>
+      <ion-buttons slot="right">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{'menu.context.title' | translate | titlecase}}</ion-title>
+    </ion-toolbar>
+  </ion-card-header>
+  <ion-content>
+    <!--        Sort Context -->
+    <ion-radio-group class="context-sort" *ngIf="sortOption">
+      <ion-list-header>
+        <ion-icon name="swap"></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, value)">
+        <ion-label>{{'menu.context.sort.' + value.value | translate | titlecase}}
+          <span *ngIf="sortOption.value === value.value && value.reversible">
+                  <ion-icon *ngIf="sortOption.reversed" name="arrow-dropdown"></ion-icon>
+                  <ion-icon *ngIf="!sortOption.reversed" name="arrow-dropup"></ion-icon>
+                </span>
+        </ion-label>
+        <ion-radio mode="ios" slot="start" [value]="value.value" [checked]="i == 0">
+
+        </ion-radio>
+      </ion-item>
+    </ion-radio-group>
+    <!--        Filter Context -->
+    <div class="context-filter" *ngIf="filterOption">
+      <ion-list-header>
+        <ion-icon name="funnel"></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">
+        <ion-list-header class="h3">
+          {{(facet.onlyOnType ?
+          getTranslatedPropertyName(facet.field, facet.onlyOnType)
+          : (getTranslatedPropertyName(facet.field))) | titlecase}}
+          {{facet.onlyOnType? ' | ' + (getTranslatedType(facet.onlyOnType) | titlecase) : ''}}
+        </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' ? (getTranslatedType(bucket.key) | titlecase) : bucket.key | titlecase}}
+            </ion-label>
+            <ion-checkbox
+                          mode="ios"
+                          [(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>
+      </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>
+<ion-router-outlet main></ion-router-outlet>

src/app/modules/menu/context/context-menu.scss

@@ -0,0 +1,7 @@
+stapps-navigation {
+  ion-radio {
+    .radio-icon {
+
+    }
+  }
+}

src/app/modules/menu/context/context-type.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2020 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/>.
+ */
+import {SCFacet, SCFacetBucket} from '@openstapps/core';
+
+export type ContextType = FilterContext | SortContext;
+
+/**
+ * A sort context
+ */
+export interface SortContext {
+  /**
+   * Name of the context
+   */
+  name: 'sort';
+
+  /**
+   * Reverse option
+   */
+  reversed: boolean;
+
+  /**
+   * sort value
+   */
+  value: string;
+
+  /**
+   * Sort options
+   */
+  values: SortContextOption[];
+}
+
+/**
+ * A sort context option
+ */
+export interface SortContextOption {
+  /**
+   * sort option is reversible
+   */
+  reversible: boolean;
+
+  /**
+   * sort option value
+   */
+  value: string;
+}
+
+/**
+ * A filter context
+ */
+export interface FilterContext {
+  /**
+   * Compact view of the filter options
+   */
+  compact?: boolean;
+  /**
+   * Name of the context
+   */
+  name: 'filter';
+
+  /**
+   * Filter values
+   */
+  options: FilterFacet[];
+}
+
+export interface FilterFacet extends SCFacet {
+  /**
+   * FilterBuckets of a FilterFacet
+   */
+  buckets: FilterBucket[];
+  /**
+   * Compact view of the option buckets
+   */
+  compact?: boolean;
+}
+
+export interface FilterBucket extends SCFacetBucket {
+  /**
+   * Sets the Filter active
+   */
+  checked: boolean;
+}