15 changed files with 260 additions and 20 deletions
@ -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