From feb0de8270204c31cbb92f6a6420644cc1a99e9e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 19:04:20 +0100
Subject: [PATCH] include advanced choices and toggle visibility of sub
 component

---
 .../advanced-config.component.html            | 160 +++++++++---------
 .../advanced-config.component.ts              |   9 +-
 .../base-config/base-config.component.html    |  55 +++---
 .../form/base-config/base-config.component.ts |   1 +
 .../administration/form/form.component.html   |  49 +++---
 5 files changed, 148 insertions(+), 126 deletions(-)

diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index a9ff8af1..0862e8c7 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -1,89 +1,91 @@
-<fieldset class="complete well">
-	<h2>{{ 'creation.advanced' | translate }}</h2>
-	<label for="descr">Description (optionnel)</label>
-	<textarea
-		#description
-		matInput
-		id="descr"
-		placeholder="Description"
-		formControlName="description"
-		required
-	></textarea>
-	<button
-		mat-button
-		*ngIf="description.value"
-		matSuffix
-		mat-icon-button
-		aria-label="Clear"
-		(click)="description.value = ''"
-	>
-		<i class="fa fa-close"></i>
-	</button>
-
-	<br />
-
-	<label for="slug"
-		>Url pour les participants
-
-		<i class="fa fa-close"></i>
-	</label>
-	<br />
-	<span
-		>{{ urlPrefix }}
-		<strong>
-			{{ form.controls.slug.value }}
-		</strong>
-	</span>
-	<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
-
-	<button
-		mat-button
-		*ngIf="form.controls.slug.value"
-		matSuffix
-		mat-icon-button
-		aria-label="Clear"
-		(click)="slug.value = ''"
-	></button>
-	<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
-	<br />
-	<div appearance="outline" class="is-not-flex">
-		<mat-label>Nombre de jours avant expiration</mat-label>
-		<input
-			#expiracy
-			id="expiracy"
+<form [formGroup]="form">
+	<fieldset class="complete well">
+		<h2>{{ 'creation.advanced' | translate }}</h2>
+		<label for="descr">Description (optionnel)</label>
+		<textarea
+			#description
 			matInput
-			type="number"
-			placeholder="Nombre de jours avant expiration"
-			formControlName="expiracyNumberOfDays"
+			id="descr"
+			placeholder="Description"
+			formControlName="description"
 			required
-		/>
+		></textarea>
 		<button
 			mat-button
-			*ngIf="expiracy.value"
+			*ngIf="description.value"
 			matSuffix
 			mat-icon-button
 			aria-label="Clear"
-			(click)="expiracy.value = ''"
+			(click)="description.value = ''"
 		>
 			<i class="fa fa-close"></i>
 		</button>
-	</div>
-	<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-		Les participants pourront consulter les résultats
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-		Les choix possibles concerneront des dates
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-		Le sondage sera protégé par un mot de passe
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-		Vous recevrez un mail à chaque nouvelle participation
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-		Vous recevrez un mail à chaque nouveau commentaire
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
-		La réponse « peut-être » sera disponible
-	</mat-checkbox>
-</fieldset>
+
+		<br />
+
+		<label for="slug"
+			>Url pour les participants
+
+			<i class="fa fa-close"></i>
+		</label>
+		<br />
+		<span
+			>{{ urlPrefix }}
+			<strong>
+				{{ form.controls.slug.value }}
+			</strong>
+		</span>
+		<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
+
+		<button
+			mat-button
+			*ngIf="form.controls.slug.value"
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="slug.value = ''"
+		></button>
+		<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
+		<br />
+		<div appearance="outline" class="is-not-flex">
+			<mat-label>Nombre de jours avant expiration</mat-label>
+			<input
+				#expiracy
+				id="expiracy"
+				matInput
+				type="number"
+				placeholder="Nombre de jours avant expiration"
+				formControlName="expiracyNumberOfDays"
+				required
+			/>
+			<button
+				mat-button
+				*ngIf="expiracy.value"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="expiracy.value = ''"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+		</div>
+		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+			Les participants pourront consulter les résultats
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
+			Les choix possibles concerneront des dates
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+			Le sondage sera protégé par un mot de passe
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+			Vous recevrez un mail à chaque nouvelle participation
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+			Vous recevrez un mail à chaque nouveau commentaire
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+			La réponse « peut-être » sera disponible
+		</mat-checkbox>
+	</fieldset>
+</form>
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
index dcef8c78..cfc1b286 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.ts
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../../core/models/poll.model';
+import { FormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-advanced-config',
@@ -7,7 +9,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdvancedConfigComponent implements OnInit {
 	public urlPrefix: string = window.location.origin + '/participation/';
-
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
 	constructor() {}
 
 	ngOnInit(): void {}
diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
index e815bc46..32b888c0 100644
--- a/src/app/features/administration/form/base-config/base-config.component.html
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -1,24 +1,41 @@
 <form [formGroup]="form">
-	<div class="columns">
-		<span>
-			{{ 'creation.choose_title' | translate }}
-		</span>
-		<label class="hidden" for="title">Titre</label>
-		<input
-			#title
-			matInput
-			[placeholder]="'creation.choose_title_placeholder' | translate"
-			formControlName="title"
-			id="title"
-			autofocus="autofocus"
-			(change)="updateSlug()"
-			required
-		/>
-		<button mat-button *ngIf="title.value" matSuffix mat-icon-button aria-label="Clear" (click)="title.value = ''">
-			<i class="fa fa-close"></i>
-		</button>
+	<h1>
+		{{ 'creation.title' | translate }}
+	</h1>
 
-		<div>
+	<p class="subtitle">
+		{{ 'creation.want' | translate }}
+	</p>
+
+	<div class="columns">
+		<div class="column">
+			<p>
+				{{ 'creation.choose_title' | translate }}
+			</p>
+			<br />
+			<label class="hidden" for="title">Titre</label>
+			<input
+				#title
+				matInput
+				[placeholder]="'creation.choose_title_placeholder' | translate"
+				formControlName="title"
+				id="title"
+				autofocus="autofocus"
+				(change)="updateSlug()"
+				required
+			/>
+			<button
+				mat-button
+				*ngIf="title.value"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="title.value = ''"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+		</div>
+		<div class="column">
 			<label class="" for="creatorEmail">
 				<span>
 					{{ 'creation.name' | translate }}
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts
index 20ab5e05..beafa8c3 100644
--- a/src/app/features/administration/form/base-config/base-config.component.ts
+++ b/src/app/features/administration/form/base-config/base-config.component.ts
@@ -16,6 +16,7 @@ import { Poll } from '../../../../core/models/poll.model';
 export class BaseConfigComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
+	@Input()
 	public form: FormGroup;
 
 	constructor(
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 63131d2c..eb595224 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,31 +1,19 @@
 <div class="admin-form padded">
-	<h1>
-		{{ 'creation.title' | translate }}
-	</h1>
-	<div class="validation">
-		<div class="has-background-danger" *ngIf="!form.valid">
-			le formulaire est invalide
-			<pre>
-		 {{ form.errors | json }}
-		</pre
-			>
-		</div>
-	</div>
-	<app-base-config></app-base-config>
-	<!--	<app-kind-select></app-kind-select>-->
-
-	<!--			choix spécialement pour les dates-->
-	<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
-	<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
-	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-		<i class="fa fa-save"></i>
-		{{ 'creation.advanced' | translate }}
-	</button>
-	<!--	<app-advanced-config ng-if="advancedDisplayEnabled"></app-advanced-config>-->
-
-	<hr />
-
 	<form [formGroup]="form">
+		<app-base-config [poll]="poll" [form]="form"></app-base-config>
+		<!--	<app-kind-select></app-kind-select>-->
+
+		<!--			choix spécialement pour les dates-->
+		<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
+		<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
+		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+			<i class="fa fa-save"></i>
+			{{ 'creation.advanced' | translate }}
+		</button>
+		<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
+
+		<hr />
+
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
@@ -39,5 +27,14 @@
 				</button>
 			</div>
 		</div>
+		<div class="validation">
+			<div class="has-background-danger" *ngIf="!form.valid">
+				le formulaire est invalide
+				<pre>
+		 {{ form.errors | json }}
+		</pre
+				>
+			</div>
+		</div>
 	</form>
 </div>