multiple choices for creation

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

@@ -5,7 +5,10 @@
 	<span class="pre-selector" i18n>
 		{{ 'creation.want' | translate }}
 	</span>
-	<button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button>
+	<button class="btn btn--warning" (click)="askInitFormDefault()">
+		<i class="fa fa-refresh"></i>
+		Tout réinitialiser
+	</button>
 
 	<form [formGroup]="form">
 		<div class="form-field">
@@ -22,13 +25,15 @@
 				</button>
 
 				<div *ngFor="let choice of choices.controls; let i = index">
-					<span class="form-row" [formGroup]="choice">
-						<input formControlName="label" placeholder="Enter a choice description" />
-						<input formControlName="imageUrl" placeholder="URL de l' image" />
+					<div class="form-row" [formGroup]="choice">
+						<label for="label" class="hidden">label</label>
+						<input formControlName="label" id="label" placeholder="Enter a choice description" />
+						<label for="imageUrl" class="imageUrl">image Url</label>
+						<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
 						<button (click)="deleteChoiceField(i)">
 							<i class="fa fa-times"></i>
 						</button>
-					</span>
+					</div>
 				</div>
 			</span>
 		</div>

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

@@ -1,3 +1,4 @@
+@import '../../../../styles/variables';
 :host {
 	input,
 	textarea {
@@ -10,7 +11,13 @@
 		display: block;
 		margin-top: 1em;
 	}
+	.form-row {
+		margin-top: 0.5em;
+		border-left: solid 3px $primary_color;
+		padding-left: 1em;
+	}
 	.fa {
 		margin-right: 1em;
+		color: $primary_color;
 	}
 }

src/app/features/administration/form/form.component.ts

@@ -3,6 +3,7 @@ import { Poll } from '../../../core/models/poll.model';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { UuidService } from '../../../core/services/uuid.service';
 import { ApiService } from '../../../core/services/api.service';
+import { ToastService } from '../../../core/services/toast.service';
 
 @Component({
 	selector: 'app-admin-form',
@@ -18,7 +19,12 @@ export class FormComponent implements OnInit {
 
 	public urlPrefix: string = window.location.origin + '/participation/';
 
-	constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}
+	constructor(
+		private fb: FormBuilder,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		private apiService: ApiService
+	) {}
 
 	ngOnInit(): void {
 		this.initFormDefault();
@@ -58,10 +64,9 @@ export class FormComponent implements OnInit {
 
 	reinitChoices() {
 		this.choices.setValue([]);
-		this.addChoice();
 	}
 
-	private initFormDefault() {
+	initFormDefault() {
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(12)]],
 			creatorPseudo: ['', [Validators.required]],
@@ -79,11 +84,28 @@ export class FormComponent implements OnInit {
 		});
 		console.log('this.form ', this.form);
 
+		this.addChoice();
+		this.addChoice();
+		this.addChoice();
+
 		this.form.patchValue({
 			title: 'mon titre',
 			description: 'répondez SVP <3 ! *-* ',
+			slug: this.uuidService.getUUID(),
+			creatorPseudo: 'Chuck Norris',
+			creatorEmail: '',
 			choices: ['matin', 'midi'],
+			isAboutDate: true,
+			isProtectedByPassword: false,
+			isOwnerNotifiedByEmailOnNewVote: false,
+			isOwnerNotifiedByEmailOnNewComment: false,
+			isMaybeAnswerAvailable: false,
+			areResultsPublic: true,
+			expiracyNumberOfDays: 60,
 		});
-		// this.addChoice();
+	}
+	askInitFormDefault() {
+		this.initFormDefault();
+		this.toastService.display('formulaire réinitialisé', 'info');
 	}
 }