From 53b9ce73f2f9ca92b4170075b577ab292446044b Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Thu, 27 Feb 2020 17:08:36 +0100 Subject: [PATCH] Enhance table layouts Enhance the result table layout for assignments --- .../components/charts/charts.component.ts | 4 + .../list-view-table.component.ts | 8 +- .../models/assignments/assignment-poll.ts | 12 ++ .../assignment-poll-detail.component.html | 86 ++++++----- .../assignment-poll-detail.component.scss | 134 ++++++++---------- .../assignment-poll-detail.component.ts | 86 ++++------- .../models/view-assignment-poll.ts | 4 +- .../poll-form/poll-form.component.spec.ts | 2 +- .../app/site/polls/models/view-base-poll.ts | 5 +- 9 files changed, 159 insertions(+), 182 deletions(-) diff --git a/client/src/app/shared/components/charts/charts.component.ts b/client/src/app/shared/components/charts/charts.component.ts index 0b9d554a6..70b7fe482 100644 --- a/client/src/app/shared/components/charts/charts.component.ts +++ b/client/src/app/shared/components/charts/charts.component.ts @@ -215,6 +215,10 @@ export class ChartsComponent extends BaseViewComponent { */ @Input() public pieChartOptions: ChartOptions = { + responsive: true, + legend: { + position: 'left' + }, aspectRatio: 1 }; diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.ts b/client/src/app/shared/components/list-view-table/list-view-table.component.ts index 822fd6c8b..9788a14b9 100644 --- a/client/src/app/shared/components/list-view-table/list-view-table.component.ts +++ b/client/src/app/shared/components/list-view-table/list-view-table.component.ts @@ -194,6 +194,12 @@ export class ListViewTableComponent - +

{{ poll.title }}

{{ poll.typeVerbose | translate }}
-
+
- + + + - + - @@ -71,12 +71,12 @@ [labels]="candidatesLabels" [data]="chartDataSubject" [hasPadding]="false" - [legendPosition]="isVotedPoll ? 'right' : 'top'" + legendPosition="right" > - +

{{ 'Single votes' | translate }}

{{ col.label | translate }}
-
+
{{ col.label | translate }}
- {{ vote.user.getFullName() }} - {{ 'Anonymous' | translate }} -
- - - -
- {{ voteOptionStyle[vote.votes[option.user_id].value].icon }} - {{ vote.votes[option.user_id].valueVerbose | translate }} +
+ {{ vote.user.getShortName() }} +
+ {{ vote.user.getLevelAndNumber() }}
- - - - -
-
{{ candidate }}
- +
+ {{ 'Anonymous' | translate }} +
+
+ +
+
{{ candidate }}
+
{{ 'The individual votes were anonymized.' | translate }}
- +
@@ -142,7 +136,7 @@ {{ '100% base' | translate }}: {{ poll.percentBaseVerbose | translate }}
- + diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss index ded606744..94725e90f 100644 --- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss +++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss @@ -1,73 +1,69 @@ @import '~assets/styles/variables.scss'; @import '~assets/styles/poll-colors.scss'; -%assignment-result-wrapper { +.assignment-result-wrapper { margin-top: 2em; display: grid; grid-gap: 10px; -} -.result-wrapper-bar-chart { - @extend %assignment-result-wrapper; - grid-template-areas: - 'results' - 'chart' - 'names'; -} + .assignment-result-table { + border-collapse: collapse; -.result-wrapper-pie-chart { - @extend %assignment-result-wrapper; - grid-template-areas: - 'chart' - 'results' - 'names'; -} + th { + text-align: left; + font-weight: initial; + } -@include desktop { - .result-wrapper-pie-chart { - grid-template-areas: - 'results chart' - 'names names'; - grid-template-columns: 2fr 1fr; + tr { + height: 48px; + } + + tr:last-child { + border-bottom: none; + } + + tr.sums { + border-bottom: none; + td { + padding-top: 1em; + padding-bottom: 1em; + } + } + + .user + .sums { + td { + padding-top: 4em; + } + } + } + + .pie-chart { + margin-left: auto; + margin-right: auto; + width: 50%; } } -.assignment-result-table { - grid-area: results; - th { - text-align: left; - font-weight: initial; - } - - tr { - height: 48px; - } - - tr:last-child { - border-bottom: none; - } - - .single-result { - display: flex; - } -} - -.assignment-result-chart { - grid-area: chart; -} - -.pie-chart { - max-width: 300px; - margin-left: auto; - margin-right: auto; +.single-vote-result + .single-vote-result { + margin-top: 1em; } .named-result-table { - grid-area: names; .mat-form-field { font-size: 14px; width: 100%; } + + .single-votes-table { + display: block; + height: 500px; + } + + .vote-field { + text-align: center; + width: 100%; + padding-right: 12px; + } } .assignment-poll-meta { @@ -76,22 +72,6 @@ padding-top: 20px; } -.single-votes-table { - display: block; - height: 500px; -} - -.openslides-theme .pbl-ngrid-row:hover { - background-color: #f9f9f9; -} - -.openslides-theme os-list-view-table os-sort-filter-bar .custom-table-header { - &, - .action-buttons .input-container input { - background: white; - } -} - .voted-yes { color: $votes-yes-color; } @@ -104,6 +84,18 @@ color: $votes-abstain-color; } +// theme +.openslides-theme .pbl-ngrid-row:hover { + background-color: #f9f9f9; +} + +.openslides-theme os-list-view-table os-sort-filter-bar .custom-table-header { + &, + .action-buttons .input-container input { + background: white; + } +} + .openslides-theme .pbl-ngrid-no-data { top: 10%; } @@ -123,11 +115,3 @@ border-right: 1px solid #e0e0e0; } } - -.vote-field { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding-right: 12px; -} diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts index 24973bf2d..e59b4ee59 100644 --- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts +++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts @@ -11,9 +11,7 @@ import { AssignmentPollRepositoryService } from 'app/core/repositories/assignmen import { AssignmentVoteRepositoryService } from 'app/core/repositories/assignments/assignment-vote-repository.service'; import { GroupRepositoryService } from 'app/core/repositories/users/group-repository.service'; import { PromptService } from 'app/core/ui-services/prompt.service'; -import { ViewportService } from 'app/core/ui-services/viewport.service'; import { ChartType } from 'app/shared/components/charts/charts.component'; -import { AssignmentPollMethod } from 'app/shared/models/assignments/assignment-poll'; import { BasePollDetailComponent } from 'app/site/polls/components/base-poll-detail.component'; import { VotingResult } from 'app/site/polls/models/view-base-poll'; import { PollService } from 'app/site/polls/services/poll.service'; @@ -27,8 +25,6 @@ import { ViewAssignmentPoll } from '../../models/view-assignment-poll'; encapsulation: ViewEncapsulation.None }) export class AssignmentPollDetailComponent extends BasePollDetailComponent { - public AssignmentPollMethod = AssignmentPollMethod; - public columnDefinitionSingleVotes: PblColumnDefinition[]; public filterProps = ['user.getFullName']; @@ -41,10 +37,6 @@ export class AssignmentPollDetailComponent extends BasePollDetailComponent 0) { + + if (vote.weight > 0) { + if (this.poll.isMethodY) { if (vote.value === 'Y') { votes[userId].votes.push(option.user.getFullName()); - } else if (vote.value === 'N') { - votes[userId].votes.push(this.translate.instant('No')); - } else if (vote.value === 'A') { - votes[userId].votes.push(this.translate.instant('Abstain')); + } else { + votes[userId].votes.push(this.voteValueToLabel(vote.value)); } + } else { + votes[userId].votes.push(`${option.user.getShortName()}: ${this.voteValueToLabel(vote.value)}`); } - } else { - votes[userId].votes[option.user_id] = vote; } } } @@ -129,17 +102,20 @@ export class AssignmentPollDetailComponent extends BasePollDetailComponent ({ votingOption: candidate.user.short_name, votingOptionSubtitle: candidate.user.getLevelAndNumber(), - + class: 'user', value: this.voteTableKeys.map( key => ({ @@ -84,6 +84,7 @@ export class ViewAssignmentPoll extends ViewBasePoll ({ votingOption: key.vote, + class: 'sums', value: [ { amount: this[key.vote], @@ -93,7 +94,6 @@ export class ViewAssignmentPoll extends ViewBasePoll { +describe('PollFormComponent', () => { let component: PollFormComponent; let fixture: ComponentFixture>; 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 b4df3afa9..35686b0ac 100644 --- a/client/src/app/site/polls/models/view-base-poll.ts +++ b/client/src/app/site/polls/models/view-base-poll.ts @@ -17,6 +17,7 @@ export enum PollClassType { export interface PollTableData { votingOption: string; votingOptionSubtitle?: string; + class?: string; value: VotingResult[]; } @@ -162,10 +163,10 @@ export abstract class ViewBasePoll< public abstract get percentBaseVerbose(): string; public get showAbstainPercent(): boolean { - return this.onehundred_percent_base === PercentBase.YNA; + return this.poll.onehundred_percent_base === PercentBase.YNA; } - public abstract readonly pollClassType: PollClassType; + public abstract readonly pollClassType: 'motion' | 'assignment'; public canBeVotedFor: () => boolean;
CandidatesVotes + + Yes + + + Votes + + NoAbstain
{{ row.votingOption | pollKeyVerbose | translate }} @@ -39,23 +48,14 @@ {{ row.votingOptionSubtitle }} -
-
- - {{ vote.vote | pollKeyVerbose | translate }} - - - {{ vote.vote | pollKeyVerbose | translate }} +
+
+ + {{ vote.amount | parsePollNumber }} + + {{ vote.amount | pollPercentBase: poll }} - - - {{ vote.amount | parsePollNumber }} - - {{ vote.amount | pollPercentBase: poll }} - - -
+