Hide unset motion detail values.

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

@@ -144,7 +144,7 @@ export class Motion extends BaseModel {
     /**
      * return the workflow state
      *
-     * Right now only the default workflow is assumes
+     * Right now only the default workflow is assumed
      * TODO: Motion workflow needs to be specific on the server
      */
     get stateName() {
@@ -157,6 +157,37 @@ export class Motion extends BaseModel {
         return selectedWorkflow.getStateNameById(this.state_id);
     }
 
+    /**
+     * 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() {
+        //get the default workflow
+        const motionsWorkflowConfig = this.DS.filter(Config, config => config.key === 'motions_workflow')[0] as Config;
+        const workflowId = +motionsWorkflowConfig.value;
+        const selectedWorkflow = this.DS.get(Workflow, workflowId) as Workflow;
+        const stateName = selectedWorkflow.getStateNameById(this.recommendation_id);
+        if (stateName !== 'NULL') {
+            return stateName;
+        } else {
+            return '';
+        }
+    }
+
+    /**
+     * returns the value of 'config.motions_recommendations_by'
+     */
+    get recomBy() {
+        const motionsRecommendationsByConfig = this.DS.filter(
+            Config,
+            config => config.key === 'motions_recommendations_by'
+        )[0] as Config;
+        const recomByString = motionsRecommendationsByConfig.value;
+        return recomByString;
+    }
+
     deserialize(input: any): this {
         Object.assign(this, input);
 

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

@@ -7,7 +7,7 @@
     <!-- motion.identifier -->
     <!-- motion.versions[0].title -->
     <div class='motion-title on-transition-fade'>
-        <span translate>Motion</span> {{motion.identifier}} {{motion.currentTitle}}
+        <span translate>Motion</span> {{motion.identifier}}: {{motion.currentTitle}}
         <br>
         <div class='motion-submitter'>
             <span translate>by</span> {{motion.submitterName}}
@@ -16,7 +16,8 @@
 </mat-toolbar>
 
 <mat-accordion multi='true' class='on-transition-fade'>
-    <mat-expansion-panel [expanded]='true' class='meta-info-panel'>
+    <!-- <mat-expansion-panel [expanded]='true' class='meta-info-panel'> -->
+    <mat-expansion-panel class='meta-info-panel'>
         <mat-expansion-panel-header>
             <mat-panel-title>
                 <fa-icon icon='info-circle' [fixedWidth]="true"></fa-icon>
@@ -24,19 +25,30 @@
             </mat-panel-title>
         </mat-expansion-panel-header>
         <div class='meta-info-panel-body'>
-                <h3 translate>Submitters</h3>
-                {{motion.submitterName}}
-                <h3 translate>Supporters</h3>
-                <h3 translate>Status</h3>
-                {{motion.stateName}}
-                <h3 translate>Empfehlung der ABK</h3>
-                <h3 translate>Category</h3>
-                {{motion.category}}
-                <h3 translate>Origin</h3>
-                <h3 translate>Voting</h3>
+
+            <h3 translate *ngIf="motion.submitterName">Submitters</h3>
+            {{motion.submitterName}}
+
+            <h3 translate *ngIf='motion.supporters_id && motion.supporters_id.length > 0'>Supporters</h3>
+
+            <h3 translate *ngIf='motion.state_id'>Status</h3>
+            {{motion.stateName}}
+
+            <h3 translate *ngIf='motion.recommendation_id'>{{motion.recomBy}}</h3>
+            <!-- config.get(motions_recommendations_by) -->
+            {{motion.recommendation}}
+
+            <h3 translate *ngIf="motion.category_id">Category</h3>
+            {{motion.category}}
+
+            <h3 translate *ngIf="motion.origin">Origin</h3>
+            {{motion.origin}}
+
+            <h3 translate *ngIf='motion.polls && motion.polls.length > 0'>Voting</h3>
         </div>
     </mat-expansion-panel>
-    <mat-expansion-panel [expanded]='true'>
+    <!-- <mat-expansion-panel [expanded]='true'> -->
+    <mat-expansion-panel>
         <mat-expansion-panel-header>
             <mat-panel-title>
                 <fa-icon icon='file-signature' [fixedWidth]="true"></fa-icon>
@@ -55,8 +67,8 @@
 
         <h3 translate>The assembly may decide:</h3>
         <div [innerHtml]='motion.currentText'></div>
-        
-        <h4 translate class='motion-reason-label'>Reason</h4>
+
+        <h4 *ngIf='motion.currentReason' translate class='motion-reason-label'>Reason</h4>
         <div [innerHtml]='motion.currentReason'></div>
 
     </mat-expansion-panel>

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

@@ -23,6 +23,8 @@ mat-panel-title {
     padding-top: 25px;
     h3 {
         display: block;
+        margin-top: 12px; //distance between heading and text
+        margin-bottom: 3px; //distance between heading and text
         font-size: 80%;
         color: gray;
     }