From 294b75c32067c5f754b48e4e5989ade4adecd106 Mon Sep 17 00:00:00 2001
From: GabrielMeyer <meyergabriel@live.de>
Date: Fri, 31 Jan 2020 13:18:07 +0100
Subject: [PATCH] Replaces the mat-table with a classic table

---
 .../pipes/poll-key-verbose.pipe.spec.ts       |  8 ++++++
 .../app/shared/pipes/poll-key-verbose.pipe.ts | 24 +++++++++++++++++
 client/src/app/shared/shared.module.ts        | 10 ++++---
 .../models/view-assignment-poll.ts            |  4 +--
 .../site/motions/models/view-motion-poll.ts   |  4 +--
 .../motion-poll-detail.component.html         | 27 +++++++++----------
 .../motion-poll-detail.component.scss         | 17 ++++++++++++
 ...tion-poll-detail.component.scss-theme.scss | 12 +++++++++
 .../motion-poll/motion-poll.component.html    |  5 ++--
 .../motion-poll/motion-poll.component.scss    |  6 +++--
 .../motion-poll.component.scss-theme.scss     |  9 +++++++
 .../app/site/polls/models/view-base-poll.ts   | 19 ++++++++++---
 client/src/styles.scss                        |  4 +++
 13 files changed, 120 insertions(+), 29 deletions(-)
 create mode 100644 client/src/app/shared/pipes/poll-key-verbose.pipe.spec.ts
 create mode 100644 client/src/app/shared/pipes/poll-key-verbose.pipe.ts
 create mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss
 create mode 100644 client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss

diff --git a/client/src/app/shared/pipes/poll-key-verbose.pipe.spec.ts b/client/src/app/shared/pipes/poll-key-verbose.pipe.spec.ts
new file mode 100644
index 000000000..1ffee9c1e
--- /dev/null
+++ b/client/src/app/shared/pipes/poll-key-verbose.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { PollKeyVerbosePipe } from './poll-key-verbose.pipe';
+
+describe('PollKeyVerbosePipe', () => {
+    it('create an instance', () => {
+        const pipe = new PollKeyVerbosePipe();
+        expect(pipe).toBeTruthy();
+    });
+});
diff --git a/client/src/app/shared/pipes/poll-key-verbose.pipe.ts b/client/src/app/shared/pipes/poll-key-verbose.pipe.ts
new file mode 100644
index 000000000..c3d406e2e
--- /dev/null
+++ b/client/src/app/shared/pipes/poll-key-verbose.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+const PollValues = {
+    votesvalid: 'Valid votes',
+    votesinvalid: 'Invalid votes',
+    votescast: 'Total votes cast',
+    votesno: 'Votes No',
+    votesabstain: 'Votes abstain',
+    yes: 'Yes',
+    no: 'No',
+    abstain: 'Abstain'
+};
+
+/**
+ * Pipe to transform a key from polls into a speaking word.
+ */
+@Pipe({
+    name: 'pollKeyVerbose'
+})
+export class PollKeyVerbosePipe implements PipeTransform {
+    public transform(value: string): string {
+        return PollValues[value];
+    }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 319640470..bc5f4ccd7 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -121,6 +121,7 @@ import { MotionPollDialogComponent } from 'app/site/motions/modules/motion-poll/
 import { AssignmentPollDialogComponent } from 'app/site/assignments/components/assignment-poll-dialog/assignment-poll-dialog.component';
 import { ParsePollNumberPipe } from './pipes/parse-poll-number.pipe';
 import { ReversePipe } from './pipes/reverse.pipe';
+import { PollKeyVerbosePipe } from './pipes/poll-key-verbose.pipe';
 
 /**
  * Share Module for all "dumb" components and pipes.
@@ -283,7 +284,8 @@ import { ReversePipe } from './pipes/reverse.pipe';
         MotionPollDialogComponent,
         AssignmentPollDialogComponent,
         ParsePollNumberPipe,
-        ReversePipe
+        ReversePipe,
+        PollKeyVerbosePipe
     ],
     declarations: [
         PermsDirective,
@@ -339,7 +341,8 @@ import { ReversePipe } from './pipes/reverse.pipe';
         MotionPollDialogComponent,
         AssignmentPollDialogComponent,
         ParsePollNumberPipe,
-        ReversePipe
+        ReversePipe,
+        PollKeyVerbosePipe
     ],
     providers: [
         {
@@ -357,7 +360,8 @@ import { ReversePipe } from './pipes/reverse.pipe';
         TrustPipe,
         LocalizedDatePipe,
         ParsePollNumberPipe,
-        ReversePipe
+        ReversePipe,
+        PollKeyVerbosePipe
     ],
     entryComponents: [
         SortBottomSheetComponent,
diff --git a/client/src/app/site/assignments/models/view-assignment-poll.ts b/client/src/app/site/assignments/models/view-assignment-poll.ts
index ec92f1d87..c53157653 100644
--- a/client/src/app/site/assignments/models/view-assignment-poll.ts
+++ b/client/src/app/site/assignments/models/view-assignment-poll.ts
@@ -5,7 +5,7 @@ import { AssignmentPoll, AssignmentPollMethods } from 'app/shared/models/assignm
 import { PollColor } from 'app/shared/models/poll/base-poll';
 import { BaseViewModel } from 'app/site/base/base-view-model';
 import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
-import { ViewBasePoll } from 'app/site/polls/models/view-base-poll';
+import { PollData, ViewBasePoll } from 'app/site/polls/models/view-base-poll';
 import { ViewAssignment } from './view-assignment';
 import { ViewAssignmentOption } from './view-assignment-option';
 
@@ -74,7 +74,7 @@ export class ViewAssignmentPoll extends ViewBasePoll<AssignmentPoll> implements
         return data;
     }
 
-    public generateTableData(): {}[] {
+    public generateTableData(): PollData[] {
         const data = this.options
             .map(candidate => ({
                 yes: candidate.yes,
diff --git a/client/src/app/site/motions/models/view-motion-poll.ts b/client/src/app/site/motions/models/view-motion-poll.ts
index e1280df2c..bd0c1ba73 100644
--- a/client/src/app/site/motions/models/view-motion-poll.ts
+++ b/client/src/app/site/motions/models/view-motion-poll.ts
@@ -4,7 +4,7 @@ import { PollColor, PollState } from 'app/shared/models/poll/base-poll';
 import { BaseViewModel } from 'app/site/base/base-view-model';
 import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
 import { ViewMotionOption } from 'app/site/motions/models/view-motion-option';
-import { ViewBasePoll } from 'app/site/polls/models/view-base-poll';
+import { PollData, ViewBasePoll } from 'app/site/polls/models/view-base-poll';
 import { ViewMotion } from './view-motion';
 
 export interface MotionPollTitleInformation {
@@ -37,7 +37,7 @@ export class ViewMotionPoll extends ViewBasePoll<MotionPoll> implements MotionPo
         return this.motion;
     }
 
-    public generateTableData(): {}[] {
+    public generateTableData(): PollData[] {
         let tableData = this.options.flatMap(vote => this.tableKeys.map(key => ({ key: key, value: vote[key] })));
         tableData.push(...this.voteKeys.map(key => ({ key: key, value: this[key] })));
         tableData = tableData.map(entry => (entry.value >= 0 ? entry : { key: entry.key, value: null }));
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
index 087663db5..6cd120436 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
@@ -36,19 +36,18 @@
                 ></os-charts>
 
                 <!-- result table -->
-                <mat-table class="result-table" [dataSource]="poll.tableData">
-                    <ng-container matColumnDef="key" sticky>
-                        <mat-header-cell *matHeaderCellDef></mat-header-cell>
-                        <mat-cell *matCellDef="let row">{{ row.key }}</mat-cell>
-                    </ng-container>
-                    <ng-container matColumnDef="value" sticky>
-                        <mat-header-cell *matHeaderCellDef>Votes</mat-header-cell>
-                        <mat-cell *matCellDef="let row">{{ row.value }}</mat-cell>
-                    </ng-container>
-
-                    <mat-header-row *matHeaderRowDef="columnDefinition"></mat-header-row>
-                    <mat-row *matRowDef="let row; columns: columnDefinition"></mat-row>
-                </mat-table>
+                <table class="result-table">
+                    <tbody>
+                        <tr>
+                            <th></th>
+                            <th translate>Votes</th>
+                        </tr>
+                        <tr *ngFor="let row of poll.tableData">
+                            <td>{{ row.key | pollKeyVerbose | translate }}</td>
+                            <td class="result-cell-definition">{{ row.value }}</td>
+                        </tr>
+                    </tbody>
+                </table>
 
                 <!-- Named table: only show if votes are present -->
                 <div class="named-result-table" *ngIf="poll.type === 'named' && votesDataSource.data">
@@ -87,8 +86,6 @@
             <div>{{ 'Required majority' | translate }}: {{ poll.majorityMethodVerbose | translate }}</div>
             <div>{{ '100% base' | translate }}: {{ poll.percentBaseVerbose | translate }}</div>
         </div>
-
-        <os-projector-button [object]="poll"></os-projector-button>
     </ng-container>
 </ng-template>
 
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
index 355c9138a..d1795676c 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
@@ -24,6 +24,23 @@
 
 .result-table {
     grid-area: results;
+
+    tr {
+        height: 48px;
+        min-height: 48px;
+        th:first-child,
+        td:first-child {
+            padding-left: 24px;
+        }
+        th:last-child,
+        td:last-child {
+            padding-right: 24px;
+        }
+
+        .result-cell-definition {
+            text-align: center;
+        }
+    }
 }
 
 .result-chart {
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss
new file mode 100644
index 000000000..8d2ad67ef
--- /dev/null
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss
@@ -0,0 +1,12 @@
+@import '~@angular/material/theming';
+
+@mixin os-motion-poll-detail-style($theme) {
+    $background: map-get($theme, background);
+
+    .result-table {
+        border-collapse: collapse;
+        tr {
+            border-bottom: 1px solid mat-color($background, focused-button);
+        }
+    }
+}
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
index 924684f3e..4acb0e736 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
@@ -46,7 +46,7 @@
 </div>
 
 <ng-template #votingResult>
-    <div [routerLink]="pollLink">
+    <div [routerLink]="pollLink" class="poll-link-wrapper">
         <ng-container
             [ngTemplateOutlet]="poll.hasVotes && poll.stateHasVotes ? viewTemplate : emptyTemplate"
         ></ng-container>
@@ -58,7 +58,8 @@
         <!-- empty helper div to center the grid wrapper -->
         <div></div>
         <div class="doughnut-chart">
-            <os-charts *ngIf="showChart" [type]="'doughnut'" [data]="chartDataSubject" [showLegend]="false"> </os-charts>
+            <os-charts *ngIf="showChart" [type]="'doughnut'" [data]="chartDataSubject" [showLegend]="false">
+            </os-charts>
         </div>
         <div class="vote-legend">
             <div class="votes-yes" *ngIf="isVoteDocumented(voteYes)">
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
index 118a9c40f..0b4aba82b 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
@@ -1,12 +1,14 @@
 @import '~assets/styles/poll-colors.scss';
 
+.poll-link-wrapper {
+    outline: none;
+}
+
 .poll-preview-wrapper {
     padding: 8px;
-    background: white;
     border: 1px solid rgba(0, 0, 0, 0.12);
 
     .poll-title {
-        color: black;
         text-decoration: none;
         font-weight: 500;
     }
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss
new file mode 100644
index 000000000..a1a0e24fc
--- /dev/null
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss
@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+@mixin os-motion-poll-style($theme) {
+    $background: map-get($theme, background);
+
+    .poll-preview-wrapper {
+        background-color: mat-color($background, card);
+    }
+}
diff --git a/client/src/app/site/polls/models/view-base-poll.ts b/client/src/app/site/polls/models/view-base-poll.ts
index 6efde883f..c48c35197 100644
--- a/client/src/app/site/polls/models/view-base-poll.ts
+++ b/client/src/app/site/polls/models/view-base-poll.ts
@@ -13,6 +13,18 @@ export enum PollClassType {
     Assignment = 'assignment'
 }
 
+/**
+ * Interface describes the possible data for the result-table.
+ */
+export interface PollData {
+    key?: string;
+    value?: number;
+    yes?: number;
+    no?: number;
+    abstain: number;
+    user?: string;
+}
+
 export const PollClassTypeVerbose = {
     motion: 'Motion poll',
     assignment: 'Assignment poll'
@@ -67,7 +79,9 @@ export const PercentBaseVerbose = {
 };
 
 export abstract class ViewBasePoll<M extends BasePoll<M, any> = any> extends BaseProjectableViewModel<M> {
-    public get tableData(): {}[] {
+    private _tableData: PollData[] = [];
+
+    public get tableData(): PollData[] {
         if (!this._tableData.length) {
             this._tableData = this.generateTableData();
         }
@@ -101,7 +115,6 @@ export abstract class ViewBasePoll<M extends BasePoll<M, any> = any> extends Bas
     public get percentBaseVerbose(): string {
         return PercentBaseVerbose[this.onehundred_percent_base];
     }
-    private _tableData: {}[] = [];
 
     public abstract readonly pollClassType: 'motion' | 'assignment';
 
@@ -131,7 +144,7 @@ export abstract class ViewBasePoll<M extends BasePoll<M, any> = any> extends Bas
 
     public abstract generateChartData(): ChartData;
 
-    public abstract generateTableData(): {}[];
+    public abstract generateTableData(): PollData[];
 }
 
 export interface ViewBasePoll<M extends BasePoll<M, any> = any> extends BasePoll<M, any> {
diff --git a/client/src/styles.scss b/client/src/styles.scss
index d221bde56..d87c899d5 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -28,6 +28,8 @@
 @import './app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.components.scss-theme.scss';
 @import './app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss-theme.scss';
 @import './app/shared/components/banner/banner.component.scss-theme.scss';
+@import './app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss';
+@import './app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss';
 
 /** fonts */
 @import './assets/styles/fonts.scss';
@@ -56,6 +58,8 @@ $narrow-spacing: (
     @include os-amendment-create-wizard-style($theme);
     @include os-motion-detail-diff-style($theme);
     @include os-banner-style($theme);
+    @include os-motion-poll-style($theme);
+    @include os-motion-poll-detail-style($theme);
 }
 
 /** Load projector specific SCSS values */