normalize multiSelect actions

This commit is contained in:
Maximilian Krambach 2019-02-26 11:06:42 +01:00
parent 798af8c5ab
commit 5cedf6eb58
9 changed files with 55 additions and 31 deletions

View File

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

View File

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

View File

@ -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 {
event.stopPropagation();
if (!this._multiSelectMode) {
this.singleSelectAction(row);
} else {
if (this.isMultiSelect) {
event.stopPropagation();
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);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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