display fav choices

src/app/features/consultation/choice-table/choice-table.component.html

@@ -1,6 +1,6 @@
 <div class="choice-bars-display" *ngIf="!detailledDisplay">
 	<div class="columns" *ngIf="choice.yes && choice.yes.count > 0">
-		<div class="column is-narrow">
+		<div class="column is-narrow choice-label">
 			{{ 'participation.yes' | translate }}
 		</div>
 		<div class="column">
@@ -15,7 +15,7 @@
 		</div>
 	</div>
 	<div class="columns" *ngIf="choice.maybe && choice.maybe.count > 0">
-		<div class="column is-narrow">
+		<div class="column is-narrow choice-label">
 			{{ 'participation.maybe' | translate }}
 		</div>
 		<div class="column">
@@ -28,7 +28,7 @@
 		</div>
 	</div>
 	<div class="columns" *ngIf="choice.no && choice.no.count > 0">
-		<div class="column is-narrow">
+		<div class="column is-narrow choice-label">
 			{{ 'participation.no' | translate }}
 		</div>
 		<div class="column">

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

@@ -1,7 +1,7 @@
 <app-header [linkToHome]="false"></app-header>
 
-<section class="poll_loaded padded consultation step" *ngIf="!fetching && poll">
+<section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
-	<div class="contained-in-large-column">
+	<div class="step contained-in-large-column">
 		<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
 			<h2 class="title is-2">
 				{{ 'participation.share_title' | translate }}
@@ -72,9 +72,23 @@
 						</div>
 					</div>
 				</div>
-				<div class="has-votes" *ngIf="poll.stacks.length !== 0">
+				<div class="has-votes" *ngIf="poll.stacks.length !== 0 && favChoicesList.length">
-					{{ 'participation.fav_description_one' | translate: { maxYesCount: maxYesCount } }}
+					<div class="one-fav" *ngIf="favChoicesList.length == 1">
-					{{ 'participation.fav_description_several' | translate }}
+						{{ 'participation.fav_description_one' | translate: { maxYesCount: maxYesCount } }}
+					</div>
+					<div class="several-fav" *ngIf="favChoicesList.length > 1">
+						{{ 'participation.fav_description_several' | translate }}
+					</div>
+					<div class="fav block has-background-yes">
+						<div class="fav-choice" *ngFor="let c of favChoicesList">
+							<div class="date-choice" *ngIf="poll.kind == 'date'">
+								{{ c.name | date }}
+							</div>
+							<div class="date-choice" *ngIf="poll.kind == 'text'">
+								{{ c.name }}
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</section>
@@ -106,18 +120,18 @@
 
 			<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
 		</section>
-		<!--		<section class="poll-comments">-->
+		<section class="poll-comments">
-		<!--			<h2 class="title is-3">-->
+			<h2 class="title is-3">
-		<!--				{{ 'participation.comments' | translate }}-->
+				{{ 'participation.comments' | translate }}
-		<!--			</h2>-->
+			</h2>
-		<!--			<div class="rounded-block">-->
+			<div class="rounded-block">
-		<!--				&lt;!&ndash;					*ngIf="poll.allow_comments"&ndash;&gt;-->
+				<!--					*ngIf="poll.allow_comments"-->
-		<!--				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>-->
+				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
-		<!--				<div class="alert has-background-info" *ngIf="!poll.allow_comments">-->
+				<div class="alert has-background-info" *ngIf="!poll.allow_comments">
-		<!--					Ce sondage ne permet pas d'ajouter de commentaires-->
+					Ce sondage ne permet pas d'ajouter de commentaires
-		<!--				</div>-->
+				</div>
-		<!--			</div>-->
+			</div>
-		<!--		</section>-->
+		</section>
 	</div>
 </section>
 <section class="loadin_poll" *ngIf="fetching">

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

@@ -9,6 +9,7 @@ import { StorageService } from '../../core/services/storage.service';
 import { ApiService } from '../../core/services/api.service';
 import { ToastService } from '../../core/services/toast.service';
 import { environment } from 'src/environments/environment';
+import { Choice } from '../../core/models/choice.model';
 
 @Component({
 	selector: 'app-consultation',
@@ -28,6 +29,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	public detailledDisplay: boolean = false;
 	public display_options_menu: boolean = false;
 	public show_admin_stuff: boolean = true;
+	public favChoicesList: Array<Choice> = [];
 
 	constructor(
 		private router: Router,
@@ -50,6 +52,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 			if (newpoll) {
 				this.isArchived = new Date(newpoll.expiracy_date) < new Date();
 				this.poll.choices_grouped.map((elem) => (elem.subSetToYes = false));
+				this.findFavouriteChoices(newpoll);
 			}
 		});
 
@@ -122,4 +125,15 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 			this.toastService.display('erreur à l enregistrement');
 		}
 	}
+
+	private findFavouriteChoices(newpoll: Poll) {
+		let tempFavChoiceList = [];
+		newpoll.choices.map((choice: Choice) => {
+			console.log('choice.score', choice.score, newpoll.max_score);
+			if (choice.score === newpoll.max_score) {
+				tempFavChoiceList.push(choice);
+			}
+		});
+		this.favChoicesList = tempFavChoiceList;
+	}
 }

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

@@ -23,6 +23,7 @@
 						<div class="column is-narrow">
 							<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
 								<i class="fa fa-star fa-2x"></i>
+								{{ choice.score }}
 							</span>
 						</div>
 						<div class="column is-narrow">

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

@@ -4,6 +4,15 @@
 	padding: 0.75rem;
 	border-radius: 0.5rem;
 }
+.favourite {
+	max-width: 20em;
+}
+.poll-anwsers {
+	.rounded-block {
+		max-width: 20em;
+	}
+}
+
 .list-of-choices {
 	.button {
 		.icon {
@@ -11,19 +20,23 @@
 			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: #128149;
 	}
 }
+
 .date-label {
 	font-size: 1rem;
 	color: #383838;

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

@@ -25,6 +25,11 @@ export class PollResultsDinumComponent implements OnInit {
 		return new Date(date_string);
 	}
 
+	/**
+	 * calculer localement le nombre max de réponses pour un choix parmi ses oui peut-être et non.
+	 * c'est différent que de calculer ce maximum par rapport à tous les choix possibles
+	 * @param c
+	 */
 	getMax(c: Choice) {
 		return Math.max(c[Answer.YES].count, c[Answer.MAYBE].count, c[Answer.NO].count);
 	}

src/styles/partials/_forms.scss

@@ -12,7 +12,7 @@ input.is-hovered,
 select.is-hovered,
 .is-hovered.textarea,
 .select select.is-hovered {
-	border-color: $font-color !important ;
+	border-color: $font-color !important;
 }
 
 app-step-one,
@@ -38,12 +38,14 @@ textarea {
 		margin-bottom: 1em;
 	}
 }
+
 button,
 .button {
 	&:focus {
 		@extend .outlined;
 	}
 }
+
 textarea,
 input,
 .input,
@@ -55,6 +57,7 @@ select,
 	border: solid 1px $font-color !important;
 	border-radius: 4px;
 	@extend .clickable;
+
 	&:focus {
 		@extend .outlined;
 	}
@@ -88,11 +91,13 @@ textarea {
 	overflow-x: auto;
 	@extend .clickable;
 }
+
 .button {
 	display: inline-block;
 	padding: 10px 30px;
 	height: auto;
 }
+
 .button {
 	label {
 		margin-bottom: 0;
@@ -101,6 +106,7 @@ textarea {
 		text-align: left;
 	}
 }
+
 input[type='radio'] {
 	padding: 1em;
 	margin-bottom: 0;
@@ -299,11 +305,21 @@ mat-checkbox {
 		margin-left: 0;
 		margin-right: 0;
 		margin-top: 0;
+
 		.column {
 			padding-left: 0;
 			padding-right: 0;
-			&.is-narrow {
+		}
-				padding-right: 1rem;
+	}
+
+	.choice-bars-display {
+		.columns {
+			.column {
+				&.choice-label {
+					width: 5em;
+					text-align: right;
+					padding-right: 1em;
+				}
 			}
 		}
 	}
@@ -350,19 +366,10 @@ label {
 	}
 }
 
-.choice-bars-display {
-	.is-narrow {
-		width: 5em;
-		text-align: right;
-		padding-right: 1em;
-	}
-	.bar {
-	}
-}
-
 .people {
 	max-width: $main-column-width/2;
 }
+
 .bar-div {
 	padding: 0.25rem 0.025rem;
 	text-align: center;
@@ -377,12 +384,14 @@ div {
 		color: #128149;
 		@extend .bar-div;
 	}
+
 	&.has-background-maybe {
 		border: solid 1px #86671b;
 		background: #fffaec;
 		color: #86671b;
 		@extend .bar-div;
 	}
+
 	&.has-background-no {
 		border: solid 1px #d51b38;
 		background: #ffecee;