95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
|
<section class="task-create-page" aria-label="Create new task">
|
||
|
|
<header class="task-create-page__header">
|
||
|
|
<h1 class="task-create-page__title">Create Task</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
@if (error()) {
|
||
|
|
<div class="task-create-page__error" role="alert" aria-live="polite">
|
||
|
|
{{ error() }}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
<form
|
||
|
|
class="task-create-page__form"
|
||
|
|
[formGroup]="form"
|
||
|
|
(ngSubmit)="onSubmit()"
|
||
|
|
aria-label="Task form"
|
||
|
|
>
|
||
|
|
<div class="task-create-page__form-field">
|
||
|
|
<label class="task-create-page__label" for="title">
|
||
|
|
Title <span aria-hidden="true">*</span>
|
||
|
|
<span class="sr-only">(required)</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
class="task-create-page__input"
|
||
|
|
id="title"
|
||
|
|
formControlName="title"
|
||
|
|
type="text"
|
||
|
|
placeholder="Enter task title"
|
||
|
|
aria-required="true"
|
||
|
|
aria-describedby="title-hint"
|
||
|
|
/>
|
||
|
|
<span id="title-hint" class="sr-only">Enter a descriptive title for the task</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-create-page__form-field">
|
||
|
|
<label class="task-create-page__label" for="description">Description</label>
|
||
|
|
<textarea
|
||
|
|
class="task-create-page__textarea"
|
||
|
|
id="description"
|
||
|
|
formControlName="description"
|
||
|
|
placeholder="Enter task description"
|
||
|
|
aria-describedby="desc-hint"
|
||
|
|
></textarea>
|
||
|
|
<span id="desc-hint" class="sr-only">Optional: provide additional details about the task</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-create-page__form-field">
|
||
|
|
<label class="task-create-page__label" for="dueDate">Due Date</label>
|
||
|
|
<input
|
||
|
|
class="task-create-page__input"
|
||
|
|
id="dueDate"
|
||
|
|
formControlName="dueDate"
|
||
|
|
type="date"
|
||
|
|
aria-describedby="date-hint"
|
||
|
|
/>
|
||
|
|
<span id="date-hint" class="sr-only">Select when this task should be completed</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-create-page__form-field">
|
||
|
|
<label class="task-create-page__label" for="initialNote">
|
||
|
|
Initial Note <span aria-hidden="true">*</span>
|
||
|
|
<span class="sr-only">(required)</span>
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
class="task-create-page__textarea"
|
||
|
|
id="initialNote"
|
||
|
|
formControlName="initialNote"
|
||
|
|
placeholder="Add an initial note for this task"
|
||
|
|
aria-required="true"
|
||
|
|
aria-describedby="note-hint"
|
||
|
|
></textarea>
|
||
|
|
<span id="note-hint" class="sr-only">Required: add at least one note to the task</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="task-create-page__actions" role="group" aria-label="Form actions">
|
||
|
|
<emi-button
|
||
|
|
type="button"
|
||
|
|
variant="ghost"
|
||
|
|
(clicked)="onCancel()"
|
||
|
|
aria-label="Cancel and go back to task list"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</emi-button>
|
||
|
|
<emi-button
|
||
|
|
type="submit"
|
||
|
|
variant="primary"
|
||
|
|
[disabled]="loading() || form.invalid"
|
||
|
|
aria-label="Create new task"
|
||
|
|
>
|
||
|
|
{{ loading() ? 'Creating...' : 'Create Task' }}
|
||
|
|
</emi-button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|