choice button refacto

src/app/features/consultation/consultation.module.ts

@@ -7,9 +7,15 @@ import { ConsultationRoutingModule } from './consultation-routing.module';
 import { ConsultationComponent } from './consultation.component';
 import { PollResultsCompactComponent } from './poll-results-compact/poll-results-compact.component';
 import { PollResultsDetailedComponent } from './poll-results-detailed/poll-results-detailed.component';
+import { ChoiceButtonComponent } from '../../shared/components/choice-item/choice-button.component';
 
 @NgModule({
-	declarations: [ConsultationComponent, PollResultsCompactComponent, PollResultsDetailedComponent],
+	declarations: [
+		ConsultationComponent,
+		PollResultsCompactComponent,
+		PollResultsDetailedComponent,
+		ChoiceButtonComponent,
+	],
 	imports: [CommonModule, ConsultationRoutingModule, SharedModule, TranslateModule.forChild({ extend: true })],
 })
 export class ConsultationModule {}

src/app/features/consultation/poll-results-compact/poll-results-compact.component.html

@@ -1,10 +1,5 @@
 {{ poll.choices.length }} choix
-<div
+<div class="box" *ngFor="let choice of poll.choices">
-	class="box"
-	*ngFor="let choice of poll.choices"
-	[ngClass]="{ 'active has-background-success': choice.enabled }"
-	(click)="choice.enabled = !choice.enabled"
->
 	<div class="columns is-vcentered is-mobile">
 		<div class="column">
 			<label class="label" *ngIf="poll.kind == 'text'">{{ choice.name }} </label>
@@ -24,40 +19,9 @@
 		</div>
 		<div class="column is-narrow">
 			<div class="buttons has-addons is-right">
-				<button
+				<app-choice-button [poll]="poll" [choice]="choice" [answerKind]="'YES'"></app-choice-button>
-					class="button is-white"
+				<app-choice-button [poll]="poll" [choice]="choice" [answerKind]="'MAYBE'"></app-choice-button>
-					[ngClass]="{ 'is-primary': storageService.choiceHasAnswerOfValue(choice.id, 'yes') }"
+				<app-choice-button [poll]="poll" [choice]="choice" [answerKind]="'NO'"></app-choice-button>
-					(click)="toggleAnswer(choice.id, 'yes')"
-					*ngIf="poll.allowed_answers.indexOf('yes') !== -1"
-				>
-					<img class="image is-24x24" src="../../../assets/img/icon_voter_YES.svg" />
-
-					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
-						{{ choice[answerEnum.YES].count }}
-					</span>
-				</button>
-				<button
-					class="button is-white"
-					[ngClass]="{ 'is-primary': storageService.choiceHasAnswerOfValue(choice.id, 'maybe') }"
-					(click)="toggleAnswer(choice.id, 'maybe')"
-					*ngIf="poll.allowed_answers.indexOf('maybe') !== -1"
-				>
-					<img class="image is-24x24" src="../../../assets/img/icon_voter_MAYBE.svg" />
-					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
-						{{ choice[answerEnum.MAYBE].count }}
-					</span>
-				</button>
-				<button
-					class="button is-white"
-					[ngClass]="{ 'is-primary': storageService.choiceHasAnswerOfValue(choice.id, 'no') }"
-					(click)="toggleAnswer(choice.id, 'no')"
-					*ngIf="poll.allowed_answers.indexOf('no') !== -1"
-				>
-					<img class="image is-24x24" src="../../../assets/img/croix.svg" />
-					<span class="counter" *ngIf="choice[answerEnum.YES].count * 1 > 0">
-						{{ choice[answerEnum.NO].count }}
-					</span>
-				</button>
 			</div>
 		</div>
 	</div>

src/app/shared/components/choice-item/choice-button.component.html

@@ -0,0 +1,12 @@
+<button
+	class="button is-white"
+	[ngClass]="{ 'is-primary': storageService.choiceHasAnswerOfValue(choice.id, answerEnum[answerKind]) }"
+	(click)="storageService.toggleAnswer(choice.id, answerEnum[answerKind])"
+	*ngIf="poll.allowed_answers.indexOf(answerEnum[answerKind]) !== -1"
+>
+	<img class="image is-24x24" src="../../../assets/img/icon_voter_{{ answerKind }}.svg" />
+
+	<span class="counter" *ngIf="choice[answerEnum[answerKind]].count * 1 > 0">
+		{{ choice[answerEnum[answerKind]].count }}
+	</span>
+</button>

src/app/shared/components/choice-item/choice-button.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChoiceButtonComponent } from './choice-button.component';
+
+describe('ChoiceItemComponent', () => {
+	let component: ChoiceButtonComponent;
+	let fixture: ComponentFixture<ChoiceButtonComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ChoiceButtonComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(ChoiceButtonComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/shared/components/choice-item/choice-button.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { StorageService } from '../../../core/services/storage.service';
+import { Choice } from '../../../core/models/choice.model';
+import { Answer } from '../../../core/enums/answer.enum';
+import { Poll } from '../../../core/models/poll.model';
+
+@Component({
+	selector: 'app-choice-button',
+	templateUrl: './choice-button.component.html',
+	styleUrls: ['./choice-button.component.scss'],
+})
+export class ChoiceButtonComponent implements OnInit {
+	@Input() public poll: Poll;
+	@Input() public choice: Choice;
+	@Input() public answerKind: string = 'yes';
+
+	public answerEnum = Answer;
+
+	constructor(public storageService: StorageService) {}
+
+	ngOnInit(): void {}
+}

src/assets/img/icon_voter_NO.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<path fill="#CD0000" fill-rule="evenodd" d="M7.314 6.05l4.465-4.461A.918.918 0 0 0 10.484.294L6.018 4.71 1.525.22A.92.92 0 0 0 .229 1.516l4.484 4.536-4.392 4.333a.918.918 0 1 0 1.296 1.295L6 7.299l4.355 4.353a.92.92 0 0 0 1.295-1.295L7.314 6.05z"/>
+</svg>