Merge pull request #4752 from GabrielInTheWorld/quick-dialog

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

View File

@ -1,40 +1,11 @@
<os-head-bar <os-head-bar
[mainButton]="canUploadFiles" [mainButton]="canUploadFiles"
[editMode]="editFile"
[multiSelectMode]="isMultiSelect" [multiSelectMode]="isMultiSelect"
(mainEvent)="onMainEvent()" (mainEvent)="onMainEvent()"
(saveEvent)="onSaveEditedFile()"
> >
<!-- Title --> <!-- Title -->
<div class="title-slot"> <div class="title-slot">
<h2 *ngIf="!editFile" translate>Files</h2> <h2 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>
</div> </div>
<!-- Menu --> <!-- Menu -->
@ -214,3 +185,47 @@
</button> </button>
</div> </div>
</mat-menu> </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>

View File

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

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

View File

@ -1,26 +1,9 @@
<os-head-bar [mainButton]="true" [nav]="false" [editMode]="editGroup" <os-head-bar [mainButton]="true" [nav]="false"
(mainEvent)="setEditMode(!editGroup)" (saveEvent)="saveGroup()"> (mainEvent)="setEditMode(!editGroup)">
<!-- Title --> <!-- Title -->
<div class="title-slot"> <div class="title-slot">
<h2 *ngIf="!editGroup && !newGroup" translate>Groups</h2> <h2 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>
</div> </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> </os-head-bar>
<div class="hint-text on-transition-fade"> <div class="hint-text on-transition-fade">
@ -67,3 +50,35 @@
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </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>

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 { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { MatTableDataSource, MatSnackBar } from '@angular/material'; import { MatTableDataSource, MatSnackBar, MatDialog } from '@angular/material';
import { FormGroup, FormControl, Validators } from '@angular/forms'; import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { GroupRepositoryService, AppPermissions } from 'app/core/repositories/users/group-repository.service'; import { GroupRepositoryService, AppPermissions } from 'app/core/repositories/users/group-repository.service';
import { ViewGroup } from '../../models/view-group'; import { ViewGroup } from '../../models/view-group';
@ -47,6 +47,12 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
@ViewChild('groupForm') @ViewChild('groupForm')
public groupForm: FormGroup; public groupForm: FormGroup;
/**
* Reference to the template
*/
@ViewChild('groupEditDialog')
public groupEditDialog: TemplateRef<string>;
public get appPermissions(): AppPermissions[] { public get appPermissions(): AppPermissions[] {
return this.repo.appPermissions; return this.repo.appPermissions;
} }
@ -64,8 +70,10 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
titleService: Title, titleService: Title,
protected translate: TranslateService, // protected required for ng-translate-extract protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar, matSnackBar: MatSnackBar,
private dialog: MatDialog,
private repo: GroupRepositoryService, private repo: GroupRepositoryService,
private promptService: PromptService private promptService: PromptService,
private fb: FormBuilder
) { ) {
super(titleService, translate, matSnackBar); super(titleService, translate, matSnackBar);
} }
@ -79,19 +87,34 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
this.editGroup = editMode; this.editGroup = editMode;
this.newGroup = newGroup; this.newGroup = newGroup;
if (!editMode) { const name = this.selectedGroup ? this.selectedGroup.name : '';
this.cancelEditing();
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. * Creates or updates a group.
*/ */
public saveGroup(): void { public saveGroup(value: { name: string }): void {
if (this.editGroup && this.newGroup) { if (this.editGroup && this.newGroup) {
this.submitNewGroup(); this.repo.create(value as Group).then(() => this.cancelEditing(), this.raiseError);
} else if (this.editGroup && !this.newGroup) { } 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 { public selectGroup(group: ViewGroup): void {
this.selectedGroup = group; this.selectedGroup = group;
this.setEditMode(true, false); 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 * Cancel the editing
*/ */
public cancelEditing(): void { public cancelEditing(): void {
this.dialog.closeAll();
this.newGroup = false; this.newGroup = false;
this.editGroup = false; this.editGroup = false;
this.groupForm.reset(); this.selectedGroup = null;
} }
/** /**
@ -214,7 +210,6 @@ export class GroupListComponent extends BaseViewComponent implements OnInit {
*/ */
public ngOnInit(): void { public ngOnInit(): void {
super.setTitle('Groups'); super.setTitle('Groups');
this.groupForm = new FormGroup({ name: new FormControl('', Validators.required) });
this.repo.getViewModelListObservable().subscribe(newViewGroups => { this.repo.getViewModelListObservable().subscribe(newViewGroups => {
if (newViewGroups) { if (newViewGroups) {
this.groups = newViewGroups; this.groups = newViewGroups;