ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

normalize multiSelect actions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

9
client/src/app/site/base/list-view-base.ts
View File

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

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

@ -78,18 +78,19 @@
<!-- 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" (click)="selectItem(file, $event)"> <mat-cell *matCellDef="let file">
<span *ngIf="file.is_hidden"> <span *ngIf="file.is_hidden">
<mat-icon matTooltip="{{'is hidden' | translate }}">lock</mat-icon> <mat-icon matTooltip="{{ 'is hidden' | translate }}">lock</mat-icon>
&nbsp; &nbsp;
</span> </span>
{{ file.title }}</mat-cell> {{ 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" (click)="selectItem(file, $event)"> <mat-cell *matCellDef="let file">
<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>
@ -100,7 +101,7 @@
<!-- 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" (click)="selectItem(file, $event)"> <mat-cell *matCellDef="let file">
<!-- check if the file is managed --> <!-- check if the file is managed -->
<div <div
@ -119,7 +120,12 @@
<ng-container matColumnDef="menu"> <ng-container matColumnDef="menu">
<mat-header-cell *matHeaderCellDef mat-sort-header>Menu</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Menu</mat-header-cell>
<mat-cell *matCellDef="let file"> <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> <mat-icon>more_vert</mat-icon>
</button> </button>
</mat-cell> </mat-cell>
@ -128,6 +134,7 @@
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
<mat-row <mat-row
*matRowDef="let row; columns: getColumnDefinition()" *matRowDef="let row; columns: getColumnDefinition()"
(click)="selectItem(row, $event)"
[ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''" [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
></mat-row> ></mat-row>
</mat-table> </mat-table>

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

@ -271,7 +271,7 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
*/ */
public getColumnDefinition(): string[] { public getColumnDefinition(): string[] {
let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop; 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); columns = ['projector'].concat(columns);
} }
if (this.isMultiSelect) { if (this.isMultiSelect) {

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

@ -121,11 +121,11 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Anchor column to open separate tab --> <!-- Anchor column to open the separate tab -->
<ng-container matColumnDef="anchor"> <ng-container matColumnDef="anchor">
<mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let motion"> <mat-cell *matCellDef="let motion">
<a [routerLink]="motion.id"></a> <a [routerLink]="motion.id" *ngIf="!isMultiSelect"></a>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
@ -133,7 +133,7 @@
<ng-container matColumnDef="speakers"> <ng-container matColumnDef="speakers">
<mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Speakers</mat-header-cell>
<mat-cell *matCellDef="let motion"> <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 <mat-icon
[matBadge]="motion.agendaSpeakerAmount > 0 ? motion.agendaSpeakerAmount : null" [matBadge]="motion.agendaSpeakerAmount > 0 ? motion.agendaSpeakerAmount : null"
matBadgeColor="accent" matBadgeColor="accent"
@ -147,6 +147,7 @@
<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()"
class="lg" class="lg"
> >

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

@ -231,7 +231,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
*/ */
public getColumnDefinition(): string[] { public getColumnDefinition(): string[] {
let columns = this.vp.isMobile ? this.displayedColumnsMobile : this.displayedColumnsDesktop; 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); columns = ['projector'].concat(columns);
} }
if (this.isMultiSelect) { if (this.isMultiSelect) {

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

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

6
client/src/app/site/users/components/user-list/user-list.component.ts
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. * @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 = { this.infoDialog = {
name: user.username, name: user.username,
groups_id: user.groups_id, groups_id: user.groups_id,