display list of date choices in participation

src/app/core/models/choice.model.ts

@@ -6,6 +6,10 @@ export class ChoiceGroup {
 	subSetToYes = false; // to know if all the choices are set to YES, to toggle them all at once without checking them individually
 	choices: Choice[];
 }
+export class AnswerStats {
+	count: number;
+	people: Array<string>;
+}
 
 export class Choice {
 	public id: number;
@@ -14,9 +18,9 @@ export class Choice {
 	public score: number;
 	public enabled: boolean;
 	public url?: string;
-	public yes?: any;
+	public yes?: AnswerStats;
-	public no?: any;
+	public no?: AnswerStats;
-	public maybe?: any;
+	public maybe?: AnswerStats;
 
 	constructor(
 		public participants: Map<Answer, Set<Owner>> = new Map<Answer, Set<Owner>>([

src/app/features/consultation/consultation.component.html

@@ -90,12 +90,35 @@
 		</section>
 
 		<section class="poll-answers">
-			<h2 class="title is-3">
+			<div class="columns">
-				{{ 'participation.poll' | translate }}
+				<div class="column">
-			</h2>
+					<h2 class="title is-3">
-			<div class="rounded-block">
+						{{ 'participation.poll' | translate }}
-				<app-poll-results-dinum [poll]="poll"></app-poll-results-dinum>
+					</h2>
+				</div>
+				<div class="column">
+					<button class="no-outline button" (click)="detailledDisplay = !detailledDisplay">
+						<span *ngIf="detailledDisplay">
+							<!--						<img class="icon" src="assets/icons/flag.svg" alt="icone magnifying" />-->
+							{{ 'participation.mode_comptact' | translate }}
+						</span>
+						<span *ngIf="!detailledDisplay">
+							<!--						<img class="icon" src="assets/icons/settings.svg" alt="icone magnifying" />-->
+							{{ 'participation.mode_detailed' | translate }}
+						</span>
+					</button>
+				</div>
 			</div>
+
+			<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
+			<!--<app-poll-results-compact [poll]="poll"></app-poll-results-compact>-->
+			<!--			<button-->
+			<!--				class="btn btn-block submit-votestack"-->
+			<!--				(click)="addVoteStack()"-->
+			<!--				*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"-->
+			<!--			>-->
+			<!--				<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer-->
+			<!--			</button>-->
 		</section>
 		<section class="poll-comments">
 			<h2 class="title is-3">

src/app/features/consultation/consultation.component.ts

@@ -26,6 +26,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	private pollSlug: string;
 	private pass_hash: string;
 	maxYesCount: any = 1;
+	detailledDisplay: boolean = false;
 
 	constructor(
 		private router: Router,
@@ -84,4 +85,40 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	displayOptions() {
 		alert('TODO');
 	}
+
+	/**
+	 * create a	new vote stack
+	 */
+	addVoteStack(): void {
+		this.storageService.vote_stack.poll_custom_url = this.poll.custom_url;
+		this.pollService.pass_hash = this.pass_hash;
+
+		this.toastService.display('envoi du vote ....');
+		this.api
+			.sendNewVoteStackOfPoll(this.storageService.vote_stack)
+			.then((resp: any) => {
+				console.log('sendNewVoteStackOfPoll resp', resp);
+				this.storeVoteStackAndReloadPoll(resp);
+			})
+			// eslint-disable-next-line @typescript-eslint/unbound-method
+			.catch(this.api.ousideHandleError);
+	}
+
+	/**
+	 * store the updated vote stack
+	 * @param voteStack
+	 */
+	storeVoteStackAndReloadPoll(voteStack: any) {
+		if (voteStack.status == 200) {
+			this.storageService.mapVotes(voteStack.data);
+			this.pollService.enrichVoteStackWithCurrentPollChoicesDefaultVotes(this.storageService.vote_stack);
+			if (this.pass_hash) {
+				this.pollService.loadPollByCustomUrlWithPasswordHash(this.poll.custom_url, this.pass_hash);
+			} else {
+				this.pollService.loadPollByCustomUrl(this.poll.custom_url);
+			}
+		} else {
+			this.toastService.display('erreur à l enregistrement');
+		}
+	}
 }

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

@@ -1,21 +1,79 @@
 <div class="date-choices" *ngIf="poll.kind == 'date'">
-	<div class="box" *ngFor="let group of poll.choices_grouped">
+	<div class="rounded-block" *ngFor="let group of poll.choices_grouped">
-		<h3 class="title is-3">
+		<div class="date-label">
 			{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
-		</h3>
+		</div>
-		<div class="time-slice-choice" *ngFor="let choice of group.choices">
+		<div class="list-of-choices">
-			<h4 class="title is-4 choice-label">
+			<div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
-				{{ choice.name }}
+				<div class="columns is-vcentered time-span-display">
-			</h4>
+					<div class="column">
-			<div class="columns is-vcentered is-mobile">
+						<div class="choice-label">
-				<div class="column"></div>
+							{{ choice.name }}
-				<div class="column is-narrow">
+						</div>
-					<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
+					</div>
-						<i class="fa fa-star fa-2x"></i>
+					<div class="column is-narrow">
-					</span>
+						<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
+							<i class="fa fa-star fa-2x"></i>
+						</span>
+					</div>
+					<div class="column is-narrow">
+						<div class="buttons"></div>
+					</div>
 				</div>
-				<div class="column is-narrow">
+				<div class="choice-header" *ngIf="poll.max_score > 0"></div>
-					<div class="buttons"></div>
+
+				<div class="choice-bars-display" *ngIf="!detailledDisplay">
+					<div class="columns" *ngIf="choice.yes.count > 0">
+						<div class="column is-narrow">
+							{{ 'participation.yes' | translate }}
+						</div>
+						<div class="column">
+							<div class="bar has-text-centered has-background-yes">
+								{{ choice.yes.count }}
+							</div>
+						</div>
+					</div>
+					<div class="columns" *ngIf="choice.maybe.count > 0">
+						<div class="column is-narrow">
+							{{ 'participation.maybe' | translate }}
+						</div>
+						<div class="column">
+							<div class="bar has-text-centered has-background-maybe">
+								{{ choice.maybe.count }}
+							</div>
+						</div>
+					</div>
+					<div class="columns" *ngIf="choice.no.count > 0">
+						<div class="column is-narrow">
+							{{ 'participation.no' | translate }}
+						</div>
+						<div class="column">
+							<div class="bar has-text-centered has-background-no">
+								{{ choice.no.count }}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="choice-details-display" *ngIf="detailledDisplay">
+					<p class="description-details">
+						{{ 'participation.details' | translate }}
+						<!--				display each name for each kind of answer-->
+					</p>
+					<div class="choice-display-yes">
+						<div class="people has-background-yes" *ngFor="let peopleName of choice.yes.people">
+							<img class="icon" src="assets/icons/check-square.svg" alt="icone ok" /> {{ peopleName }}
+						</div>
+					</div>
+					<div class="choice-display-maybe">
+						<div class="people has-background-maybe" *ngFor="let peopleName of choice.maybe.people">
+							<img class="icon" src="assets/icons/box.svg" alt="icone ok" /> {{ peopleName }}
+						</div>
+					</div>
+					<div class="choice-display-no">
+						<div class="people has-background-no" *ngFor="let peopleName of choice.no.people">
+							<img class="icon" src="assets/icons/x-square.svg" alt="icone ok" /> {{ peopleName }}
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.scss

@@ -1,3 +1,32 @@
-.max_score {
+.white-block {
-	color: green;
+	background: white;
+	margin-bottom: 1rem;
+	padding: 0.75rem;
+	border-radius: 0.5rem;
+}
+.list-of-choices {
+	.button {
+		.icon {
+			margin-right: 1ch !important;
+			display: inline-block;
+		}
+	}
+	.choice-label {
+		font-size: 1rem;
+		color: #383838;
+	}
+	.choice-header {
+		margin-left: -0.75rem;
+		margin-right: -0.75rem;
+		border-bottom: 1px solid #e2e0fa;
+	}
+	.max_score {
+		color: green;
+	}
+}
+.date-label {
+	font-size: 1rem;
+	color: #383838;
+	font-weight: bold;
+	margin-bottom: 1.25rem;
 }

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts

@@ -11,6 +11,7 @@ import { StorageService } from '../../../core/services/storage.service';
 })
 export class PollResultsDinumComponent implements OnInit {
 	@Input() public poll: Poll;
+	@Input() public detailledDisplay: boolean = false;
 	public answerEnum = Answer;
 	constructor(private modalService: ModalService, private storageService: StorageService) {}
 

src/app/shared/components/comments/comments.component.html

@@ -86,7 +86,7 @@
 					type="submit"
 					name="add-comment"
 					class="button is-primary is-fullwidth"
-					value="Ajouter mon commentaire ✉️"
+					value="{{ 'participation.send_button' | translate }}"
 					(click)="addComment()"
 				/>
 			</div>