parent
6059533c36
commit
8cac3d1862
@ -0,0 +1,139 @@
|
||||
<div class="admin-form">
|
||||
<h1 i18n>
|
||||
{{ 'creation.title' | translate }}
|
||||
</h1>
|
||||
<span class="pre-selector" i18n>
|
||||
{{ 'creation.want' | translate }}
|
||||
</span>
|
||||
<button class="btn btn--warning">
|
||||
Reset all
|
||||
</button>
|
||||
|
||||
<div class="simple">
|
||||
<form [formGroup]="pollFormGroup">
|
||||
<label for="title">Titre</label>
|
||||
<input
|
||||
#title
|
||||
matInput
|
||||
placeholder="title posée, sujet"
|
||||
formControlName="title"
|
||||
id="title"
|
||||
autofocus="autofocus"
|
||||
(change)="updateSlug()"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="title.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="title.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
|
||||
<label for="descr">Description</label>
|
||||
<textarea
|
||||
#description
|
||||
matInput
|
||||
id="descr"
|
||||
placeholder="Description"
|
||||
formControlName="description"
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="description.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="description.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
|
||||
<label for="slug"
|
||||
>Url pour les participants
|
||||
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="slug.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="slug.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</label>
|
||||
<br />
|
||||
<span
|
||||
>{{ urlPrefix }}
|
||||
<strong>
|
||||
{{ slug.value }}
|
||||
</strong>
|
||||
</span>
|
||||
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
<div class="complete" *ngIf="longFormVersionEnabled">
|
||||
<form [formGroup]="configurationFormGroup">
|
||||
<h2>Version complète du formulaire</h2>
|
||||
<mat-form-field appearance="outline" class="is-flex">
|
||||
<mat-label>Nombre de jours avant expiration</mat-label>
|
||||
<input
|
||||
#expiracy
|
||||
matInput
|
||||
type="number"
|
||||
placeholder="Nombre de jours avant expiration"
|
||||
formControlName="expiracyNumberOfDays"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="expiracy.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="expiracy.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<mat-checkbox class="is-flex" formControlName="areResultsPublic">
|
||||
Les participants pourront consulter les résultats
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isAboutDate">
|
||||
Les choix possibles concerneront des dates
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
|
||||
Le sondage sera protégé par un mot de passe
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
|
||||
Vous recevrez un mail à chaque nouvelle participation
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
|
||||
Vous recevrez un mail à chaque nouveau commentaire
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
|
||||
La réponse « peut-être » sera disponible
|
||||
</mat-checkbox>
|
||||
|
||||
<button
|
||||
mat-button
|
||||
(click)="createPoll()"
|
||||
[disabled]="!pollFormGroup.valid || !configurationFormGroup.valid"
|
||||
>
|
||||
Enregistrer le sondage
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<pre class="debug padded warning">
|
||||
poll :
|
||||
{{ poll | json }}
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
@ -0,0 +1,7 @@
|
||||
:host {
|
||||
input,
|
||||
textarea {
|
||||
padding: 0.5em;
|
||||
border: solid #eee;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FormComponent } from './form.component';
|
||||
|
||||
describe('FormComponent', () => {
|
||||
let component: FormComponent;
|
||||
let fixture: ComponentFixture<FormComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [FormComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,69 @@
|
||||
import { Component, 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 { DateService } from '../../../core/services/date.service';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
|
||||
@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 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 : ''],
|
||||
});
|
||||
|
||||
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.setValue({'slug' : newValueFormatted);
|
||||
// }
|
||||
}
|
||||
Loading…
Reference in new issue