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

⚡ more settings for admin form with time and answers groups

creation-form
tykayn 2 years ago
parent
4769ecefc3
commit
82910a9aae
4 changed files with 209 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/features/administration/administration.module.ts
  2. 124
      src/app/features/administration/form/form.component.html
  3. 100
      src/app/features/administration/form/form.component.ts
  4. 14
      src/app/features/old-stuff/config/DateUtilities.ts

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