step 2 : fix display of radio button

src/app/core/services/poll.service.ts

@@ -114,7 +114,7 @@ export class PollService implements Resolve<Poll> {
 	public createFormGroup() {
 		let minlengthValidation = environment.production ? 12 : 0;
 		let form = this.fb.group({
-			title: ['', [Validators.required, Validators.minLength(minlengthValidation)]],
+			title: ['défault titre', [Validators.required, Validators.minLength(minlengthValidation)]],
 			creatorPseudo: ['', []],
 			created_at: [new Date(), [Validators.required]],
 			creatorEmail: ['', [Validators.required]],

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

@@ -43,6 +43,7 @@
 					></textarea>
 					<div
 						class="text-info padded"
+						*ngIf="pollService.form.value.description.length"
 						[ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
 					>
 						{{ pollService.form.value.description.length }} / 300 caractères maximum
@@ -58,12 +59,16 @@
 		<ng-template pTemplate="footer">
 			<button
 				type="button"
-				pButton
 				icon="pi pi-times"
 				[value]="'dialogs.no' | translate"
-				(click)="cd.reject()"
+				(click)="cd.close($event)"
+			></button>
+			<button
+				type="button"
+				icon="pi pi-check"
+				[value]="'dialogs.yes' | translate"
+				(click)="leave($event)"
 			></button>
-			<button type="button" icon="pi pi-check" [value]="'dialogs.yes' | translate" (click)="cd.accept()"></button>
 		</ng-template>
 	</p-confirmDialog>
 	<div class="columns">

src/app/features/administration/form/steps/step-one/step-one.component.ts

@@ -35,10 +35,18 @@ export class StepOneComponent implements OnInit {
 	cancelCreationDialog() {
 		this.confirmationService.confirm({
 			message: 'Quitter la création de sondage?',
-			accept: (event: any) => {
-				event.preventDefault();
-				this.router.navigate(['/']);
+			accept: this.leave,
+			reject: (event: any) => {
+				console.log('event', event);
 			},
 		});
 	}
+
+	leave(event: any) {
+		console.log('event', event);
+		if (event) {
+			event.preventDefault();
+		}
+		this.router.navigate(['/']);
+	}
 }

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

@@ -1,4 +1,5 @@
 <div class="step step-container form-field poll-kind">
+	<form action="#" [formGroup]="pollService.form">
 		<div class="min-height">
 			<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 			<app-errors-list [form]="pollService.form"></app-errors-list>
@@ -8,25 +9,30 @@
 			<div class="container">
 				<div class="kind-of-poll columns">
 					<div class="column">
-					<button
-						class="button is-fullwidth"
+						<div
+							class="button input-radio is-fullwidth"
 							[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
 							(click)="pollService.form.controls.isAboutDate.setValue(true)"
 						>
 							<i class="fa fa-calendar"></i>
+							<label for="isAboutDate_true">
 								{{ 'creation.kind.date' | translate }}
-					</button>
+							</label>
+							<input type="radio" formControlName="isAboutDate" [value]="true" id="isAboutDate_true" />
+						</div>
 					</div>
 					<div class="column">
-					<button
-						class="button is-fullwidth"
-						[disabled]="true"
+						<div
+							class="button input-radio is-fullwidth"
 							[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
 							(click)="pollService.form.controls.isAboutDate.setValue(false)"
 						>
 							<i class="fa fa-list-ul"></i>
+							<label for="isAboutDate_false">
 								{{ 'creation.kind.classic' | translate }}
-					</button>
+							</label>
+							<input type="radio" formControlName="isAboutDate" [value]="false" id="isAboutDate_false" />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -44,4 +50,5 @@
 				</button>
 			</div>
 		</div>
+	</form>
 </div>

src/app/features/administration/form/steps/step-two/step-two.component.scss

@@ -9,9 +9,16 @@
 	.button {
 		background: $d-grey;
 		border: solid white 1px;
+		transition: background-color ease 1.5s;
 		&.is-selected {
 			border: solid $primary-color 1px;
 			color: $font_color;
 		}
+		&:hover {
+			background: $secondary_color;
+			border: solid $primary-color 1px;
+			color: $white;
+			transition: background-color ease 0.25s;
+		}
 	}
 }

src/app/features/administration/stepper/stepper.component.html

@@ -51,23 +51,18 @@
 		>
 	</div>
 	<div class="step-info">
-		<h2 classs="step-title-poll" *ngIf="pollService.step_current == 1">
+		<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
 			{{ 'creation.title' | translate }}
 		</h2>
-		<h2 class="step-title-poll" *ngIf="pollService.step_current > 1">
-			<span class="poll-title">
+		<h2 class="step-title-poll" *ngIf="pollService.step_current >= 2">
 			{{ pollService.form.value.title }}
-			</span>
 		</h2>
 		<div class="columns">
 			<div class="column">
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
-			<div class="column has-text-right">
-				<a class="" (click)="cancelDialog()">
-					Annuler
-					<span class="cancel-button"><i class="fa fa-times"></i></span>
-				</a>
+			<div class="column is-narrow has-text-right">
+				<a class="cancel-button" (click)="cancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
 			</div>
 		</div>
 	</div>
@@ -76,7 +71,7 @@
 	</div>
 
 	<!--	modale de confirmation pour quitter-->
-	<p-confirmDialog #cd [style]="{ width: '50vw' }">
+	<p-confirmDialog #stepperConfirm [style]="{ width: '50vw' }">
 		<ng-template pTemplate="header">
 			<h3>{{ 'creation.dialog' | translate }}</h3>
 		</ng-template>
@@ -86,14 +81,14 @@
 				pButton
 				icon="pi pi-times"
 				[label]="'dialogs.no' | translate"
-				(click)="cd.reject()"
+				(click)="stepperConfirm.reject()"
 			></button>
 			<button
 				type="button"
 				pButton
 				icon="pi pi-check"
 				[label]="'dialogs.yes' | translate"
-				(click)="cd.accept()"
+				(click)="stepperConfirm.accept()"
 			></button>
 		</ng-template>
 	</p-confirmDialog>

src/app/features/administration/stepper/stepper.component.scss

@@ -40,4 +40,9 @@
 			}
 		}
 	}
+
+	.step-title-poll {
+		font-size: 0.85rem !important;
+		color: $d-neutral !important;
+	}
 }

src/app/features/shared/components/ui/form/errors-list/errors-list.component.html

@@ -1,6 +1,9 @@
 <div
 	class="validation-error-list padded"
-	*ngIf="(form.valid && !hide_on_valid) || !form.valid"
+	*ngIf="
+		(form.valid && !hide_on_valid && environment.display_validation_errors) ||
+		(environment.display_validation_errors && !form.valid)
+	"
 	[ngClass]="{ 'has-background-warning': totalErrors > 0, 'has-background-success': totalErrors === 0 }"
 >
 	<h1 class="title is-1">

src/environments/environment.prod.ts

@@ -82,4 +82,6 @@ export const environment = {
 	localStorage: {
 		key: 'FramaSondage',
 	},
+
+	display_validation_errors: false,
 };

src/environments/environment.ts

@@ -41,6 +41,7 @@ export const environment = {
 	localStorage: {
 		key: 'FramaDateFunky',
 	},
+	display_validation_errors: false,
 };
 
 // Included with Angular CLI.

src/styles/partials/_forms.scss

@@ -57,6 +57,7 @@ input,
 .textarea,
 select,
 .select {
+	@extend .clickable;
 	border: solid 1px $font_color;
 }
 
@@ -81,6 +82,23 @@ textarea {
 	}
 }
 
+// radio input structure
+
+.button {
+	label {
+		margin-bottom: 0;
+		width: 100%;
+		display: inline-block;
+		text-align: left;
+	}
+}
+input[type='radio'] {
+	padding: 1em;
+	margin-bottom: 0;
+	color: $primary-color;
+	width: 2em;
+}
+
 li {
 	list-style-type: none;
 }
@@ -303,15 +321,6 @@ mat-checkbox {
 	}
 }
 
-h2.step-title-poll {
-	font-size: 0.85rem !important;
-	color: $d-neutral !important;
-}
-
-h2.step-title-poll {
-	font-size: 0.85rem !important;
-	color: $d-neutral !important;
-}
 // resume de la création de sondage
 .step-resume {
 	.content {