Merge pull request #4805 from tsiegleauq/more-listview-patches

Adds custom filter predicates for native object data

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -148,6 +148,9 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
     @Input()
     public columns: PblColumnDefinition[] = [];
 
+    @Input()
+    public filterProps: string[];
+
     /**
      * Key to restore scroll position after navigating
      */
@@ -299,12 +302,13 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
             })
             .create();
 
-        const filterPredicate = (item: any): boolean => {
+        const filterPredicate = (item: V): boolean => {
             if (!this.inputValue) {
                 return true;
             }
 
             if (this.inputValue) {
+                // filter by ID
                 const trimmedInput = this.inputValue.trim().toLowerCase();
                 const idString = '' + item.id;
                 const foundId =
@@ -316,20 +320,21 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
                     return true;
                 }
 
-                for (const column of this.columns) {
+                // custom filter predicates
-                    const col = this.dataSource.hostGrid.columnApi.findColumn(column.prop);
+                if (this.filterProps && this.filterProps.length) {
-                    const value = col.getValue(item);
+                    for (const prop of this.filterProps) {
+                        const propertyAsString = '' + item[prop];
 
-                    if (!!value) {
+                        if (!!propertyAsString) {
-                        const valueAsString = '' + value;
+                            const foundProp =
-                        const foundValue =
+                                propertyAsString
-                            valueAsString
+                                    .trim()
-                                .trim()
+                                    .toLowerCase()
-                                .toLocaleLowerCase()
+                                    .indexOf(trimmedInput) !== -1;
-                                .indexOf(trimmedInput) !== -1;
 
-                        if (foundValue) {
+                            if (foundProp) {
-                            return true;
+                                return true;
+                            }
                         }
                     }
                 }

client/src/app/site/agenda/components/agenda-list/agenda-list.component.html

@@ -18,7 +18,9 @@
     [filterService]="filterService"
     [columns]="tableColumnDefinition"
     [multiSelect]="isMultiSelect"
+    [restricted]="restrictedColumns"
     [hiddenInMobile]="['info']"
+    [filterProps]="filterProps"
     scrollKey="agenda"
     [(selectedRows)]="selectedRows"
     (dataSourceChange)="onDataSourceChange($event)"

client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts

@@ -6,10 +6,12 @@ import { Title } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { PblColumnDefinition } from '@pebula/ngrid';
 
+import { _ } from 'app/core/translate/translation-marker';
 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 { ColumnRestriction } from 'app/shared/components/list-view-table/list-view-table.component';
 import { DurationService } from 'app/core/ui-services/duration.service';
 import { ItemInfoDialogComponent } from '../item-info-dialog/item-info-dialog.component';
 import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
@@ -20,11 +22,10 @@ import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
 import { PromptService } from 'app/core/ui-services/prompt.service';
 import { PdfDocumentService } from 'app/core/ui-services/pdf-document.service';
 import { StorageService } from 'app/core/core-services/storage.service';
+import { TopicRepositoryService } from 'app/core/repositories/topics/topic-repository.service';
 import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { ViewItem } from '../../models/view-item';
 import { ViewListOfSpeakers } from '../../models/view-list-of-speakers';
-import { _ } from 'app/core/translate/translation-marker';
-import { TopicRepositoryService } from 'app/core/repositories/topics/topic-repository.service';
 import { ViewTopic } from '../../models/view-topic';
 
 /**
@@ -80,7 +81,7 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> impleme
         },
         {
             prop: 'speaker',
-            width: this.singleButtonWidth
+            width: this.badgeButtonWidth
         },
         {
             prop: 'menu',
@@ -88,6 +89,22 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> impleme
         }
     ];
 
+    public restrictedColumns: ColumnRestriction[] = [
+        {
+            columnName: 'menu',
+            permission: 'agenda.can_manage'
+        },
+        {
+            columnName: 'speaker',
+            permission: 'agenda.can_see_list_of_speakers'
+        }
+    ];
+
+    /**
+     * Define extra filter properties
+     */
+    public filterProps = ['itemNumber', 'comment'];
+
     /**
      * The usual constructor for components
      * @param titleService Setting the browser tab title
@@ -322,26 +339,4 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> impleme
             return result;
         }
     }
-
-    /**
-     * Overwrites the dataSource's string filter with a case-insensitive search
-     * in the item number and title
-     *
-     * TODO: Filter predicates will be missed :(
-     */
-    // private setFulltextFilter(): void {
-    //     this.dataSource.filterPredicate = (data, filter) => {
-    //         if (!data) {
-    //             return false;
-    //         }
-    //         filter = filter ? filter.toLowerCase() : '';
-    //         return (
-    //             data.itemNumber.toLowerCase().includes(filter) ||
-    //             data
-    //                 .getListTitle()
-    //                 .toLowerCase()
-    //                 .includes(filter)
-    //         );
-    //     };
-    // }
 }

client/src/app/site/assignments/components/assignment-list/assignment-list.component.html

@@ -24,6 +24,7 @@
     [filterService]="filterService"
     [sortService]="sortService"
     [columns]="tableColumnDefinition"
+    [filterProps]="filterProps"
     [multiSelect]="isMultiSelect"
     scrollKey="assignments"
     [(selectedRows)]="selectedRows"

client/src/app/site/assignments/components/assignment-list/assignment-list.component.ts

@@ -49,6 +49,11 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
         }
     ];
 
+    /**
+     * Define extra filter properties
+     */
+    public filterProps = ['title', 'candidates', 'assignmentRelatedUsers', 'tags', 'candidateAmount'];
+
     /**
      * Constructor.
      *

client/src/app/site/base/list-view-base.ts

@@ -43,6 +43,11 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> extends Bas
      */
     public singleButtonWidth = '40px';
 
+    /**
+     * NGrid column width for single buttons with badge
+     */
+    public badgeButtonWidth = '45px';
+
     /**
      * @param titleService the title service
      * @param translate the translate service

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html

@@ -24,6 +24,8 @@
     [sortService]="sortService"
     [columns]="tableColumnDefinition"
     [multiSelect]="isMultiSelect"
+    [restricted]="restrictedColumns"
+    [filterProps]="filterProps"
     scrollKey="user"
     [(selectedRows)]="selectedRows"
     (dataSourceChange)="onDataSourceChange($event)"

client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts

@@ -1,22 +1,23 @@
 import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
-import { Title } from '@angular/platform-browser';
 import { MatSnackBar, MatDialog } from '@angular/material';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Title } from '@angular/platform-browser';
 
 import { TranslateService } from '@ngx-translate/core';
 import { PblColumnDefinition } from '@pebula/ngrid';
 
-import { ListViewBaseComponent } from '../../../base/list-view-base';
+import { ColumnRestriction } from 'app/shared/components/list-view-table/list-view-table.component';
-import { ViewMediafile } from '../../models/view-mediafile';
+import { ListViewBaseComponent } from 'app/site/base/list-view-base';
 import { MediafileRepositoryService } from 'app/core/repositories/mediafiles/mediafile-repository.service';
 import { MediaManageService } from 'app/core/ui-services/media-manage.service';
-import { PromptService } from 'app/core/ui-services/prompt.service';
 import { MediafileFilterListService } from '../../services/mediafile-filter.service';
 import { MediafilesSortListService } from '../../services/mediafiles-sort-list.service';
-import { ViewportService } from 'app/core/ui-services/viewport.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
+import { PromptService } from 'app/core/ui-services/prompt.service';
 import { StorageService } from 'app/core/core-services/storage.service';
+import { ViewportService } from 'app/core/ui-services/viewport.service';
+import { ViewMediafile } from '../../models/view-mediafile';
 
 /**
  * Lists all the uploaded files.
@@ -95,6 +96,25 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile>
         }
     ];
 
+    /**
+     * Restricted Columns
+     */
+    public restrictedColumns: ColumnRestriction[] = [
+        {
+            columnName: 'indicator',
+            permission: 'mediafiles.can_manage'
+        },
+        {
+            columnName: 'menu',
+            permission: 'mediafiles.can_manage'
+        }
+    ];
+
+    /**
+     * Define extra filter properties
+     */
+    public filterProps = ['title', 'type'];
+
     /**
      * Constructs the component
      *
@@ -301,20 +321,4 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile>
             this.editFile = false;
         }
     }
-
-    /**
-     * Overwrites the dataSource's string filter with a case-insensitive search
-     * in the file name property
-     *
-     * TODO: Filter predicates will be missed :(
-     */
-    // private setFulltextFilter(): void {
-    //     this.dataSource.filterPredicate = (data, filter) => {
-    //         if (!data || !data.title) {
-    //             return false;
-    //         }
-    //         filter = filter ? filter.toLowerCase() : '';
-    //         return data.title.toLowerCase().indexOf(filter) >= 0;
-    //     };
-    // }
 }

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

@@ -48,6 +48,7 @@
         [columns]="tableColumnDefinition"
         [multiSelect]="isMultiSelect"
         [restricted]="restrictedColumns"
+        [filterProps]="filterProps"
         [hiddenInMobile]="['state']"
         scrollKey="motion"
         [(selectedRows)]="selectedRows"

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

@@ -107,7 +107,8 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
             minWidth: 160
         },
         {
-            prop: 'speaker'
+            prop: 'speaker',
+            width: this.badgeButtonWidth
         }
     ];
 
@@ -129,13 +130,23 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
     public categories: ViewCategory[] = [];
     public motionBlocks: ViewMotionBlock[] = [];
 
+    /**
+     * Columns that demand certain permissions
+     */
     public restrictedColumns: ColumnRestriction[] = [
         {
             columnName: 'speaker',
-            permission: 'agenda.can_see'
+            permission: 'agenda.can_see_list_of_speakers'
         }
     ];
 
+    /**
+     * Define extra filter properties
+     *
+     * TODO: repo.getExtendedStateLabel(), repo.getExtendedRecommendationLabel()
+     */
+    public filterProps = ['submitters', 'motion_block', 'title', 'identifier'];
+
     /**
      * List of `TileCategoryInformation`.
      * Necessary to not iterate over the values of the map below.
@@ -394,58 +405,6 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
         );
     }
 
-    /**
-     * Overwrites the dataSource's string filter with a case-insensitive search
-     * in the identifier, title, state, recommendations, submitters, motion blocks and id
-     *
-     * TODO: Does currently not work with virtual scrolling tables. Filter predicates will be missed :(
-     */
-    // private setFulltextFilter(): void {
-    //     this.dataSource.filterPredicate = (data, filter) => {
-    //         if (!data) {
-    //             return false;
-    //         }
-    //         filter = filter ? filter.toLowerCase() : '';
-    //         if (data.submitters.length && data.submitters.find(user => user.full_name.toLowerCase().includes(filter))) {
-    //             return true;
-    //         }
-    //         if (data.motion_block && data.motion_block.title.toLowerCase().includes(filter)) {
-    //             return true;
-    //         }
-    //         if (data.title.toLowerCase().includes(filter)) {
-    //             return true;
-    //         }
-    //         if (data.identifier && data.identifier.toLowerCase().includes(filter)) {
-    //             return true;
-    //         }
-
-    //         if (
-    //             this.getStateLabel(data) &&
-    //             this.getStateLabel(data)
-    //                 .toLocaleLowerCase()
-    //                 .includes(filter)
-    //         ) {
-    //             return true;
-    //         }
-
-    //         if (
-    //             this.getRecommendationLabel(data) &&
-    //             this.getRecommendationLabel(data)
-    //                 .toLocaleLowerCase()
-    //                 .includes(filter)
-    //         ) {
-    //             return true;
-    //         }
-
-    //         const dataid = '' + data.id;
-    //         if (dataid.includes(filter)) {
-    //             return true;
-    //         }
-
-    //         return false;
-    //     };
-    // }
-
     /**
      * This function saves the selected view by changes.
      *
@@ -478,7 +437,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
      * @param ev a MouseEvent.
      */
     public async openEditInfo(motion: ViewMotion): Promise<void> {
-        if (!this.isMultiSelect) {
+        if (!this.isMultiSelect && this.perms.isAllowed('change_metadata')) {
             // The interface holding the current information from motion.
             this.infoDialog = {
                 title: motion.title,

client/src/app/site/users/components/user-list/user-list.component.html

@@ -19,6 +19,7 @@
     [filterService]="filterService"
     [sortService]="sortService"
     [columns]="tableColumnDefinition"
+    [filterProps]="filterProps"
     [multiSelect]="isMultiSelect"
     [hiddenInMobile]="['group']"
     scrollKey="user"
@@ -35,11 +36,11 @@
             matTooltip="{{ getUserTooltip(user) | translate }}"
         ></a>
         <div>
-            <span *ngIf="user.is_active">
+            <span *ngIf="user.is_active !== false">
                 {{ name }}
             </span>
 
-            <span *ngIf="!user.is_active">
+            <span *ngIf="user.is_active === false">
                 <os-icon-container icon="block" swap="true">
                     {{ name }}
                 </os-icon-container>
@@ -96,7 +97,7 @@
             class="checkbox-ripple-padding"
             (change)="setPresent(user)"
             [checked]="user.is_present"
-            [disabled]="isMultiSelect"
+            [disabled]="isMultiSelect || !this.operator.hasPerms('users.can_manage')"
         >
             <span translate>Present</span>
         </mat-checkbox>

client/src/app/site/users/components/user-list/user-list.component.ts

@@ -126,6 +126,11 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         }
     ];
 
+    /**
+     * Define extra filter properties
+     */
+    public filterProps = ['full_name', 'groups', 'structure_level', 'number'];
+
     /**
      * The usual constructor for components
      * @param titleService Serivce for setting the title
@@ -413,20 +418,4 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         viewUser.user.is_present = !viewUser.user.is_present;
         await this.repo.update(viewUser.user, viewUser);
     }
-
-    /**
-     * Overwrites the dataSource's string filter with a case-insensitive search
-     * in the full_name property
-     *
-     * TODO: Filter predicates will be missed :(
-     */
-    // private setFulltextFilter(): void {
-    //     this.dataSource.filterPredicate = (data, filter) => {
-    //         if (!data || !data.full_name) {
-    //             return false;
-    //         }
-    //         filter = filter ? filter.toLowerCase() : '';
-    //         return data.full_name.toLowerCase().indexOf(filter) >= 0;
-    //     };
-    // }
 }