Merge pull request #4058 from jsaalfeld/list_dingens

multiple frontend changes on multi-select lists
This commit is contained in:
Jochen Saalfeld 2018-12-13 11:40:10 +01:00 committed by GitHub
commit 12ce434db5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 206 additions and 65 deletions

View File

@ -18,6 +18,7 @@
</os-head-bar> </os-head-bar>
<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort> <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
<!-- selector column -->
<ng-container matColumnDef="selector"> <ng-container matColumnDef="selector">
<mat-header-cell *matHeaderCellDef mat-sort-header class="checkbox-cell"></mat-header-cell> <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">
@ -67,6 +68,19 @@
</div> </div>
<div *ngIf="isMultiSelect"> <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'"> <div *osPerms="'agenda.can_manage'">
<button mat-menu-item (click)="setClosedSelected(true)"> <button mat-menu-item (click)="setClosedSelected(true)">
<mat-icon>done</mat-icon> <mat-icon>done</mat-icon>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -203,6 +203,11 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
} }
} }
/**
* returns the column definition
*
* @returns column definition
*/
public getColumnDefinition(): string[] { public getColumnDefinition(): string[] {
const columns = ['name', 'group', 'presence']; const columns = ['name', 'group', 'presence'];
if (this.isMultiSelect) { if (this.isMultiSelect) {
@ -210,4 +215,14 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
} }
return columns; 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);
}
} }