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

Save updated motion in DataStore, reactive form

This commit is contained in:
sean 2018-08-20 18:13:28 +02:00
parent d26d131fa6
commit b808228b42
4 changed files with 98 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/app/shared/models/motions/motion.ts
View File

@ -88,6 +88,13 @@ export class Motion extends BaseModel {
this.initDataStoreValues();
}
/**
* update the values of the motion with new values
*/
patchValues(update: object) {
Object.assign(this, update);
}
/**
* sets the workflow_id and the workflow
*/
@ -116,7 +123,7 @@ export class Motion extends BaseModel {
/**
* returns the most current title from versions
*/
get currentTitle() {
get currentTitle(): string {
if (this.versions[0]) {
return this.versions[0].title;
} else {
@ -124,6 +131,12 @@ export class Motion extends BaseModel {
}
}
set currentTitle(newTitle: string) {
if (this.versions[0]) {
this.versions[0].title = newTitle;
}
}
/**
* returns the most current motion text from versions
*/
@ -131,6 +144,10 @@ export class Motion extends BaseModel {
return this.versions[0].text;
}
set currentText(newText: string) {
this.versions[0].text = newText;
}
/**
* returns the most current motion reason text from versions
*/
@ -138,6 +155,10 @@ export class Motion extends BaseModel {
return this.versions[0].reason;
}
set currentReason(newReason: string) {
this.versions[0].reason = newReason;
}
/**
* return the submitters as uses objects
*/
@ -183,8 +204,6 @@ export class Motion extends BaseModel {
/**
* return the workflow state
*
* set the workflow via a component
*/
get state() {
if (this.workflow && this.workflow.id) {
@ -205,15 +224,14 @@ export class Motion extends BaseModel {
/**
* Returns the name of the recommendation.
*
* Right now only the default workflow is assumed
* TODO: Motion workflow needs to be specific on the server
*/
get recommendation() {
const state = this.workflow.state_by_id(this.recommendation_id);
if (state) {
return state.recommendation_label;
if (this.workflow && this.workflow.id) {
const state = this.workflow.state_by_id(this.recommendation_id);
return state;
} else {
return '';
return null;
}
}

74
client/src/app/site/motions/motion-detail/motion-detail.component.html
View File

@ -1,13 +1,17 @@
<mat-toolbar color='primary'>
<button (click)='editMotionButton()' class='generic-mini-button on-transition-fade' mat-mini-fab>
<button (click)='editMotionButton()' [ngClass]="{'save-button': editMotion}" class='generic-mini-button on-transition-fade save-button' mat-mini-fab>
<fa-icon *ngIf="!editMotion" icon='pen'></fa-icon>
<fa-icon *ngIf="editMotion" icon='check'></fa-icon>
</button>
<div class='motion-title on-transition-fade'>
<span translate>Motion</span> {{motion.identifier}}: {{motion.currentTitle}}
<span translate>Motion</span>
<span *ngIf="!editMotion"> {{motion.identifier}}</span>
<span *ngIf="editMotion"> {{metaInfoForm.get('identifier').value}}</span>
<span>:</span>
<span *ngIf="!editMotion"> {{motion.currentTitle}}</span>
<span *ngIf="editMotion"> {{contentForm.get('currentTitle').value}}</span>
<br>
<div class='motion-submitter'>
<span translate>by</span> {{motion.submitterName}}
@ -18,7 +22,8 @@
<mat-accordion multi='true' class='on-transition-fade'>
<!-- MetaInfo -->
<mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'>
<!-- <mat-expansion-panel #metaInfoPanel [expanded]='true' class='meta-info-panel'> -->
<mat-expansion-panel #metaInfoPanel class='meta-info-panel'>
<mat-expansion-panel-header>
<mat-panel-title>
<fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
@ -36,7 +41,7 @@
{{motion.identifier}}
</div>
<mat-form-field *ngIf="editMotion">
<input matInput #identifier placeholder='Identifier' [value]='motion.identifier'>
<input matInput placeholder='Identifier' formControlName='identifier' [value]='motion.identifier'>
</mat-form-field>
</div>
@ -59,27 +64,40 @@
{{motion.state.name}}
</div>
<mat-form-field *ngIf="editMotion">
<mat-select placeholder='State' formControlName='state'>
<mat-option *ngFor="let state of motion.possible_states" [value]="state">{{state}}</mat-option>
<mat-select placeholder='State' formControlName='state_id'>
<mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
<mat-divider></mat-divider>
<mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon>
Reset State
<span translate>Reset State</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Recommendation -->
<!-- TODO make sure this is only shown if the corresponding setting was set -->
<div *ngIf='motion.recommendation_id && editMotion'>
<h3>
<!-- The suggestion of the work group weather or not a motion should be accepted -->
<div *ngIf='motion.recomBy && (motion.recommendation_id || editMotion)'>
<div *ngIf='!editMotion'>
<h3>{{motion.recomBy}}</h3>
{{motion.recommendation.name}}
</div>
<mat-form-field *ngIf="editMotion">
<mat-select placeholder='Recommendation' formControlName='recommendation_id'>
<mat-option *ngFor="let state of motion.possible_states" [value]="state.id">{{state}}</mat-option>
<mat-divider></mat-divider>
<mat-option>
<fa-icon icon='exclamation-triangle'></fa-icon>
<span translate>Reset recommendation</span>
</mat-option>
</mat-select>
</mat-form-field>
<!-- <h3>
<a [matMenuTriggerFor]="stateMenu">
<span>{{motion.recomBy}}</span>
<fa-icon icon='cog'></fa-icon>
</a>
</h3>
{{motion.recommendation}}
</h3> -->
<!-- {{motion.recommendation}} -->
</div>
<!-- Category -->
@ -89,10 +107,10 @@
{{motion.category}}
</div>
<mat-form-field *ngIf="editMotion">
<mat-select placeholder='Category' formControlName='categoryFormControl'>
<mat-select placeholder='Category' formControlName='category_id'>
<mat-option>None</mat-option>
<mat-divider></mat-divider>
<mat-option *ngFor="let cat of getMotionCategories()" [value]="cat">{{cat}}</mat-option>
<mat-option *ngFor="let cat of getMotionCategories()" [value]="cat.id">{{cat}}</mat-option>
</mat-select>
</mat-form-field>
</div>
@ -104,7 +122,7 @@
{{motion.origin}}
</div>
<mat-form-field *ngIf="editMotion">
<input matInput #origin placeholder='Origin' [value]='motion.origin'>
<input matInput placeholder='Origin' formControlName='origin' [value]='motion.origin'>
</mat-form-field>
</div>
@ -135,24 +153,26 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div class='expansion-panel-custom-body'>
<form [formGroup]='contentForm' class='expansion-panel-custom-body' (ngSubmit)='saveMotion()'>
<!-- Title -->
<div *ngIf="motion.currentTitle || editMotion">
<div *ngIf='!editMotion'>
<h2>{{motion.currentTitle}}</h2>
</div>
<mat-form-field *ngIf="editMotion" class='wide-text'>
<input matInput #title placeholder='Title' [value]='motion.currentTitle'>
<input matInput placeholder='Title' formControlName='currentTitle' [value]='motion.currentTitle'>
</mat-form-field>
</div>
<!-- Text -->
<!-- TODO: this is a config variable. Read it out -->
<h3 translate>The assembly may decide:</h3>
<div *ngIf='!editMotion'>
<div [innerHtml]='motion.currentText'></div>
</div>
<mat-form-field *ngIf="editMotion" class='wide-text'>
<textarea matInput #motionText placeholder='Motion Text' [value]='motion.currentText'></textarea>
<textarea matInput placeholder='Motion Text' formControlName='currentText' [value]='motion.currentText'></textarea>
</mat-form-field>
<!-- Reason -->
@ -162,18 +182,10 @@
<div [innerHtml]='motion.currentReason'></div>
</div>
<mat-form-field *ngIf="editMotion" class='wide-text'>
<textarea matInput #reason placeholder="Reason" [value]='motion.currentReason'></textarea>
<textarea matInput placeholder="Reason" formControlName='currentReason' [value]='motion.currentReason'></textarea>
</mat-form-field>
</div>
</div>
</form>
</mat-expansion-panel>
</mat-accordion>
<!-- dummy values -->
<mat-menu #stateMenu="matMenu">
<button mat-menu-item translate>Accept</button>
<button mat-menu-item translate>Reject</button>
<button mat-menu-item translate>Do not decice</button>
</mat-menu>
</mat-accordion>

4
client/src/app/site/motions/motion-detail/motion-detail.component.scss
View File

@ -2,6 +2,10 @@ span {
margin: 0;
}
.save-button {
background-color: rgb(77, 243, 86);
}
.motion-title {
padding-left: 20px;
line-height: 100%;

32
client/src/app/site/motions/motion-detail/motion-detail.component.ts
View File

@ -17,10 +17,9 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
motion: Motion;
metaInfoForm: FormGroup;
contentForm: FormGroup;
editMotion = false;
// categoryFormControl: FormControl;
constructor(private route: ActivatedRoute, private formBuilder: FormBuilder) {
super();
this.createForm();
@ -41,20 +40,39 @@ export class MotionDetailComponent extends BaseComponent implements OnInit {
/** Parches the Form with content from the dataStore */
patchForm() {
this.metaInfoForm.patchValue({ categoryFormControl: this.motion.category });
this.metaInfoForm.patchValue({ state: this.motion.state });
this.metaInfoForm.patchValue({
category_id: this.motion.category.id,
state_id: this.motion.state.id,
recommendation_id: this.motion.recommendation.id,
identifier: this.motion.identifier,
origin: this.motion.origin
});
this.contentForm.patchValue({
currentTitle: this.motion.currentTitle,
currentText: this.motion.currentText,
currentReason: this.motion.currentReason
});
}
/** Create the whole Form with empty or default values */
createForm() {
this.metaInfoForm = this.formBuilder.group({
categoryFormControl: [''],
state: ['']
identifier: [''],
category_id: [''],
state_id: [''],
recommendation_id: [''],
origin: ['']
});
this.contentForm = this.formBuilder.group({
currentTitle: [''],
currentText: [''],
currentReason: ['']
});
}
saveMotion() {
console.log('Save motion: ', this.metaInfoForm.value);
const newMotionValues = { ...this.metaInfoForm.value, ...this.contentForm.value };
this.motion.patchValues(newMotionValues);
}
getMotionCategories(): Category[] {