ag-admin
/
OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replaces the mat-table with a classic table

This commit is contained in:
GabrielMeyer 2020-01-31 13:18:07 +01:00 committed by FinnStutzenstein
parent 09b0d19de0
commit 294b75c320
13 changed files with 120 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/shared/pipes/poll-key-verbose.pipe.spec.ts Normal file
View File

@ -0,0 +1,8 @@
import { PollKeyVerbosePipe } from './poll-key-verbose.pipe';
describe('PollKeyVerbosePipe', () => {
it('create an instance', () => {
const pipe = new PollKeyVerbosePipe();
expect(pipe).toBeTruthy();
});
});

24
client/src/app/shared/pipes/poll-key-verbose.pipe.ts Normal file
View File

@ -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];
}
}

10
client/src/app/shared/shared.module.ts
View File

@ -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,

4
client/src/app/site/assignments/models/view-assignment-poll.ts
View File

@ -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,

4
client/src/app/site/motions/models/view-motion-poll.ts
View File

@ -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 }));

27
client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.html
View File

@ -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>

17
client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss
View File

@ -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 {

12
client/src/app/site/motions/modules/motion-poll/motion-poll-detail/motion-poll-detail.component.scss-theme.scss Normal file
View File

@ -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);
}
}
}

5
client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
View File

@ -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)">

6
client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss
View File

@ -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;
}

9
client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.scss-theme.scss Normal file
View File

@ -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);
}
}

19
client/src/app/site/polls/models/view-base-poll.ts
View File

@ -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> {

4
client/src/styles.scss
View File

@ -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 */