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>
<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>

View File

@ -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>

View File

@ -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
*/

View File

@ -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>

View File

@ -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))">

View File

@ -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>

View File

@ -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)">

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[] {
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);
}
}