Merge pull request #4364 from tsiegleauq/listview-ontrack

Force DataSource to refresh

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<ViewItem> implements OnInit {
+export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> implements OnInit {
     /**
      * Determine the display columns in desktop view
      */
@@ -86,7 +86,7 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> 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<ViewItem> impleme
     public ngOnInit(): void {
         super.setTitle('Agenda');
         this.initTable();
+        this.config
+            .get<boolean>('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<boolean>('agenda_enable_numbering')
-            .subscribe(autoNumbering => (this.isNumberingAllowed = autoNumbering));
-        this.setFulltextFilter();
     }
 
     /**

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<ViewAssignment> implements OnInit {
+export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignment, Assignment> implements OnInit {
     /**
      * Constructor.
      * @param titleService
@@ -39,7 +40,7 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
         public filterService: AssignmentFilterListService,
         public sortService: AssignmentSortListService
     ) {
-        super(titleService, translate, matSnackBar);
+        super(titleService, translate, matSnackBar, filterService, sortService);
         // activate multiSelect mode for this listview
         this.canMultiSelect = true;
     }
@@ -52,14 +53,6 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
     public ngOnInit(): void {
         super.setTitle(this.translate.instant('Elections'));
         this.initTable();
-
-        this.filterService.filter().subscribe(filteredData => {
-            this.sortService.data = filteredData;
-        });
-        this.sortService.sort().subscribe(sortedData => {
-            this.dataSource.data = sortedData;
-            this.checkSelection();
-        });
     }
 
     /**

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<V extends BaseViewModel> extends BaseViewComponent {
+export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends BaseModel> extends BaseViewComponent {
     /**
      * The data source for a table. Requires to be initialized with a BaseViewModel
      */
@@ -59,7 +62,13 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> 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<M, V>,
+        public sortService?: BaseSortListService<V>
+    ) {
         super(titleService, translate, matSnackBar);
         this.selectedRows = [];
     }
@@ -72,6 +81,32 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> 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 {

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<ViewHistory> implements OnInit {
+export class HistoryListComponent extends ListViewBaseComponent<ViewHistory, History> implements OnInit {
     /**
      * Subject determine when the custom timestamp subject changes
      */

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<ViewMediafile> implements OnInit {
+export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile, Mediafile> implements OnInit {
     /**
      * Holds the actions for logos. Updated via an observable
      */
@@ -99,9 +99,9 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile>
         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<ViewMediafile>
             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;

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<ViewMotion> implements OnInit {
+export class MotionBlockDetailComponent extends ListViewBaseComponent<ViewMotion, MotionBlock> implements OnInit {
     /**
      * Determines the block id from the given URL
      */

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<ViewMotionBlock> implements OnInit {
+export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBlock, MotionBlock> implements OnInit {
     /**
      * Holds the create form
      */

client/src/app/site/motions/components/motion-list/motion-list.component.html

@@ -92,7 +92,8 @@
                         </mat-basic-chip>
                     </div>
                     <!-- recommendation line -->
-                    <div *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
+                    <div
+                        *ngIf="motion.recommendation && motion.state.next_states_id.length > 0"
                         class="ellipsis-overflow white"
                     >
                         <mat-basic-chip class="bluegrey" [disabled]="true">

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<ViewMotion> implements OnInit {
+export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motion> implements OnInit {
     /**
      * Columns to display in table when desktop view is available
      */
@@ -64,7 +65,9 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> 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<ViewMotion> 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<ViewMotion> 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<ViewMotion> 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<ViewMotion> 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();
     }
 

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<ViewWorkflow> implements OnInit {
+export class WorkflowListComponent extends ListViewBaseComponent<ViewWorkflow, Workflow> implements OnInit {
     /**
      * Holds the new workflow title
      */

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<ViewTag> implements OnInit {
+export class TagListComponent extends ListViewBaseComponent<ViewTag, Tag> implements OnInit {
     public editTag = false;
     public newTag = false;
     public selectedTag: ViewTag;
@@ -55,7 +55,9 @@ export class TagListComponent extends ListViewBaseComponent<ViewTag> 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;
         });
     }

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<ViewUser> implements OnInit {
+export class UserListComponent extends ListViewBaseComponent<ViewUser, User> implements OnInit {
     /**
      * The reference to the template.
      */
@@ -147,7 +147,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> 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<ViewUser> 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