added dialogs for creating and editing tags, statute paragraphs, motion comments and motion blocks

client/package.json

@@ -90,7 +90,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/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,36 @@
         </div>
     </os-list-view-table>
 </mat-card>
+
+<!-- Template for new motion block dialog -->
+<ng-template #newMotionBlockDialog>
+    <h1 mat-dialog-title>
+        <span>{{ "New motion block" | translate }}</span>
+    </h1>
+    <form [formGroup]="createBlockForm" (keydown)="onKeyDown($event)">
+        <div class="os-form-card-mobile" mat-dialog-content>
+            <!-- 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>
+        </div>
+    </form>
+    <div mat-dialog-actions>
+        <button mat-button [disabled]="!createBlockForm.valid" (click)="onSaveNewButton()">
+            <span translate>Save</span>
+        </button>
+        <button mat-button (click)="onCancel()"><span translate>Cancel</span></button>
+    </div>
+</ng-template>

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, MatDialogRef } from '@angular/material';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -27,6 +28,11 @@ 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>;
+
+    private dialogRef: MatDialogRef<string, any>;
+
     /**
      * Holds the create form
      */
@@ -95,6 +101,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);
@@ -127,21 +134,29 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
     }
 
     /**
-     * Helper function reset the form and set the default values
+     * Helper function reset the form and set the default values as well as closing the modal dialog
      */
     public resetForm(): void {
         this.createBlockForm.reset();
         this.createBlockForm.get('agenda_type').setValue(this.defaultVisibility);
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+        this.dialogRef = null;
     }
 
     /**
-     * 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;
+        this.dialogRef = this.dialog.open(this.newMotionBlockDialog, {
-        }
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
+        });
     }
 
     /**
@@ -158,7 +173,6 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
             try {
                 await this.repo.create(block);
                 this.resetForm();
-                this.isCreatingNewBlock = false;
             } catch (e) {
                 this.raiseError(e);
             }
@@ -186,6 +200,6 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
      * Cancels the current form action
      */
     public onCancel(): void {
-        this.isCreatingNewBlock = false;
+        this.resetForm();
     }
 }

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,52 +13,11 @@
 </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)"
+        (closed)="openId = null"
         [expanded]="openId === section.id"
         multiple="false"
     >
@@ -87,36 +46,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 +58,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 +75,48 @@
         <span translate>Sort</span>
     </button>
 </mat-menu>
+
+<!-- Template for motion comment dialog -->
+<ng-template #motionCommentDialog>
+    <h1 mat-dialog-title>
+        <span>{{ (currentComment ? "Edit comment field" : "New comment field") | translate }}</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 (click)="save()">
+            <span translate>Save</span>
+        </button>
+        <button mat-button (click)="cancel()">
+            <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, MatDialogRef } from '@angular/material';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -23,7 +24,12 @@ 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;
+
+    public dialogRef: MatDialogRef<string, any>;
 
     /**
      * Source of the Data
@@ -31,14 +37,11 @@ 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 +62,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 +72,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,79 +85,60 @@ 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);
-            } else {
-                this.create();
-            }
         }
         if (event.key === 'Escape') {
-            if (viewSection) {
+            this.cancel();
-                this.editId = null;
-            } else {
-                this.commentSectionToCreate = null;
-            }
         }
     }
 
     /**
-     * Opens the create form.
+     * Opens the create dialog.
      */
-    public onPlusButton(): void {
+    public openDialog(c?: ViewMotionCommentSection): void {
-        if (!this.commentSectionToCreate) {
+        this.currentComment = c;
-            this.commentSectionToCreate = new MotionCommentSection();
+        this.commentFieldForm.reset({
-            this.createForm.setValue({
+            name: c ? c.name : '',
-                name: '',
+            read_groups_id: c ? c.read_groups_id : [],
-                read_groups_id: [],
+            write_groups_id: c ? c.write_groups_id : []
-                write_groups_id: []
+        });
+        this.dialogRef = this.dialog.open(this.motionCommentDialog, {
+            width: '500px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
         });
     }
-    }
 
     /**
-     * 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 {
+    public 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);
+                    .then(() => this.dialogRef.close(), this.raiseError);
+            } else {
+                const c = new MotionCommentSection(this.commentFieldForm.value);
+                this.repo.create(c).then(() => this.dialogRef.close(), this.raiseError);
+            }
         }
     }
 
     /**
-     * Executed on edit button
+     * close the dialog
-     * @param viewSection
      */
-    public onEditButton(viewSection: ViewMotionCommentSection): void {
+    public cancel(): void {
-        this.editId = viewSection.id;
+        this.dialogRef.close();
-
-        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 +149,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,41 +12,12 @@
     </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)"
+            (closed)="openId = null"
             [expanded]="openId === statuteParagraph.id"
             multiple="false"
         >
@@ -55,51 +26,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 +60,35 @@
         <span translate>Import</span><span>&nbsp;...</span>
     </button>
 </mat-menu>
+
+<!-- Template for statute paragraph dialog -->
+<ng-template #statuteParagraphDialog>
+    <h1 mat-dialog-title>
+        <span>{{ (currentStatuteParagraph ? "Edit statute paragraph" : "New statute paragraph") | translate }}</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 (click)="save()" [disabled]="!statuteParagraphForm.valid">
+            <span translate>Save</span>
+        </button>
+        <button mat-button (click)="cancel()">
+            <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, MatDialogRef } from '@angular/material';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -21,7 +22,12 @@ 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 dialogRef: MatDialogRef<string, any>;
+
+    private currentStatuteParagraph: ViewStatuteParagraph | null;
 
     /**
      * Source of the Data
@@ -29,14 +35,11 @@ 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 openId: number | null;
-    public editId: number | null;
 
     /**
      * The usual component constructor. Initializes the forms
@@ -56,6 +59,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 +68,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 +84,39 @@ export class StatuteParagraphListComponent extends BaseViewComponent implements
     }
 
     /**
-     * Add a new Section.
+     * Open the modal dialog
      */
-    public onPlusButton(): void {
+    public openDialog(p?: ViewStatuteParagraph): void {
-        if (!this.statuteParagraphToCreate) {
+        this.currentStatuteParagraph = p;
-            this.createForm.reset();
+        this.statuteParagraphForm.reset();
-            this.createForm.setValue({
+        if (p) {
-                title: '',
+            this.statuteParagraphForm.setValue({
-                text: ''
+                title: p.title,
+                text: p.text
             });
-            this.statuteParagraphToCreate = new StatuteParagraph();
         }
-    }
+        this.dialogRef = this.dialog.open(this.statuteParagraphDialog, {
-
+            width: '1000px',
-    /**
+            maxWidth: '95vw',
-     * Handler when clicking on create to create a new statute paragraph
+            maxHeight: '90vh',
-     */
+            disableClose: true
-    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 {
+    public 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)
+                    .then(() => this.dialogRef.close(), this.raiseError);
+            } else {
+                const p = new StatuteParagraph(this.statuteParagraphForm.value);
+                this.repo.create(p).then(() => this.dialogRef.close(), this.raiseError);
+            }
         }
     }
 
@@ -139,18 +128,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,43 +145,20 @@ 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();
         }
         if (event.key === 'Escape') {
-            this.onCancelCreate();
+            this.cancel();
         }
     }
 
     /**
-     * Cancels the current form action
+     * Closes the dialog
      */
-    public onCancelCreate(): void {
+    public cancel(): void {
-        this.statuteParagraphToCreate = null;
+        this.dialogRef.close();
-    }
-
-    /**
-     * 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;
     }
 
     /**

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,44 @@
     (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>{{ (currentTag ? 'Edit tag' : 'New tag') | translate }}</span>
+    </h1>
+    <form [formGroup]="tagForm" (ngSubmit)="onSubmit()">
+        <div class="os-form-card-mobile" mat-dialog-content>
+            <mat-form-field>
+                <input required type="text" matInput formControlName="name" placeholder="{{ 'Name' | translate }}">
+            </mat-form-field>
+        </div>
+
+        <div mat-dialog-actions>
+            <button type="submit" mat-button color="primary">
+                <span translate>Save</span>
+            </button>
+            <button type="button" mat-button [mat-dialog-close]="null">
+                <span translate>Cancel</span>
+            </button>
+        </div>
+    </form>
+</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, MatDialogRef } from '@angular/material';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 
@@ -13,7 +14,7 @@ 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 +26,19 @@ 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]]
+    });
+
+    private dialogRef: MatDialogRef<string, any>;
+
+    /**
+     * Holds the tag that's currently being edited, or null.
+     */
+    public currentTag: ViewTag;
 
     /**
      * Define the columns to show
@@ -39,6 +47,14 @@ export class TagListComponent extends BaseListViewComponent<ViewTag> implements
         {
             prop: 'name',
             width: 'auto'
+        },
+        {
+            prop: 'edit',
+            width: this.singleButtonWidth
+        },
+        {
+            prop: 'delete',
+            width: this.singleButtonWidth
         }
     ];
 
@@ -55,7 +71,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 +84,48 @@ 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);
+        this.dialogRef = this.dialog.open(this.tagDialog, {
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            disableClose: true
+        });
     }
 
     /**
-     * Saves an edited tag.
+     * Submit the form and create or update a tag.
      */
-    public submitEditedTag(): void {
+    public onSubmit(): void {
         if (!this.tagForm.value || !this.tagForm.valid) {
             return;
         }
-        const updateData = new Tag({ name: this.tagForm.value.name });
+        if (this.currentTag) {
-
+            this.repo
-        this.repo.update(updateData, this.selectedTag).then(() => this.cancelEditing(), this.raiseError);
+                .update(new Tag(this.tagForm.value), this.currentTag)
+                .then(() => this.dialogRef.close(), this.raiseError);
+        } else {
+            this.repo.create(this.tagForm.value).then(() => this.dialogRef.close(), this.raiseError);
+        }
     }
 
     /**
-     * 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
-     */
-    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 {
-        if (event.key === 'Enter' && event.shiftKey) {
-            this.submitNewTag();
-        }
-        if (event.key === 'Escape') {
-            this.cancelEditing();
         }
     }
 }

openslides/core/views.py

@@ -186,6 +186,7 @@ class ProjectorViewSet(ModelViewSet):
         If `reset_scroll` is True, the scoll of the projector will reset.
         """
         projector = self.get_object()
+        projector.scroll = 0
         elements = request.data.get("elements")
         preview = request.data.get("preview")
         history_element = request.data.get("append_to_history")