You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.7 KiB
124 lines
3.7 KiB
<mat-vertical-stepper #stepper linear> |
|
<mat-step [stepControl]="pollFormGroup" class="is-expanded"> |
|
<form [formGroup]="pollFormGroup"> |
|
<ng-template matStepLabel>Informations du sondage</ng-template> |
|
<mat-form-field appearance="outline"> |
|
<mat-label>Titre</mat-label> |
|
<input #title matInput placeholder="Question posée, sujet" formControlName="title" required /> |
|
<button |
|
mat-button |
|
*ngIf="question.value" |
|
matSuffix |
|
mat-icon-button |
|
aria-label="Clear" |
|
(click)="question.value = ''" |
|
> |
|
<i class="fa fa-close"></i> |
|
</button> |
|
</mat-form-field> |
|
|
|
<mat-form-field appearance="outline" class="is-flex"> |
|
<mat-label>Description</mat-label> |
|
<textarea |
|
#description |
|
matInput |
|
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> |
|
</mat-form-field> |
|
<mat-form-field appearance="outline" class="is-flex"> |
|
<mat-label>Url pour les participants</mat-label> |
|
<span matPrefix>{{ urlPrefix }}</span> |
|
<input #slug matInput placeholder="Url" formControlName="slug" required /> |
|
<button |
|
mat-button |
|
*ngIf="slug.value" |
|
matSuffix |
|
mat-icon-button |
|
aria-label="Clear" |
|
(click)="slug.value = ''" |
|
> |
|
<i class="fa fa-close"></i> |
|
</button> |
|
</mat-form-field> |
|
<div> |
|
<button mat-button matStepperNext>Next</button> |
|
</div> |
|
</form> |
|
</mat-step> |
|
|
|
<mat-step [stepControl]="configurationFormGroup"> |
|
<form [formGroup]="configurationFormGroup"> |
|
<ng-template matStepLabel>PollConfiguration du sondage</ng-template> |
|
<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> |
|
|
|
<div> |
|
<button mat-button matStepperPrevious>Back</button> |
|
<button mat-button matStepperNext>Next</button> |
|
</div> |
|
</form> |
|
</mat-step> |
|
|
|
<mat-step> |
|
<ng-template matStepLabel>Done</ng-template> |
|
<p>You are now done.</p> |
|
<div> |
|
<button mat-button matStepperPrevious>Back</button> |
|
<button mat-button (click)="stepper.reset()">Reset</button> |
|
</div> |
|
<div> |
|
<button mat-button (click)="savePoll()" [disabled]="!pollFormGroup.valid || !configurationFormGroup.valid"> |
|
Enregistrer le sondage |
|
</button> |
|
</div> |
|
</mat-step> |
|
</mat-vertical-stepper>
|
|
|