Merge pull request #4058 from jsaalfeld/list_dingens

multiple frontend changes on multi-select lists

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

@@ -18,6 +18,7 @@
 </os-head-bar>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+    <!-- selector column -->
     <ng-container matColumnDef="selector">
         <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
         <mat-cell *matCellDef="let item" class="checkbox-cell">
@@ -67,6 +68,19 @@
     </div>
 
     <div *ngIf="isMultiSelect">
+        <button mat-menu-item (click)="toggleMultiSelect()">
+            <mat-icon>library_add</mat-icon>
+            <span translate>Exit multiselect</span>
+        </button>
+        <button mat-menu-item (click)="selectAll()">
+            <mat-icon>done_all</mat-icon>
+            <span translate>Select all</span>
+        </button>
+        <button mat-menu-item (click)="deselectAll()">
+            <mat-icon>clear</mat-icon>
+            <span translate>Deselect all</span>
+        </button>
+        <mat-divider></mat-divider>
         <div *osPerms="'agenda.can_manage'">
             <button mat-menu-item (click)="setClosedSelected(true)">
                 <mat-icon>done</mat-icon>

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

@@ -20,6 +20,7 @@
 </os-head-bar>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+    <!-- slector column -->
     <ng-container matColumnDef="selector">
         <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
         <mat-cell *matCellDef="let assignment" class="checkbox-cell">
@@ -31,6 +32,7 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
         <mat-cell *matCellDef="let assignment">{{ assignment.getTitle() }}</mat-cell>
     </ng-container>
+    <!-- pahse column-->
     <ng-container matColumnDef="phase">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Phase</mat-header-cell>
         <mat-cell *matCellDef="let assignment">
@@ -38,7 +40,20 @@
                 <mat-chip color="primary" selected>{{ assignment.phase }}</mat-chip>
             </mat-chip-list>
         </mat-cell>
+        <button mat-menu-item (click)="toggleMultiSelect()">
+            <mat-icon>library_add</mat-icon>
+            <span translate>Exit multiselect</span>
+        </button>
+        <button mat-menu-item (click)="selectAll()">
+            <mat-icon>done_all</mat-icon>
+            <span translate>Select all</span>
+        </button>
+        <button mat-menu-item (click)="deselectAll()">
+            <mat-icon>clear</mat-icon>
+            <span translate>Deselect all</span>
+        </button>
     </ng-container>
+    <!-- candidates column -->
     <ng-container matColumnDef="candidates">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Candidates</mat-header-cell>
         <mat-cell *matCellDef="let assignment">
@@ -76,6 +91,10 @@
             <mat-icon>library_add</mat-icon>
             <span translate>Exit multiselect</span>
         </button>
+        <button mat-menu-item (click)="selectAll()">
+            <mat-icon>done_all</mat-icon>
+            <span translate>Select all</span>
+        </button>
         <mat-divider></mat-divider>
         <button mat-menu-item class="red-warning-text" *osPerms="'assignment.can_manage'" (click)="deleteSelected()">
             <mat-icon>delete</mat-icon>

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

@@ -113,6 +113,10 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> extends Bas
         this.selectedRows = this.dataSource.data;
     }
 
+    public deselectAll(): void {
+        this.selectedRows = [];
+    }
+
     /**
      * Returns the current state of the multiSelect modus
      */

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

@@ -3,8 +3,7 @@
     [editMode]="editFile"
     [multiSelectMode]="isMultiSelect"
     (mainEvent)="onMainEvent()"
-    (saveEvent)="onSaveEditedFile()"
->
+    (saveEvent)="onSaveEditedFile()">
     <!-- Title -->
     <div class="title-slot">
         <h2 *ngIf="!editFile" translate>Files</h2>
@@ -14,8 +13,7 @@
             *ngIf="editFile"
             [formGroup]="fileEditForm"
             (ngSubmit)="onSaveEditedFile()"
-            (keydown)="keyDownFunction($event)"
-        >
+            (keydown)="keyDownFunction($event)">
             <mat-form-field>
                 <input
                     type="text"
@@ -23,13 +21,12 @@
                     osAutofocus
                     required
                     formControlName="title"
-                    placeholder="{{ 'New file name' | translate}}"
-                />
+                    placeholder="{{ 'New file name' | translate }}"/>
                 <mat-error *ngIf="fileEditForm.invalid" translate>Required</mat-error>
             </mat-form-field>
 
             <mat-form-field>
-                <mat-select formControlName="hidden" placeholder="{{ 'Visibility' | translate}}">
+                <mat-select formControlName="hidden" placeholder="{{ 'Visibility' | translate }}">
                     <mat-option [value]="true"> <span translate>Hidden</span> </mat-option>
                     <mat-option [value]="false"><span translate>Visible</span></mat-option>
                 </mat-select>
@@ -55,9 +52,10 @@
 </os-head-bar>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+    <!-- Selector Column -->
     <ng-container matColumnDef="selector">
         <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
-        <mat-cell *matCellDef="let item" class="checkbox-cell">
+        <mat-cell *matCellDef="let item" class="checkbox-cell" (click)="selectItem(item, $event)">
             <mat-icon>{{ isSelected(item) ? 'check_circle' : '' }}</mat-icon>
         </mat-cell>
     </ng-container>
@@ -65,13 +63,13 @@
     <!-- Filename -->
     <ng-container matColumnDef="title">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let file">{{ file.title }}</mat-cell>
+        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">{{ 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">
+        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
             <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>
@@ -82,15 +80,14 @@
     <!-- indicator -->
     <ng-container matColumnDef="indicator">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Indicator</mat-header-cell>
-        <mat-cell *matCellDef="let file">
+        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
             <!-- check if the file is managed -->
 
             <div
                 *ngIf="getFileSettings(file).length > 0"
                 [matMenuTriggerFor]="singleFileMenu"
                 [matMenuTriggerData]="{ file: file }"
-                [matTooltip]="formatIndicatorTooltip(file)"
-            >
+                [matTooltip]="formatIndicatorTooltip(file)">
                 <mat-icon *ngIf="file.isFont()">text_fields</mat-icon>
                 <mat-icon *ngIf="file.isImage()">insert_photo</mat-icon>
             </div>
@@ -111,7 +108,6 @@
     <mat-row
         *matRowDef="let row; columns: getColumnDefinition()"
         [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
-        (click)="selectItem(row, $event)"
     ></mat-row>
 </mat-table>
 
@@ -172,6 +168,10 @@
             <mat-icon>done_all</mat-icon>
             <span translate>Select all</span>
         </button>
+        <button mat-menu-item (click)="deselectAll()">
+            <mat-icon>clear</mat-icon>
+            <span translate>Deselect all</span>
+        </button>
         <mat-divider></mat-divider>
         <button mat-menu-item *osPerms="'mediafiles.can_manage'" (click)="deleteSelected()">
             <mat-icon>delete</mat-icon>

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

@@ -21,6 +21,7 @@
 </div>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+    <!-- Selector column -->
     <ng-container matColumnDef="selector">
         <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
         <mat-cell *matCellDef="let motion" class="checkbox-cell">
@@ -157,6 +158,14 @@
             <mat-icon>library_add</mat-icon>
             <span translate>Exit multiselect</span>
         </button>
+        <button mat-menu-item (click)="selectAll()">
+            <mat-icon>done_all</mat-icon>
+            <span translate>Select all</span>
+        </button>
+        <button mat-menu-item (click)="deselectAll()">
+            <mat-icon>clear</mat-icon>
+            <span translate>Deselect all</span>
+        </button>
         <div *osPerms="'motions.can_manage'">
             <mat-divider></mat-divider>
             <button mat-menu-item (click)="multiselectWrapper(multiselectService.moveToItem(selectedRows))">

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

@@ -1,16 +1,19 @@
-<os-head-bar [mainButton]="isAllowed('manage')" mainButtonIcon="edit" [nav]="false" [editMode]="editUser"
-    (mainEvent)="setEditMode(!editUser)" (saveEvent)="saveUser()">
+<os-head-bar
+    [mainButton]="isAllowed('manage')"
+    mainButtonIcon="edit"
+    [nav]="false"
+    [editMode]="editUser"
+    (mainEvent)="setEditMode(!editUser)"
+    (saveEvent)="saveUser()"
+>
     <!-- Title -->
     <div class="title-slot">
         <h2 *ngIf="editUser">
-            {{ personalInfoForm.get('title').value }}
-            {{ personalInfoForm.get('first_name').value }}
+            {{ personalInfoForm.get('title').value }} {{ personalInfoForm.get('first_name').value }}
             {{ personalInfoForm.get('last_name').value }}
         </h2>
 
-        <h2 *ngIf="!editUser">
-            {{ user.full_name }}
-        </h2>
+        <h2 *ngIf="!editUser">{{ user.full_name }}</h2>
     </div>
 
     <!-- Menu -->
@@ -33,33 +36,60 @@
 </os-head-bar>
 
 <mat-card class="os-card" *osPerms="'users.can_see_name'">
-    <form [ngClass]="{'mat-form-field-enabled': editUser}" [formGroup]="personalInfoForm" (ngSubmit)="saveUser()" *ngIf="user" (keydown)="onKeyDown($event)">
+    <form
+        [ngClass]="{ 'mat-form-field-enabled': editUser }"
+        [formGroup]="personalInfoForm"
+        (ngSubmit)="saveUser()"
+        *ngIf="user"
+        (keydown)="onKeyDown($event)">
         <!-- <h3 translate>Personal Data</h3> -->
         <div *ngIf="isAllowed('seeName')">
             <!-- Title -->
-            <mat-form-field class="form30 distance force-min-with" *ngIf="user.title || editUser && isAllowed('manage')">
-                <input type="text" matInput osAutofocus placeholder="{{ 'Title' | translate }}" formControlName="title"
-                    [value]="user.title">
+            <mat-form-field
+                class="form30 distance force-min-with"
+                *ngIf="user.title || (editUser && isAllowed('manage'))">
+                <input
+                    type="text"
+                    matInput
+                    osAutofocus
+                    placeholder="{{ 'Title' | translate }}"
+                    formControlName="title"
+                    [value]="user.title"/>
             </mat-form-field>
 
             <!-- First name -->
-            <mat-form-field class="form30 distance force-min-with" *ngIf="user.first_name || editUser && isAllowed('manage')">
-                <input type="text" matInput placeholder="{{ 'Given name' | translate }}" formControlName="first_name"
-                    [value]="user.first_name">
+            <mat-form-field
+                class="form30 distance force-min-with"
+                *ngIf="user.first_name || (editUser && isAllowed('manage'))">
+                <input
+                    type="text"
+                    matInput
+                    placeholder="{{ 'Given name' | translate }}"
+                    formControlName="first_name"
+                    [value]="user.first_name"/>
             </mat-form-field>
 
             <!-- Last name -->
-            <mat-form-field class="form30  force-min-with" *ngIf="user.last_name || editUser && isAllowed('manage')">
-                <input type="text" matInput placeholder="{{ 'Surname' | translate }}" formControlName="last_name"
-                    [value]="user.last_name">
+            <mat-form-field class="form30  force-min-with" *ngIf="user.last_name || (editUser && isAllowed('manage'))">
+                <input
+                    type="text"
+                    matInput
+                    placeholder="{{ 'Surname' | translate }}"
+                    formControlName="last_name"
+                    [value]="user.last_name"/>
             </mat-form-field>
         </div>
 
         <div *ngIf="isAllowed('seePersonal')">
             <!-- E-Mail -->
             <mat-form-field class="form100" *ngIf="user.email || editUser">
-                <input type="email" matInput placeholder="{{ 'Email' | translate }}" name="email" formControlName="email"
-                    [value]="user.email">
+                <input
+                    type="email"
+                    matInput
+                    placeholder="{{ 'Email' | translate }}"
+                    name="email"
+                    formControlName="email"
+                    [value]="user.email"/>
                 <mat-error *ngIf="personalInfoForm.get('email').hasError('email')" translate>
                     Please enter a valid email address
                 </mat-error>
@@ -68,22 +98,32 @@
 
         <div>
             <!-- Strucuture Level -->
-            <mat-form-field class="form70 distance" *ngIf="user.structure_level || editUser && isAllowed('manage')">
-                <input type="text" matInput placeholder="{{ 'Structure level' | translate }}" formControlName="structure_level"
-                    [value]="user.structure_level">
+            <mat-form-field class="form70 distance" *ngIf="user.structure_level || (editUser && isAllowed('manage'))">
+                <input
+                    type="text"
+                    matInput
+                    placeholder="{{ 'Structure level' | translate }}"
+                    formControlName="structure_level"
+                    [value]="user.structure_level"/>
             </mat-form-field>
 
-            <!-- Partizipant Number -->
-            <mat-form-field class="form20 force-min-with" *ngIf="user.participant_number || editUser && isAllowed('manage')">
-                <input type="text" matInput placeholder="{{ 'Participant number' | translate }}" formControlName="number"
-                    [value]="user.participant_number">
+            <!-- Participant Number -->
+            <mat-form-field
+                class="form20 force-min-with"
+                *ngIf="user.participant_number || (editUser && isAllowed('manage'))">
+                <input
+                    type="text"
+                    matInput
+                    placeholder="{{ 'Participant number' | translate }}"
+                    formControlName="number"
+                    [value]="user.participant_number"/>
             </mat-form-field>
         </div>
 
         <div>
             <!-- Groups -->
-            <mat-form-field class="form100" *ngIf="user.groups && user.groups.length > 0 || editUser">
-                <mat-select placeholder="{{ 'Groups'  | translate }}" formControlName="groups_id" multiple>
+            <mat-form-field class="form100" *ngIf="(user.groups && user.groups.length > 0) || editUser">
+                <mat-select placeholder="{{ 'Groups' | translate }}" formControlName="groups_id" multiple>
                     <mat-option *ngFor="let group of groups" [value]="group.id">{{ group }}</mat-option>
                 </mat-select>
             </mat-form-field>
@@ -92,10 +132,18 @@
         <div *ngIf="isAllowed('manage')">
             <!-- Initial Password -->
             <mat-form-field class="form100">
-                <input matInput placeholder="{{ 'Initial password' | translate }}" formControlName="default_password"
-                    [value]="user.default_password">
+                <input
+                    matInput
+                    placeholder="{{ 'Initial password' | translate }}"
+                    formControlName="default_password"
+                    [value]="user.default_password"/>
                 <mat-hint align="end">Generate</mat-hint>
-                <button type="button" mat-button matSuffix mat-icon-button [disabled]="!newUser"
+                <button
+                    type="button"
+                    mat-button
+                    matSuffix
+                    mat-icon-button
+                    [disabled]="!newUser"
                     (click)="generatePassword()">
                     <mat-icon>sync_problem</mat-icon>
                 </button>
@@ -106,45 +154,59 @@
         <div *ngIf="isAllowed('seePersonal')">
             <!-- The HTML Editor -->
             <h4 translate *ngIf="user.about_me || editUser">About me</h4>
-            <editor
-                formControlName='about_me'
-                [init]="tinyMceSettings"
-                *ngIf="editUser"
-            ></editor>
+            <editor formControlName="about_me" [init]="tinyMceSettings" *ngIf="editUser"></editor>
             <div *ngIf="user.about_me && !editUser" [innerHTML]="user.about_me"></div>
         </div>
 
         <div *ngIf="isAllowed('seePersonal')">
             <!-- username -->
             <mat-form-field class="form100" *ngIf="user.username || editUser">
-                <input type="text" matInput placeholder="{{ 'Username' | translate }}" formControlName="username"
-                    [value]="user.username">
+                <input
+                    type="text"
+                    matInput
+                    placeholder="{{ 'Username' | translate }}"
+                    formControlName="username"
+                    [value]="user.username"/>
             </mat-form-field>
         </div>
 
         <div *ngIf="isAllowed('seeExtra')">
             <!-- Comment -->
             <mat-form-field class="form100" *ngIf="user.comment || editUser">
-                <input matInput placeholder="{{ 'Comment' | translate }}" formControlName="comment" [value]="user.comment">
+                <input
+                    matInput
+                    placeholder="{{ 'Comment' | translate }}"
+                    formControlName="comment"
+                    [value]="user.comment"/>
                 <mat-hint translate>Only for internal notes.</mat-hint>
             </mat-form-field>
         </div>
 
         <div *ngIf="isAllowed('seeExtra')">
             <!-- Present? -->
-            <mat-checkbox formControlName="is_present"
-                matTooltip="{{ 'Designates whether this user is in the room.' | translate }}" [value]="user.is_present">
+            <mat-checkbox
+                formControlName="is_present"
+                matTooltip="{{ 'Designates whether this user is in the room.' | translate }}"
+                [value]="user.is_present">
                 <span translate>Is present</span>
             </mat-checkbox>
 
             <!-- Active? -->
-            <mat-checkbox *osPerms="'users.can_see_extra_data'" formControlName="is_active" [value]="user.is_active"
-                matTooltip="{{ 'Designates whether this user should be treated as active. Unselect this instead of deleting the account.' | translate }}">
+            <mat-checkbox
+                *osPerms="'users.can_see_extra_data'"
+                formControlName="is_active"
+                [value]="user.is_active"
+                matTooltip="{{
+                    'Designates whether this user should be treated as active. Unselect this instead of deleting the account.'
+                        | translate
+                }}">
                 <span translate>Is active</span>
             </mat-checkbox>
 
             <!-- Commitee? -->
-            <mat-checkbox formControlName="is_committee" [value]="user.is_committee"
+            <mat-checkbox
+                formControlName="is_committee"
+                [value]="user.is_committee"
                 matTooltip="{{ 'Designates whether this user should be treated as a committee.' | translate }}">
                 <span translate>Is a committee</span>
             </mat-checkbox>

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

@@ -23,9 +23,10 @@
 </div>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+    <!-- Selector column -->
     <ng-container matColumnDef="selector">
         <mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell>
-        <mat-cell *matCellDef="let user" class="checkbox-cell">
+        <mat-cell *matCellDef="let user" (click)="selectItem(user, $event)" class="checkbox-cell">
             <mat-icon>{{ isSelected(user) ? 'check_circle' : '' }}</mat-icon>
         </mat-cell>
     </ng-container>
@@ -33,13 +34,13 @@
     <!-- name column -->
     <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let user">{{ user.full_name }}</mat-cell>
+        <mat-cell *matCellDef="let user" (click)="selectItem(user, $event)">{{ 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 *matCellDef="let user">
+        <mat-cell *matCellDef="let user" (click)="selectItem(user, $event)">
             <div class="groupsCell">
                 <span *ngIf="user.groups.length > 0">
                     <mat-icon>people</mat-icon>
@@ -57,10 +58,11 @@
     <!-- Presence column -->
     <ng-container matColumnDef="presence">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Presence</mat-header-cell>
-        <mat-cell *matCellDef="let user">
+        <mat-cell *matCellDef="let user" class="presentCell">
             <div *ngIf="user.is_active">
-                <mat-icon>check_box</mat-icon>
-                <span translate>Present</span>
+                <mat-checkbox class="checkboxPresent" (click)="setPresent(user)" [checked]="user.is_present">
+                    <span translate>Present</span>
+                </mat-checkbox>
             </div>
         </mat-cell>
     </ng-container>
@@ -68,7 +70,6 @@
     <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()"
     >
     </mat-row>
@@ -103,6 +104,14 @@
             <mat-icon>library_add</mat-icon>
             <span translate>Exit multiselect</span>
         </button>
+        <button mat-menu-item (click)="selectAll()">
+            <mat-icon>done_all</mat-icon>
+            <span translate>Select all</span>
+        </button>
+        <button mat-menu-item (click)="deselectAll()">
+            <mat-icon>clear</mat-icon>
+            <span translate>Deselect all</span>
+        </button>
         <div *osPerms="'users.can_manage'">
             <mat-divider></mat-divider>
             <button mat-menu-item (click)="setGroupSelected(true)">

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

@@ -30,3 +30,12 @@
         }
     }
 }
+
+.presentCell {
+    align-content: left;
+    padding-right: 50px;
+}
+
+.checkboxPresent {
+    margin-left: 15px;
+}

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

@@ -203,6 +203,11 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         }
     }
 
+    /**
+     * returns the column definition
+     *
+     * @returns column definition
+     */
     public getColumnDefinition(): string[] {
         const columns = ['name', 'group', 'presence'];
         if (this.isMultiSelect) {
@@ -210,4 +215,14 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
         }
         return columns;
     }
+
+    /**
+     * Sets the user present
+     *
+     * @param viewUser the viewUser Object
+     */
+    public async setPresent(viewUser: ViewUser): Promise<void> {
+        viewUser.user.is_present = !viewUser.user.is_present;
+        await this.repo.update(viewUser.user, viewUser);
+    }
 }