funky-framadate-front/src/app/features/administration/form/steps/step-one/step-one.component.html

90 lines
2.5 KiB
HTML

<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
<div class="step step-container">
<form class="min-height" [formGroup]="pollService.form">
<section class="poll-title">
<h1 class="title is-1" id="step_title">
{{ 'creation.choose_title' | translate }}
</h1>
<div class="columns">
<div class="column">
<div>
<label for="title">{{ 'creation.choose_title_label' | translate }}</label>
</div>
<input
class="input is-fullwidth"
#title
formControlName="title"
(keyup)="pollService.updateSlug()"
(blur)="pollService.updateSlug()"
id="title"
maxlength="140"
required
/>
</div>
</div>
</section>
<div class="poll-description">
<div class="columns">
<div class="column">
<label for="descr">
{{ 'creation.description' | translate }}
</label>
<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
richTextMode activé
</div>
<textarea
class="ui-inputtextarea is-fullwidth is-block"
#description
matInput
id="descr"
class="is-large is-full input"
formControlName="description"
required
[maxlength]="environment.description_max_chars"
></textarea>
<div
class="text-info"
[ngClass]="{
'has-background-warning':
pollService.form.value.description.length === environment.description_max_chars
}"
>
<p>
<span class="counter-current" *ngIf="pollService.form.value.description.length">
{{ pollService.form.value.description.length }} /
</span>
{{ environment.description_max_chars }}
{{ 'creation.description_constraint' | translate }}
</p>
</div>
</div>
</div>
</div>
</form>
<p-confirmDialog #cd [style]="{ width: '486px' }">
<ng-template pTemplate="header">
<h3>{{ 'creation.dialog' | translate }}</h3>
</ng-template>
<ng-template pTemplate="footer">
<button
type="button"
icon="pi pi-times"
[value]="'dialogs.no' | translate"
(click)="cd.close($event)"
></button>
<button
type="button"
icon="pi pi-check"
[value]="'dialogs.yes' | translate"
(click)="leave($event)"
></button>
</ng-template>
</p-confirmDialog>
</div>
<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>