2021-12-09 15:43:44 +01:00
|
|
|
<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
|
2021-11-16 16:16:30 +01:00
|
|
|
<div class="step step-container">
|
2021-11-07 14:52:49 +01:00
|
|
|
<form class="min-height" [formGroup]="pollService.form">
|
|
|
|
<section class="poll-title">
|
2022-03-10 16:37:17 +01:00
|
|
|
<h1 class="title is-1">
|
2021-11-07 14:52:49 +01:00
|
|
|
{{ 'creation.choose_title' | translate }}
|
2022-02-28 13:41:33 +01:00
|
|
|
</h1>
|
2021-11-07 14:52:49 +01:00
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
2021-11-12 12:09:48 +01:00
|
|
|
<div>
|
2021-11-16 11:03:20 +01:00
|
|
|
<label for="title">{{ 'creation.choose_title_label' | translate }}</label>
|
2021-11-12 12:09:48 +01:00
|
|
|
</div>
|
2021-11-07 14:52:49 +01:00
|
|
|
<input
|
2021-11-14 15:48:27 +01:00
|
|
|
class="input is-fullwidth"
|
2021-11-07 14:52:49 +01:00
|
|
|
#title
|
|
|
|
formControlName="title"
|
2021-11-12 12:09:48 +01:00
|
|
|
(keyup)="pollService.updateSlug()"
|
|
|
|
(blur)="pollService.updateSlug()"
|
2021-11-07 14:52:49 +01:00
|
|
|
id="title"
|
2021-11-16 11:03:20 +01:00
|
|
|
maxlength="140"
|
2021-11-07 14:52:49 +01:00
|
|
|
required
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="poll-description">
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
2022-02-02 15:38:51 +01:00
|
|
|
<label for="descr">
|
|
|
|
{{ 'creation.description' | translate }}
|
|
|
|
</label>
|
2021-11-07 14:52:49 +01:00
|
|
|
<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
|
|
|
|
richTextMode activé
|
|
|
|
</div>
|
|
|
|
<textarea
|
|
|
|
class="ui-inputtextarea is-fullwidth is-block"
|
|
|
|
#description
|
|
|
|
matInput
|
|
|
|
id="descr"
|
2021-11-16 11:03:20 +01:00
|
|
|
class="is-large is-full input"
|
2021-11-07 14:52:49 +01:00
|
|
|
formControlName="description"
|
|
|
|
required
|
2022-02-02 15:38:51 +01:00
|
|
|
[maxlength]="environment.description_max_chars"
|
2021-11-07 14:52:49 +01:00
|
|
|
></textarea>
|
2021-11-14 15:48:27 +01:00
|
|
|
<div
|
2021-12-06 12:13:47 +01:00
|
|
|
class="text-info"
|
2022-02-02 15:38:51 +01:00
|
|
|
[ngClass]="{
|
|
|
|
'has-background-warning':
|
|
|
|
pollService.form.value.description.length === environment.description_max_chars
|
|
|
|
}"
|
2021-11-07 14:52:49 +01:00
|
|
|
>
|
2021-12-15 18:34:39 +01:00
|
|
|
<p>
|
2021-12-21 14:58:31 +01:00
|
|
|
<span class="counter-current" *ngIf="pollService.form.value.description.length">
|
2022-02-02 15:38:51 +01:00
|
|
|
{{ pollService.form.value.description.length }} /
|
|
|
|
</span>
|
|
|
|
{{ environment.description_max_chars }}
|
|
|
|
{{ 'creation.description_constraint' | translate }}
|
2021-12-15 18:34:39 +01:00
|
|
|
</p>
|
2021-11-14 15:48:27 +01:00
|
|
|
</div>
|
2021-11-07 14:52:49 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
2022-03-10 12:00:31 +01:00
|
|
|
<p-confirmDialog #cd [style]="{ width: '486px' }">
|
2021-11-17 15:06:36 +01:00
|
|
|
<ng-template pTemplate="header">
|
|
|
|
<h3>{{ 'creation.dialog' | translate }}</h3>
|
|
|
|
</ng-template>
|
|
|
|
<ng-template pTemplate="footer">
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
icon="pi pi-times"
|
2021-11-26 13:30:51 +01:00
|
|
|
[value]="'dialogs.no' | translate"
|
2021-11-30 17:37:23 +01:00
|
|
|
(click)="cd.close($event)"
|
|
|
|
></button>
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
icon="pi pi-check"
|
|
|
|
[value]="'dialogs.yes' | translate"
|
|
|
|
(click)="leave($event)"
|
2021-11-17 15:06:36 +01:00
|
|
|
></button>
|
|
|
|
</ng-template>
|
|
|
|
</p-confirmDialog>
|
2021-11-07 14:52:49 +01:00
|
|
|
</div>
|
2021-12-09 15:43:44 +01:00
|
|
|
<app-nav-steps
|
|
|
|
[display_previous_button]="false"
|
|
|
|
[display_next_button]="true"
|
|
|
|
[next_step_number]="pollService.step_current + 1"
|
|
|
|
[previous_step_number]="pollService.step_current - 1"
|
|
|
|
></app-nav-steps>
|