⚡ more settings for admin form with time and answers groups
This commit is contained in:
parent
4769ecefc3
commit
82910a9aae
|
@ -9,6 +9,7 @@ import { AdministrationComponent } from './administration.component';
|
||||||
import { StepperComponent } from './stepper/stepper.component';
|
import { StepperComponent } from './stepper/stepper.component';
|
||||||
import { NamingComponent } from './naming/naming.component';
|
import { NamingComponent } from './naming/naming.component';
|
||||||
import { FormComponent } from './form/form.component';
|
import { FormComponent } from './form/form.component';
|
||||||
|
import { DateValueAccessorModule } from 'angular-date-value-accessor';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent],
|
declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent],
|
||||||
|
@ -18,6 +19,7 @@ import { FormComponent } from './form/form.component';
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
SharedModule,
|
SharedModule,
|
||||||
TranslateModule.forChild({ extend: true }),
|
TranslateModule.forChild({ extend: true }),
|
||||||
|
DateValueAccessorModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class AdministrationModule {}
|
export class AdministrationModule {}
|
||||||
|
|
|
@ -7,6 +7,105 @@
|
||||||
<i class="fa fa-refresh"></i>
|
<i class="fa fa-refresh"></i>
|
||||||
Tout réinitialiser
|
Tout réinitialiser
|
||||||
</button>
|
</button>
|
||||||
|
<button class="btn is-success" (click)="createPoll()">
|
||||||
|
<i class="fa fa-save"></i>
|
||||||
|
Enregistrer le sondage
|
||||||
|
</button>
|
||||||
|
<div class="bg-danger" *ngIf="!form.valid">
|
||||||
|
le formulaire est invalide
|
||||||
|
</div>
|
||||||
|
<div class="dates-list">
|
||||||
|
<div class="title">
|
||||||
|
<span class="count-dates">
|
||||||
|
{{ timeList.length }}
|
||||||
|
</span>
|
||||||
|
<span class="count-dates-txt">
|
||||||
|
{{ 'dates.count_time' | translate }}
|
||||||
|
(pour chaque jour)
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button
|
||||||
|
(click)="addTime()"
|
||||||
|
*ngIf="'false' === allowSeveralHours"
|
||||||
|
class="btn btn--primary"
|
||||||
|
id="add_time_button"
|
||||||
|
>
|
||||||
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||||
|
{{ 'dates.add_time' | translate }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
(click)="removeAllTimes()"
|
||||||
|
*ngIf="'false' === allowSeveralHours"
|
||||||
|
class="btn btn--warning"
|
||||||
|
id="remove_time_button"
|
||||||
|
>
|
||||||
|
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||||
|
Aucune plage horaire
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
(click)="resetTimes()"
|
||||||
|
*ngIf="'false' === allowSeveralHours"
|
||||||
|
class="btn btn--warning"
|
||||||
|
id="reset_time_button"
|
||||||
|
>
|
||||||
|
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||||
|
réinitialiser
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
|
||||||
|
<div *ngFor="let time of timeList; index as id" class="time-choice">
|
||||||
|
<label for="timeChoices_{{ id }}">
|
||||||
|
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||||
|
</label>
|
||||||
|
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
|
||||||
|
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
|
||||||
|
<i class="fa fa-times" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<span class="count-dates title">
|
||||||
|
{{ dateList.length }}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{{ 'dates.count_dates' | translate }}
|
||||||
|
</span>
|
||||||
|
<button class="btn btn--primary" (click)="addChoice()">
|
||||||
|
{{ 'dates.add' | translate }}
|
||||||
|
</button>
|
||||||
|
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
||||||
|
{{ id }})
|
||||||
|
<input
|
||||||
|
[(ngModel)]="choice.date_object"
|
||||||
|
name="dateChoices_{{ id }}"
|
||||||
|
id="dateChoices_{{ id }}"
|
||||||
|
useValueAsDate
|
||||||
|
type="date"
|
||||||
|
/>
|
||||||
|
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
||||||
|
<i class="fa fa-times" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
|
||||||
|
{{ 'dates.add_time' | translate }}
|
||||||
|
</button>
|
||||||
|
<div *ngIf="'true' === allowSeveralHours" class="several-times">
|
||||||
|
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
|
||||||
|
<input
|
||||||
|
[(ngModel)]="timeItem.literal"
|
||||||
|
name="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||||
|
id="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
|
||||||
|
<i class="fa fa-times" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
|
||||||
<form [formGroup]="form">
|
<form [formGroup]="form">
|
||||||
<div class="form-field">
|
<div class="form-field">
|
||||||
|
@ -77,13 +176,24 @@
|
||||||
</button>
|
</button>
|
||||||
<section *ngIf="showDateInterval" class="date-interval form-row">
|
<section *ngIf="showDateInterval" class="date-interval form-row">
|
||||||
<h2>{{ 'dates.add_interval' | translate }}</h2>
|
<h2>{{ 'dates.add_interval' | translate }}</h2>
|
||||||
<p>
|
<div class="columns">
|
||||||
{{ 'dates.interval_propose' | translate }}
|
<div class="column">
|
||||||
<input (change)="countDays()" formControlName="startDateInterval" type="date" />
|
{{ 'dates.interval_propose' | translate }}
|
||||||
{{ 'dates.interval_span' | translate }}
|
</div>
|
||||||
<input (change)="countDays()" formControlName="endDateInterval" type="date" />
|
<div class="column">
|
||||||
<br />
|
<label for="start_interval" class="hidden">start</label>
|
||||||
</p>
|
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
{{ 'dates.interval_span' | translate }}
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<label for="end_interval" class="hidden">end</label>
|
||||||
|
<input id="end_interval" formControlName="endDateInterval" type="date" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
|
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
|
||||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||||
{{ 'dates.interval_button' | translate }}
|
{{ 'dates.interval_button' | translate }}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { ToastService } from '../../../core/services/toast.service';
|
||||||
import { PollService } from '../../../core/services/poll.service';
|
import { PollService } from '../../../core/services/poll.service';
|
||||||
import { DateUtilities } from '../../old-stuff/config/DateUtilities';
|
import { DateUtilities } from '../../old-stuff/config/DateUtilities';
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
|
import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-admin-form',
|
selector: 'app-admin-form',
|
||||||
|
@ -21,11 +22,13 @@ export class FormComponent implements OnInit {
|
||||||
public urlPrefix: string = window.location.origin + '/participation/';
|
public urlPrefix: string = window.location.origin + '/participation/';
|
||||||
public advancedDisplayEnabled = false;
|
public advancedDisplayEnabled = false;
|
||||||
public showDateInterval = true;
|
public showDateInterval = true;
|
||||||
startDateInterval: any;
|
public allowSeveralHours = true;
|
||||||
|
startDateInterval: string;
|
||||||
|
endDateInterval: string;
|
||||||
intervalDays: any;
|
intervalDays: any;
|
||||||
intervalDaysDefault = 7;
|
intervalDaysDefault = 7;
|
||||||
endDateInterval: any;
|
dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
|
||||||
dateList: any[];
|
timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private fb: FormBuilder,
|
private fb: FormBuilder,
|
||||||
|
@ -43,6 +46,7 @@ export class FormComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
public createPoll(): void {
|
public createPoll(): void {
|
||||||
|
console.log('this.form', this.form);
|
||||||
if (this.form.valid && this.form.valid) {
|
if (this.form.valid && this.form.valid) {
|
||||||
console.log('Le sondage est correctement rempli, prêt à enregistrer.');
|
console.log('Le sondage est correctement rempli, prêt à enregistrer.');
|
||||||
const newpoll = this.pollService.newPollFromForm(this.form);
|
const newpoll = this.pollService.newPollFromForm(this.form);
|
||||||
|
@ -74,7 +78,12 @@ export class FormComponent implements OnInit {
|
||||||
this.choices.push(newControlGroup);
|
this.choices.push(newControlGroup);
|
||||||
this.cd.detectChanges();
|
this.cd.detectChanges();
|
||||||
console.log('this.choices.length', this.choices.length);
|
console.log('this.choices.length', this.choices.length);
|
||||||
const selector = '#choice_label_' + (this.choices.length - 1);
|
|
||||||
|
this.focusOnChoice(this.choices.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
focusOnChoice(index) {
|
||||||
|
const selector = '#choice_label_' + index;
|
||||||
const elem = this.document.querySelector(selector);
|
const elem = this.document.querySelector(selector);
|
||||||
if (elem) {
|
if (elem) {
|
||||||
elem.focus();
|
elem.focus();
|
||||||
|
@ -99,6 +108,8 @@ export class FormComponent implements OnInit {
|
||||||
slug: [this.uuidService.getUUID(), [Validators.required]],
|
slug: [this.uuidService.getUUID(), [Validators.required]],
|
||||||
description: ['', [Validators.required]],
|
description: ['', [Validators.required]],
|
||||||
choices: new FormArray([]),
|
choices: new FormArray([]),
|
||||||
|
whoModifiesAnswers: ['', [Validators.required]],
|
||||||
|
whoCanChangeAnswers: ['', [Validators.required]],
|
||||||
isAboutDate: [true, [Validators.required]],
|
isAboutDate: [true, [Validators.required]],
|
||||||
startDateInterval: ['', [Validators.required]],
|
startDateInterval: ['', [Validators.required]],
|
||||||
endDateInterval: ['', [Validators.required]],
|
endDateInterval: ['', [Validators.required]],
|
||||||
|
@ -132,6 +143,7 @@ export class FormComponent implements OnInit {
|
||||||
startDateInterval: this.startDateInterval,
|
startDateInterval: this.startDateInterval,
|
||||||
endDateInterval: this.endDateInterval,
|
endDateInterval: this.endDateInterval,
|
||||||
});
|
});
|
||||||
|
this.countDays();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -148,8 +160,9 @@ export class FormComponent implements OnInit {
|
||||||
slug: this.uuidService.getUUID(),
|
slug: this.uuidService.getUUID(),
|
||||||
creatorPseudo: 'Chuck Norris',
|
creatorPseudo: 'Chuck Norris',
|
||||||
creatorEmail: '',
|
creatorEmail: '',
|
||||||
choices: ['matin', 'midi'],
|
|
||||||
isAboutDate: true,
|
isAboutDate: true,
|
||||||
|
whoModifiesAnswers: 'everybody',
|
||||||
|
whoCanChangeAnswers: 'everybody',
|
||||||
isProtectedByPassword: false,
|
isProtectedByPassword: false,
|
||||||
isOwnerNotifiedByEmailOnNewVote: false,
|
isOwnerNotifiedByEmailOnNewVote: false,
|
||||||
isOwnerNotifiedByEmailOnNewComment: false,
|
isOwnerNotifiedByEmailOnNewComment: false,
|
||||||
|
@ -165,14 +178,23 @@ export class FormComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
countDays(): void {
|
countDays(): void {
|
||||||
this.intervalDays = this.dateUtilities.countDays(this.startDateInterval, this.endDateInterval);
|
this.intervalDays = this.dateUtilities.countDays(
|
||||||
|
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
|
||||||
|
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
|
||||||
|
);
|
||||||
|
this.toastService.display('intervalle de ' + this.intervalDays + ' jours');
|
||||||
|
this.cd.detectChanges();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* add all the dates between the start and end dates in the interval section
|
* add all the dates between the start and end dates in the interval section
|
||||||
*/
|
*/
|
||||||
addIntervalOfDates(): void {
|
addIntervalOfDates(): void {
|
||||||
const newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
|
const newIntervalArray = this.dateUtilities.getDatesInRange(
|
||||||
|
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
|
||||||
|
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
|
||||||
|
1
|
||||||
|
);
|
||||||
|
|
||||||
const converted = [];
|
const converted = [];
|
||||||
newIntervalArray.forEach((element) => {
|
newIntervalArray.forEach((element) => {
|
||||||
|
@ -187,12 +209,23 @@ export class FormComponent implements OnInit {
|
||||||
console.log('this.dateList', this.dateList);
|
console.log('this.dateList', this.dateList);
|
||||||
this.showDateInterval = false;
|
this.showDateInterval = false;
|
||||||
|
|
||||||
|
this.form.patchValue({ choices: this.dateList });
|
||||||
|
// this.dateList.forEach(elem=>{
|
||||||
|
// const newControlGroup = this.fb.group({
|
||||||
|
// label: this.fb.control('', [Validators.required]),
|
||||||
|
// imageUrl: ['', [Validators.required]],
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// this.choices.push(newControlGroup);
|
||||||
|
// })
|
||||||
|
|
||||||
this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
|
this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* handle keyboard shortcuts
|
* handle keyboard shortcuts
|
||||||
* @param $event
|
* @param $event
|
||||||
|
* @param choice_number
|
||||||
*/
|
*/
|
||||||
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
||||||
$event.preventDefault();
|
$event.preventDefault();
|
||||||
|
@ -207,11 +240,7 @@ export class FormComponent implements OnInit {
|
||||||
console.log('$event', $event);
|
console.log('$event', $event);
|
||||||
|
|
||||||
if ($event.key == 'ArrowUp' && choice_number > 0) {
|
if ($event.key == 'ArrowUp' && choice_number > 0) {
|
||||||
const selector = '#choice_label_' + (choice_number - 1);
|
this.focusOnChoice(choice_number - 1);
|
||||||
const elem = this.document.querySelector(selector);
|
|
||||||
if (elem) {
|
|
||||||
elem.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if ($event.key == 'ArrowDown') {
|
if ($event.key == 'ArrowDown') {
|
||||||
// add a field if we are on the last choice
|
// add a field if we are on the last choice
|
||||||
|
@ -219,22 +248,14 @@ export class FormComponent implements OnInit {
|
||||||
this.addChoice();
|
this.addChoice();
|
||||||
this.toastService.display('choix ajouté par raccourci "flèche bas"');
|
this.toastService.display('choix ajouté par raccourci "flèche bas"');
|
||||||
} else {
|
} else {
|
||||||
const selector = '#choice_label_' + (choice_number + 1);
|
this.focusOnChoice(choice_number + 1);
|
||||||
const elem = this.document.querySelector(selector);
|
|
||||||
if (elem) {
|
|
||||||
elem.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if ($event.ctrlKey && $event.key == 'Backspace') {
|
if ($event.ctrlKey && $event.key == 'Backspace') {
|
||||||
this.deleteChoiceField(choice_number);
|
this.deleteChoiceField(choice_number);
|
||||||
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
|
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
|
||||||
this.cd.detectChanges();
|
this.cd.detectChanges();
|
||||||
const selector = '#choice_label_' + Math.min(choice_number - 1, 0);
|
this.focusOnChoice(Math.min(choice_number - 1, 0));
|
||||||
const elem = this.document.querySelector(selector);
|
|
||||||
if (elem) {
|
|
||||||
elem.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
if ($event.ctrlKey && $event.key == 'Enter') {
|
if ($event.ctrlKey && $event.key == 'Enter') {
|
||||||
// go to other fields
|
// go to other fields
|
||||||
|
@ -244,4 +265,39 @@ export class FormComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* change time spans
|
||||||
|
*/
|
||||||
|
addTime() {
|
||||||
|
this.timeList.push({
|
||||||
|
literal: '',
|
||||||
|
timeList: [],
|
||||||
|
date_object: new Date(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAllTimes() {
|
||||||
|
this.timeList = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTimes() {
|
||||||
|
this.timeList = otherDefaultDates;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* add a time period to a specific date choice,
|
||||||
|
* focus on the new input
|
||||||
|
* @param config
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
addTimeToDate(config: any, id: number) {
|
||||||
|
this.timeList.push({ literal: '' });
|
||||||
|
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
|
||||||
|
this.cd.detectChanges();
|
||||||
|
const elem = this.document.querySelector(selector);
|
||||||
|
if (elem) {
|
||||||
|
elem.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,8 +40,9 @@ export class DateUtilities {
|
||||||
* @param d1
|
* @param d1
|
||||||
* @param d2
|
* @param d2
|
||||||
*/
|
*/
|
||||||
dayDiff(d1: Date, d2: Date): number {
|
dayDiff(d1: Date, d2: Date): any {
|
||||||
return Number(d2.getTime() - d1.getTime() / 31536000000);
|
const div = 1000 * 3600 * 24;
|
||||||
|
return Math.abs((d2.getTime() - d1.getTime()) / div).toFixed(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -57,12 +58,21 @@ export class DateUtilities {
|
||||||
].join('-');
|
].join('-');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parseInputDateToDateObject(inputDateString: string) {
|
||||||
|
const boom = inputDateString.split('-');
|
||||||
|
|
||||||
|
const converted = new Date(boom['0'], boom['1'] - 1, boom['2']);
|
||||||
|
console.log('converted', converted);
|
||||||
|
return converted;
|
||||||
|
}
|
||||||
|
|
||||||
getDoubleDigits(str) {
|
getDoubleDigits(str) {
|
||||||
return ('00' + str).slice(-2);
|
return ('00' + str).slice(-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
countDays(startDateInterval: Date, endDateInterval: Date): number {
|
countDays(startDateInterval: Date, endDateInterval: Date): number {
|
||||||
// compute the number of days in the date interval
|
// compute the number of days in the date interval
|
||||||
|
|
||||||
if (endDateInterval && startDateInterval) {
|
if (endDateInterval && startDateInterval) {
|
||||||
return this.dayDiff(endDateInterval, startDateInterval);
|
return this.dayDiff(endDateInterval, startDateInterval);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue