Enable CSV export for state and reason

Adds and reorders what CSV is exporting using the
Export dialog

client/src/app/site/motions/components/motion-export-dialog/motion-export-dialog.component.html

@@ -5,7 +5,7 @@
     <div mat-dialog-content>
         <div>
             <p class="toggle-group-head" translate>Format</p>
-            <mat-button-toggle-group formControlName="format">
+            <mat-button-toggle-group class="smaller-buttons" formControlName="format">
                 <mat-button-toggle value="pdf">PDF</mat-button-toggle>
                 <mat-button-toggle value="csv">CSV</mat-button-toggle>
             </mat-button-toggle-group>
@@ -13,7 +13,7 @@
 
         <div>
             <p class="toggle-group-head" translate>Line numbering</p>
-            <mat-button-toggle-group formControlName="lnMode">
+            <mat-button-toggle-group class="smaller-buttons" formControlName="lnMode">
                 <mat-button-toggle [value]="lnMode.None"> <span translate>None</span> </mat-button-toggle>
                 <mat-button-toggle [value]="lnMode.Inside"> <span translate>Inline</span> </mat-button-toggle>
                 <mat-button-toggle [value]="lnMode.Outside"> <span translate>Outside</span> </mat-button-toggle>
@@ -22,7 +22,7 @@
 
         <div>
             <p class="toggle-group-head" translate>Change recommendations</p>
-            <mat-button-toggle-group formControlName="crMode">
+            <mat-button-toggle-group class="smaller-buttons" formControlName="crMode">
                 <mat-button-toggle [value]="crMode.Original">
                     <span translate>Original version</span>
                 </mat-button-toggle>
@@ -36,7 +36,7 @@
 
         <div>
             <p class="toggle-group-head" translate>Content</p>
-            <mat-button-toggle-group multiple formControlName="content">
+            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="content">
                 <mat-button-toggle value="text"> <span translate>Text</span> </mat-button-toggle>
                 <mat-button-toggle value="reason"> <span translate>Reason</span> </mat-button-toggle>
             </mat-button-toggle-group>
@@ -44,14 +44,16 @@
 
         <div>
             <p class="toggle-group-head" translate>Meta information</p>
-            <mat-button-toggle-group multiple formControlName="metaInfo">
+            <mat-button-toggle-group class="smaller-buttons" multiple formControlName="metaInfo">
                 <mat-button-toggle value="submitters"> <span translate>Submitters</span> </mat-button-toggle>
-                <mat-button-toggle value="state" #stateButton> <span translate>State</span> </mat-button-toggle>
+                <mat-button-toggle value="state"> <span translate>State</span> </mat-button-toggle>
-                <mat-button-toggle value="recommendation" #recommendationButton> <span translate>Recommendation</span> </mat-button-toggle>
+                <mat-button-toggle value="recommendation"> <span translate>Recommendation</span> </mat-button-toggle>
                 <mat-button-toggle value="category"> <span translate>Category</span> </mat-button-toggle>
                 <mat-button-toggle value="origin"> <span translate>Origin</span> </mat-button-toggle>
                 <mat-button-toggle value="block"> <span translate>Motion block</span> </mat-button-toggle>
-                <mat-button-toggle value="votingResult" #votingResultButton> <span translate>Voting result</span> </mat-button-toggle>
+                <mat-button-toggle value="votingResult" #votingResultButton>
+                    <span translate>Voting result</span>
+                </mat-button-toggle>
             </mat-button-toggle-group>
         </div>
 

client/src/app/site/motions/components/motion-export-dialog/motion-export-dialog.component.scss

@@ -1,3 +1,16 @@
 .toggle-group-head {
     margin-bottom: 0;
 }
+
+h1 {
+    margin: 0;
+}
+
+.smaller-buttons {
+    ::ng-deep {
+        .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+            line-height: 2.5 !important;
+            padding: 0 10px !important;
+        }
+    }
+}

client/src/app/site/motions/components/motion-export-dialog/motion-export-dialog.component.ts

@@ -74,18 +74,6 @@ export class MotionExportDialogComponent implements OnInit {
     @ViewChild('votingResultButton')
     public votingResultButton: MatButtonToggle;
 
-    /**
-     * To deactivate the state button
-     */
-    @ViewChild('stateButton')
-    public stateButton: MatButtonToggle;
-
-    /**
-     * To deactivate the state button
-     */
-    @ViewChild('recommendationButton')
-    public recommendationButton: MatButtonToggle;
-
     /**
      * Constructor
      * Sets the default values for the lineNumberingMode and changeRecoMode and creates the form.
@@ -133,17 +121,15 @@ export class MotionExportDialogComponent implements OnInit {
                 //     }
                 // }
 
-                // remove the selection of "votingResult", "state" and "recommendation"
+                // remove the selection of "votingResult"
                 let metaInfoVal: string[] = this.exportForm.get('metaInfo').value;
                 metaInfoVal = metaInfoVal.filter(info => {
-                    return info !== 'votingResult' && info !== 'state' && info !== 'recommendation';
+                    return info !== 'votingResult';
                 });
                 this.exportForm.get('metaInfo').setValue(metaInfoVal);
 
-                // disable "Diff Version", "Voting Result", "State" and "Recommendation"
+                // disable "Diff Version" and "Voting Result"
                 this.votingResultButton.disabled = true;
-                this.stateButton.disabled = true;
-                this.recommendationButton.disabled = true;
                 // TODO: CSV Issues
                 // this.diffVersionButton.disabled = true;
             } else if (value === 'pdf') {
@@ -154,10 +140,8 @@ export class MotionExportDialogComponent implements OnInit {
                 this.exportForm.get('crMode').enable();
                 this.exportForm.get('crMode').setValue(this.defaultCrMode);
 
-                // enable "Diff Version", "Voting Result", "State" and "Recommendation"
+                // enable "Diff Version" and "Voting Result"
                 this.votingResultButton.disabled = false;
-                this.stateButton.disabled = false;
-                this.recommendationButton.disabled = false;
                 // TODO: Temporarily disabled. Will be required after CSV fixes
                 // this.diffVersionButton.disabled = false;
             }

client/src/app/site/motions/components/motion-list/motion-list.component.ts

@@ -201,7 +201,9 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
      */
     public openExportDialog(): void {
         const exportDialogRef = this.dialog.open(MotionExportDialogComponent, {
-            width: '750px',
+            width: '950px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
             data: this.dataSource
         });
 

client/src/styles.scss

@@ -24,7 +24,7 @@
 @import '~angular-tree-component/dist/angular-tree-component.css';
 
 /** date-time-picker */
-@import "~ng-pick-datetime/assets/style/picker.min.css";
+@import '~ng-pick-datetime/assets/style/picker.min.css';
 
 /** Define the classes to switch between themes */
 .openslides-theme {
@@ -139,7 +139,6 @@ b {
     }
 }
 
-
 .green-text {
     // TODO better name/theming
     color: #5a5;
@@ -181,7 +180,8 @@ mat-card {
 }
 
 .os-form-card-mobile {
-    .mat-form-field, .mat-select {
+    .mat-form-field,
+    .mat-select {
         width: 100%;
     }
 }
@@ -268,7 +268,6 @@ mat-card {
     @extend %os-table;
 }
 
-
 /* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */
 mat-paginator {
     min-height: 800px;
@@ -598,14 +597,12 @@ button.mat-menu-item.selected {
     font-size: 16px;
 }
 
-
 /*** Projector slides ***/
 
 #slide {
-
     h3 {
         color: #222;
-        margin-bottom: 10px
+        margin-bottom: 10px;
     }
 
     .slidetitle {
@@ -628,7 +625,8 @@ button.mat-menu-item.selected {
         }
     }
 
-    ul, ol {
+    ul,
+    ol {
         margin: 0 0 10px 0;
     }