adding "shift-enter"-Submit for TagList

This commit is contained in:
Jochen Saalfeld 2019-01-07 14:44:42 +01:00
parent 6db5c90180
commit 29188888f8
No known key found for this signature in database
GPG Key ID: 8ACD4E8264B67DF4
6 changed files with 93 additions and 9 deletions

View File

@ -7,7 +7,8 @@
<mat-card class="os-card" *ngIf="blockToCreate"> <mat-card class="os-card" *ngIf="blockToCreate">
<mat-card-title translate>Create new motion block</mat-card-title> <mat-card-title translate>Create new motion block</mat-card-title>
<mat-card-content> <mat-card-content>
<form [formGroup]="createBlockForm"> <form [formGroup]="createBlockForm"
(keydown)="onKeyDown($event)">
<!-- Title --> <!-- Title -->
<p> <p>
<mat-form-field> <mat-form-field>
@ -50,7 +51,7 @@
<!-- Save and Cancel buttons --> <!-- Save and Cancel buttons -->
<mat-card-actions> <mat-card-actions>
<button mat-button (click)="onSaveNewButton()"><span translate>Save</span></button> <button mat-button (click)="onSaveNewButton()"><span translate>Save</span></button>
<button mat-button (click)="blockToCreate = null"><span translate>Cancel</span></button> <button mat-button (click)="onCancel()"><span translate>Cancel</span></button>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>

View File

@ -169,4 +169,26 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
// set a form control as "touched" to trigger potential error messages // set a form control as "touched" to trigger potential error messages
this.createBlockForm.get('title').markAsTouched(); this.createBlockForm.get('title').markAsTouched();
} }
/**
* clicking Shift and Enter will save automatically
* clicking Escape will cancel the process
*
* @param event has the code
*/
public onKeyDown(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
this.onSaveNewButton();
}
if (event.key === 'Escape') {
this.onCancel();
}
}
/**
* Cancels the current form action
*/
public onCancel(): void {
this.blockToCreate = null;
}
} }

View File

@ -73,16 +73,26 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
} }
/** /**
* Event on Key Down in update or create form. Do not provide the viewSection for the create form. * Event on Key Down in update or create form.
*
* @param event the keyboard event
* @param the current view in scope
*/ */
public keyDownFunction(event: KeyboardEvent, viewSection?: ViewMotionCommentSection): void { public keyDownFunction(event: KeyboardEvent, viewSection?: ViewMotionCommentSection): void {
if (event.key === "Escape") { if (event.key === 'Enter' && event.shiftKey) {
if (viewSection) { if (viewSection) {
this.onSaveButton(viewSection); this.onSaveButton(viewSection);
} else { } else {
this.create(); this.create();
} }
} }
if (event.key === 'Escape') {
if (viewSection) {
this.editId = null;
} else {
this.commentSectionToCreate = null;
}
}
} }
/** /**

View File

@ -16,7 +16,8 @@
<mat-card *ngIf="statuteParagraphToCreate"> <mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title> <mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content> <mat-card-content>
<form [formGroup]="createForm"> <form [formGroup]="createForm"
(keydown)="onKeyDownCreate($event)">
<p> <p>
<mat-form-field> <mat-form-field>
<input formControlName="title" matInput placeholder="{{'Title' | translate}}" required> <input formControlName="title" matInput placeholder="{{'Title' | translate}}" required>
@ -39,7 +40,7 @@
<button mat-button (click)="create()"> <button mat-button (click)="create()">
<span translate>Save</span> <span translate>Save</span>
</button> </button>
<button mat-button (click)="statuteParagraphToCreate = null"> <button mat-button (click)="onCancel()">
<span translate>Cancel</span> <span translate>Cancel</span>
</button> </button>
</mat-card-actions> </mat-card-actions>
@ -53,7 +54,9 @@
{{ statuteParagraph.title }} {{ statuteParagraph.title }}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id"> <form [formGroup]="updateForm"
*ngIf="editId === statuteParagraph.id"
(keydown)="onKeyDownUpdate($event)">
<span translate>Edit statute paragraph:</span> <span translate>Edit statute paragraph:</span>
<p> <p>
<mat-form-field> <mat-form-field>
@ -85,7 +88,7 @@
mat-icon-button> mat-icon-button>
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
<button *ngIf="editId === statuteParagraph.id" mat-button class="on-transition-fade" (click)="editId = null" <button *ngIf="editId === statuteParagraph.id" mat-button class="on-transition-fade" (click)="onCancelUpdate()"
mat-icon-button> mat-icon-button>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>

View File

@ -155,4 +155,49 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
public sortStatuteParagraphs(): void { public sortStatuteParagraphs(): void {
console.log('Not yet implemented. Depends on other Features'); console.log('Not yet implemented. Depends on other Features');
} }
/**
* clicking Shift and Enter will save automatically
* clicking Escape will cancel the process
*
* @param event has the code
*/
public onKeyDownCreate(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
this.create();
}
if (event.key === 'Escape') {
this.onCancelCreate();
}
}
/**
* Cancels the current form action
*/
public onCancelCreate(): void {
this.statuteParagraphToCreate = null;
}
/**
* clicking Shift and Enter will save automatically
* clicking Escape will cancel the process
*
* @param event has the code
*/
public onKeyDownUpdate(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
const myParagraph = this.statuteParagraphs.find(x => x.id === this.editId);
this.onSaveButton(myParagraph);
}
if (event.key === 'Escape') {
this.onCancelUpdate();
}
}
/**
* Cancels the current form action
*/
public onCancelUpdate(): void {
this.editId = null;
}
} }

View File

@ -138,7 +138,10 @@ export class TagListComponent extends ListViewBaseComponent<ViewTag> implements
* @param event * @param event
*/ */
public keyDownFunction(event: KeyboardEvent): void { public keyDownFunction(event: KeyboardEvent): void {
if (event.key === "Enter") { if (event.key === 'Enter' && event.shiftKey) {
this.submitNewTag();
}
if (event.key === "Escape") {
this.cancelEditing(); this.cancelEditing();
} }
} }