multiple choices for creation

This commit is contained in:
tykayn 2020-11-03 16:13:47 +01:00 committed by Baptiste Lemoine
parent e5b8d5b65e
commit fa534af3ab
3 changed files with 43 additions and 9 deletions

View File

@ -5,7 +5,10 @@
<span class="pre-selector" i18n> <span class="pre-selector" i18n>
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</span> </span>
<button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button> <button class="btn btn--warning" (click)="askInitFormDefault()">
<i class="fa fa-refresh"></i>
Tout réinitialiser
</button>
<form [formGroup]="form"> <form [formGroup]="form">
<div class="form-field"> <div class="form-field">
@ -22,13 +25,15 @@
</button> </button>
<div *ngFor="let choice of choices.controls; let i = index"> <div *ngFor="let choice of choices.controls; let i = index">
<span class="form-row" [formGroup]="choice"> <div class="form-row" [formGroup]="choice">
<input formControlName="label" placeholder="Enter a choice description" /> <label for="label" class="hidden">label</label>
<input formControlName="imageUrl" placeholder="URL de l' image" /> <input formControlName="label" id="label" placeholder="Enter a choice description" />
<label for="imageUrl" class="imageUrl">image Url</label>
<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
<button (click)="deleteChoiceField(i)"> <button (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
</span> </div>
</div> </div>
</span> </span>
</div> </div>

View File

@ -1,3 +1,4 @@
@import '../../../../styles/variables';
:host { :host {
input, input,
textarea { textarea {
@ -10,7 +11,13 @@
display: block; display: block;
margin-top: 1em; margin-top: 1em;
} }
.form-row {
margin-top: 0.5em;
border-left: solid 3px $primary_color;
padding-left: 1em;
}
.fa { .fa {
margin-right: 1em; margin-right: 1em;
color: $primary_color;
} }
} }

View File

@ -3,6 +3,7 @@ import { Poll } from '../../../core/models/poll.model';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service'; import { UuidService } from '../../../core/services/uuid.service';
import { ApiService } from '../../../core/services/api.service'; import { ApiService } from '../../../core/services/api.service';
import { ToastService } from '../../../core/services/toast.service';
@Component({ @Component({
selector: 'app-admin-form', selector: 'app-admin-form',
@ -18,7 +19,12 @@ export class FormComponent implements OnInit {
public urlPrefix: string = window.location.origin + '/participation/'; public urlPrefix: string = window.location.origin + '/participation/';
constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {} constructor(
private fb: FormBuilder,
private uuidService: UuidService,
private toastService: ToastService,
private apiService: ApiService
) {}
ngOnInit(): void { ngOnInit(): void {
this.initFormDefault(); this.initFormDefault();
@ -58,10 +64,9 @@ export class FormComponent implements OnInit {
reinitChoices() { reinitChoices() {
this.choices.setValue([]); this.choices.setValue([]);
this.addChoice();
} }
private initFormDefault() { initFormDefault() {
this.form = this.fb.group({ this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]], title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]], creatorPseudo: ['', [Validators.required]],
@ -79,11 +84,28 @@ export class FormComponent implements OnInit {
}); });
console.log('this.form ', this.form); console.log('this.form ', this.form);
this.addChoice();
this.addChoice();
this.addChoice();
this.form.patchValue({ this.form.patchValue({
title: 'mon titre', title: 'mon titre',
description: 'répondez SVP <3 ! *-* ', description: 'répondez SVP <3 ! *-* ',
slug: this.uuidService.getUUID(),
creatorPseudo: 'Chuck Norris',
creatorEmail: '',
choices: ['matin', 'midi'], choices: ['matin', 'midi'],
isAboutDate: true,
isProtectedByPassword: false,
isOwnerNotifiedByEmailOnNewVote: false,
isOwnerNotifiedByEmailOnNewComment: false,
isMaybeAnswerAvailable: false,
areResultsPublic: true,
expiracyNumberOfDays: 60,
}); });
// this.addChoice(); }
askInitFormDefault() {
this.initFormDefault();
this.toastService.display('formulaire réinitialisé', 'info');
} }
} }