Save updated motion in DataStore, reactive form
This commit is contained in:
parent
d26d131fa6
commit
b808228b42
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
@ -2,6 +2,10 @@ span {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
background-color: rgb(77, 243, 86);
|
||||
}
|
||||
|
||||
.motion-title {
|
||||
padding-left: 20px;
|
||||
line-height: 100%;
|
||||
|
@ -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[] {
|
||||
|
Loading…
Reference in New Issue
Block a user