validate email, focus on kind field at load

This commit is contained in:
Tykayn 2021-05-20 09:43:15 +02:00 committed by tykayn
parent 5d02fc3167
commit cf6395936e
14 changed files with 138 additions and 135 deletions

View File

@ -24,15 +24,6 @@ export class AdministrationComponent implements OnInit, OnDestroy {
if (data.poll) { if (data.poll) {
this.poll = data.poll; this.poll = data.poll;
} }
// focus on first field of the creation form
const firstField = this.document.querySelector('app-admin-form select');
if (firstField) {
console.log('focus on ', firstField);
firstField.focus();
} else {
console.log('no first field of form');
}
}); });
} }

View File

@ -39,6 +39,7 @@
<input <input
#creatorEmail #creatorEmail
matInput matInput
type="email"
placeholder="{{ 'creation.email_placeholder' | translate }}" placeholder="{{ 'creation.email_placeholder' | translate }}"
formControlName="creatorEmail" formControlName="creatorEmail"
id="creatorEmail" id="creatorEmail"
@ -65,6 +66,7 @@
{{ 'creation.name' | translate }} {{ 'creation.name' | translate }}
</span> </span>
</label> </label>
<br />
<input <input
#creatorPseudo #creatorPseudo
matInput matInput

View File

@ -39,6 +39,7 @@ export class BaseConfigComponent {
public updateSlug(): void { public updateSlug(): void {
const newValueFormatted = this.pollService.convertTextToSlug(this.form.value.title); const newValueFormatted = this.pollService.convertTextToSlug(this.form.value.title);
console.log('newValueFormatted', newValueFormatted);
this.form.patchValue({ custom_url: newValueFormatted }); this.form.patchValue({ custom_url: newValueFormatted });
} }

View File

@ -52,7 +52,6 @@
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<div *ngIf="hasSeveralHours" class="several-times"> <div *ngIf="hasSeveralHours" class="several-times">
plage horaire distincte
<br /> <br />
<app-time-list [timeSlices]="choice.timeList"></app-time-list> <app-time-list [timeSlices]="choice.timeList"></app-time-list>
</div> </div>

View File

@ -1,4 +1,4 @@
import { Component, Inject, Input } from '@angular/core'; import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs'; import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
@ -27,6 +27,7 @@ export class DayListComponent {
constructor( constructor(
public dialog: MatDialog, public dialog: MatDialog,
private toastService: ToastService, private toastService: ToastService,
private cd: ChangeDetectorRef,
@Inject(DOCUMENT) private document: any, @Inject(DOCUMENT) private document: any,
private storageService: StorageService private storageService: StorageService
) { ) {
@ -70,8 +71,9 @@ export class DayListComponent {
choice.timeSlices.push({ choice.timeSlices.push({
literal: '', literal: '',
}); });
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (this.timeList.length - 1) + '"]'; const selector =
// this.cd.detectChanges(); '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (choice.timeSlices.length - 1) + '"]';
this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
elem.focus(); elem.focus();

View File

@ -3,7 +3,13 @@
<label class="icon button is-default" for="timeChoices_{{ id }}"> <label class="icon button is-default" for="timeChoices_{{ id }}">
<i class="fa fa-arrows-v" aria-hidden="true"></i> <i class="fa fa-arrows-v" aria-hidden="true"></i>
</label> </label>
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" /> <input
class="time-list-item"
[(ngModel)]="time.literal"
name="timeChoices_{{ id }}"
type="text"
id="timeChoices_{{ id }}"
/>
<button (click)="timeSlices.splice(id, 1)" class="btn btn-warning"> <button (click)="timeSlices.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i>
</button> </button>

View File

@ -3,4 +3,7 @@
.icon { .icon {
margin-right: 1ch; margin-right: 1ch;
} }
.time-list-item {
width: 80%;
}
} }

View File

@ -14,9 +14,9 @@
</button> </button>
<main class="columns"> <main class="columns">
<div class="column"> <div class="column">
<p class="label is-medium"> <label class="label is-medium" for="kind">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</p> </label>
<!-- <div class="step-choices" *ngIf="currentStep === 'base'">--> <!-- <div class="step-choices" *ngIf="currentStep === 'base'">-->
<app-kind-select [form]="form"></app-kind-select> <app-kind-select [form]="form"></app-kind-select>
<app-base-config [form]="form"></app-base-config> <app-base-config [form]="form"></app-base-config>

View File

@ -1,96 +0,0 @@
@import '../../../../styles/variables';
:host {
.admin-form {
max-width: 800px;
margin: 0 auto;
}
.form-row {
margin-top: 0.5em;
margin-bottom: 0.25em;
border: solid 1px #ddd;
border-left: solid 3px $primary_color;
padding-left: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.fa {
margin-right: 1ch;
&.fa-times,
&.fa-trash {
margin-right: 0;
}
}
.example-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: white;
border-radius: 4px;
overflow: hidden;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.ng-pristine,
.ng-dirty {
border-left: $white 3px solid;
padding-left: 1em;
}
.ng-touched.ng-invalid {
border-left: $danger 3px solid;
padding-left: 1em;
}
.ng-touched.ng-valid {
border-left: $success 3px solid;
padding-left: 1em;
}
.btn {
margin: 0.5em;
}
.bar-nav-admin {
//position:fixed;
//bottom: 0;
background: #ccc;
display: block;
width: 100%;
padding: 1em;
}
}

View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, Inject, Input, OnInit, AfterViewInit } from '@angular/core';
import { Poll } from '../../../core/models/poll.model'; import { Poll } from '../../../core/models/poll.model';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService } from '../../../core/services/api.service'; import { ApiService } from '../../../core/services/api.service';
@ -16,7 +16,7 @@ import { DateUtilitiesService } from '../../../core/services/date.utilities.serv
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'], styleUrls: ['./form.component.scss'],
}) })
export class FormComponent implements OnInit { export class FormComponent implements OnInit, AfterViewInit {
@Input() @Input()
public poll?: Poll; public poll?: Poll;
public form: FormGroup; public form: FormGroup;
@ -47,6 +47,17 @@ export class FormComponent implements OnInit {
// this.goNextStep(); // this.goNextStep();
} }
ngAfterViewInit() {
// focus on first field of the creation form
const firstField = this.document.querySelector('#kind');
if (firstField) {
console.log('focus on ', firstField);
firstField.focus();
} else {
console.log('no first field of form');
}
}
initFormDefault(showDemoValues = environment.autofill): void { initFormDefault(showDemoValues = environment.autofill): void {
const creationDate = new Date(); const creationDate = new Date();
@ -54,10 +65,10 @@ export class FormComponent implements OnInit {
this.form = this.fb.group({ this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(5)]], title: ['', [Validators.required, Validators.minLength(5)]],
creatorPseudo: ['', [Validators.required]], creatorPseudo: ['', [Validators.required]],
creatorEmail: ['', [Validators.required]], creatorEmail: ['', [Validators.required, Validators.email]],
custom_url: [this.pollUtilitiesService.makeUuid(), [Validators.required]], custom_url: [this.pollUtilitiesService.makeUuid(), [Validators.required]],
description: ['', [Validators.required]], description: ['', [Validators.required]],
kind: ['', [Validators.required]], kind: ['date', [Validators.required]],
areResultsPublic: [true, [Validators.required]], areResultsPublic: [true, [Validators.required]],
whoCanChangeAnswers: ['everybody', [Validators.required]], whoCanChangeAnswers: ['everybody', [Validators.required]],
isProtectedByPassword: [false, [Validators.required]], isProtectedByPassword: [false, [Validators.required]],
@ -70,8 +81,8 @@ export class FormComponent implements OnInit {
isAboutDate: [true, [Validators.required]], isAboutDate: [true, [Validators.required]],
isZeroKnoledge: [false, [Validators.required]], isZeroKnoledge: [false, [Validators.required]],
useVoterUniqueLink: [false, [Validators.required]], useVoterUniqueLink: [false, [Validators.required]],
expiresDaysDelay: [60, [Validators.required, Validators.min(1)]], expiresDaysDelay: [60, [Validators.required, Validators.min(1), Validators.max(365)]],
maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]], maxCountOfAnswers: [150, [Validators.required, Validators.min(1), Validators.max(5000)]],
allowComments: [true, [Validators.required]], allowComments: [true, [Validators.required]],
password: ['', []], password: ['', []],
voterEmailList: ['', []], voterEmailList: ['', []],

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" autofocus> <select name="type" id="kind" 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

@ -43,7 +43,10 @@
<br /> <br />
<p class="note"> <p class="note">
Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa
dernière modification. Le {{ getExpiracyDateFromPoll(poll) | date: 'short' }} dernière modification.
<span class="expiracy-detail" *ngIf="poll.expiracy_date">
Le {{ poll.expiracy_date | date: 'short' }}
</span>
</p> </p>
</div> </div>
<div class="public"> <div class="public">

View File

@ -20,6 +20,7 @@ export class SuccessComponent {
this.pollService.poll.subscribe((newpoll: Poll) => { this.pollService.poll.subscribe((newpoll: Poll) => {
this.poll = newpoll; this.poll = newpoll;
// this.poll.expiracy_date = this.getExpiracyDateFromPoll(this.poll);
}); });
} }

View File

@ -1,10 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
label {
margin-top: 0.25em;
line-height: 2.5em;
}
input, input,
select, select,
textarea { textarea {
@ -103,10 +98,6 @@ input {
@extend .input, .text-ellipsis; @extend .input, .text-ellipsis;
} }
label {
margin-top: 0.5rem;
}
textarea { textarea {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -124,10 +115,6 @@ textarea {
padding-left: 17px; padding-left: 17px;
} }
.cname {
font-weight: bold;
}
.deletable-field-hint { .deletable-field-hint {
margin-right: 2.8em; margin-right: 2.8em;
margin-top: -0.7em; margin-top: -0.7em;
@ -146,8 +133,101 @@ mat-checkbox {
.cdk-drag { .cdk-drag {
cursor: pointer; cursor: pointer;
border-left: 3px white; border-left: 3px white solid;
&:hover { &:hover {
border-left: 3px #ccc; border-left: 3px #ccc solid;
} }
} }
.admin-form {
max-width: 800px;
margin: 0 auto;
}
.fa {
margin-right: 1ch;
&.fa-times,
&.fa-trash {
margin-right: 0;
}
}
.example-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: white;
border-radius: 4px;
overflow: hidden;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
padding: 0.5em;
height: 4em;
background: white;
}
.cdk-drag-placeholder {
opacity: 1;
padding: 1em;
height: 4em;
width: 100%;
background: white;
}
.cdk-drag-animating {
padding: 1em;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.ng-pristine,
.ng-dirty {
border-left: $white 3px solid;
padding-left: 1em;
}
.ng-touched.ng-invalid {
border-left: $danger 3px solid;
padding-left: 1em;
}
.ng-touched.ng-valid {
border-left: $success 3px solid;
padding-left: 1em;
}
.btn {
margin: 0.5em;
}
.bar-nav-admin {
//position:fixed;
//bottom: 0;
background: #ccc;
display: block;
width: 100%;
padding: 1em;
}