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

Merge pull request #4888 from jsangmeister/dialogs-everywhere

Browse Source 
Replaced multiple inline forms with dialogs
This commit is contained in:
Sean 2019-08-06 15:53:35 +02:00 committed by GitHub
commit f25a8aefb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 367 additions and 528 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
AUTHORS
View File

@ -30,3 +30,4 @@ Authors of OpenSlides in chronological order of first contribution:
Jochen Saalfeld <jochen.saalfeld@intevation.de>
Fadi Abbud <fmfn13@hotmail.com>
Gabriel Meyer <meyergabriel@live.de>
Joshua Sangmeister <joshua.sangmeister@gmail.com>

5
client/package.json
View File

@ -24,7 +24,8 @@
"po2json-tempfix": "./node_modules/.bin/po2json -f mf src/assets/i18n/de.po /dev/stdout | sed -f sed_replacements > src/assets/i18n/de.json && ./node_modules/.bin/po2json -f mf src/assets/i18n/cs.po /dev/stdout | sed -f sed_replacements > src/assets/i18n/cs.json",
"prettify-check": "prettier --config ./.prettierrc --list-different \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\"",
"prettify-write": "prettier --config ./.prettierrc --write \"src/{app,environments}/**/*{.ts,.js,.json,.css,.scss}\"",
"cleanup": "npm run lint-write; npm run prettify-write"
"cleanup": "npm run lint-write; npm run prettify-write",
"cleanup-win": "npm run lint-write & npm run prettify-write"
},
"dependencies": {
"@angular/animations": "^8.0.3",
@ -90,7 +91,7 @@
"karma-jasmine-html-reporter": "^1.4.0",
"npm-license-crawler": "^0.2.1",
"npm-run-all": "^4.1.5",
"prettier": "^1.18.0",
"prettier": "^1.18.2",
"protractor": "^5.4.2",
"resize-observer-polyfill": "^1.5.1",
"source-map-explorer": "^2.0.1",

2
client/src/app/shared/components/agenda-content-object-form/agenda-content-object-form.component.html
View File

@ -1,9 +1,11 @@
<ng-container *osPerms="'agenda.can_manage'">
<ng-container *ngIf="showForm">
<div [formGroup]="form">
<p>
<mat-checkbox formControlName="agenda_create">
<span translate>Add to agenda</span>
</mat-checkbox>
</p>
</div>
<ng-container *ngIf="!!checkbox.value">

64
client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
View File

@ -3,39 +3,6 @@
<div class="title-slot"><h2 translate>Motion blocks</h2></div>
</os-head-bar>
<!-- Creating a new motion block -->
<mat-card class="os-card" *ngIf="isCreatingNewBlock">
<mat-card-title translate>New motion block</mat-card-title>
<mat-card-content>
<form [formGroup]="createBlockForm" (keydown)="onKeyDown($event)">
<!-- Title -->
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-error *ngIf="createBlockForm.get('title').hasError('required')" translate>
A title is required
</mat-error>
</mat-form-field>
</p>
<!-- Internal -->
<p>
<mat-checkbox formControlName="internal"><span translate>Internal</span></mat-checkbox>
</p>
<os-agenda-content-object-form [form]="createBlockForm"></os-agenda-content-object-form>
</form>
</mat-card-content>
<!-- Save and Cancel buttons -->
<mat-card-actions>
<button mat-button [disabled]="!createBlockForm.valid" (click)="onSaveNewButton()">
<span translate>Save</span>
</button>
<button mat-button (click)="onCancel()"><span translate>Cancel</span></button>
</mat-card-actions>
</mat-card>
<mat-card class="os-card">
<os-list-view-table
class="block-list"
@ -67,3 +34,34 @@
</div>
</os-list-view-table>
</mat-card>
<!-- Template for new motion block dialog -->
<ng-template #newMotionBlockDialog>
<h1 mat-dialog-title>
<span translate>New motion block</span>
</h1>
<form [formGroup]="createBlockForm" (keydown)="onKeyDown($event)">
<div mat-dialog-content>
<!-- Title -->
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-error *ngIf="createBlockForm.get('title').hasError('required')" translate>
A title is required
</mat-error>
</mat-form-field>
<!-- Internal -->
<p>
<mat-checkbox formControlName="internal"><span translate>Internal</span></mat-checkbox>
</p>
<os-agenda-content-object-form [form]="createBlockForm"></os-agenda-content-object-form>
</div>
</form>
<div mat-dialog-actions>
<button mat-button [disabled]="!createBlockForm.valid" [mat-dialog-close]="true">
<span translate>Save</span>
</button>
<button mat-button [mat-dialog-close]="false"><span translate>Cancel</span></button>
</div>
</ng-template>

10
client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.scss
View File

@ -8,6 +8,12 @@
}
}
.mat-form-field {
width: 50%;
.mat-dialog-container {
.mat-dialog-title {
margin: 0;
}
.mat-form-field {
width: 100%;
}
}

51
client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
@ -12,6 +13,7 @@ import { StorageService } from 'app/core/core-services/storage.service';
import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service';
import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service';
import { MotionBlock } from 'app/shared/models/motions/motion-block';
import { infoDialogSettings } from 'app/shared/utils/dialog-settings';
import { ViewItem } from 'app/site/agenda/models/view-item';
import { BaseListViewComponent } from 'app/site/base/base-list-view';
import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block';
@ -27,16 +29,14 @@ import { MotionBlockSortService } from 'app/site/motions/services/motion-block-s
encapsulation: ViewEncapsulation.None
})
export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBlock> implements OnInit {
@ViewChild('newMotionBlockDialog', { static: true })
private newMotionBlockDialog: TemplateRef<string>;
/**
* Holds the create form
*/
public createBlockForm: FormGroup;
/**
* Flag, if the creation panel is open
*/
public isCreatingNewBlock = false;
/**
* Holds the agenda items to select the parent item
*/
@ -95,6 +95,7 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
private formBuilder: FormBuilder,
private itemRepo: ItemRepositoryService,
private operator: OperatorService,
private dialog: MatDialog,
public sortService: MotionBlockSortService
) {
super(titleService, translate, matSnackBar, storage);
@ -129,43 +130,38 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
/**
* Helper function reset the form and set the default values
*/
public resetForm(): void {
private resetForm(): void {
this.createBlockForm.reset();
this.createBlockForm.get('agenda_type').setValue(this.defaultVisibility);
}
/**
* Click handler for the plus button
* Click handler for the plus button.
* Opens the dialog for motion block creation.
*/
public onPlusButton(): void {
if (!this.isCreatingNewBlock) {
this.resetForm();
this.isCreatingNewBlock = true;
const dialogRef = this.dialog.open(this.newMotionBlockDialog, infoDialogSettings);
dialogRef.afterClosed().subscribe(res => {
if (res) {
this.save();
}
});
}
/**
* Click handler for the save button.
* Sends the block to create to the repository and resets the form.
*/
public async onSaveNewButton(): Promise<void> {
private save(): void {
if (this.createBlockForm.valid) {
const block = this.createBlockForm.value;
if (!block.agenda_parent_id) {
delete block.agenda_parent_id;
}
try {
await this.repo.create(block);
this.repo.create(block).catch(this.raiseError);
this.resetForm();
this.isCreatingNewBlock = false;
} catch (e) {
this.raiseError(e);
}
}
// set a form control as "touched" to trigger potential error messages
this.createBlockForm.get('title').markAsTouched();
}
/**
* clicking Shift and Enter will save automatically
@ -175,17 +171,12 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
*/
public onKeyDown(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
this.onSaveNewButton();
this.save();
this.dialog.closeAll();
}
if (event.key === 'Escape') {
this.onCancel();
this.resetForm();
this.dialog.closeAll();
}
}
/**
* Cancels the current form action
*/
public onCancel(): void {
this.isCreatingNewBlock = false;
}
}

131
client/src/app/site/motions/modules/motion-comment-section/components/motion-comment-section-list/motion-comment-section-list.component.html
View File

@ -1,4 +1,4 @@
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="onPlusButton()">
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="openDialog()">
<!-- Title -->
<div class="title-slot">
<h2 translate>Comment fields</h2>
@ -13,53 +13,9 @@
</os-head-bar>
<div class="head-spacer"></div>
<mat-card *ngIf="commentSectionToCreate">
<mat-card-title translate>New comment field</mat-card-title>
<mat-card-content>
<form [formGroup]="createForm" (keydown)="keyDownFunction($event)">
<p>
<mat-form-field>
<input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
<mat-error *ngIf="!createForm.controls.name.valid">
<span translate>Required</span>
</mat-error>
</mat-form-field>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="this.createForm.get('read_groups_id')"
[multiple]="true"
listname="Groups with read permissions"
[InputListValues]="this.groups"
></os-search-value-selector>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="this.createForm.get('write_groups_id')"
[multiple]="true"
listname="Groups with write permissions"
[InputListValues]="this.groups"
></os-search-value-selector>
</p>
</form>
</mat-card-content>
<mat-card-actions>
<button [disabled]="createForm.invalid" mat-button (click)="create()">
<span translate>Create</span>
</button>
<button mat-button (click)="commentSectionToCreate = null">
<span translate>Cancel</span>
</button>
</mat-card-actions>
</mat-card>
<mat-accordion class="os-card">
<mat-expansion-panel
*ngFor="let section of this.commentSections"
(opened)="openId = section.id"
(closed)="panelClosed(section)"
[expanded]="openId === section.id"
multiple="false"
>
<mat-expansion-panel-header>
@ -87,36 +43,6 @@
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<form [formGroup]="updateForm" *ngIf="editId === section.id" (keydown)="keyDownFunction($event, section)">
<span translate>Edit comment field:</span>
<p>
<mat-form-field>
<input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
<mat-error *ngIf="!updateForm.controls.name.valid">
<span translate>Required</span>
</mat-error>
</mat-form-field>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="this.updateForm.get('read_groups_id')"
[multiple]="true"
listname="Groups with read permissions"
[InputListValues]="this.groups"
></os-search-value-selector>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="this.updateForm.get('write_groups_id')"
[multiple]="true"
listname="Groups with write permissions"
[InputListValues]="this.groups"
></os-search-value-selector>
</p>
</form>
<ng-container *ngIf="editId !== section.id">
<h3 translate>Name</h3>
<div class="spacer-left">{{ section.name }}</div>
<h3 translate>Groups with read permissions</h3>
@ -129,17 +55,10 @@
<li>{{ group.getTitle() }}</li>
</ul>
<div class="spacer-left" *ngIf="section.write_groups.length === 0" translate>No groups selected</div>
</ng-container>
<mat-action-row>
<button *ngIf="editId !== section.id" mat-button (click)="onEditButton(section)" mat-icon-button>
<button mat-button (click)="openDialog(section)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="editId === section.id" mat-button (click)="editId = null" mat-icon-button>
<mat-icon>cancel</mat-icon>
</button>
<button *ngIf="editId === section.id" [disabled]="updateForm.invalid" mat-button (click)="onSaveButton(section)" mat-icon-button>
<mat-icon>save</mat-icon>
</button>
<button mat-button (click)="onDeleteButton(section)" mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
@ -153,3 +72,49 @@
<span translate>Sort</span>
</button>
</mat-menu>
<!-- Template for motion comment dialog -->
<ng-template #motionCommentDialog>
<h1 mat-dialog-title>
<span *ngIf="currentComment" translate>Edit comment field</span>
<span *ngIf="!currentComment" translate>New comment field</span>
</h1>
<div class="os-form-card-mobile" mat-dialog-content>
<form [formGroup]="commentFieldForm" (keydown)="onKeyDown($event)">
<p>
<mat-form-field>
<input formControlName="name" matInput placeholder="{{ 'Name' | translate }}" required />
<mat-error *ngIf="!commentFieldForm.controls.name.valid">
<span translate>Required</span>
</mat-error>
</mat-form-field>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="commentFieldForm.get('read_groups_id')"
[multiple]="true"
listname="Groups with read permissions"
[InputListValues]="groups"
></os-search-value-selector>
</p>
<p>
<os-search-value-selector
ngDefaultControl
[formControl]="commentFieldForm.get('write_groups_id')"
[multiple]="true"
listname="Groups with write permissions"
[InputListValues]="groups"
></os-search-value-selector>
</p>
</form>
</div>
<div mat-dialog-actions>
<button [disabled]="commentFieldForm.invalid" mat-button [mat-dialog-close]="true">
<span translate>Save</span>
</button>
<button mat-button [mat-dialog-close]="false">
<span translate>Cancel</span>
</button>
</div>
</ng-template>

117
client/src/app/site/motions/modules/motion-comment-section/components/motion-comment-section-list/motion-comment-section-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
@ -10,6 +11,7 @@ import { MotionCommentSectionRepositoryService } from 'app/core/repositories/mot
import { GroupRepositoryService } from 'app/core/repositories/users/group-repository.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { MotionCommentSection } from 'app/shared/models/motions/motion-comment-section';
import { infoDialogSettings } from 'app/shared/utils/dialog-settings';
import { BaseViewComponent } from 'app/site/base/base-view';
import { ViewMotionCommentSection } from 'app/site/motions/models/view-motion-comment-section';
import { ViewGroup } from 'app/site/users/models/view-group';
@ -23,7 +25,10 @@ import { ViewGroup } from 'app/site/users/models/view-group';
styleUrls: ['./motion-comment-section-list.component.scss']
})
export class MotionCommentSectionListComponent extends BaseViewComponent implements OnInit {
public commentSectionToCreate: MotionCommentSection | null;
@ViewChild('motionCommentDialog', { static: true })
private motionCommentDialog: TemplateRef<string>;
public currentComment: ViewMotionCommentSection | null;
/**
* Source of the Data
@ -31,14 +36,9 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
public commentSections: ViewMotionCommentSection[] = [];
/**
* The current focussed formgroup
* formgroup for editing and creating of comments
*/
public updateForm: FormGroup;
public createForm: FormGroup;
public openId: number | null;
public editId: number | null;
public commentFieldForm: FormGroup;
public groups: BehaviorSubject<ViewGroup[]>;
@ -59,6 +59,7 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
private repo: MotionCommentSectionRepositoryService,
private formBuilder: FormBuilder,
private promptService: PromptService,
private dialog: MatDialog,
private groupRepo: GroupRepositoryService
) {
super(titleService, translate, matSnackBar);
@ -68,8 +69,7 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
read_groups_id: [[]],
write_groups_id: [[]]
};
this.createForm = this.formBuilder.group(form);
this.updateForm = this.formBuilder.group(form);
this.commentFieldForm = this.formBuilder.group(form);
}
/**
@ -82,78 +82,54 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
}
/**
* Event on Key Down in update or create form.
* Event on Key Down in form.
*
* @param event the keyboard event
* @param the current view in scope
*/
public keyDownFunction(event: KeyboardEvent, viewSection?: ViewMotionCommentSection): void {
public onKeyDown(event: KeyboardEvent, viewSection?: ViewMotionCommentSection): void {
if (event.key === 'Enter' && event.shiftKey) {
if (viewSection) {
this.onSaveButton(viewSection);
} else {
this.create();
}
this.save();
this.dialog.closeAll();
}
if (event.key === 'Escape') {
if (viewSection) {
this.editId = null;
} else {
this.commentSectionToCreate = null;
}
this.dialog.closeAll();
}
}
/**
* Opens the create form.
* Opens the create dialog.
*/
public onPlusButton(): void {
if (!this.commentSectionToCreate) {
this.commentSectionToCreate = new MotionCommentSection();
this.createForm.setValue({
name: '',
read_groups_id: [],
write_groups_id: []
public openDialog(commentSection?: ViewMotionCommentSection): void {
this.currentComment = commentSection;
this.commentFieldForm.reset({
name: commentSection ? commentSection.name : '',
read_groups_id: commentSection ? commentSection.read_groups_id : [],
write_groups_id: commentSection ? commentSection.write_groups_id : []
});
const dialogRef = this.dialog.open(this.motionCommentDialog, infoDialogSettings);
dialogRef.afterClosed().subscribe(res => {
if (res) {
this.save();
}
});
}
}
/**
* Creates the comment section from the create form.
* saves the current data, either updating an existing comment or creating a new one.
*/
public create(): void {
if (this.createForm.valid) {
this.commentSectionToCreate.patchValues(this.createForm.value as MotionCommentSection);
private save(): void {
if (this.commentFieldForm.valid) {
// eiher update or create
if (this.currentComment) {
this.repo
.create(this.commentSectionToCreate)
.then(() => (this.commentSectionToCreate = null), this.raiseError);
.update(this.commentFieldForm.value as Partial<MotionCommentSection>, this.currentComment)
.catch(this.raiseError);
} else {
const comment = new MotionCommentSection(this.commentFieldForm.value);
this.repo.create(comment).catch(this.raiseError);
}
}
/**
* Executed on edit button
* @param viewSection
*/
public onEditButton(viewSection: ViewMotionCommentSection): void {
this.editId = viewSection.id;
this.updateForm.setValue({
name: viewSection.name,
read_groups_id: viewSection.read_groups_id,
write_groups_id: viewSection.write_groups_id
});
}
/**
* Saves the comment section
*
* @param viewSection The section to save
*/
public onSaveButton(viewSection: ViewMotionCommentSection): void {
if (this.updateForm.valid) {
this.repo.update(this.updateForm.value as Partial<MotionCommentSection>, viewSection).then(() => {
this.openId = this.editId = null;
}, this.raiseError);
this.commentFieldForm.reset();
}
}
@ -165,18 +141,7 @@ export class MotionCommentSectionListComponent extends BaseViewComponent impleme
const title = this.translate.instant('Are you sure you want to delete this comment field?');
const content = viewSection.name;
if (await this.promptService.open(title, content)) {
this.repo.delete(viewSection).then(() => (this.openId = this.editId = null), this.raiseError);
}
}
/**
* Is executed when a mat-extension-panel is closed
* @param viewSection the section in the panel
*/
public panelClosed(viewSection: ViewMotionCommentSection): void {
this.openId = null;
if (this.editId) {
this.onSaveButton(viewSection);
this.repo.delete(viewSection).catch(this.raiseError);
}
}
}

107
client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
View File

@ -1,4 +1,4 @@
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="onPlusButton()">
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="openDialog()">
<!-- Title -->
<div class="title-slot">
<h2 translate>Statute</h2>
@ -12,42 +12,10 @@
</div>
</os-head-bar>
<mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content>
<form [formGroup]="createForm" (keydown)="onKeyDownCreate($event)">
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!createForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4 translate>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="create()">
<span translate>Save</span>
</button>
<button mat-button (click)="onCancelCreate()">
<span translate>Cancel</span>
</button>
</mat-card-actions>
</mat-card>
<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
<mat-accordion class="os-card">
<mat-expansion-panel
*cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)"
[expanded]="openId === statuteParagraph.id"
multiple="false"
>
<mat-expansion-panel-header>
@ -55,51 +23,17 @@
{{ statuteParagraph.title }}
</mat-panel-title>
</mat-expansion-panel-header>
<form [formGroup]="updateForm" *ngIf="editId === statuteParagraph.id" (keydown)="onKeyDownUpdate($event)">
<span translate>Edit statute paragraph:</span>
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!updateForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4 translate>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
<ng-container *ngIf="editId !== statuteParagraph.id">
<mat-card>
<mat-card-title>{{ statuteParagraph.title }}</mat-card-title>
<mat-card-content>
<div [innerHTML]="statuteParagraph.text"></div>
</mat-card-content>
</mat-card>
</ng-container>
<mat-action-row>
<button
*ngIf="editId !== statuteParagraph.id"
mat-button
(click)="onEditButton(statuteParagraph)"
mat-icon-button
>
<button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
(click)="onSaveButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>save</mat-icon>
</button>
<button mat-button (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
<button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
<mat-icon>delete</mat-icon>
</button>
</mat-action-row>
@ -123,3 +57,36 @@
<span translate>Import</span><span>&nbsp;...</span>
</button>
</mat-menu>
<!-- Template for statute paragraph dialog -->
<ng-template #statuteParagraphDialog>
<h1 mat-dialog-title>
<span *ngIf="currentStatuteParagraph" translate>Edit statute paragraph</span>
<span *ngIf="!currentStatuteParagraph" translate>New statute paragraph</span>
</h1>
<div class="os-form-card-mobile" mat-dialog-content>
<form [formGroup]="statuteParagraphForm" (keydown)="onKeyDown($event)">
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!statuteParagraphForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4 translate>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
</div>
<div mat-dialog-actions>
<button mat-button [mat-dialog-close]="true" [disabled]="!statuteParagraphForm.valid">
<span translate>Save</span>
</button>
<button mat-button [mat-dialog-close]="false">
<span translate>Cancel</span>
</button>
</div>
</ng-template>

135
client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
@ -8,6 +9,7 @@ import { TranslateService } from '@ngx-translate/core';
import { StatuteParagraphRepositoryService } from 'app/core/repositories/motions/statute-paragraph-repository.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { StatuteParagraph } from 'app/shared/models/motions/statute-paragraph';
import { largeDialogSettings } from 'app/shared/utils/dialog-settings';
import { BaseViewComponent } from 'app/site/base/base-view';
import { ViewStatuteParagraph } from 'app/site/motions/models/view-statute-paragraph';
import { StatuteCsvExportService } from 'app/site/motions/services/statute-csv-export.service';
@ -21,7 +23,10 @@ import { StatuteCsvExportService } from 'app/site/motions/services/statute-csv-e
styleUrls: ['./statute-paragraph-list.component.scss']
})
export class StatuteParagraphListComponent extends BaseViewComponent implements OnInit {
public statuteParagraphToCreate: StatuteParagraph | null;
@ViewChild('statuteParagraphDialog', { static: true })
private statuteParagraphDialog: TemplateRef<string>;
private currentStatuteParagraph: ViewStatuteParagraph | null;
/**
* Source of the Data
@ -29,14 +34,9 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
public statuteParagraphs: ViewStatuteParagraph[] = [];
/**
* The current focussed formgroup
* Formgroup for creating and updating of statute paragraphs
*/
public updateForm: FormGroup;
public createForm: FormGroup;
public openId: number | null;
public editId: number | null;
public statuteParagraphForm: FormGroup;
/**
* The usual component constructor. Initializes the forms
@ -56,6 +56,7 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
private repo: StatuteParagraphRepositoryService,
private formBuilder: FormBuilder,
private promptService: PromptService,
private dialog: MatDialog,
private csvExportService: StatuteCsvExportService
) {
super(titleService, translate, matSnackBar);
@ -64,8 +65,7 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
title: ['', Validators.required],
text: ['', Validators.required]
};
this.createForm = this.formBuilder.group(form);
this.updateForm = this.formBuilder.group(form);
this.statuteParagraphForm = this.formBuilder.group(form);
}
/**
@ -81,53 +81,40 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
}
/**
* Add a new Section.
* Open the modal dialog
*/
public onPlusButton(): void {
if (!this.statuteParagraphToCreate) {
this.createForm.reset();
this.createForm.setValue({
title: '',
text: ''
public openDialog(paragraph?: ViewStatuteParagraph): void {
this.currentStatuteParagraph = paragraph;
this.statuteParagraphForm.reset();
if (paragraph) {
this.statuteParagraphForm.setValue({
title: paragraph.title,
text: paragraph.text
});
this.statuteParagraphToCreate = new StatuteParagraph();
}
const dialogRef = this.dialog.open(this.statuteParagraphDialog, largeDialogSettings);
dialogRef.afterClosed().subscribe(res => {
if (res) {
this.save();
}
/**
* Handler when clicking on create to create a new statute paragraph
*/
public create(): void {
if (this.createForm.valid) {
this.statuteParagraphToCreate.patchValues(this.createForm.value as StatuteParagraph);
this.repo.create(this.statuteParagraphToCreate).then(() => {
this.statuteParagraphToCreate = null;
}, this.raiseError);
}
}
/**
* Executed on edit button
* @param viewStatuteParagraph
*/
public onEditButton(viewStatuteParagraph: ViewStatuteParagraph): void {
this.editId = viewStatuteParagraph.id;
this.updateForm.setValue({
title: viewStatuteParagraph.title,
text: viewStatuteParagraph.text
});
}
/**
* Saves the statute paragraph
* @param viewStatuteParagraph The statute paragraph to save
* creates a new statute paragraph or updates the current one
*/
public onSaveButton(viewStatuteParagraph: ViewStatuteParagraph): void {
if (this.updateForm.valid) {
this.repo.update(this.updateForm.value as Partial<StatuteParagraph>, viewStatuteParagraph).then(() => {
this.openId = this.editId = null;
}, this.raiseError);
private save(): void {
if (this.statuteParagraphForm.valid) {
// eiher update or create
if (this.currentStatuteParagraph) {
this.repo
.update(this.statuteParagraphForm.value as Partial<StatuteParagraph>, this.currentStatuteParagraph)
.catch(this.raiseError);
} else {
const paragraph = new StatuteParagraph(this.statuteParagraphForm.value);
this.repo.create(paragraph).catch(this.raiseError);
}
this.statuteParagraphForm.reset();
}
}
@ -139,18 +126,7 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
const title = this.translate.instant('Are you sure you want to delete this statute paragraph?');
const content = viewStatuteParagraph.title;
if (await this.promptService.open(title, content)) {
this.repo.delete(viewStatuteParagraph).then(() => (this.openId = this.editId = null), this.raiseError);
}
}
/**
* Is executed when a mat-extension-panel is closed
* @param viewStatuteParagraph the statute paragraph in the panel
*/
public panelClosed(viewStatuteParagraph: ViewStatuteParagraph): void {
this.openId = null;
if (this.editId) {
this.onSaveButton(viewStatuteParagraph);
this.repo.delete(viewStatuteParagraph).catch(this.raiseError);
}
}
@ -167,45 +143,16 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
*
* @param event has the code
*/
public onKeyDownCreate(event: KeyboardEvent): void {
public onKeyDown(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
this.create();
this.save();
this.dialog.closeAll();
}
if (event.key === 'Escape') {
this.onCancelCreate();
this.dialog.closeAll();
}
}
/**
* 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;
}
/**
* Triggers a csv export of the statute paragraphs
*/

69
client/src/app/site/tags/components/tag-list/tag-list.component.html
View File

@ -1,37 +1,10 @@
<os-head-bar
[mainButton]="true"
[nav]="true"
[editMode]="editTag"
[isSaveButtonEnabled]="tagForm.valid"
(mainEvent)="setEditMode(!editTag)"
(saveEvent)="saveTag()"
(mainEvent)="openTagDialog()"
[multiSelectMode]="isMultiSelect"
>
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="!editTag && !newTag" translate>Tags</h2>
<form *ngIf="editTag" [formGroup]="tagForm" (keydown)="keyDownFunction($event)">
<mat-form-field>
<input
type="text"
matInput
osAutofocus
required
formControlName="name"
placeholder="{{ 'New tag name' | translate }}"
/>
<mat-error *ngIf="tagForm.invalid" translate>Required</mat-error>
</mat-form-field>
</form>
</div>
<!-- remove button -->
<div class="extra-controls-slot">
<button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()">
<mat-icon>delete</mat-icon>
<span translate>Delete</span>
</button>
</div>
<div class="title-slot"><h2 translate>Tags</h2></div>
</os-head-bar>
<os-list-view-table
@ -42,9 +15,45 @@
(dataSourceChange)="onDataSourceChange($event)"
>
<!-- Name column -->
<div *pblNgridCellDef="'name'; value as name; row as tag" class="cell-slot fill clickable" (click)="selectTag(tag)">
<div *pblNgridCellDef="'name'; value as name" class="cell-slot fill">
<div>
{{ name }}
</div>
</div>
<!-- edit column -->
<div *pblNgridCellDef="'edit'; row as tag" class="cell-slot fill">
<button mat-icon-button (click)="openTagDialog(tag)">
<mat-icon>edit</mat-icon>
</button>
</div>
<!-- delete column -->
<div *pblNgridCellDef="'delete'; row as tag" class="cell-slot fill">
<button mat-icon-button color="warn" (click)="onDeleteButton(tag)">
<mat-icon>delete</mat-icon>
</button>
</div>
</os-list-view-table>
<!-- Template for dialog for quick editing -->
<ng-template #tagDialog>
<h1 mat-dialog-title>
<span *ngIf="currentTag" translate>Edit tag</span>
<span *ngIf="!currentTag" translate>New tag</span>
</h1>
<div class="os-form-card-mobile" mat-dialog-content>
<form [formGroup]="tagForm" (keydown)="onKeyDown($event)">
<mat-form-field>
<input required type="text" matInput formControlName="name" placeholder="{{ 'Name' | translate }}">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>
<button type="submit" mat-button [mat-dialog-close]="true" color="primary">
<span translate>Save</span>
</button>
<button type="button" mat-button [mat-dialog-close]="false">
<span translate>Cancel</span>
</button>
</div>
</ng-template>

127
client/src/app/site/tags/components/tag-list/tag-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser';
@ -9,11 +10,12 @@ import { PblColumnDefinition } from '@pebula/ngrid';
import { TagRepositoryService } from 'app/core/repositories/tags/tag-repository.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { Tag } from 'app/shared/models/core/tag';
import { infoDialogSettings } from 'app/shared/utils/dialog-settings';
import { BaseListViewComponent } from 'app/site/base/base-list-view';
import { ViewTag } from '../../models/view-tag';
/**
* Listview for the complete lsit of available Tags
* Listview for the complete list of available Tags
* ### Usage:
* ```html
* <os-tag-list></os-tag-list>
@ -25,12 +27,17 @@ import { ViewTag } from '../../models/view-tag';
styleUrls: ['./tag-list.component.scss']
})
export class TagListComponent extends BaseListViewComponent<ViewTag> implements OnInit {
public editTag = false;
public newTag = false;
public selectedTag: ViewTag;
@ViewChild('tagDialog', { static: true })
private tagDialog: TemplateRef<string>;
@ViewChild('tagForm', { static: true })
public tagForm: FormGroup;
private tagForm: FormGroup = this.formBuilder.group({
name: ['', [Validators.required]]
});
/**
* Holds the tag that's currently being edited, or null.
*/
public currentTag: ViewTag;
/**
* Define the columns to show
@ -39,6 +46,14 @@ export class TagListComponent extends BaseListViewComponent<ViewTag> implements
{
prop: 'name',
width: 'auto'
},
{
prop: 'edit',
width: this.singleButtonWidth
},
{
prop: 'delete',
width: this.singleButtonWidth
}
];
@ -55,7 +70,9 @@ export class TagListComponent extends BaseListViewComponent<ViewTag> implements
matSnackBar: MatSnackBar,
public repo: TagRepositoryService,
protected translate: TranslateService, // protected required for ng-translate-extract
private promptService: PromptService
private promptService: PromptService,
private dialog: MatDialog,
private formBuilder: FormBuilder
) {
super(titleService, translate, matSnackBar);
}
@ -66,93 +83,63 @@ export class TagListComponent extends BaseListViewComponent<ViewTag> implements
*/
public ngOnInit(): void {
super.setTitle('Tags');
this.tagForm = new FormGroup({ name: new FormControl('', Validators.required) });
}
/**
* Sends a new or updates tag to the dataStore
* sets the given tag as the current and opens the tag dialog.
* @param tag the current tag, or null if a new tag is to be created
*/
public saveTag(): void {
if (this.editTag && this.newTag) {
this.submitNewTag();
} else if (this.editTag && !this.newTag) {
this.submitEditedTag();
}
}
/**
* Saves a newly created tag.
*/
public submitNewTag(): void {
if (!this.tagForm.value || !this.tagForm.valid) {
return;
}
this.repo.create(this.tagForm.value).then(() => {
public openTagDialog(tag?: ViewTag): void {
this.currentTag = tag;
this.tagForm.reset();
this.cancelEditing();
}, this.raiseError);
this.tagForm.get('name').setValue(this.currentTag ? this.currentTag.name : '');
const dialogRef = this.dialog.open(this.tagDialog, infoDialogSettings);
dialogRef.afterClosed().subscribe(res => {
if (res) {
this.save();
}
});
}
/**
* Saves an edited tag.
* Submit the form and create or update a tag.
*/
public submitEditedTag(): void {
private save(): void {
if (!this.tagForm.value || !this.tagForm.valid) {
return;
}
const updateData = new Tag({ name: this.tagForm.value.name });
this.repo.update(updateData, this.selectedTag).then(() => this.cancelEditing(), this.raiseError);
if (this.currentTag) {
this.repo.update(new Tag(this.tagForm.value), this.currentTag).catch(this.raiseError);
} else {
this.repo.create(this.tagForm.value).catch(this.raiseError);
}
this.tagForm.reset(); // reset here so pressing shift+enter wont save when dialog isnt open
}
/**
* Deletes the selected Tag after a successful confirmation.
* Deletes the given Tag after a successful confirmation.
*/
public async deleteSelectedTag(): Promise<void> {
public async onDeleteButton(tag: ViewTag): Promise<void> {
const title = this.translate.instant('Are you sure you want to delete this tag?');
const content = this.selectedTag.name;
const content = tag.name;
if (await this.promptService.open(title, content)) {
this.repo.delete(this.selectedTag).then(() => this.cancelEditing(), this.raiseError);
this.repo.delete(tag).catch(this.raiseError);
}
}
/**
* Cancels the editing
* clicking Shift and Enter will save automatically
* clicking Escape will cancel the process
*
* @param event has the code
*/
public cancelEditing(): void {
this.newTag = false;
this.editTag = false;
this.tagForm.reset();
}
/**
* Handler for a click on a row in the table
* @param viewTag
*/
public selectTag(viewTag: ViewTag): void {
this.selectedTag = viewTag;
this.setEditMode(true, false);
this.tagForm.setValue({ name: this.selectedTag.name });
}
public setEditMode(mode: boolean, newTag: boolean = true): void {
this.editTag = mode;
this.newTag = newTag;
if (!mode) {
this.cancelEditing();
}
}
/**
* Handles keyboard events. On enter, the editing is canceled.
* @param event
*/
public keyDownFunction(event: KeyboardEvent): void {
public onKeyDown(event: KeyboardEvent): void {
if (event.key === 'Enter' && event.shiftKey) {
this.submitNewTag();
this.save();
this.dialog.closeAll();
}
if (event.key === 'Escape') {
this.cancelEditing();
this.dialog.closeAll();
}
}
}