From 37f0baf165b848c69531cdcb411b5e07a69c24ed Mon Sep 17 00:00:00 2001 From: Maximilian Krambach Date: Thu, 16 May 2019 19:05:54 +0200 Subject: [PATCH] sorting tree view filters - callList - refactored agendaSort --- .../sorting-tree/sorting-tree.component.ts | 2 + .../agenda-sort/agenda-sort.component.html | 4 +- .../agenda-sort/agenda-sort.component.ts | 165 ++++--------- .../src/app/site/base/sort-tree.component.ts | 127 ++++++++++ .../call-list/call-list.component.html | 78 +++++- .../call-list/call-list.component.scss | 3 + .../modules/call-list/call-list.component.ts | 227 +++++++++++++++--- 7 files changed, 439 insertions(+), 167 deletions(-) create mode 100644 client/src/app/site/base/sort-tree.component.ts diff --git a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts index 67a9ddc79..b109a6cd3 100644 --- a/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts +++ b/client/src/app/shared/components/sorting-tree/sorting-tree.component.ts @@ -103,6 +103,8 @@ export class SortingTreeComponent implemen /** * Function that will be used for filtering the nodes. + * Should return false for an item is to be visible + * TODO this inverts all other 'sorting' conventions elsewhere! */ private activeFilter: (node: T) => boolean; diff --git a/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.html b/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.html index 00f34279d..030971da5 100644 --- a/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.html +++ b/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.html @@ -31,8 +31,8 @@
{{ 'Visibility' | translate }}
- - {{ getIcon(option.name) }} {{ option.name | translate }} + + {{ getIcon(option.label) }} {{ option.label | translate }}
diff --git a/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts b/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts index 0a76246b2..68688b3ca 100644 --- a/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts +++ b/client/src/app/site/agenda/components/agenda-sort/agenda-sort.component.ts @@ -1,17 +1,15 @@ -import { Component, ViewChild, EventEmitter, OnInit } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { MatSnackBar } from '@angular/material'; +import { BehaviorSubject, Observable } from 'rxjs'; import { TranslateService } from '@ngx-translate/core'; -import { Observable, BehaviorSubject } from 'rxjs'; -import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; -import { BaseViewComponent } from '../../../base/base-view'; -import { SortingTreeComponent } from 'app/shared/components/sorting-tree/sorting-tree.component'; -import { ViewItem } from '../../models/view-item'; -import { PromptService } from 'app/core/ui-services/prompt.service'; -import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard'; import { itemVisibilityChoices } from 'app/shared/models/agenda/item'; +import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; +import { SortTreeViewComponent, SortTreeFilterOption } from 'app/site/base/sort-tree.component'; +import { PromptService } from 'app/core/ui-services/prompt.service'; +import { ViewItem } from '../../models/view-item'; /** * Sort view for the agenda. @@ -21,58 +19,25 @@ import { itemVisibilityChoices } from 'app/shared/models/agenda/item'; templateUrl: './agenda-sort.component.html', styleUrls: ['./agenda-sort.component.scss'] }) -export class AgendaSortComponent extends BaseViewComponent implements CanComponentDeactivate, OnInit { +export class AgendaSortComponent extends SortTreeViewComponent implements OnInit { /** - * Reference to the view child + * All agendaItems sorted by their weight {@link ViewItem.weight} */ - @ViewChild('osSortedTree') - public osSortTree: SortingTreeComponent; - - /** - * Emitter to emit if the nodes should expand or collapse. - */ - public readonly changeState: EventEmitter = new EventEmitter(); - - /** - * Emitter who emits the filters to the sorting tree. - */ - public readonly changeFilter: EventEmitter<(item: ViewItem) => boolean> = new EventEmitter< - (item: ViewItem) => boolean - >(); + public itemsObservable: Observable; /** * These are the available options for filtering the nodes. * Adds the property `state` to identify if the option is marked as active. * When reset the filters, the option `state` will be set to `false`. */ - public filterOptions = itemVisibilityChoices.map(item => { - return { ...item, state: false }; + public filterOptions: SortTreeFilterOption[] = itemVisibilityChoices.map(item => { + return { label: item.name, id: item.key, state: false }; }); /** * BehaviourSubject to get informed every time the filters change. */ - private activeFilters: BehaviorSubject = new BehaviorSubject([]); - - /** - * Boolean to check if changes has been made. - */ - public hasChanged = false; - - /** - * Boolean to check if filters are active, so they could be removed. - */ - public hasActiveFilter = false; - - /** - * Array, that holds the number of visible nodes and amount of available nodes. - */ - public seenNodes: [number, number] = [0, 0]; - - /** - * All agendaItems sorted by their weight {@link ViewItem.weight} - */ - public itemsObservable: Observable; + protected activeFilters: BehaviorSubject = new BehaviorSubject([]); /** * Updates the incoming/changing agenda items. @@ -87,12 +52,30 @@ export class AgendaSortComponent extends BaseViewComponent implements CanCompone translate: TranslateService, matSnackBar: MatSnackBar, private agendaRepo: ItemRepositoryService, - private promptService: PromptService + promptService: PromptService ) { - super(title, translate, matSnackBar); + super(title, translate, matSnackBar, promptService); this.itemsObservable = this.agendaRepo.getViewModelListObservable(); } + /** + * Function to emit the active filters. + * Filters will be stored in an array to prevent duplicated options. + * Furthermore if the option is already included in this array, then it will be deleted. + * This array will be emitted. + * + * @param filter Is the filter that was activated by the user. + */ + public onFilterChange(filter: number): void { + const value = this.activeFilters.value; + if (!value.includes(filter)) { + value.push(filter); + } else { + value.splice(value.indexOf(filter), 1); + } + this.activeFilters.next(value); + } + /** * OnInit method */ @@ -100,64 +83,17 @@ export class AgendaSortComponent extends BaseViewComponent implements CanCompone /** * Passes the active filters as an array to the subject. */ - const filter = this.activeFilters.subscribe((value: string[]) => { + const filter = this.activeFilters.subscribe((value: number[]) => { this.hasActiveFilter = value.length === 0 ? false : true; this.changeFilter.emit( (item: ViewItem): boolean => { - return !(value.includes(item.verboseType) || value.length === 0); + return !(value.includes(item.type) || value.length === 0); } ); }); this.subscriptions.push(filter); } - /** - * Function to save the tree by click. - */ - public async onSave(): Promise { - await this.agendaRepo - .sortItems(this.osSortTree.getTreeData()) - .then(() => this.osSortTree.setSubscription(), this.raiseError); - } - - /** - * Function to restore the old state. - */ - public async onCancel(): Promise { - if (await this.canDeactivate()) { - this.osSortTree.setSubscription(); - } - } - - /** - * Function to get an info if changes has been made. - * - * @param hasChanged Boolean received from the tree to see that changes has been made. - */ - public receiveChanges(hasChanged: boolean): void { - this.hasChanged = hasChanged; - } - - /** - * Function to receive the new number of visible nodes when the filter has changed. - * - * @param nextNumberOfSeenNodes is an array with two indices: - * The first gives the number of currently shown nodes. - * The second tells how many nodes available. - */ - public onChangeAmountOfItems(nextNumberOfSeenNodes: [number, number]): void { - this.seenNodes = nextNumberOfSeenNodes; - } - - /** - * Function to emit if the nodes should be expanded or collapsed. - * - * @param nextState Is the next state, expanded or collapsed, the nodes should be. - */ - public onStateChange(nextState: boolean): void { - this.changeState.emit(nextState); - } - /** * Function to set the active filters to null. */ @@ -169,36 +105,21 @@ export class AgendaSortComponent extends BaseViewComponent implements CanCompone } /** - * Function to emit the active filters. - * Filters will be stored in an array to prevent duplicated options. - * Furthermore if the option is already included in this array, then it will be deleted. - * This array will be emitted. - * - * @param filter Is the filter that was activated by the user. + * Function to save the tree by click. */ - public onFilterChange(filter: string): void { - const value = this.activeFilters.value; - if (!value.includes(filter)) { - value.push(filter); - } else { - value.splice(value.indexOf(filter), 1); - } - this.activeFilters.next(value); + public async onSave(): Promise { + await this.agendaRepo + .sortItems(this.osSortTree.getTreeData()) + .then(() => this.osSortTree.setSubscription(), this.raiseError); } /** - * Function to open a prompt dialog, - * so the user will be warned if he has made changes and not saved them. + * Function to emit if the nodes should be expanded or collapsed. * - * @returns The result from the prompt dialog. + * @param nextState Is the next state, expanded or collapsed, the nodes should be. */ - public async canDeactivate(): Promise { - if (this.hasChanged) { - const title = this.translate.instant('Do you really want to exit this page?'); - const content = this.translate.instant('You made changes.'); - return await this.promptService.open(title, content); - } - return true; + public onStateChange(nextState: boolean): void { + this.changeState.emit(nextState); } /** diff --git a/client/src/app/site/base/sort-tree.component.ts b/client/src/app/site/base/sort-tree.component.ts new file mode 100644 index 000000000..49f6564a3 --- /dev/null +++ b/client/src/app/site/base/sort-tree.component.ts @@ -0,0 +1,127 @@ +import { ViewChild, EventEmitter } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; +import { Title } from '@angular/platform-browser'; + +import { TranslateService } from '@ngx-translate/core'; + +import { BaseViewModel } from './base-view-model'; +import { BaseViewComponent } from './base-view'; +import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard'; +import { Identifiable } from 'app/shared/models/base/identifiable'; +import { PromptService } from 'app/core/ui-services/prompt.service'; +import { SortingTreeComponent } from 'app/shared/components/sorting-tree/sorting-tree.component'; + +export interface SortTreeFilterOption extends Identifiable { + label: string; + id: number; + state: boolean; +} + +/** + * Abstract Sort view for hierarchic item trees + */ +export abstract class SortTreeViewComponent extends BaseViewComponent + implements CanComponentDeactivate { + /** + * Reference to the view child + */ + @ViewChild('osSortedTree') + public osSortTree: SortingTreeComponent; + + /** + * Emitter to emit if the nodes should expand or collapse. + */ + public readonly changeState: EventEmitter = new EventEmitter(); + + /** + * Emitter that emits the filters to the sorting tree. + * TODO note that the boolean function currently requires false if the item + * is to be visible! + */ + public readonly changeFilter: EventEmitter<(item: V) => boolean> = new EventEmitter<(item: V) => boolean>(); + + /** + * Boolean to check if changes has been made. + */ + public hasChanged = false; + + /** + * Boolean to check if filters are active, so they could be removed. + */ + public hasActiveFilter = false; + + /** + * Array that holds the number of visible nodes(0) and amount of available + * nodes(1). + */ + public seenNodes: [number, number] = [0, 0]; + + /** + * Updates the incoming/changing agenda items. + * @param title + * @param translate + * @param matSnackBar + * @param promptService + */ + public constructor( + title: Title, + public translate: TranslateService, + matSnackBar: MatSnackBar, + protected promptService: PromptService + ) { + super(title, translate, matSnackBar); + } + + /** + * Function to restore the old state. + */ + public async onCancel(): Promise { + if (await this.canDeactivate()) { + this.osSortTree.setSubscription(); + } + } + + /** + * Function to set an info if changes has been made. + * + * @param hasChanged Boolean received from the tree to see that changes has been made. + */ + public receiveChanges(hasChanged: boolean): void { + this.hasChanged = hasChanged; + } + + /** + * Function to receive the new number of visible nodes when the filter has changed. + * + * @param nextNumberOfSeenNodes is an array with two indices: + * The first gives the number of currently shown nodes. + * The second tells how many nodes available. + */ + public onChangeAmountOfItems(nextNumberOfSeenNodes: [number, number]): void { + this.seenNodes = nextNumberOfSeenNodes; + } + + /** + * Function to emit if the nodes should be expanded or collapsed. + * + * @param nextState Is the next state, expanded or collapsed, the nodes should be. + */ + public onStateChange(nextState: boolean): void { + this.changeState.emit(nextState); + } + + /** + * Function to open a prompt dialog, so the user will be warned if they have + * made changes and not saved them. + * + * @returns The result from the prompt dialog. + */ + public async canDeactivate(): Promise { + if (this.hasChanged) { + const title = this.translate.instant('Do you really want to exit this page?'); + const content = this.translate.instant('You made changes.'); + return await this.promptService.open(title, content); + } + return true; + } +} diff --git a/client/src/app/site/motions/modules/call-list/call-list.component.html b/client/src/app/site/motions/modules/call-list/call-list.component.html index 6b57797d8..479c41743 100644 --- a/client/src/app/site/motions/modules/call-list/call-list.component.html +++ b/client/src/app/site/motions/modules/call-list/call-list.component.html @@ -1,10 +1,4 @@ - - +

Call list

@@ -12,19 +6,83 @@
-
+
+
+ {{ seenNodes[0] }} of +  {{ seenNodes[1] }} +
+
+
Active filters: 
+
+ +
+
+
+
+ +
+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + + [model]="motionsObservable" + [filterChange]="changeFilter" + >
@@ -41,7 +99,7 @@ - +