Merge pull request #4404 from MaximilianKrambach/multiSelectLine

normalize multiSelect actions

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

@@ -23,7 +23,7 @@
         <!-- selector column -->
         <ng-container matColumnDef="selector">
             <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
-            <mat-cell (click)="selectItem(item, $event)" *matCellDef="let item" class="checkbox-cell">
+            <mat-cell *matCellDef="let item" class="checkbox-cell">
                 <mat-icon>{{ isSelected(item) ? 'check_circle' : '' }}</mat-icon>
             </mat-cell>
         </ng-container>
@@ -32,7 +32,7 @@
         <ng-container matColumnDef="projector">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Projector</mat-header-cell>
             <mat-cell *matCellDef="let item">
-                <div *ngIf="item.contentObject">
+                <div *ngIf="item.contentObject && !isMultiSelect">
                     <os-projector-button [object]="item.contentObject"></os-projector-button>
                 </div>
             </mat-cell>
@@ -41,8 +41,7 @@
         <!-- title column -->
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Topic</mat-header-cell>
-            <!-- <mat-cell (click)="onTitleColumn(item)" *matCellDef="let item"> -->
-            <mat-cell (click)="selectItem(item, $event)" *matCellDef="let item">
+            <mat-cell *matCellDef="let item">
                 <div [ngStyle]="{ 'margin-left': item.agendaListLevel * 25 + 'px' }">
                     <span *ngIf="item.closed"> <mat-icon class="done-check">check</mat-icon> </span>
                     <span class="table-view-list-title">{{ item.getListTitle() }}</span>
@@ -53,7 +52,7 @@
         <!-- Info column -->
         <ng-container matColumnDef="info">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Info</mat-header-cell>
-            <mat-cell (click)="openEditInfo(item)" *matCellDef="let item">
+            <mat-cell (click)="openEditInfo(item, $event)" *matCellDef="let item">
                 <div class="info-col-items">
                     <div *ngIf="item.verboseType">
                         <mat-icon>visibility</mat-icon>
@@ -75,7 +74,8 @@
         <ng-container matColumnDef="speakers">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
             <mat-cell *matCellDef="let item">
-                <button mat-icon-button (click)="onSpeakerIcon(item)">
+                <button mat-icon-button (click)="onSpeakerIcon(item, $event)"
+                [disabled]="isMultiSelect">
                     <mat-icon
                         [matBadge]="item.waitingSpeakerAmount > 0 ? item.waitingSpeakerAmount : null"
                         matBadgeColor="accent"
@@ -92,8 +92,10 @@
             <mat-cell *matCellDef="let item">
                 <button
                     mat-icon-button
+                    [disabled]="isMultiSelect"
                     *osPerms="'agenda.can_manage'"
                     [matMenuTriggerFor]="singleItemMenu"
+                    (click)="$event.stopPropagation()"
                     [matMenuTriggerData]="{ item: item }"
                 >
                     <mat-icon>more_vert</mat-icon>
@@ -105,6 +107,7 @@
         <mat-row
             class="lg"
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
+            (click)="selectItem(row, $event)"
             *matRowDef="let row; columns: getColumnDefinition()"
         ></mat-row>
     </mat-table>

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

@@ -147,10 +147,11 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> i
      *
      * @param item The view item that was clicked
      */
-    public openEditInfo(item: ViewItem): void {
-        if (!this.canManage) {
+    public openEditInfo(item: ViewItem, event: MouseEvent): void {
+        if (this.isMultiSelect || !this.canManage) {
             return;
         }
+        event.stopPropagation();
         const dialogRef = this.dialog.open(ItemInfoDialogComponent, {
             width: '400px',
             data: item,
@@ -191,7 +192,8 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> i
      *
      * @param item indicates the row that was clicked on
      */
-    public onSpeakerIcon(item: ViewItem): void {
+    public onSpeakerIcon(item: ViewItem, event: MouseEvent): void {
+        event.stopPropagation();
         this.router.navigate([`${item.id}/speakers`], { relativeTo: this.route });
     }
 
@@ -259,7 +261,7 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> i
      */
     public getColumnDefinition(): string[] {
         let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop;
-        if (this.operator.hasPerms('core.can_manage_projector')) {
+        if (this.operator.hasPerms('core.can_manage_projector') && !this.isMultiSelect) {
             columns = ['projector'].concat(columns);
         }
         if (this.isMultiSelect) {

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

@@ -145,16 +145,17 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
      * @param event The Mouse event
      */
     public selectItem(row: V, event: MouseEvent): void {
+        if (this.isMultiSelect) {
             event.stopPropagation();
-        if (!this._multiSelectMode) {
-            this.singleSelectAction(row);
-        } else {
             const idx = this.selectedRows.indexOf(row);
             if (idx < 0) {
                 this.selectedRows.push(row);
             } else {
                 this.selectedRows.splice(idx, 1);
             }
+        } else {
+            event.stopPropagation();
+            this.singleSelectAction(row);
         }
     }
 

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

@@ -78,18 +78,19 @@
         <!-- Filename -->
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
+            <mat-cell *matCellDef="let file">
                 <span *ngIf="file.is_hidden">
-                    <mat-icon matTooltip="{{'is hidden' | translate }}">lock</mat-icon>
+                    <mat-icon matTooltip="{{ 'is hidden' | translate }}">lock</mat-icon>
                     &nbsp;
                 </span>
-                {{ file.title }}</mat-cell>
+                {{ file.title }}</mat-cell
+            >
         </ng-container>
 
         <!-- Info -->
         <ng-container matColumnDef="info">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
+            <mat-cell *matCellDef="let file">
                 <div class="file-info-cell">
                     <span> <mat-icon [inline]="true">insert_drive_file</mat-icon> {{ file.type }} </span>
                     <span> <mat-icon [inline]="true">data_usage</mat-icon> {{ file.size }} </span>
@@ -100,7 +101,7 @@
         <!-- indicator -->
         <ng-container matColumnDef="indicator">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Indicator</mat-header-cell>
-            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
+            <mat-cell *matCellDef="let file">
                 <!-- check if the file is managed -->
 
                 <div
@@ -119,7 +120,12 @@
         <ng-container matColumnDef="menu">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Menu</mat-header-cell>
             <mat-cell *matCellDef="let file">
-                <button mat-icon-button [matMenuTriggerFor]="singleFileMenu" [matMenuTriggerData]="{ file: file }">
+                <button
+                    mat-icon-button
+                    [matMenuTriggerFor]="singleFileMenu"
+                    [matMenuTriggerData]="{ file: file }"
+                    [disabled]="isMultiSelect"
+                >
                     <mat-icon>more_vert</mat-icon>
                 </button>
             </mat-cell>
@@ -128,6 +134,7 @@
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row
             *matRowDef="let row; columns: getColumnDefinition()"
+            (click)="selectItem(row, $event)"
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
         ></mat-row>
     </mat-table>

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

@@ -271,7 +271,7 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
      */
     public getColumnDefinition(): string[] {
         let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop;
-        if (this.operator.hasPerms('core.can_manage_projector')) {
+        if (this.operator.hasPerms('core.can_manage_projector') && !this.isMultiSelect) {
             columns = ['projector'].concat(columns);
         }
         if (this.isMultiSelect) {

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

@@ -121,11 +121,11 @@
             </mat-cell>
         </ng-container>
 
-        <!-- Anchor column to open separate tab -->
+        <!-- Anchor column to open the separate tab -->
         <ng-container matColumnDef="anchor">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let motion">
-                <a [routerLink]="motion.id"></a>
+                <a [routerLink]="motion.id" *ngIf="!isMultiSelect"></a>
             </mat-cell>
         </ng-container>
 
@@ -133,7 +133,7 @@
         <ng-container matColumnDef="speakers">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
             <mat-cell *matCellDef="let motion">
-                <button mat-icon-button (click)="onSpeakerIcon(motion, $event)">
+                <button mat-icon-button (click)="onSpeakerIcon(motion, $event)" [disabled]="isMultiSelect">
                     <mat-icon
                         [matBadge]="motion.agendaSpeakerAmount > 0 ? motion.agendaSpeakerAmount : null"
                         matBadgeColor="accent"
@@ -147,6 +147,7 @@
         <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
         <mat-row
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
+            (click)="selectItem(row, $event)"
             *matRowDef="let row; columns: getColumnDefinition()"
             class="lg"
         >

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

@@ -231,7 +231,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
      */
     public getColumnDefinition(): string[] {
         let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop;
-        if (this.operator.hasPerms('core.can_manage_projector')) {
+        if (this.operator.hasPerms('core.can_manage_projector') && !this.isMultiSelect) {
             columns = ['projector'].concat(columns);
         }
         if (this.isMultiSelect) {

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

@@ -27,7 +27,7 @@
         <!-- Selector column -->
         <ng-container matColumnDef="selector">
             <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
-            <mat-cell *matCellDef="let user" (click)="selectItem(user, $event)">
+            <mat-cell *matCellDef="let user">
                 <mat-icon>{{ isSelected(user) ? 'check_circle' : '' }}</mat-icon>
             </mat-cell>
         </ng-container>
@@ -43,13 +43,13 @@
         <!-- name column -->
         <ng-container matColumnDef="name">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-            <mat-cell *matCellDef="let user" (click)="selectItem(user, $event)">{{ user.full_name }}</mat-cell>
+            <mat-cell *matCellDef="let user">{{ user.full_name }}</mat-cell>
         </ng-container>
 
         <!-- prefix column -->
         <ng-container matColumnDef="group">
             <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-            <mat-cell (click)="openEditInfo(user)" *matCellDef="let user">
+            <mat-cell (click)="openEditInfo(user, $event)" *matCellDef="let user">
                 <div class="groupsCell">
                     <span *ngIf="user.groups && user.groups.length">
                         <mat-icon>people</mat-icon>
@@ -68,7 +68,7 @@
         <ng-container matColumnDef="anchor">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let user">
-                <a [routerLink]="user.id"></a>
+                <a [routerLink]="user.id" *ngIf="!isMultiSelect"></a>
             </mat-cell>
         </ng-container>
 
@@ -77,7 +77,12 @@
             <mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>
             <mat-cell *matCellDef="let user" class="presentCell">
                 <div *ngIf="user.is_active">
-                    <mat-checkbox class="checkboxPresent" (click)="setPresent(user)" [checked]="user.is_present">
+                    <mat-checkbox
+                        class="checkboxPresent"
+                        (click)="setPresent(user)"
+                        [checked]="user.is_present"
+                        [disabled]="isMultiSelect"
+                    >
                         <span translate>Present</span>
                     </mat-checkbox>
                 </div>
@@ -88,6 +93,7 @@
         <mat-row
             [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
             *matRowDef="let row; columns: getColumnDefinition()"
+            (click)="selectItem(row, $event)"
         >
         </mat-row>
     </mat-table>

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

@@ -191,7 +191,11 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
      *
      * @param user is an instance of ViewUser. This is the given user, who will be modified.
      */
-    public openEditInfo(user: ViewUser): void {
+    public openEditInfo(user: ViewUser, ev: MouseEvent): void {
+        if (this.isMultiSelect) {
+            return;
+        }
+        ev.stopPropagation();
         this.infoDialog = {
             name: user.username,
             groups_id: user.groups_id,
@@ -374,7 +378,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
      */
     public getColumnDefinition(): string[] {
         let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop;
-        if (this.operator.hasPerms('core.can_manage_projector')) {
+        if (this.operator.hasPerms('core.can_manage_projector') && !this.isMultiSelect) {
             columns = ['projector'].concat(columns);
         }
         if (this.operator.hasPerms('users.can_manage')) {