diff --git a/src/app/features/administration/administration.component.ts b/src/app/features/administration/administration.component.ts index 94353934..54bdcd71 100644 --- a/src/app/features/administration/administration.component.ts +++ b/src/app/features/administration/administration.component.ts @@ -24,15 +24,6 @@ export class AdministrationComponent implements OnInit, OnDestroy { if (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'); - } }); } 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 3b0eaed2..f9ca8ebd 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 @@ -39,6 +39,7 @@ +
- plage horaire distincte
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.ts b/src/app/features/administration/form/date/list/day/day-list.component.ts index c44e73e1..b86b7294 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.ts +++ b/src/app/features/administration/form/date/list/day/day-list.component.ts @@ -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 { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs'; import { DOCUMENT } from '@angular/common'; @@ -27,6 +27,7 @@ export class DayListComponent { constructor( public dialog: MatDialog, private toastService: ToastService, + private cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: any, private storageService: StorageService ) { @@ -70,8 +71,9 @@ export class DayListComponent { choice.timeSlices.push({ literal: '', }); - const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (this.timeList.length - 1) + '"]'; - // this.cd.detectChanges(); + const selector = + '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (choice.timeSlices.length - 1) + '"]'; + this.cd.detectChanges(); const elem = this.document.querySelector(selector); if (elem) { elem.focus(); diff --git a/src/app/features/administration/form/date/list/time/time-list.component.html b/src/app/features/administration/form/date/list/time/time-list.component.html index 7676e2a5..80d93964 100644 --- a/src/app/features/administration/form/date/list/time/time-list.component.html +++ b/src/app/features/administration/form/date/list/time/time-list.component.html @@ -3,7 +3,13 @@ - + diff --git a/src/app/features/administration/form/date/list/time/time-list.component.scss b/src/app/features/administration/form/date/list/time/time-list.component.scss index f200ef85..6cb9e15f 100644 --- a/src/app/features/administration/form/date/list/time/time-list.component.scss +++ b/src/app/features/administration/form/date/list/time/time-list.component.scss @@ -3,4 +3,7 @@ .icon { margin-right: 1ch; } + .time-list-item { + width: 80%; + } } diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 091b6ada..6806d12a 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -14,9 +14,9 @@
-

+

+ diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss index 860318c2..e69de29b 100644 --- a/src/app/features/administration/form/form.component.scss +++ b/src/app/features/administration/form/form.component.scss @@ -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; - } -} diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts index 8d92436f..c45ab8b4 100644 --- a/src/app/features/administration/form/form.component.ts +++ b/src/app/features/administration/form/form.component.ts @@ -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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ApiService } from '../../../core/services/api.service'; @@ -16,7 +16,7 @@ import { DateUtilitiesService } from '../../../core/services/date.utilities.serv templateUrl: './form.component.html', styleUrls: ['./form.component.scss'], }) -export class FormComponent implements OnInit { +export class FormComponent implements OnInit, AfterViewInit { @Input() public poll?: Poll; public form: FormGroup; @@ -47,6 +47,17 @@ export class FormComponent implements OnInit { // 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 { const creationDate = new Date(); @@ -54,10 +65,10 @@ export class FormComponent implements OnInit { this.form = this.fb.group({ title: ['', [Validators.required, Validators.minLength(5)]], creatorPseudo: ['', [Validators.required]], - creatorEmail: ['', [Validators.required]], + creatorEmail: ['', [Validators.required, Validators.email]], custom_url: [this.pollUtilitiesService.makeUuid(), [Validators.required]], description: ['', [Validators.required]], - kind: ['', [Validators.required]], + kind: ['date', [Validators.required]], areResultsPublic: [true, [Validators.required]], whoCanChangeAnswers: ['everybody', [Validators.required]], isProtectedByPassword: [false, [Validators.required]], @@ -70,8 +81,8 @@ export class FormComponent implements OnInit { isAboutDate: [true, [Validators.required]], isZeroKnoledge: [false, [Validators.required]], useVoterUniqueLink: [false, [Validators.required]], - expiresDaysDelay: [60, [Validators.required, Validators.min(1)]], - maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]], + expiresDaysDelay: [60, [Validators.required, Validators.min(1), Validators.max(365)]], + maxCountOfAnswers: [150, [Validators.required, Validators.min(1), Validators.max(5000)]], allowComments: [true, [Validators.required]], password: ['', []], voterEmailList: ['', []], diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html index 3ce51529..76c63768 100644 --- a/src/app/features/administration/form/kind-select/kind-select.component.html +++ b/src/app/features/administration/form/kind-select/kind-select.component.html @@ -3,7 +3,7 @@
- diff --git a/src/app/features/administration/success/success.component.html b/src/app/features/administration/success/success.component.html index 28cae422..b4972eeb 100644 --- a/src/app/features/administration/success/success.component.html +++ b/src/app/features/administration/success/success.component.html @@ -43,7 +43,10 @@

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. + + Le {{ poll.expiracy_date | date: 'short' }} +

diff --git a/src/app/features/administration/success/success.component.ts b/src/app/features/administration/success/success.component.ts index 2eaead75..8fc9a4bb 100644 --- a/src/app/features/administration/success/success.component.ts +++ b/src/app/features/administration/success/success.component.ts @@ -20,6 +20,7 @@ export class SuccessComponent { this.pollService.poll.subscribe((newpoll: Poll) => { this.poll = newpoll; + // this.poll.expiracy_date = this.getExpiracyDateFromPoll(this.poll); }); } diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index 8c98af94..a70abccc 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -1,10 +1,5 @@ @charset "UTF-8"; -label { - margin-top: 0.25em; - line-height: 2.5em; -} - input, select, textarea { @@ -103,10 +98,6 @@ input { @extend .input, .text-ellipsis; } -label { - margin-top: 0.5rem; -} - textarea { width: 100%; max-width: 100%; @@ -124,10 +115,6 @@ textarea { padding-left: 17px; } -.cname { - font-weight: bold; -} - .deletable-field-hint { margin-right: 2.8em; margin-top: -0.7em; @@ -146,8 +133,101 @@ mat-checkbox { .cdk-drag { cursor: pointer; - border-left: 3px white; + border-left: 3px white solid; &: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; +}