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

Merge pull request #4815 from tsiegleauq/multiselect-stack-calls

Browse Source 
Enhance Choice service.
This commit is contained in:
Emanuel Schütze 2019-07-02 13:08:53 +02:00 committed by GitHub
commit bf4f93c502
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/core/ui-services/choice.service.ts
View File

@ -42,7 +42,7 @@ export class ChoiceService {
clearChoice?: string
): Promise<ChoiceAnswer> {
const dialogRef = this.dialog.open(ChoiceDialogComponent, {
minWidth: '250px',
maxWidth: '90vw',
maxHeight: '90vh',
disableClose: true,
data: {

103
client/src/app/shared/components/choice-dialog/choice-dialog.component.html
View File

@ -1,53 +1,56 @@
<div class="scrollmenu-outer">
<h2 mat-dialog-title>{{ data.title | translate }}</h2>
<div class="scrollmenu">
<mat-radio-group
#radio
name="choice"
*ngIf="!data.multiSelect && data.choices"
class="choice-radio-group"
[(ngModel)]="selectedChoice"
>
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id">
<!-- Title -->
<h2 mat-dialog-title>{{ data.title | translate }}</h2>
<!-- Content -->
<mat-dialog-content>
<mat-radio-group
#radio
name="choice"
*ngIf="!data.multiSelect && data.choices"
class="choice-radio-group"
[(ngModel)]="selectedChoice"
>
<mat-radio-button class="choice-button" *ngFor="let choice of data.choices" [value]="choice.id">
{{ getChoiceTitle(choice) | translate }}
</mat-radio-button>
<mat-divider *ngIf="data.clearChoice"></mat-divider>
<mat-radio-button *ngIf="data.clearChoice" [value]="null">
{{ data.clearChoice | translate }}
</mat-radio-button>
</mat-radio-group>
<mat-list *ngIf="data.multiSelect && data.choices">
<mat-list-item *ngFor="let choice of data.choices">
<mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)">
{{ getChoiceTitle(choice) | translate }}
</mat-radio-button>
</mat-checkbox>
</mat-list-item>
</mat-list>
</mat-dialog-content>
<mat-divider *ngIf="data.clearChoice"></mat-divider>
<mat-radio-button *ngIf="data.clearChoice" [value]="null">
{{ data.clearChoice | translate }}
</mat-radio-button>
</mat-radio-group>
<mat-list *ngIf="data.multiSelect && data.choices">
<mat-list-item *ngFor="let choice of data.choices">
<mat-checkbox [checked]="isChosen(choice)" (change)="toggleChoice(choice)">
{{ getChoiceTitle(choice) | translate }}
</mat-checkbox>
</mat-list-item>
</mat-list>
<!-- Actions -->
<mat-dialog-actions>
<div *ngIf="data.actionButtons">
<button
*ngFor="let button of data.actionButtons"
mat-button
(click)="closeDialog(true, button)"
[disabled]="isSelectionEmpty"
>
<span>{{ button | translate }}</span>
</button>
</div>
<mat-dialog-actions>
<div *ngIf="data.actionButtons">
<button
*ngFor="let button of data.actionButtons"
mat-button
(click)="closeDialog(true, button)"
[disabled]="isSelectionEmpty"
>
<span>{{ button | translate }}</span>
</button>
</div>
<div *ngIf="!data.actionButtons">
<button
*ngIf="!data.multiSelect || data.choices.length"
mat-button
(click)="closeDialog(true)"
[disabled]="isSelectionEmpty"
>
<span>OK</span>
</button>
</div>
<button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
</mat-dialog-actions>
</div>
<div *ngIf="!data.actionButtons">
<button
*ngIf="!data.multiSelect || data.choices.length"
mat-button
(click)="closeDialog(true)"
[disabled]="isSelectionEmpty"
>
<span>OK</span>
</button>
</div>
<button mat-button (click)="closeDialog(false)"><span translate>Cancel</span></button>
</mat-dialog-actions>

18
client/src/app/shared/components/choice-dialog/choice-dialog.component.scss
View File

@ -1,21 +1,17 @@
mat-radio-group {
.mat-dialog-content {
display: block;
}
.mat-radio-group {
display: inline-flex;
flex-direction: column;
mat-radio-button {
.mat-radio-button {
margin: 5px;
}
}
.scrollmenu {
padding: 5px;
display: block;
}
.scrollmenu-outer {
max-height: inherit;
}
mat-divider {
.mat-divider {
margin-top: 10px;
margin-bottom: 10px;
}

8
client/src/app/shared/components/choice-dialog/choice-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Displayable } from 'app/site/base/displayable';
@ -61,11 +61,13 @@ export type ChoiceAnswer = undefined | { action?: string; items: number | number
@Component({
selector: 'os-choice-dialog',
templateUrl: './choice-dialog.component.html',
styleUrls: ['./choice-dialog.component.scss']
styleUrls: ['./choice-dialog.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChoiceDialogComponent {
/**
* One number selected, if this is a single select choice
* User over template
*/
public selectedChoice: number;
@ -78,6 +80,8 @@ export class ChoiceDialogComponent {
public get isSelectionEmpty(): boolean {
if (this.data.multiSelect) {
return this.selectedMultiChoices.length === 0;
} else if (!this.data.choices) {
return false;
} else {
return this.selectedChoice === undefined;
}