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

import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { Poll } from '../../../core/models/poll.model';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service';
import { ApiService } from '../../../core/services/api.service';
import { ToastService } from '../../../core/services/toast.service';
import { PollService } from '../../../core/services/poll.service';
import { DOCUMENT } from '@angular/common';
import { Router } from '@angular/router';

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

	public advancedDisplayEnabled = false;

	constructor(
		private fb: FormBuilder,
		private cd: ChangeDetectorRef,
		private uuidService: UuidService,
		private toastService: ToastService,
		private pollService: PollService,
		public apiService: ApiService,
		private router: Router,
		@Inject(DOCUMENT) private document: any
	) {}

	ngOnInit(): void {
		this.initFormDefault();

		const pollsAvailable = this.pollService.getAllAvailablePolls();
		console.log('pollsAvailable', pollsAvailable);
	}

	initFormDefault(showDemoValues = true): void {
		const creationDate = new Date();

		this.form = this.fb.group({
			title: ['', [Validators.required, Validators.minLength(12)]],
			creatorPseudo: ['', [Validators.required]],
			creatorEmail: ['', [Validators.required]],
			slug: [this.uuidService.getUUID(), [Validators.required]],
			description: ['', [Validators.required]],
			choices: this.fb.array([
				this.fb.group({
					label: ['', [Validators.required]],
					imageUrl: ['', [Validators.required]],
				}),
			]),
			dateChoices: this.fb.array([
				this.fb.group({
					label: ['', [Validators.required]],
					// if we have enabled detailed time choices per date choice, we have to make a time property for each date choice
					timeChoices: this.fb.array([
						this.fb.group({
							label: ['', [Validators.required]],
						}),
					]),
				}),
			]),
			timeChoices: this.fb.array([
				this.fb.group({
					label: ['', [Validators.required]],
				}),
			]),
			configuration: this.fb.group({
				areResultsPublic: [true, [Validators.required]],
				whoCanChangeAnswers: ['everybody', [Validators.required]],
				isProtectedByPassword: [false, [Validators.required]],
				isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
				isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
				isMaybeAnswerAvailable: [false, [Validators.required]],
				isAboutDate: [true, [Validators.required]],
				isZeroKnoledge: [false, [Validators.required]],
				expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
				maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]],
				allowComments: [true, [Validators.required]],
				password: [this.uuidService.getUUID(), [Validators.required]],
				dateCreated: [creationDate, [Validators.required]],
				hasSeveralHours: [true, [Validators.required]],
				hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
			}),
			startDateInterval: ['', [Validators.required]],
			endDateInterval: ['', [Validators.required]],
		});
		console.log('this.form ', this.form);

		if (showDemoValues) {
			this.setDemoValues();
			this.toastService.display('default values filled for demo');
		}
	}

	/**
	 * add example values to the form, overrides defaults of PollConfiguration
	 */
	setDemoValues(): void {
		this.form.patchValue({
			title: '',
			description: 'répondez SVP <3 ! *-* ',
			slug: this.uuidService.getUUID(),
			creatorPseudo: 'Chuck Norris',
			creatorEmail: 'chucknorris@example.com',
			isAboutDate: true,
			// hasSeveralHours: true,
			configuration: {
				whoCanChangeAnswers: 'everybody',
				isProtectedByPassword: false,
				isOwnerNotifiedByEmailOnNewVote: false,
				isOwnerNotifiedByEmailOnNewComment: false,
				isMaybeAnswerAvailable: false,
				areResultsPublic: true,
				expiresDaysDelay: 60,
			},
			comments: [],
			choices: [],
			dateChoices: [],
			timeChoices: [],
		});
	}
}