add validation messages, autofill default values on creation of poll

src/app/core/models/poll.model.ts

@@ -1,8 +1,5 @@
-import { environment } from 'src/environments/environment';
-
 import { Choice } from './choice.model';
 import { Comment } from './comment.model';
-import { PollConfiguration } from './configuration.model';
 import { Owner } from './owner.model';
 import { DateChoice, TimeSlices } from '../../../../mocks/old-stuff/config/defaultConfigs';
 
@@ -17,7 +14,7 @@ export class Poll {
 	public default_expiracy_days_from_now = 60;
 
 	public admin_key: string;
-	public kind: string;
+	public kind = 'date';
 
 	public description?: string;
 	public password?: string;
@@ -51,8 +48,6 @@ export class Poll {
 	public max_count_of_answers?: number = 150;
 	public maxCountOfAnswers?: number = 150;
 
-	// public configuration: PollConfiguration = new PollConfiguration();
-
 	public comments: Comment[] = [];
 
 	public choices: Choice[] = [];

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

@@ -32,7 +32,7 @@ export class PollService implements Resolve<Poll> {
 		private titleService: Title,
 		private toastService: ToastService
 	) {
-		this._poll.next(new Poll());
+		this._poll.next(new Poll(null, 'titre', 'custom-title'));
 	}
 
 	/**

src/app/features/administration/form/base-config/base-config.component.html

@@ -10,27 +10,27 @@
 				[placeholder]="'creation.choose_title_placeholder' | translate"
 				formControlName="title"
 				id="title"
-				autofocus="autofocus"
 				(keyup)="updateSlug()"
 				required="required"
 				#title
 			/>
 			<button
-				mat-button
-				*ngIf="form.value.title"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
 				(click)="form.patchValue({ title: '' })"
+				*ngIf="form.value.title"
+				aria-label="Clear"
+				mat-button
+				mat-icon-button
+				matSuffix
+				maxlength="400"
 			>
 				<i class="fa fa-close"></i>
 			</button>
-			<div class="hint" *ngIf="form.controls.title.errors">
-				Ce champ est requis
-			</div>
+			<mat-error class="hint deletable-field-hint" *ngIf="form.controls.title.invalid">{{
+				getErrorMessage(form.controls.title)
+			}}</mat-error>
 
 			<br />
-			<label for="creatorPseudo">
+			<label for="creatorEmail">
 				<span>
 					{{ 'creation.email' | translate }}
 				</span>
@@ -54,12 +54,9 @@
 			>
 				<i class="fa fa-close"></i>
 			</button>
-			<mat-error *ngIf="form.controls.creatorEmail.invalid">{{
+			<mat-error class="hint deletable-field-hint" *ngIf="form.controls.creatorEmail.invalid">{{
 				getErrorMessage(form.controls.creatorEmail)
 			}}</mat-error>
-			<div class="hint" *ngIf="form.controls.creatorEmail.errors">
-				Ce champ est requis
-			</div>
 			<br />
 
 			<p>

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

@@ -9,6 +9,7 @@ import { Router } from '@angular/router';
 import { environment } from '../../../../environments/environment';
 import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
 import { StorageService } from '../../../core/services/storage.service';
+import { DateUtilitiesService } from '../../../core/services/date.utilities.service';
 
 @Component({
 	selector: 'app-admin-form',
@@ -36,6 +37,7 @@ export class FormComponent implements OnInit {
 		private pollService: PollService,
 		private storageService: StorageService,
 		public apiService: ApiService,
+		public dateUtils: DateUtilitiesService,
 		private router: Router,
 		@Inject(DOCUMENT) private document: any
 	) {}
@@ -103,7 +105,7 @@ export class FormComponent implements OnInit {
 
 		// take back values from pollservice
 		this.form.patchValue(this.pollService.poll);
-		this.form.patchValue({ creatorPseudo: 'Chuck Norris', creatorEmail: 'chucknorris@example.com' });
+		this.setDefaultFormValues();
 
 		if (showDemoValues) {
 			this.setDemoValues();
@@ -115,21 +117,14 @@ export class FormComponent implements OnInit {
 		}
 	}
 
-	/**
-	 * add example values to the form, overrides defaults of PollConfiguration
-	 */
-	setDemoValues(): void {
-		const title = 'le titre de démo oh oh ' + new Date().getTime();
-
-		// this.form.patchValue(this.pollService.poll);
-		// this.form.patchValue({ creatorPseudo: 'Chuck Norris', creatorEmail: 'chucknorris@example.com' });
+	setDefaultFormValues(): void {
+		const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
+		const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
 
 		this.form.patchValue({
-			title: title,
-			custom_url: this.pollUtilitiesService.makeSlugFromString(title),
-			description: 'répondez SVP <3 ! *-*',
-			creatorPseudo: 'Chuck Norris',
-			creatorEmail: 'chucknorris@example.com',
+			creatorPseudo: 'Anne Onyme',
+			creatorEmail: '',
+			description: 'RSVP',
 			isAboutDate: true,
 			hasSeveralHours: false,
 			kind: 'date',
@@ -147,12 +142,35 @@ export class FormComponent implements OnInit {
 			expiresDaysDelay: 60,
 			maxCountOfAnswers: 150,
 			allowNewDateTime: false,
-			startDateInterval: new Date(),
-			endDateInterval: new Date(),
+			startDateInterval: dateStart,
+			endDateInterval: dateEnd,
 			comments: [],
 		});
 	}
 
+	/**
+	 * add example values to the form, overrides defaults of PollConfiguration
+	 */
+	setDemoValues(): void {
+		const title = 'le titre de démo oh oh ' + new Date().getTime();
+
+		// this.form.patchValue(this.pollService.poll);
+		// this.form.patchValue({ creatorPseudo: 'Chuck Norris', creatorEmail: 'chucknorris@example.com' });
+
+		const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
+		const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
+
+		console.log('dateStart', dateStart);
+
+		this.form.patchValue({
+			title: title,
+			custom_url: this.pollUtilitiesService.makeSlugFromString(title),
+			description: 'répondez SVP <3 ! *-*',
+			creatorPseudo: 'Chuck Norris',
+			creatorEmail: 'chucknorris@example.com',
+		});
+	}
+
 	goPreviousStep() {
 		alert('todo');
 	}

src/app/features/administration/form/kind-select/kind-select.component.html

@@ -3,7 +3,7 @@
 		<div class="kind-of-poll control">
 			<div class="select" *ngIf="template_questions_answers">
 				<!--			version maquette questions réponses-->
-				<select name="type" id="type" class="input" formControlName="kind">
+				<select name="type" id="type" class="input" formControlName="kind" autofocus>
 					<option [value]="'date'">{{ 'creation.kind.date' | translate }}</option>
 					<option [value]="'classic'">{{ 'creation.kind.classic' | translate }}</option>
 				</select>

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

@@ -15,6 +15,7 @@ export class ErrorsListComponent implements OnInit {
 		this.form.valueChanges.subscribe((data) => {
 			this.getFormValidationErrors();
 		});
+		this.getFormValidationErrors();
 	}
 
 	getFormValidationErrors(): void {

src/environments/environment.ts

@@ -21,7 +21,7 @@ export const environment = {
 	frontDomain: 'http://tktest.lan',
 	production: false,
 	display_routes: false,
-	autofill: true,
+	autofill: false,
 	showDemoWarning: false,
 	autoSendNewPoll: false,
 	interval_days_default: 7,

src/styles/partials/_form-controls.scss

@@ -11,7 +11,12 @@ textarea {
 	&:hover {
 		color: $primary_color;
 	}
+
+	&.ng-invalid {
+		border: $warning 3px solid !important;
+	}
 }
+
 input[required] {
 	&:after {
 		content: '*';
@@ -72,3 +77,15 @@ textarea {
 .cname {
 	font-weight: bold;
 }
+
+.deletable-field-hint {
+	margin-right: 2.8em;
+	margin-top: -0.7em;
+	-moz-border-radius-bottomright: 1em;
+}
+
+.mat-error {
+	display: block;
+	background: $warning;
+	padding: 1em;
+}