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

Merge pull request #4752 from GabrielInTheWorld/quick-dialog

Browse Source 
Adds dialogs to create/edit
This commit is contained in:
Emanuel Schütze 2019-06-05 12:53:21 +02:00 committed by GitHub
commit 9dcc11f909
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 147 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +1,11 @@
<os-head-bar
[mainButton]="canUploadFiles"
[editMode]="editFile"
[multiSelectMode]="isMultiSelect"
(mainEvent)="onMainEvent()"
(saveEvent)="onSaveEditedFile()"
>
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="!editFile" translate>Files</h2>
<form
class="edit-file-form"
*ngIf="editFile"
[formGroup]="fileEditForm"
(ngSubmit)="onSaveEditedFile()"
(keydown)="keyDownFunction($event)"
>
<mat-form-field>
<input
type="text"
matInput
osAutofocus
required
formControlName="title"
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-option [value]="true"> <span translate>Hidden</span> </mat-option>
<mat-option [value]="false"><span translate>Visible</span></mat-option>
</mat-select>
</mat-form-field>
</form>
<h2 translate>Files</h2>
</div>
<!-- Menu -->
@ -214,3 +185,47 @@
</button>
</div>
</mat-menu>
<ng-template #fileEditDialog>
<h1 mat-dialog-title>{{ 'Edit details for' | translate }}</h1>
<div class="os-form-card-mobile" mat-dialog-content>
<form
class="edit-file-form"
[formGroup]="fileEditForm"
(keydown)="keyDownFunction($event)"
>
<mat-form-field>
<input
type="text"
matInput
osAutofocus
required
formControlName="title"
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-option [value]="true"> <span translate>Hidden</span> </mat-option>
<mat-option [value]="false"><span translate>Visible</span></mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>
<button
type="submit"
mat-button
[disabled]="!fileEditForm.valid"
color="primary"
(click)="onSaveEditedFile(fileEditForm.value)"
>
<span translate>Save</span>
</button>
<button type="button" mat-button [mat-dialog-close]="null">
<span translate>Cancel</span>
</button>
</div>
</ng-template>

6
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
View File

@ -33,12 +33,6 @@
white-space: pre-line !important;
}
.edit-file-form {
mat-form-field + mat-form-field {
margin: 1em;
}
}
// duplicate. Put into own file
.file-info-cell {
display: grid;

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

@ -1,8 +1,8 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { MatSnackBar } from '@angular/material';
import { MatSnackBar, MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
@ -78,6 +78,12 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
@ViewChild('fileEditForm')
public fileEditForm: FormGroup;
/**
* Reference to the template
*/
@ViewChild('fileEditDialog')
public fileEditDialog: TemplateRef<string>;
/**
* Constructs the component
*
@ -107,7 +113,9 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
public vp: ViewportService,
public filterService: MediafileFilterListService,
public sortService: MediafilesSortListService,
private operator: OperatorService
private operator: OperatorService,
private dialog: MatDialog,
private fb: FormBuilder
) {
super(titleService, translate, matSnackBar, repo, route, storage, filterService, sortService);
@ -123,11 +131,6 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
super.setTitle('Files');
this.initTable();
this.fileEditForm = new FormGroup({
title: new FormControl('', Validators.required),
hidden: new FormControl()
});
// Observe the logo actions
this.mediaManage.getLogoActions().subscribe(action => {
this.logoActions = action;
@ -161,24 +164,31 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
public onEditFile(file: ViewMediafile): void {
this.fileToEdit = file;
this.editFile = true;
this.fileEditForm.setValue({ title: this.fileToEdit.title, hidden: this.fileToEdit.hidden });
this.fileEditForm = this.fb.group({
title: [file.title, Validators.required],
hidden: [file.hidden]
});
const dialogRef = this.dialog.open(this.fileEditDialog, {
width: '400px',
maxWidth: '90vw',
maxHeight: '90vh',
disableClose: true
});
dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => {
if (event.key === 'Enter' && event.shiftKey && this.fileEditForm.valid) {
this.onSaveEditedFile(this.fileEditForm.value);
}
});
}
/**
* Click on the save button in edit mode
*/
public onSaveEditedFile(): void {
if (!this.fileEditForm.value || !this.fileEditForm.valid) {
return;
}
const updateData = new Mediafile({
title: this.fileEditForm.value.title,
hidden: this.fileEditForm.value.hidden
});
this.repo.update(updateData, this.fileToEdit).then(() => {
this.editFile = false;
public onSaveEditedFile(value: { title: string; hidden: any }): void {
this.repo.update(value, this.fileToEdit).then(() => {
this.dialog.closeAll();
}, this.raiseError);
}

55
client/src/app/site/users/components/group-list/group-list.component.html
View File

@ -1,26 +1,9 @@
<os-head-bar [mainButton]="true" [nav]="false" [editMode]="editGroup"
(mainEvent)="setEditMode(!editGroup)" (saveEvent)="saveGroup()">
<os-head-bar [mainButton]="true" [nav]="false"
(mainEvent)="setEditMode(!editGroup)">
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="!editGroup && !newGroup" translate>Groups</h2>
<form *ngIf="editGroup" [formGroup]="groupForm" (ngSubmit)="saveGroup()" (keydown)="keyDownFunction($event)">
<mat-form-field>
<input type="text" matInput osAutofocus required formControlName="name"
placeholder="{{ 'New group name' | translate}}">
<mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
</mat-form-field>
</form>
<h2 translate>Groups</h2>
</div>
<!-- remove button button -->
<div class="extra-controls-slot on-transition-fade">
<button *ngIf="editGroup && !newGroup" type="button" mat-button (click)="deleteSelectedGroup()">
<mat-icon>delete</mat-icon>
<span translate>Delete</span>
</button>
</div>
</os-head-bar>
<div class="hint-text on-transition-fade">
@ -67,3 +50,35 @@
</div>
</mat-expansion-panel>
</mat-accordion>
<ng-template #groupEditDialog>
<h1 mat-dialog-title>
<span>{{ 'New group name' | translate }}</span>
</h1>
<div class="os-form-card-mobile" mat-dialog-content>
<form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
<mat-form-field>
<input type="text" matInput osAutofocus required formControlName="name"
placeholder="{{ 'New group name' | translate}}">
<mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>
<button
type="submit"
mat-button
[disabled]="!groupForm.valid"
color="primary"
(click)="saveGroup(groupForm.value)"
>
<span translate>Save</span>
</button>
<button type="button" mat-button (click)="cancelEditing()">
<span translate>Cancel</span>
</button>
<button *ngIf="selectedGroup" type="button" mat-icon-button color="warn" (click)="deleteSelectedGroup()">
<mat-icon>delete</mat-icon>
</button>
</div>
</ng-template>

73
client/src/app/site/users/components/group-list/group-list.component.ts
View File

@ -1,8 +1,8 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { MatTableDataSource, MatSnackBar } from '@angular/material';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableDataSource, MatSnackBar, MatDialog } from '@angular/material';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { GroupRepositoryService, AppPermissions } from 'app/core/repositories/users/group-repository.service';
import { ViewGroup } from '../../models/view-group';
@ -47,6 +47,12 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
@ViewChild('groupForm')
public groupForm: FormGroup;
/**
* Reference to the template
*/
@ViewChild('groupEditDialog')
public groupEditDialog: TemplateRef<string>;
public get appPermissions(): AppPermissions[] {
return this.repo.appPermissions;
}
@ -64,8 +70,10 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
titleService: Title,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
private dialog: MatDialog,
private repo: GroupRepositoryService,
private promptService: PromptService
private promptService: PromptService,
private fb: FormBuilder
) {
super(titleService, translate, matSnackBar);
}
@ -79,19 +87,34 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
this.editGroup = editMode;
this.newGroup = newGroup;
if (!editMode) {
this.cancelEditing();
const name = this.selectedGroup ? this.selectedGroup.name : '';
this.groupForm = this.fb.group({
name: [name, Validators.required]
});
const dialogRef = this.dialog.open(this.groupEditDialog, {
width: '400px',
maxWidth: '90vw',
maxHeight: '90vh',
disableClose: true
});
dialogRef.keydownEvents().subscribe((event: KeyboardEvent) => {
if (event.key === 'Enter' && event.shiftKey && this.groupForm.valid) {
this.saveGroup(this.groupForm.value);
}
});
}
/**
* Creates or updates a group.
*/
public saveGroup(): void {
public saveGroup(value: { name: string }): void {
if (this.editGroup && this.newGroup) {
this.submitNewGroup();
this.repo.create(value as Group).then(() => this.cancelEditing(), this.raiseError);
} else if (this.editGroup && !this.newGroup) {
this.submitEditedGroup();
this.repo.update(value, this.selectedGroup).then(() => this.cancelEditing(), this.raiseError);
}
}
@ -101,34 +124,6 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
public selectGroup(group: ViewGroup): void {
this.selectedGroup = group;
this.setEditMode(true, false);
this.groupForm.setValue({ name: this.selectedGroup.name });
}
/**
* Saves a newly created group.
*/
public submitNewGroup(): void {
if (!this.groupForm.value || !this.groupForm.valid) {
return;
}
this.repo.create(this.groupForm.value as Group).then(() => {
this.groupForm.reset();
this.cancelEditing();
}, this.raiseError);
}
/**
* Saves an edited group.
*/
public submitEditedGroup(): void {
if (!this.groupForm.value || !this.groupForm.valid) {
return;
}
const updateData = new Group({ name: this.groupForm.value.name });
this.repo.update(updateData, this.selectedGroup).then(() => {
this.cancelEditing();
}, this.raiseError);
}
/**
@ -146,9 +141,10 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
* Cancel the editing
*/
public cancelEditing(): void {
this.dialog.closeAll();
this.newGroup = false;
this.editGroup = false;
this.groupForm.reset();
this.selectedGroup = null;
}
/**
@ -214,7 +210,6 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
*/
public ngOnInit(): void {
super.setTitle('Groups');
this.groupForm = new FormGroup({ name: new FormControl('', Validators.required) });
this.repo.getViewModelListObservable().subscribe(newViewGroups => {
if (newViewGroups) {
this.groups = newViewGroups;