funky-framadate-front/src/app/features/administration/form/date-select/date-select.component.ts

140 lines
3.7 KiB
TypeScript

import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../../core/services/uuid.service';
import { ToastService } from '../../../../core/services/toast.service';
import { PollService } from '../../../../core/services/poll.service';
import { DateUtilitiesService } from '../../../../core/services/date.utilities.service';
import { ApiService } from '../../../../core/services/api.service';
import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import {
DateChoice,
defaultTimeOfDay,
otherDefaultDates,
TimeSlices,
} from '../../../../../../mocks/old-stuff/config/defaultConfigs';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { TranslateService } from '@ngx-translate/core';
import { StorageService } from '../../../../core/services/storage.service';
@Component({
selector: 'app-date-select',
templateUrl: './date-select.component.html',
styleUrls: ['./date-select.component.scss'],
})
export class DateSelectComponent implements OnInit {
@Input()
form: FormGroup;
displaySeveralHoursChoice = false;
allowSeveralHours = false;
today = new Date();
endDateInterval: string;
intervalDaysDefault = 7;
dateList: DateChoice[]; // sets of dateList as strings, config to set identical time for dateList in a special dateList poll
timeList: TimeSlices[]; // ranges of time expressed as strings
selectionKind = 'range';
constructor(
private fb: FormBuilder,
private cd: ChangeDetectorRef,
private uuidService: UuidService,
private toastService: ToastService,
private pollService: PollService,
private apiService: ApiService,
private storageService: StorageService,
private router: Router,
private translateService: TranslateService,
@Inject(DOCUMENT) private document: any
) {
this.dateList = this.storageService.dateList;
this.timeList = this.storageService.timeSlices;
}
get choices(): FormArray {
return this.form.get('choices') as FormArray;
}
get dateChoices() {
return this.form.get('dateChoices') as FormArray;
}
ngOnInit(): void {}
/**
* change time spans
*/
addTime() {
this.timeList.push({
literal: '',
});
}
removeAllTimes() {
this.timeList = [];
this.dateList.map((elem) => (elem.timeList = []));
this.toastService.display('périodes horaires vidées');
}
resetTimes() {
this.timeList = defaultTimeOfDay;
this.dateList.map((elem) => (elem.timeList = Object.create(defaultTimeOfDay)));
this.toastService.display('périodes horaires réinitialisées');
}
addChoice(optionalLabel = ''): void {
if (this.form.value.kind == 'date') {
this.storageService.dateList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
} else {
const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]],
});
if (optionalLabel) {
newControlGroup.patchValue({
label: optionalLabel,
imageUrl: 'mon url',
});
}
this.dateChoices.push(newControlGroup);
}
// this.cd.detectChanges();
console.log('this.choices.length', this.storageService.dateList.length);
this.focusOnChoice(this.storageService.dateList.length - 1);
}
focusOnChoice(index): void {
const selector = '#choice_label_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
deleteChoiceField(index: number): void {
if (this.choices.length !== 1) {
this.choices.removeAt(index);
}
}
reinitChoices(): void {
this.choices.setValue([]);
}
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
}
}