tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

⚡ more settings for admin form with time and answers groups

Browse Source
creation-form
tykayn 2 years ago
parent 4769ecefc3
commit 82910a9aae
4 changed files with 209 additions and 31 deletions
Show Stats Download Patch File Download Diff File

2
src/app/features/administration/administration.module.ts
Unescape View File

@ -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 {}

124
src/app/features/administration/form/form.component.html
Unescape View File

@ -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 }}

100
src/app/features/administration/form/form.component.ts
Unescape View File

@ -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();
}
}
}

14
src/app/features/old-stuff/config/DateUtilities.ts
Unescape View File

@ -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);
}

Write Preview
Loading…
Cancel
Save