mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
⚡ 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 { NamingComponent } from './naming/naming.component';
|
||||
import { FormComponent } from './form/form.component';
|
||||
import { DateValueAccessorModule } from 'angular-date-value-accessor';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent],
|
||||
@ -18,6 +19,7 @@ import { FormComponent } from './form/form.component';
|
||||
ReactiveFormsModule,
|
||||
SharedModule,
|
||||
TranslateModule.forChild({ extend: true }),
|
||||
DateValueAccessorModule,
|
||||
],
|
||||
})
|
||||
export class AdministrationModule {}
|
||||
|
@ -7,6 +7,105 @@
|
||||
<i class="fa fa-refresh"></i>
|
||||
Tout réinitialiser
|
||||
</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">
|
||||
<div class="form-field">
|
||||
@ -77,13 +176,24 @@
|
||||
</button>
|
||||
<section *ngIf="showDateInterval" class="date-interval form-row">
|
||||
<h2>{{ 'dates.add_interval' | translate }}</h2>
|
||||
<p>
|
||||
{{ 'dates.interval_propose' | translate }}
|
||||
<input (change)="countDays()" formControlName="startDateInterval" type="date" />
|
||||
{{ 'dates.interval_span' | translate }}
|
||||
<input (change)="countDays()" formControlName="endDateInterval" type="date" />
|
||||
<br />
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{ 'dates.interval_propose' | translate }}
|
||||
</div>
|
||||
<div class="column">
|
||||
<label for="start_interval" class="hidden">start</label>
|
||||
<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">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
{{ 'dates.interval_button' | translate }}
|
||||
|
@ -7,6 +7,7 @@ import { ToastService } from '../../../core/services/toast.service';
|
||||
import { PollService } from '../../../core/services/poll.service';
|
||||
import { DateUtilities } from '../../old-stuff/config/DateUtilities';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-form',
|
||||
@ -21,11 +22,13 @@ export class FormComponent implements OnInit {
|
||||
public urlPrefix: string = window.location.origin + '/participation/';
|
||||
public advancedDisplayEnabled = false;
|
||||
public showDateInterval = true;
|
||||
startDateInterval: any;
|
||||
public allowSeveralHours = true;
|
||||
startDateInterval: string;
|
||||
endDateInterval: string;
|
||||
intervalDays: any;
|
||||
intervalDaysDefault = 7;
|
||||
endDateInterval: any;
|
||||
dateList: any[];
|
||||
dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
|
||||
timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
@ -43,6 +46,7 @@ export class FormComponent implements OnInit {
|
||||
}
|
||||
|
||||
public createPoll(): void {
|
||||
console.log('this.form', this.form);
|
||||
if (this.form.valid && this.form.valid) {
|
||||
console.log('Le sondage est correctement rempli, prêt à enregistrer.');
|
||||
const newpoll = this.pollService.newPollFromForm(this.form);
|
||||
@ -74,7 +78,12 @@ export class FormComponent implements OnInit {
|
||||
this.choices.push(newControlGroup);
|
||||
this.cd.detectChanges();
|
||||
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);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
@ -99,6 +108,8 @@ export class FormComponent implements OnInit {
|
||||
slug: [this.uuidService.getUUID(), [Validators.required]],
|
||||
description: ['', [Validators.required]],
|
||||
choices: new FormArray([]),
|
||||
whoModifiesAnswers: ['', [Validators.required]],
|
||||
whoCanChangeAnswers: ['', [Validators.required]],
|
||||
isAboutDate: [true, [Validators.required]],
|
||||
startDateInterval: ['', [Validators.required]],
|
||||
endDateInterval: ['', [Validators.required]],
|
||||
@ -132,6 +143,7 @@ export class FormComponent implements OnInit {
|
||||
startDateInterval: this.startDateInterval,
|
||||
endDateInterval: this.endDateInterval,
|
||||
});
|
||||
this.countDays();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -148,8 +160,9 @@ export class FormComponent implements OnInit {
|
||||
slug: this.uuidService.getUUID(),
|
||||
creatorPseudo: 'Chuck Norris',
|
||||
creatorEmail: '',
|
||||
choices: ['matin', 'midi'],
|
||||
isAboutDate: true,
|
||||
whoModifiesAnswers: 'everybody',
|
||||
whoCanChangeAnswers: 'everybody',
|
||||
isProtectedByPassword: false,
|
||||
isOwnerNotifiedByEmailOnNewVote: false,
|
||||
isOwnerNotifiedByEmailOnNewComment: false,
|
||||
@ -165,14 +178,23 @@ export class FormComponent implements OnInit {
|
||||
}
|
||||
|
||||
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
|
||||
*/
|
||||
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 = [];
|
||||
newIntervalArray.forEach((element) => {
|
||||
@ -187,12 +209,23 @@ export class FormComponent implements OnInit {
|
||||
console.log('this.dateList', this.dateList);
|
||||
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.`);
|
||||
}
|
||||
|
||||
/**
|
||||
* handle keyboard shortcuts
|
||||
* @param $event
|
||||
* @param choice_number
|
||||
*/
|
||||
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
||||
$event.preventDefault();
|
||||
@ -207,11 +240,7 @@ export class FormComponent implements OnInit {
|
||||
console.log('$event', $event);
|
||||
|
||||
if ($event.key == 'ArrowUp' && choice_number > 0) {
|
||||
const selector = '#choice_label_' + (choice_number - 1);
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
this.focusOnChoice(choice_number - 1);
|
||||
}
|
||||
if ($event.key == 'ArrowDown') {
|
||||
// add a field if we are on the last choice
|
||||
@ -219,22 +248,14 @@ export class FormComponent implements OnInit {
|
||||
this.addChoice();
|
||||
this.toastService.display('choix ajouté par raccourci "flèche bas"');
|
||||
} else {
|
||||
const selector = '#choice_label_' + (choice_number + 1);
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
this.focusOnChoice(choice_number + 1);
|
||||
}
|
||||
}
|
||||
if ($event.ctrlKey && $event.key == 'Backspace') {
|
||||
this.deleteChoiceField(choice_number);
|
||||
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
|
||||
this.cd.detectChanges();
|
||||
const selector = '#choice_label_' + Math.min(choice_number - 1, 0);
|
||||
const elem = this.document.querySelector(selector);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
this.focusOnChoice(Math.min(choice_number - 1, 0));
|
||||
}
|
||||
if ($event.ctrlKey && $event.key == 'Enter') {
|
||||
// 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 d2
|
||||
*/
|
||||
dayDiff(d1: Date, d2: Date): number {
|
||||
return Number(d2.getTime() - d1.getTime() / 31536000000);
|
||||
dayDiff(d1: Date, d2: Date): any {
|
||||
const div = 1000 * 3600 * 24;
|
||||
return Math.abs((d2.getTime() - d1.getTime()) / div).toFixed(0);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -57,12 +58,21 @@ export class DateUtilities {
|
||||
].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) {
|
||||
return ('00' + str).slice(-2);
|
||||
}
|
||||
|
||||
countDays(startDateInterval: Date, endDateInterval: Date): number {
|
||||
// compute the number of days in the date interval
|
||||
|
||||
if (endDateInterval && startDateInterval) {
|
||||
return this.dayDiff(endDateInterval, startDateInterval);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user