more data in resume, step 7

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -1,6 +1,6 @@
-<div class="step-container min-height">
+<div class="step-container min-height step-resume">
 	<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
-	<div class="columns">
+	<div class="columns content">
 		<div class="column">
 			<h2 class="title is-2">
 				Voici le résumé de votre sondage
@@ -14,36 +14,66 @@
 			<div class="resume">
 				<h3 class="title is-3">Mes informations générales</h3>
 				<div class="block-resume">
+					<h3 class="title is-4">
+						{{ pollService.form.value.title }}
+					</h3>
+					<p class="description">
+						{{ pollService.form.value.description }}
+					</p>
 					<hr />
-					<div class="go-to-step" [routerLink]="['administration/step/1']">
+					<div class="go-to-step" [routerLink]="['/administration/step/1']">
 						<i class="fa fa-pencil"></i> Modifier
 					</div>
 				</div>
 				<h3 class="title is-3">Mon type de sondage</h3>
 				<div class="block-resume">
+					{{ pollService.form.value.isAboutDate ? 'Date' : 'Propositions' }}
 					<hr />
-					<div class="go-to-step" [routerLink]="['administration/step/2']">
+					<div class="go-to-step" [routerLink]="['/administration/step/2']">
 						<i class="fa fa-pencil"></i> Modifier
 					</div>
 				</div>
 				<h3 class="title is-3">Mes dates et horaires</h3>
 				<div class="block-resume">
+					<div class="list-datechoices" *ngIf="pollService.form.value.isAboutDate">
+						<ul *ngFor="let choice of pollService.dateChoiceList">
+							<li>
+								{{ choice.date_object | date: 'E d M yyy':'Europe/Paris':'fr_FR' }}
+							</li>
+						</ul>
+					</div>
+					<div class="list-texts" *ngIf="!pollService.form.value.isAboutDate">
+						<ul *ngFor="let choice of pollService.choices">
+							<li>
+								{{ choice }}
+							</li>
+						</ul>
+					</div>
 					<hr />
-					<div class="go-to-step" [routerLink]="['administration/step/3']">
+					<div class="go-to-step" [routerLink]="['/administration/step/3']">
 						<i class="fa fa-pencil"></i> Modifier
 					</div>
 				</div>
 				<h3 class="title is-3">Mes paramètres et options de notifications</h3>
 				<div class="block-resume">
+					<div class="password">
+						Protégé par mot de passe: {{ pollService.form.value.isProtectedByPassword ? 'oui' : 'non' }}
+					</div>
 					<hr />
-					<div class="go-to-step clickable" [routerLink]="['administration/step/4']">
+					<div class="go-to-step clickable" [routerLink]="['/administration/step/4']">
 						<i class="fa fa-pencil"></i> Modifier
 					</div>
 				</div>
 				<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
 				<div class="block-resume">
+					<div class="name">
+						{{ pollService.form.value.creatorPseudo }}
+					</div>
+					<div class="email">
+						{{ pollService.form.value.creatorEmail }}
+					</div>
 					<hr />
-					<div class="go-to-step" [routerLink]="['administration/step/5']">
+					<div class="go-to-step" [routerLink]="['/administration/step/6']">
 						<i class="fa fa-pencil"></i> Modifier
 					</div>
 				</div>

src/app/features/administration/form/steps/step-six/step-six.component.html

@@ -1,7 +1,7 @@
-<div class="step">
+<div class="step-container min-height">
-	<div class="min-height">
+	<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
+	<div class="">
 		<form action="#" [formGroup]="pollService.form">
-			<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
 			<h2 class="title is-2">
 				Dites à vos participants qui vous êtes !
 			</h2>

src/styles/partials/_forms.scss

@@ -290,6 +290,17 @@ mat-checkbox {
 }
 
 // resume de la création de sondage
+.step-resume {
+	.content {
+		.title {
+			&.is-2,
+			&.is-3 {
+				color: $secondary_color;
+			}
+		}
+	}
+}
+
 .block-resume {
 	border-radius: 0.25em;
 	background: $bg-grey;
@@ -300,10 +311,13 @@ mat-checkbox {
 		margin: 0.5em -1em;
 		background: $rules;
 	}
+
 	.go-to-step {
 		@extend .clickable;
+		color: $secondary_color;
+		padding: 1.5em;
+		border-radius: 0.25em;
 
-		padding: 1em;
 		&:hover {
 			background: $secondary_color;
 			color: $white;