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

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

Browse Source
This commit is contained in:
jsangmeister 2019-07-31 12:04:15 +02:00 committed by Joshua Sangmeister
parent 32bec58333
commit 1bd93f0e98
10 changed files with 348 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

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

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

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

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

@ -1,5 +1,6 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog, 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();
}
}

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

@ -1,4 +1,4 @@
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="onPlusButton()">
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="openDialog()">
<!-- Title -->
<div class="title-slot">
<h2 translate>Comment fields</h2>
@ -13,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>

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

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog, 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 createForm: FormGroup;
public commentFieldForm: 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.updateForm = this.formBuilder.group(form);
this.commentFieldForm = 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.onSaveButton(viewSection);
} else {
this.create();
}
this.save();
}
if (event.key === 'Escape') {
if (viewSection) {
this.editId = null;
} else {
this.commentSectionToCreate = null;
}
this.cancel();
}
}
/**
* Opens the create form.
* Opens the create dialog.
*/
public onPlusButton(): void {
if (!this.commentSectionToCreate) {
this.commentSectionToCreate = new MotionCommentSection();
this.createForm.setValue({
name: '',
read_groups_id: [],
write_groups_id: []
public openDialog(c?: ViewMotionCommentSection): void {
this.currentComment = c;
this.commentFieldForm.reset({
name: c ? c.name : '',
read_groups_id: c ? c.read_groups_id : [],
write_groups_id: c ? c.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 {
if (this.createForm.valid) {
this.commentSectionToCreate.patchValues(this.createForm.value as MotionCommentSection);
public save(): void {
if (this.commentFieldForm.valid) {
// eiher update or create
if (this.currentComment) {
this.repo
.create(this.commentSectionToCreate)
.then(() => (this.commentSectionToCreate = null), this.raiseError);
.update(this.commentFieldForm.value as Partial<MotionCommentSection>, this.currentComment)
.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
* @param viewSection
* close the dialog
*/
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);
}
public cancel(): void {
this.dialogRef.close();
}
/**
@ -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);
}
}
/**
* Is executed when a mat-extension-panel is closed
* @param viewSection the section in the panel
*/
public panelClosed(viewSection: ViewMotionCommentSection): void {
this.openId = null;
if (this.editId) {
this.onSaveButton(viewSection);
this.repo.delete(viewSection).catch(this.raiseError);
}
}
}

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

@ -1,4 +1,4 @@
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="onPlusButton()">
<os-head-bar prevUrl="../.." [nav]="false" [mainButton]="true" (mainEvent)="openDialog()">
<!-- Title -->
<div class="title-slot">
<h2 translate>Statute</h2>
@ -12,41 +12,12 @@
</div>
</os-head-bar>
<mat-card *ngIf="statuteParagraphToCreate">
<mat-card-title translate>New statute paragraph</mat-card-title>
<mat-card-content>
<form [formGroup]="createForm" (keydown)="onKeyDownCreate($event)">
<p>
<mat-form-field>
<input formControlName="title" matInput placeholder="{{ 'Title' | translate }}" required />
<mat-hint *ngIf="!createForm.controls.title.valid">
<span translate>Required</span>
</mat-hint>
</mat-form-field>
</p>
<span>
<!-- The HTML Editor -->
<h4 translate>Statute paragraph</h4>
<editor formControlName="text" [init]="tinyMceSettings"></editor>
</span>
</form>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="create()">
<span translate>Save</span>
</button>
<button mat-button (click)="onCancelCreate()">
<span translate>Cancel</span>
</button>
</mat-card-actions>
</mat-card>
<cdk-virtual-scroll-viewport itemSize="50" class="virtual-scroll-full-page">
<cdk-virtual-scroll-viewport itemSize="50" [ngClass]="statuteParagraphs.length ? 'virtual-scroll-full-page' : ''">
<mat-accordion class="os-card">
<mat-expansion-panel
*cdkVirtualFor="let statuteParagraph of statuteParagraphs"
(opened)="openId = statuteParagraph.id"
(closed)="panelClosed(statuteParagraph)"
(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
*ngIf="editId !== statuteParagraph.id"
mat-button
(click)="onEditButton(statuteParagraph)"
mat-icon-button
>
<button mat-button mat-icon-button (click)="openDialog(statuteParagraph)">
<mat-icon>edit</mat-icon>
</button>
<button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<button
*ngIf="editId === statuteParagraph.id"
mat-button
(click)="onSaveButton(statuteParagraph)"
mat-icon-button
>
<mat-icon>save</mat-icon>
</button>
<button mat-button (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
<button mat-button mat-icon-button (click)="onDeleteButton(statuteParagraph)">
<mat-icon>delete</mat-icon>
</button>
</mat-action-row>
@ -123,3 +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>

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

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog, 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 editId: number | null;
public openId: 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.updateForm = this.formBuilder.group(form);
this.statuteParagraphForm = 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 {
if (!this.statuteParagraphToCreate) {
this.createForm.reset();
this.createForm.setValue({
title: '',
text: ''
public openDialog(p?: ViewStatuteParagraph): void {
this.currentStatuteParagraph = p;
this.statuteParagraphForm.reset();
if (p) {
this.statuteParagraphForm.setValue({
title: p.title,
text: p.text
});
this.statuteParagraphToCreate = new StatuteParagraph();
}
}
/**
* 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
this.dialogRef = this.dialog.open(this.statuteParagraphDialog, {
width: '1000px',
maxWidth: '95vw',
maxHeight: '90vh',
disableClose: true
});
}
/**
* Saves the statute paragraph
* @param viewStatuteParagraph The statute paragraph to save
* creates a new statute paragraph or updates the current one
*/
public onSaveButton(viewStatuteParagraph: ViewStatuteParagraph): void {
if (this.updateForm.valid) {
this.repo.update(this.updateForm.value as Partial<StatuteParagraph>, viewStatuteParagraph).then(() => {
this.openId = this.editId = null;
}, this.raiseError);
public save(): void {
if (this.statuteParagraphForm.valid) {
// eiher update or create
if (this.currentStatuteParagraph) {
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);
}
}
/**
* Is executed when a mat-extension-panel is closed
* @param viewStatuteParagraph the statute paragraph in the panel
*/
public panelClosed(viewStatuteParagraph: ViewStatuteParagraph): void {
this.openId = null;
if (this.editId) {
this.onSaveButton(viewStatuteParagraph);
this.repo.delete(viewStatuteParagraph).catch(this.raiseError);
}
}
@ -167,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 {
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;
public cancel(): void {
this.dialogRef.close();
}
/**

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

@ -1,37 +1,10 @@
<os-head-bar
[mainButton]="true"
[nav]="true"
[editMode]="editTag"
[isSaveButtonEnabled]="tagForm.valid"
(mainEvent)="setEditMode(!editTag)"
(saveEvent)="saveTag()"
(mainEvent)="openTagDialog()"
[multiSelectMode]="isMultiSelect"
>
<!-- Title -->
<div class="title-slot">
<h2 *ngIf="!editTag && !newTag" translate>Tags</h2>
<form *ngIf="editTag" [formGroup]="tagForm" (keydown)="keyDownFunction($event)">
<mat-form-field>
<input
type="text"
matInput
osAutofocus
required
formControlName="name"
placeholder="{{ 'New tag name' | translate }}"
/>
<mat-error *ngIf="tagForm.invalid" translate>Required</mat-error>
</mat-form-field>
</form>
</div>
<!-- remove button -->
<div class="extra-controls-slot">
<button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()">
<mat-icon>delete</mat-icon>
<span translate>Delete</span>
</button>
</div>
<div class="title-slot"><h2 translate>Tags</h2></div>
</os-head-bar>
<os-list-view-table
@ -42,9 +15,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>

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

@ -1,5 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog, 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;
public newTag = false;
public selectedTag: ViewTag;
@ViewChild('tagDialog', { static: true })
private tagDialog: TemplateRef<string>;
@ViewChild('tagForm', { static: true })
public tagForm: FormGroup;
private tagForm: FormGroup = this.formBuilder.group({
name: ['', [Validators.required]]
});
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 {
if (this.editTag && this.newTag) {
this.submitNewTag();
} else if (this.editTag && !this.newTag) {
this.submitEditedTag();
}
}
/**
* Saves a newly created tag.
*/
public submitNewTag(): void {
if (!this.tagForm.value || !this.tagForm.valid) {
return;
}
this.repo.create(this.tagForm.value).then(() => {
public openTagDialog(tag?: ViewTag): void {
this.currentTag = tag;
this.tagForm.reset();
this.cancelEditing();
}, this.raiseError);
this.tagForm.get('name').setValue(this.currentTag ? this.currentTag.name : '');
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 });
this.repo.update(updateData, this.selectedTag).then(() => this.cancelEditing(), this.raiseError);
if (this.currentTag) {
this.repo
.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);
}
}
/**
* 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();
this.repo.delete(tag).catch(this.raiseError);
}
}
}

1
openslides/core/views.py
View File

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