From 57be0a5bea1ea0ccaea228803c1b3b1a97734a00 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Mon, 18 Feb 2019 13:31:15 +0100 Subject: [PATCH] Force DataSource to refresh Fixed a bug where data in MatTableDataStore was not updating. Also: Cleaned redundant list view sorting and filtering functions --- .../agenda-list/agenda-list.component.ts | 29 +++++++------- .../assignment-list.component.ts | 15 ++----- client/src/app/site/base/list-view-base.ts | 39 ++++++++++++++++++- .../history-list/history-list.component.ts | 9 +++-- .../mediafile-list.component.ts | 14 ++----- .../motion-block-detail.component.ts | 2 +- .../motion-block-list.component.ts | 2 +- .../motion-list/motion-list.component.html | 3 +- .../motion-list/motion-list.component.ts | 20 ++++------ .../workflow-list/workflow-list.component.ts | 2 +- .../components/tag-list/tag-list.component.ts | 4 +- .../user-list/user-list.component.ts | 14 ++----- 12 files changed, 84 insertions(+), 69 deletions(-) diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts index 207b63473..b7aa07016 100644 --- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts +++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts @@ -4,20 +4,20 @@ import { Router, ActivatedRoute } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { TranslateService } from '@ngx-translate/core'; -import { AgendaFilterListService } from '../../services/agenda-filter-list.service'; -import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; -import { ListViewBaseComponent } from 'app/site/base/list-view-base'; -import { PromptService } from 'app/core/ui-services/prompt.service'; -import { ViewItem } from '../../models/view-item'; - import { AgendaCsvExportService } from '../../services/agenda-csv-export.service'; +import { AgendaFilterListService } from '../../services/agenda-filter-list.service'; import { AgendaPdfService } from '../../services/agenda-pdf.service'; import { ConfigService } from 'app/core/ui-services/config.service'; import { DurationService } from 'app/core/ui-services/duration.service'; +import { Item } from 'app/shared/models/agenda/item'; import { ItemInfoDialogComponent } from '../item-info-dialog/item-info-dialog.component'; +import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; +import { ListViewBaseComponent } from 'app/site/base/list-view-base'; +import { OperatorService } from 'app/core/core-services/operator.service'; +import { PromptService } from 'app/core/ui-services/prompt.service'; import { PdfDocumentService } from 'app/core/ui-services/pdf-document.service'; import { ViewportService } from 'app/core/ui-services/viewport.service'; -import { OperatorService } from 'app/core/core-services/operator.service'; +import { ViewItem } from '../../models/view-item'; /** * List view for the agenda. @@ -27,7 +27,7 @@ import { OperatorService } from 'app/core/core-services/operator.service'; templateUrl: './agenda-list.component.html', styleUrls: ['./agenda-list.component.scss'] }) -export class AgendaListComponent extends ListViewBaseComponent implements OnInit { +export class AgendaListComponent extends ListViewBaseComponent implements OnInit { /** * Determine the display columns in desktop view */ @@ -86,7 +86,7 @@ export class AgendaListComponent extends ListViewBaseComponent impleme private agendaPdfService: AgendaPdfService, private pdfService: PdfDocumentService ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, filterService); // activate multiSelect mode for this listview this.canMultiSelect = true; @@ -99,15 +99,18 @@ export class AgendaListComponent extends ListViewBaseComponent impleme public ngOnInit(): void { super.setTitle('Agenda'); this.initTable(); + this.config + .get('agenda_enable_numbering') + .subscribe(autoNumbering => (this.isNumberingAllowed = autoNumbering)); + this.setFulltextFilter(); + } + + protected onFilter(): void { this.filterService.filter().subscribe(newAgendaItems => { newAgendaItems.sort((a, b) => a.agendaListWeight - b.agendaListWeight); this.dataSource.data = newAgendaItems; this.checkSelection(); }); - this.config - .get('agenda_enable_numbering') - .subscribe(autoNumbering => (this.isNumberingAllowed = autoNumbering)); - this.setFulltextFilter(); } /** diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts index 2f1b95015..78c096ac1 100644 --- a/client/src/app/site/assignments/assignment-list/assignment-list.component.ts +++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.ts @@ -3,12 +3,13 @@ import { MatSnackBar } from '@angular/material'; import { TranslateService } from '@ngx-translate/core'; import { Title } from '@angular/platform-browser'; +import { Assignment } from 'app/shared/models/assignments/assignment'; import { AssignmentFilterListService } from '../services/assignment-filter.service'; +import { AssignmentSortListService } from '../services/assignment-sort-list.service'; import { AssignmentRepositoryService } from 'app/core/repositories/assignments/assignment-repository.service'; import { ListViewBaseComponent } from '../../base/list-view-base'; import { PromptService } from 'app/core/ui-services/prompt.service'; import { ViewAssignment } from '../models/view-assignment'; -import { AssignmentSortListService } from '../services/assignment-sort-list.service'; /** * Listview for the assignments @@ -19,7 +20,7 @@ import { AssignmentSortListService } from '../services/assignment-sort-list.serv templateUrl: './assignment-list.component.html', styleUrls: ['./assignment-list.component.scss'] }) -export class AssignmentListComponent extends ListViewBaseComponent implements OnInit { +export class AssignmentListComponent extends ListViewBaseComponent implements OnInit { /** * Constructor. * @param titleService @@ -39,7 +40,7 @@ export class AssignmentListComponent extends ListViewBaseComponent { - this.sortService.data = filteredData; - }); - this.sortService.sort().subscribe(sortedData => { - this.dataSource.data = sortedData; - this.checkSelection(); - }); } /** diff --git a/client/src/app/site/base/list-view-base.ts b/client/src/app/site/base/list-view-base.ts index e21ced4f3..e71cb9604 100644 --- a/client/src/app/site/base/list-view-base.ts +++ b/client/src/app/site/base/list-view-base.ts @@ -5,8 +5,11 @@ import { ViewChild } from '@angular/core'; import { BaseViewComponent } from './base-view'; import { BaseViewModel } from './base-view-model'; +import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service'; +import { BaseFilterListService } from 'app/core/ui-services/base-filter-list.service'; +import { BaseModel } from 'app/shared/models/base/base-model'; -export abstract class ListViewBaseComponent extends BaseViewComponent { +export abstract class ListViewBaseComponent extends BaseViewComponent { /** * The data source for a table. Requires to be initialized with a BaseViewModel */ @@ -59,7 +62,13 @@ export abstract class ListViewBaseComponent extends Bas * @param translate the translate service * @param matSnackBar */ - public constructor(titleService: Title, translate: TranslateService, matSnackBar: MatSnackBar) { + public constructor( + titleService: Title, + translate: TranslateService, + matSnackBar: MatSnackBar, + public filterService?: BaseFilterListService, + public sortService?: BaseSortListService + ) { super(titleService, translate, matSnackBar); this.selectedRows = []; } @@ -72,6 +81,32 @@ export abstract class ListViewBaseComponent extends Bas public initTable(): void { this.dataSource = new MatTableDataSource(); this.dataSource.paginator = this.paginator; + if (this.filterService) { + this.onFilter(); + } + if (this.sortService) { + this.onSort(); + } + } + + /** + * Standard filtering function. Sufficient for most list views but can be overwritten + */ + protected onFilter(): void { + this.filterService.filter().subscribe(filteredData => (this.sortService.data = filteredData)); + } + + /** + * Standard sorting function. Siffucient for most list views but can be overwritten + */ + protected onSort(): void { + this.sortService.sort().subscribe(sortedData => { + // the dataArray needs to be cleared (since angular 7) + // changes are not detected properly anymore + this.dataSource.data = []; + this.dataSource.data = sortedData; + this.checkSelection(); + }); } public onSortButton(itemProperty: string): void { diff --git a/client/src/app/site/history/components/history-list/history-list.component.ts b/client/src/app/site/history/components/history-list/history-list.component.ts index 0ad72b4a7..0401e8aad 100644 --- a/client/src/app/site/history/components/history-list/history-list.component.ts +++ b/client/src/app/site/history/components/history-list/history-list.component.ts @@ -1,14 +1,15 @@ import { Component, OnInit } from '@angular/core'; -import { Title } from '@angular/platform-browser'; import { MatSnackBar } from '@angular/material'; import { Router } from '@angular/router'; - import { Subject } from 'rxjs'; +import { Title } from '@angular/platform-browser'; + import { TranslateService } from '@ngx-translate/core'; -import { ListViewBaseComponent } from 'app/site/base/list-view-base'; +import { History } from 'app/shared/models/core/history'; import { HistoryRepositoryService } from 'app/core/repositories/history/history-repository.service'; import { isDetailNavigable } from 'app/shared/models/base/detail-navigable'; +import { ListViewBaseComponent } from 'app/site/base/list-view-base'; import { ViewHistory } from '../../models/view-history'; import { ViewModelStoreService } from 'app/core/core-services/view-model-store.service'; @@ -22,7 +23,7 @@ import { ViewModelStoreService } from 'app/core/core-services/view-model-store.s templateUrl: './history-list.component.html', styleUrls: ['./history-list.component.scss'] }) -export class HistoryListComponent extends ListViewBaseComponent implements OnInit { +export class HistoryListComponent extends ListViewBaseComponent implements OnInit { /** * Subject determine when the custom timestamp subject changes */ diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts index a1d001196..ab9aff492 100644 --- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts +++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts @@ -25,7 +25,7 @@ import { OperatorService } from 'app/core/core-services/operator.service'; templateUrl: './mediafile-list.component.html', styleUrls: ['./mediafile-list.component.scss'] }) -export class MediafileListComponent extends ListViewBaseComponent implements OnInit { +export class MediafileListComponent extends ListViewBaseComponent implements OnInit { /** * Holds the actions for logos. Updated via an observable */ @@ -99,9 +99,9 @@ export class MediafileListComponent extends ListViewBaseComponent public sortService: MediafilesSortListService, private operator: OperatorService ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, filterService, sortService); - // embles multiSelection for this listView + // enables multiSelection for this listView this.canMultiSelect = true; } @@ -118,14 +118,6 @@ export class MediafileListComponent extends ListViewBaseComponent hidden: new FormControl() }); - this.filterService.filter().subscribe(filteredData => { - this.sortService.data = filteredData; - }); - - this.sortService.sort().subscribe(sortedData => { - this.dataSource.data = sortedData; - }); - // Observe the logo actions this.mediaManage.getLogoActions().subscribe(action => { this.logoActions = action; diff --git a/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.ts b/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.ts index 15b1fa27e..54e34029e 100644 --- a/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.ts +++ b/client/src/app/site/motions/components/motion-block-detail/motion-block-detail.component.ts @@ -23,7 +23,7 @@ import { OperatorService } from '../../../../core/core-services/operator.service templateUrl: './motion-block-detail.component.html', styleUrls: ['./motion-block-detail.component.scss'] }) -export class MotionBlockDetailComponent extends ListViewBaseComponent implements OnInit { +export class MotionBlockDetailComponent extends ListViewBaseComponent implements OnInit { /** * Determines the block id from the given URL */ diff --git a/client/src/app/site/motions/components/motion-block-list/motion-block-list.component.ts b/client/src/app/site/motions/components/motion-block-list/motion-block-list.component.ts index 7479de300..e46913132 100644 --- a/client/src/app/site/motions/components/motion-block-list/motion-block-list.component.ts +++ b/client/src/app/site/motions/components/motion-block-list/motion-block-list.component.ts @@ -25,7 +25,7 @@ import { ViewMotionBlock } from '../../models/view-motion-block'; templateUrl: './motion-block-list.component.html', styleUrls: ['./motion-block-list.component.scss'] }) -export class MotionBlockListComponent extends ListViewBaseComponent implements OnInit { +export class MotionBlockListComponent extends ListViewBaseComponent implements OnInit { /** * Holds the create form */ diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.html b/client/src/app/site/motions/components/motion-list/motion-list.component.html index 4c975c6af..49895fe6e 100644 --- a/client/src/app/site/motions/components/motion-list/motion-list.component.html +++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html @@ -92,7 +92,8 @@ -
diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.ts b/client/src/app/site/motions/components/motion-list/motion-list.component.ts index 66b545702..1054452ff 100644 --- a/client/src/app/site/motions/components/motion-list/motion-list.component.ts +++ b/client/src/app/site/motions/components/motion-list/motion-list.component.ts @@ -27,6 +27,7 @@ import { MotionPdfExportService } from '../../services/motion-pdf-export.service import { MotionExportDialogComponent } from '../motion-export-dialog/motion-export-dialog.component'; import { OperatorService } from 'app/core/core-services/operator.service'; import { ViewportService } from 'app/core/ui-services/viewport.service'; +import { Motion } from 'app/shared/models/motions/motion'; /** * Component that displays all the motions in a Table using DataSource. @@ -36,7 +37,7 @@ import { ViewportService } from 'app/core/ui-services/viewport.service'; templateUrl: './motion-list.component.html', styleUrls: ['./motion-list.component.scss'] }) -export class MotionListComponent extends ListViewBaseComponent implements OnInit { +export class MotionListComponent extends ListViewBaseComponent implements OnInit { /** * Columns to display in table when desktop view is available */ @@ -64,7 +65,9 @@ export class MotionListComponent extends ListViewBaseComponent imple * * @param titleService Title * @param translate Translation - * @param matSnackBar + * @param matSnackBar showing errors + * @param sortService sorting + * @param filterService filtering * @param router Router * @param route Current route * @param configService The configuration provider @@ -78,8 +81,6 @@ export class MotionListComponent extends ListViewBaseComponent imple * @param pdfExport To export motions as PDF * @param multiselectService Service for the multiSelect actions * @param userRepo - * @param sortService - * @param filterService * @param vp * @param perms LocalPermissionService */ @@ -87,6 +88,8 @@ export class MotionListComponent extends ListViewBaseComponent imple titleService: Title, translate: TranslateService, matSnackBar: MatSnackBar, + sortService: MotionSortListService, + filterService: MotionFilterListService, private router: Router, private route: ActivatedRoute, private configService: ConfigService, @@ -101,11 +104,9 @@ export class MotionListComponent extends ListViewBaseComponent imple private dialog: MatDialog, private vp: ViewportService, public multiselectService: MotionMultiselectService, - public sortService: MotionSortListService, - public filterService: MotionFilterListService, public perms: LocalPermissionsService ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, filterService, sortService); // enable multiSelect for this listView this.canMultiSelect = true; @@ -130,11 +131,6 @@ export class MotionListComponent extends ListViewBaseComponent imple this.categoryRepo.getSortedViewModelListObservable().subscribe(cats => (this.categories = cats)); this.tagRepo.getViewModelListObservable().subscribe(tags => (this.tags = tags)); this.workflowRepo.getViewModelListObservable().subscribe(wfs => (this.workflows = wfs)); - this.filterService.filter().subscribe(filteredData => (this.sortService.data = filteredData)); - this.sortService.sort().subscribe(sortedData => { - this.dataSource.data = sortedData; - this.checkSelection(); - }); this.setFulltextFilter(); } diff --git a/client/src/app/site/motions/components/workflow-list/workflow-list.component.ts b/client/src/app/site/motions/components/workflow-list/workflow-list.component.ts index 47ea1bc0f..cd0d10e63 100644 --- a/client/src/app/site/motions/components/workflow-list/workflow-list.component.ts +++ b/client/src/app/site/motions/components/workflow-list/workflow-list.component.ts @@ -19,7 +19,7 @@ import { Workflow } from 'app/shared/models/motions/workflow'; templateUrl: './workflow-list.component.html', styleUrls: ['./workflow-list.component.scss'] }) -export class WorkflowListComponent extends ListViewBaseComponent implements OnInit { +export class WorkflowListComponent extends ListViewBaseComponent implements OnInit { /** * Holds the new workflow title */ diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.ts b/client/src/app/site/tags/components/tag-list/tag-list.component.ts index ff09f8bee..474f027f7 100644 --- a/client/src/app/site/tags/components/tag-list/tag-list.component.ts +++ b/client/src/app/site/tags/components/tag-list/tag-list.component.ts @@ -21,7 +21,7 @@ import { MatSnackBar } from '@angular/material'; templateUrl: './tag-list.component.html', styleUrls: ['./tag-list.component.css'] }) -export class TagListComponent extends ListViewBaseComponent implements OnInit { +export class TagListComponent extends ListViewBaseComponent implements OnInit { public editTag = false; public newTag = false; public selectedTag: ViewTag; @@ -55,7 +55,9 @@ export class TagListComponent extends ListViewBaseComponent implements super.setTitle('Tags'); this.initTable(); this.tagForm = new FormGroup({ name: new FormControl('', Validators.required) }); + // TODO Tag has not yet sort or filtering functions this.repo.getViewModelListObservable().subscribe(newTags => { + this.dataSource.data = []; this.dataSource.data = newTags; }); } diff --git a/client/src/app/site/users/components/user-list/user-list.component.ts b/client/src/app/site/users/components/user-list/user-list.component.ts index d7cb27a3f..45b635641 100644 --- a/client/src/app/site/users/components/user-list/user-list.component.ts +++ b/client/src/app/site/users/components/user-list/user-list.component.ts @@ -18,7 +18,7 @@ import { ViewportService } from 'app/core/ui-services/viewport.service'; import { OperatorService } from 'app/core/core-services/operator.service'; import { ViewUser } from '../../models/view-user'; import { ViewGroup } from '../../models/view-group'; -import { genders } from 'app/shared/models/users/user'; +import { genders, User } from 'app/shared/models/users/user'; /** * Interface for the short editing dialog. @@ -55,7 +55,7 @@ interface InfoDialog { templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.scss'] }) -export class UserListComponent extends ListViewBaseComponent implements OnInit { +export class UserListComponent extends ListViewBaseComponent implements OnInit { /** * The reference to the template. */ @@ -147,7 +147,7 @@ export class UserListComponent extends ListViewBaseComponent implement private userPdf: UserPdfExportService, private dialog: MatDialog ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, filterService, sortService); // enable multiSelect for this listView this.canMultiSelect = true; @@ -163,14 +163,6 @@ export class UserListComponent extends ListViewBaseComponent implement public ngOnInit(): void { super.setTitle(this.translate.instant('Participants')); this.initTable(); - - this.filterService.filter().subscribe(filteredData => { - this.sortService.data = filteredData; - }); - this.sortService.sort().subscribe(sortedData => { - this.dataSource.data = sortedData; - this.checkSelection(); - }); this.setFulltextFilter(); // Initialize the groups