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

import { Component, Input, OnInit } from '@angular/core';
import { Poll } from '../../../core/models/poll.model';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service';
import { DateService } from '../../../core/services/date.service';
import { ApiService } from '../../../core/services/api.service';
import { Choice } from '../../../core/models/choice.model';

@Component({
	selector: 'app-admin-form',
	templateUrl: './form.component.html',
	styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
	@Input()
	public poll?: Poll;
	public pollFormGroup: FormGroup;
	public configurationFormGroup: FormGroup;

	public choicesFormArray: FormArray; // possible choices to answer

	public longFormVersionEnabled = true;

	public urlPrefix: string = window.location.origin + '/participation/';

	constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}

	ngOnInit(): void {
		this.pollFormGroup = this.fb.group({
			title: [this.poll ? this.poll.title : '', [Validators.required]],
			slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]],
			description: [this.poll ? this.poll.description : ''],
		});
		// add dynamically elements to add choices
		this.choicesFormArray = this.fb.array([
			{
				choices: this.poll.choices.forEach((elem: Choice) => {
					return {
						label: [elem.label, [Validators.required]],
						imageUrl: [elem.imageUrl, null],
					};
				}),
			},
		]);

		this.configurationFormGroup = this.fb.group({
			isAboutDate: [this.poll ? this.poll.configuration.isAboutDate : false, [Validators.required]],
			isProtectedByPassword: [
				this.poll ? this.poll.configuration.isProtectedByPassword : false,
				[Validators.required],
			],
			isOwnerNotifiedByEmailOnNewVote: [
				this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewVote : false,
				[Validators.required],
			],
			isOwnerNotifiedByEmailOnNewComment: [
				this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewComment : false,
				[Validators.required],
			],
			isMaybeAnswerAvailable: [
				this.poll ? this.poll.configuration.isMaybeAnswerAvailable : false,
				[Validators.required],
			],
			areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]],
			expiracyNumberOfDays: [
				this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60,
				[Validators.required],
			],
		});
	}

	public createPoll(): void {
		if (this.pollFormGroup.valid && this.configurationFormGroup.valid) {
			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
			// TODO : save the poll
			this.apiService.createPoll(this.poll);
		}
	}
	public updateSlug() {
		let newValueFormatted = 'TODO';
		this.pollFormGroup.patchValue({ slug: newValueFormatted });
	}
}