Merge pull request #4888 from jsangmeister/dialogs-everywhere

Replaced multiple inline forms with dialogs

AUTHORS

@@ -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>

client/package.json

@@ -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",

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

@@ -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">

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

@@ -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>

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

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

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

@@ -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;
             }
-
+            this.repo.create(block).catch(this.raiseError);
-            try {
-                await this.repo.create(block);
             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;
-    }
 }

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

@@ -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>

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

@@ -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 commentFieldForm: FormGroup;
-
-    public createForm: FormGroup;
-
-    public openId: number | null;
-    public editId: number | null;
 
     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.commentFieldForm = this.formBuilder.group(form);
-        this.updateForm = 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.save();
-                this.onSaveButton(viewSection);
+            this.dialog.closeAll();
-            } else {
-                this.create();
-            }
         }
         if (event.key === 'Escape') {
-            if (viewSection) {
+            this.dialog.closeAll();
-                this.editId = null;
-            } else {
-                this.commentSectionToCreate = null;
-            }
         }
     }
 
     /**
-     * Opens the create form.
+     * Opens the create dialog.
      */
-    public onPlusButton(): void {
+    public openDialog(commentSection?: ViewMotionCommentSection): void {
-        if (!this.commentSectionToCreate) {
+        this.currentComment = commentSection;
-            this.commentSectionToCreate = new MotionCommentSection();
+        this.commentFieldForm.reset({
-            this.createForm.setValue({
+            name: commentSection ? commentSection.name : '',
-                name: '',
+            read_groups_id: commentSection ? commentSection.read_groups_id : [],
-                read_groups_id: [],
+            write_groups_id: commentSection ? commentSection.write_groups_id : []
-                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 {
+    private save(): void {
-        if (this.createForm.valid) {
+        if (this.commentFieldForm.valid) {
-            this.commentSectionToCreate.patchValues(this.createForm.value as MotionCommentSection);
+            // eiher update or create
+            if (this.currentComment) {
                 this.repo
-                .create(this.commentSectionToCreate)
+                    .update(this.commentFieldForm.value as Partial<MotionCommentSection>, this.currentComment)
-                .then(() => (this.commentSectionToCreate = null), this.raiseError);
+                    .catch(this.raiseError);
+            } else {
+                const comment = new MotionCommentSection(this.commentFieldForm.value);
+                this.repo.create(comment).catch(this.raiseError);
             }
-    }
+            this.commentFieldForm.reset();
-
-    /**
-     * 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);
         }
     }
 
@@ -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);
+            this.repo.delete(viewSection).catch(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);
         }
     }
 }

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

@@ -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">
+<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
-    <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">
     <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
+                <button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
-                    *ngIf="editId !== statuteParagraph.id"
-                    mat-button
-                    (click)="onEditButton(statuteParagraph)"
-                    mat-icon-button
-                >
                     <mat-icon>edit</mat-icon>
                 </button>
-                <button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
+                <button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
-                    <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>
                     <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>

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

@@ -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 statuteParagraphForm: FormGroup;
-
-    public createForm: FormGroup;
-
-    public openId: number | null;
-    public editId: number | null;
 
     /**
      * 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.statuteParagraphForm = this.formBuilder.group(form);
-        this.updateForm = 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 {
+    public openDialog(paragraph?: ViewStatuteParagraph): void {
-        if (!this.statuteParagraphToCreate) {
+        this.currentStatuteParagraph = paragraph;
-            this.createForm.reset();
+        this.statuteParagraphForm.reset();
-            this.createForm.setValue({
+        if (paragraph) {
-                title: '',
+            this.statuteParagraphForm.setValue({
-                text: ''
+                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
+     * creates a new statute paragraph or updates the current one
-     * @param viewStatuteParagraph The statute paragraph to save
      */
-    public onSaveButton(viewStatuteParagraph: ViewStatuteParagraph): void {
+    private save(): void {
-        if (this.updateForm.valid) {
+        if (this.statuteParagraphForm.valid) {
-            this.repo.update(this.updateForm.value as Partial<StatuteParagraph>, viewStatuteParagraph).then(() => {
+            // eiher update or create
-                this.openId = this.editId = null;
+            if (this.currentStatuteParagraph) {
-            }, this.raiseError);
+                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);
+            this.repo.delete(viewStatuteParagraph).catch(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);
         }
     }
 
@@ -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
      */

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

@@ -1,37 +1,10 @@
 <os-head-bar
     [mainButton]="true"
     [nav]="true"
-    [editMode]="editTag"
+    (mainEvent)="openTagDialog()"
-    [isSaveButtonEnabled]="tagForm.valid"
-    (mainEvent)="setEditMode(!editTag)"
-    (saveEvent)="saveTag()"
     [multiSelectMode]="isMultiSelect"
 >
-    <!-- Title -->
+    <div class="title-slot"><h2 translate>Tags</h2></div>
-    <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>
 </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>

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

@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+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;
+    @ViewChild('tagDialog', { static: true })
-    public newTag = false;
+    private tagDialog: TemplateRef<string>;
-    public selectedTag: ViewTag;
 
-    @ViewChild('tagForm', { static: true })
+    private tagForm: FormGroup = this.formBuilder.group({
-    public tagForm: FormGroup;
+        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 {
+    public openTagDialog(tag?: ViewTag): void {
-        if (this.editTag && this.newTag) {
+        this.currentTag = tag;
-            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(() => {
         this.tagForm.reset();
-            this.cancelEditing();
+        this.tagForm.get('name').setValue(this.currentTag ? this.currentTag.name : '');
-        }, this.raiseError);
+        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 });
+        if (this.currentTag) {
-
+            this.repo.update(new Tag(this.tagForm.value), this.currentTag).catch(this.raiseError);
-        this.repo.update(updateData, this.selectedTag).then(() => this.cancelEditing(), 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 {
+    public onKeyDown(event: KeyboardEvent): 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 {
         if (event.key === 'Enter' && event.shiftKey) {
-            this.submitNewTag();
+            this.save();
+            this.dialog.closeAll();
         }
         if (event.key === 'Escape') {
-            this.cancelEditing();
+            this.dialog.closeAll();
         }
     }
 }