Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-03-12 01:32:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: replace TSLint with ESLint

Browse Source
This commit is contained in:
Wieland Schöbl
2021-06-30 13:53:44 +02:00
committed by Jovan Krunić
parent 67fb4a43c9
commit d696215d08
147 changed files with 5471 additions and 2704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/app/modules/menu/context/context-menu.component.spec.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion,@typescript-eslint/ban-ts-comment */
/*
* Copyright (C) 2020 StApps
* This program is free software: you can redistribute it and/or modify it
@@ -12,16 +13,26 @@
* 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 {
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 {
ChildrenOutletContexts,
RouterModule,
UrlSerializer,
} from '@angular/router';
import {IonicModule} from '@ionic/angular';
import {TranslateModule,} from '@ngx-translate/core';
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 {ContextMenuService} from '../context/context-menu.service';
import {ContextMenuService} from './context-menu.service';
import {FilterContext, SortContext} from './context-type';
describe('ContextMenuComponent', async () => {
@@ -29,7 +40,6 @@ describe('ContextMenuComponent', async () => {
let instance: ContextMenuComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ContextMenuComponent],
providers: [
@@ -40,7 +50,6 @@ describe('ContextMenuComponent', async () => {
{provide: LocationStrategy, useClass: PathLocationStrategy},
{provide: APP_BASE_HREF, useValue: '/'},
],
// tslint:disable-next-line:object-literal-sort-keys
imports: [
FormsModule,
IonicModule.forRoot(),
@@ -58,23 +67,30 @@ describe('ContextMenuComponent', async () => {
it('should show items in sort context', () => {
instance.sortOption = getSortContextType();
fixture.detectChanges();
const sort: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-sort');
const sort: HTMLElement =
fixture.debugElement.nativeElement.querySelector('.context-sort');
const sortItem = sort.querySelector('.sort-item');
expect(sortItem!.querySelector('ion-label')!.textContent).toContain('relevance');
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 filter: HTMLElement =
fixture.debugElement.nativeElement.querySelector('.context-filter');
const filterItem = filter.querySelector('.filter-group');
expect(filterItem!.querySelector('ion-list-header')!.textContent).toContain('Type');
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');
const sort: HTMLElement =
fixture.debugElement.nativeElement.querySelector('.context-sort');
// @ts-ignore
const sortItem: HTMLElement = sort.querySelectorAll('.sort-item')[1];
sortItem!.click();
@@ -93,18 +109,26 @@ describe('ContextMenuComponent', async () => {
instance.filterOption = getFilterContextType();
fixture.detectChanges();
// get filter context div
const filter: HTMLElement = fixture.debugElement.nativeElement.querySelector('.context-filter');
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;
let filterGroup;
// get filter option for facets field
filterGroups.forEach((element) => {
if (element.querySelector('ion-list-header')!.textContent!.toString().toLowerCase().indexOf(facet.field) > -1) {
// eslint-disable-next-line unicorn/no-array-for-each
filterGroups.forEach(element => {
if (
element
.querySelector('ion-list-header')!
.textContent!.toString()
.toLowerCase()
.includes(facet.field)
) {
filterGroup = element;
return;
}
@@ -125,9 +149,13 @@ describe('ContextMenuComponent', async () => {
let filterItem;
for (let i = 0; i < filterItems.length; i++) {
if (filterItems.item(i)
.textContent!.toString().toLowerCase()
.indexOf(bucket.key.toLowerCase()) > 0) {
if (
filterItems
.item(i)
.textContent!.toString()
.toLowerCase()
.indexOf(bucket.key.toLowerCase()) > 0
) {
filterItem = filterItems.item(i);
break;
}
@@ -139,23 +167,27 @@ describe('ContextMenuComponent', async () => {
it('should reset filter', () => {
instance.filterOption = getFilterContextType();
instance.filterOption.options = [{
field: 'type',
buckets: [
{count: 10, key: 'date series', checked: true}
]
}];
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');
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',
@@ -178,97 +210,102 @@ function getSortContextType(): SortContext {
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
}
})
}
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': [
buckets: [
{
'count': 60,
'key': 'academic event',
count: 60,
key: 'academic event',
},
{
'count': 160,
'key': 'message',
count: 160,
key: 'message',
},
{
'count': 151,
'key': 'date series',
count: 151,
key: 'date series',
},
{
'count': 106,
'key': 'dish',
count: 106,
key: 'dish',
},
{
'count': 20,
'key': 'building',
count: 20,
key: 'building',
},
],
'field': 'type',
field: 'type',
},
{
'buckets': [
buckets: [
{
'count': 12,
'key': 'Max Mustermann',
count: 12,
key: 'Max Mustermann',
},
{
'count': 2,
'key': 'Foo Bar',
count: 2,
key: 'Foo Bar',
},
],
'field': 'performers',
'onlyOnType': SCThingType.AcademicEvent,
field: 'performers',
onlyOnType: SCThingType.AcademicEvent,
},
{
'buckets': [
buckets: [
{
'count': 5,
'key': 'colloquium',
count: 5,
key: 'colloquium',
},
{
'count': 15,
'key': 'course',
count: 15,
key: 'course',
},
],
'field': 'categories',
'onlyOnType': SCThingType.AcademicEvent,
field: 'categories',
onlyOnType: SCThingType.AcademicEvent,
},
{
'buckets': [
buckets: [
{
'count': 5,
'key': 'employees',
count: 5,
key: 'employees',
},
{
'count': 15,
'key': 'students',
count: 15,
key: 'students',
},
],
'field': 'audiences',
'onlyOnType': SCThingType.Message,
field: 'audiences',
onlyOnType: SCThingType.Message,
},
];

73
src/app/modules/menu/context/context-menu.component.ts
View File

@@ -12,7 +12,7 @@
* 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 {Component, OnDestroy} from '@angular/core';
import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
import {
SCLanguage,
@@ -37,8 +37,7 @@ import {FilterContext, SortContext, SortContextOption} from './context-type';
selector: 'stapps-context',
templateUrl: 'context-menu.html',
})
export class ContextMenuComponent {
export class ContextMenuComponent implements OnDestroy {
/**
* Amount of filter options shown on compact view
*/
@@ -74,24 +73,26 @@ export class ContextMenuComponent {
*/
translator: SCThingTranslator;
constructor(private translateService: TranslateService,
private readonly contextMenuService: ContextMenuService) {
this.language = this.translateService.currentLang as keyof SCTranslations<SCLanguage>;
constructor(
private translateService: TranslateService,
private readonly contextMenuService: ContextMenuService,
) {
this.language = this.translateService
.currentLang as keyof SCTranslations<SCLanguage>;
this.translator = new SCThingTranslator(this.language);
this.subscriptions.push(this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.language = event.lang as keyof SCTranslations<SCLanguage>;
this.translator = new SCThingTranslator(this.language);
}));
this.subscriptions.push(this.contextMenuService.filterContextChanged$.subscribe((filterContext) => {
this.filterOption = filterContext;
}));
this.subscriptions.push(this.contextMenuService.sortOptions.subscribe((sortContext) => {
this.sortOption = sortContext;
}));
this.subscriptions.push(
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.language = event.lang as keyof SCTranslations<SCLanguage>;
this.translator = new SCThingTranslator(this.language);
}),
this.contextMenuService.filterContextChanged$.subscribe(filterContext => {
this.filterOption = filterContext;
}),
this.contextMenuService.sortOptions.subscribe(sortContext => {
this.sortOption = sortContext;
}),
);
}
/**
@@ -99,21 +100,31 @@ export class ContextMenuComponent {
*/
filterChanged = () => {
this.contextMenuService.contextFilterChanged(this.filterOption);
}
};
/**
* Returns translated property name
*/
getTranslatedPropertyName(property: string, onlyForType?: SCThingType): string {
return (this.translator
// tslint:disable-next-line:no-any
.translatedPropertyNames(onlyForType ?? SCThingType.AcademicEvent) as any)[property];
getTranslatedPropertyName(
property: string,
onlyForType?: SCThingType,
): string {
return (
this.translator.translatedPropertyNames(
onlyForType ?? SCThingType.AcademicEvent,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) as any
)[property];
}
/**
* Returns translated property value
*/
getTranslatedPropertyValue(onlyForType: SCThingType, field: string, key?: string): string | undefined {
getTranslatedPropertyValue(
onlyForType: SCThingType,
field: string,
key?: string,
): string | undefined {
return this.translator.translatedPropertyValue(onlyForType, field, key);
}
@@ -130,11 +141,13 @@ export class ContextMenuComponent {
* Resets filter options
*/
resetFilter = (option: FilterContext) => {
option.options.forEach((filterFacet) => filterFacet.buckets.forEach((filterBucket) => {
filterBucket.checked = false;
}));
for (const filterFacet of option.options)
for (const filterBucket of filterFacet.buckets) {
filterBucket.checked = false;
}
this.contextMenuService.contextFilterChanged(this.filterOption);
}
};
/**
* Updates selected sort option and updates listener
@@ -151,5 +164,5 @@ export class ContextMenuComponent {
}
}
this.contextMenuService.contextSortChanged(option);
}
};
}

129
src/app/modules/menu/context/context-menu.html
View File

@@ -1,28 +1,38 @@
<ion-menu type="overlay" menuId="context" contentId="data-list" side="end">
<ion-list-header>
<ion-toolbar>
<h3>{{'menu.context.title' | translate | titlecase}}</h3>
<h3>{{ 'menu.context.title' | translate | titlecase }}</h3>
</ion-toolbar>
</ion-list-header>
</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-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}}
<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>
<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-radio slot="end" [value]="i"> </ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
@@ -30,48 +40,99 @@
<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-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
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) : ''}}
{{
(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">
*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}}
({{ 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}">
[(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
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
fill="clear"
*ngIf="
!filterOption.compact &&
filterOption.options.length > compactFilterOptionCount
"
(click)="filterOption.compact = true"
>
{{ 'menu.context.filter.showAll' | translate }}
</ion-button>
</div>
</ion-content>

81
src/app/modules/menu/context/context-menu.service.spec.ts
View File

@@ -9,7 +9,7 @@ describe('ContextMenuService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ContextMenuService]
providers: [ContextMenuService],
});
service = TestBed.get(ContextMenuService);
});
@@ -18,38 +18,38 @@ describe('ContextMenuService', () => {
expect(service).toBeTruthy();
});
it('should update filterOptions', (done) => {
service.filterContextChanged$.subscribe((result) => {
it('should update filterOptions', done => {
service.filterContextChanged$.subscribe(result => {
expect(result).toBeDefined();
done();
});
service.updateContextFilter(facetsMock);
});
it('should update filterQuery', (done) => {
it('should update filterQuery', done => {
service.filterContextChanged$.subscribe(() => {
service.contextFilterChanged(filterContext);
});
service.filterQueryChanged$.subscribe((result) => {
service.filterQueryChanged$.subscribe(result => {
expect(result).toBeDefined();
done();
});
service.updateContextFilter(facetsMock);
});
it('should update sortOptions', (done) => {
service.sortContextChanged$.subscribe((result) => {
it('should update sortOptions', done => {
service.sortContextChanged$.subscribe(result => {
expect(result).toBeDefined();
done();
});
service.setContextSort(sortContext);
});
it('should update sortQuery', (done) => {
it('should update sortQuery', done => {
service.sortContextChanged$.subscribe(() => {
service.contextSortChanged(sortContext);
});
service.sortQueryChanged$.subscribe((result) => {
service.sortQueryChanged$.subscribe(result => {
expect(result).toBeDefined();
done();
});
@@ -57,37 +57,37 @@ describe('ContextMenuService', () => {
});
});
const facetsMock: SCFacet[] =
[{
'buckets': [
const facetsMock: SCFacet[] = [
{
buckets: [
{
'count': 60,
'key': 'academic event',
count: 60,
key: 'academic event',
},
{
'count': 160,
'key': 'message',
count: 160,
key: 'message',
},
{
'count': 151,
'key': 'date series',
count: 151,
key: 'date series',
},
{
'count': 106,
'key': 'dish',
count: 106,
key: 'dish',
},
{
'count': 20,
'key': 'building',
count: 20,
key: 'building',
},
{
'count': 20,
'key': 'semester',
count: 20,
key: 'semester',
},
],
'field': 'type',
}];
field: 'type',
},
];
const filterContext: FilterContext = {
name: 'filter',
@@ -97,8 +97,9 @@ const filterContext: FilterContext = {
{
checked: true,
count: 60,
key: 'academic event'
}, {
key: 'academic event',
},
{
checked: false,
count: 160,
key: 'message',
@@ -106,26 +107,28 @@ const filterContext: FilterContext = {
{
checked: false,
count: 151,
key: 'date series'
}, {
key: 'date series',
},
{
checked: false,
count: 106,
key: 'dish'
key: 'dish',
},
{
checked: false,
count: 20,
key: 'building'
key: 'building',
},
{
checked: false,
count: 20,
key: 'semester'
}
key: 'semester',
},
],
field: 'type'
}]
}
field: 'type',
},
],
};
const sortContext: SortContext = {
name: 'sort',
@@ -145,4 +148,4 @@ const sortContext: SortContext = {
value: 'type',
},
],
}
};

109
src/app/modules/menu/context/context-menu.service.ts
View File

@@ -13,16 +13,20 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Injectable} from '@angular/core';
import {SCFacet, SCFacetBucket, SCSearchFilter, SCSearchSort} from '@openstapps/core';
import {SCFacet, SCSearchFilter, SCSearchSort} from '@openstapps/core';
import {Subject} from 'rxjs';
import {FilterBucket, FilterContext, FilterFacet, SortContext} from './context-type';
import {
FilterBucket,
FilterContext,
FilterFacet,
SortContext,
} from './context-type';
/**
* ContextMenuService provides bidirectional communication of context menu options and search queries
*/
@Injectable()
export class ContextMenuService {
/**
* Local filter context object
*/
@@ -31,13 +35,13 @@ export class ContextMenuService {
/**
* Container for the filter context
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
filterOptions = new Subject<FilterContext>();
/**
* Observable filterContext streams
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
filterContextChanged$ = this.filterOptions.asObservable();
/**
@@ -48,19 +52,19 @@ export class ContextMenuService {
/**
* Observable filterContext streams
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
filterQueryChanged$ = this.filterQuery.asObservable();
/**
* Container for the sort context
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
sortOptions = new Subject<SortContext>();
/**
* Observable SortContext streams
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
sortContextChanged$ = this.sortOptions.asObservable();
/**
@@ -71,30 +75,32 @@ export class ContextMenuService {
/**
* Observable SortContext streams
*/
// tslint:disable-next-line:member-ordering
// eslint-disable-next-line @typescript-eslint/member-ordering
sortQueryChanged$ = this.sortQuery.asObservable();
/**
* Returns SCSearchFilter if filterContext value is set, undefined otherwise
*
* @param filterContext FilterContext to build SCSearchFilter from
*/
buildFilterQuery = (filterContext: FilterContext): SCSearchFilter | undefined => {
buildFilterQuery = (
filterContext: FilterContext,
): SCSearchFilter | undefined => {
const filters: SCSearchFilter[] = [];
filterContext.options.forEach((filterFacet) => {
for (const filterFacet of filterContext.options) {
const optionFilters: SCSearchFilter[] = [];
filterFacet.buckets.forEach((filterBucket) => {
for (const filterBucket of filterFacet.buckets) {
if (filterBucket.checked) {
optionFilters.push(
{
arguments: {
field: filterFacet.field,
value: filterBucket.key,
},
type: 'value',
});
optionFilters.push({
arguments: {
field: filterFacet.field,
value: filterBucket.key,
},
type: 'value',
});
}
});
}
if (optionFilters.length > 0) {
filters.push({
arguments: {
@@ -104,7 +110,7 @@ export class ContextMenuService {
type: 'boolean',
});
}
});
}
if (filters.length > 0) {
return {
@@ -117,28 +123,31 @@ export class ContextMenuService {
}
return;
}
};
/**
* Returns SCSearchSort if sorting value is set, undefined otherwise
*
* @param sortContext SortContext to build SCSearchSort from
*/
buildSortQuery = (sortContext: SortContext): SCSearchSort | undefined => {
if (sortContext.value && sortContext.value.length > 0) {
if (sortContext.value === 'name' || sortContext.value === 'type') {
return {
arguments: {
field: sortContext.value,
position: 0,
},
order: sortContext.reversed ? 'desc' : 'asc',
type: 'ducet',
};
}
if (
sortContext.value &&
sortContext.value.length > 0 &&
(sortContext.value === 'name' || sortContext.value === 'type')
) {
return {
arguments: {
field: sortContext.value,
position: 0,
},
order: sortContext.reversed ? 'desc' : 'asc',
type: 'ducet',
};
}
return;
}
};
/**
* Updates filter query from filterContext
@@ -192,7 +201,10 @@ export class ContextMenuService {
* Updates context filter with new facets.
* It preserves the checked status of existing filter options
*/
updateContextFilterOptions = (contextFilter: FilterContext, facets: SCFacet[]) => {
updateContextFilterOptions = (
contextFilter: FilterContext,
facets: SCFacet[],
) => {
const newFilterOptions: FilterFacet[] = [];
// iterate new facets
@@ -206,19 +218,28 @@ export class ContextMenuService {
newFilterOptions.push(newFilterFacet);
// search existing filterOption
const filterOption = contextFilter.options.find((contextFacet: FilterFacet) =>
contextFacet.field === facet.field && contextFacet.onlyOnType === facet.onlyOnType);
facet.buckets.forEach((bucket: SCFacetBucket) => {
const filterOption = contextFilter.options.find(
(contextFacet: FilterFacet) =>
contextFacet.field === facet.field &&
contextFacet.onlyOnType === facet.onlyOnType,
);
for (const bucket of facet.buckets) {
// search existing bucket to preserve checked status
const existingFilterBucket = filterOption ? filterOption.buckets
.find((contextBucket: FilterBucket) => contextBucket.key === bucket.key) : undefined;
const existingFilterBucket = filterOption
? filterOption.buckets.find(
(contextBucket: FilterBucket) =>
contextBucket.key === bucket.key,
)
: undefined;
const filterBucket: FilterBucket = {
checked: existingFilterBucket ? existingFilterBucket.checked : false,
checked: existingFilterBucket
? existingFilterBucket.checked
: false,
count: bucket.count,
key: bucket.key,
};
newFilterFacet.buckets.push(filterBucket);
});
}
}
}
@@ -227,5 +248,5 @@ export class ContextMenuService {
this.contextFilter = contextFilter;
this.filterOptions.next(contextFilter);
}
};
}

2
src/app/modules/menu/context/context-type.ts
View File

@@ -14,8 +14,6 @@
*/
import {SCFacet, SCFacetBucket} from '@openstapps/core';
export type ContextType = FilterContext | SortContext;
/**
* A sort context
*/

18
src/app/modules/menu/menu.module.ts
View File

@@ -27,24 +27,16 @@ import {NavigationComponent} from './navigation/navigation.component';
* Menu module
*/
@NgModule({
declarations: [
NavigationComponent,
ContextMenuComponent,
],
exports: [
NavigationComponent,
ContextMenuComponent,
],
declarations: [NavigationComponent, ContextMenuComponent],
exports: [NavigationComponent, ContextMenuComponent],
imports: [
CommonModule,
FormsModule,
IonicModule.forRoot(),
TranslateModule.forChild(),
CommonModule,
RouterModule,
SettingsModule,
TranslateModule.forChild(),
],
providers: [
ContextMenuService,
],
providers: [ContextMenuService],
})
export class MenuModule {}

23
src/app/modules/menu/navigation/navigation.component.ts
View File

@@ -14,7 +14,12 @@
*/
import {Component} from '@angular/core';
import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
import {SCAppConfigurationMenuCategory, SCLanguage, SCThingTranslator, SCTranslations} from '@openstapps/core';
import {
SCAppConfigurationMenuCategory,
SCLanguage,
SCThingTranslator,
SCTranslations,
} from '@openstapps/core';
import {NGXLogger} from 'ngx-logger';
import {ConfigProvider} from '../../config/config.provider';
@@ -30,7 +35,6 @@ import {ConfigProvider} from '../../config/config.provider';
templateUrl: 'navigation.html',
})
export class NavigationComponent {
/**
* Possible languages to be used for translation
*/
@@ -46,10 +50,12 @@ export class NavigationComponent {
*/
translator: SCThingTranslator;
constructor(private readonly configProvider: ConfigProvider,
public translateService: TranslateService,
private readonly logger: NGXLogger) {
this.loadMenuEntries();
constructor(
private readonly configProvider: ConfigProvider,
public translateService: TranslateService,
private readonly logger: NGXLogger,
) {
void this.loadMenuEntries();
translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.language = event.lang as keyof SCTranslations<SCLanguage>;
this.translator = new SCThingTranslator(this.language);
@@ -62,11 +68,12 @@ export class NavigationComponent {
*/
async loadMenuEntries() {
try {
this.menu = await this.configProvider.getValue('menus') as SCAppConfigurationMenuCategory[];
this.menu = (await this.configProvider.getValue(
'menus',
)) as SCAppConfigurationMenuCategory[];
} catch (error) {
this.logger.error(`error from loading menu entries: ${error}`);
}
}
// openPage(page) {

9
src/app/modules/menu/navigation/navigation.html
View File

@@ -6,24 +6,23 @@
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
<img src="assets/imgs/logo.png" alt=""/>
<img src="assets/imgs/logo.png" alt="" />
<span class="text">StApps</span>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let category of menu">
<ion-list-header
*ngIf="category.name !== ''">
<ion-list-header *ngIf="category.name !== ''">
<ion-label>
{{category.translations[language].name | titlecase}}
{{ category.translations[language].name | titlecase }}
</ion-label>
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
<ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
<ion-icon slot="end" [name]="item.icon"></ion-icon>
<ion-label>
{{item.translations[language].title | titlecase}}
{{ item.translations[language].title | titlecase }}
</ion-label>
</ion-item>
</ion-menu-toggle>