add validation messages, autofill default values on creation of poll

This commit is contained in:
Tykayn 2021-05-18 10:00:37 +02:00 committed by tykayn
parent 4fefa3340c
commit f66603d187
8 changed files with 67 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -11,7 +11,12 @@ textarea {
&:hover { &:hover {
color: $primary_color; color: $primary_color;
} }
&.ng-invalid {
border: $warning 3px solid !important;
}
} }
input[required] { input[required] {
&:after { &:after {
content: '*'; content: '*';
@ -72,3 +77,15 @@ textarea {
.cname { .cname {
font-weight: bold; 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;
}