Save updated motion in DataStore, reactive form

client/src/app/shared/models/motions/motion.ts

@@ -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() {
+        if (this.workflow && this.workflow.id) {
             const state = this.workflow.state_by_id(this.recommendation_id);
-        if (state) {
+            return state;
-            return state.recommendation_label;
         } else {
-            return '';
+            return null;
         }
     }
 

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

@@ -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-select placeholder='State' formControlName='state_id'>
-                        <mat-option *ngFor="let state of motion.possible_states" [value]="state">{{state}}</mat-option>
+                        <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 -->
+            <!-- The suggestion of the work group weather or not a motion should be accepted -->
-            <div *ngIf='motion.recommendation_id && editMotion'>
+            <div *ngIf='motion.recomBy && (motion.recommendation_id || editMotion)'>
-                <h3>
+                <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>
+                </h3> -->
-                {{motion.recommendation}}
+                <!-- {{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>

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

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

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

@@ -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({
-        this.metaInfoForm.patchValue({ state: this.motion.state });
+            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: [''],
+            identifier: [''],
-            state: ['']
+            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[] {