matsen-tool-fe/matsen-tool/src/app/_views/tasks/new-task/new-task.component.html

<h2 *ngIf="!task.id">{{ 'basic.new-task' | translate }}</h2>
<h2 *ngIf="task.id">{{ 'basic.edit-task' | translate }}</h2>
<div class="spt-form">
    <form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
        <div class="mb-3">
            <label for="headline" class="form-label">{{ 'form.headline' | translate }}:</label>
            <input type="text" class="form-control" id="headline" formControlName="headline"/>
            <div class="form-text" *ngIf="taskForm.get('headline')?.invalid && taskForm.get('headline')?.touched">
                {{ 'form.headline' | translate }} {{ 'form.mandatory' | translate }}.
            </div>
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">{{ 'form.description' | translate }}:</label>
            <textarea class="form-control" id="description" formControlName="description" cols="50" rows="5"></textarea>
            <div class="form-text" *ngIf="taskForm.get('description')?.invalid && taskForm.get('description')?.touched">
                {{ 'form.description' | translate }} {{ 'form.mandatory' | translate }}.
            </div>
        </div>

        <div class="mb-3">
            <label for="productIri" class="form-label">{{ 'form.product' | translate }}:</label>
            <app-search-select #productSearchSelect id="productIri"
                               [formId]="'productIri'"
                               [formLabelLangKey]="'form.product'"
                               [documentForm]="taskForm"
                               [getDataFunction]="getProducts"
                               [dataSource]="dataSourceProducts"
                               [displayedDataField]="'name'"
                               [dataSet]="task.product"
                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefProducts()"
            >
                <input type="hidden" formControlName="productIri" value="{{task.productIri}}"/>
            </app-search-select>
        </div>


        <div class="mb-3">
            <label for="assignedToIri" class="form-label">{{ 'form.assign-to' | translate }}:</label>
            <app-search-select #userSearchSelect id="assignedToIri"
                               [formId]="'assignedToIri'"
                               [formLabelLangKey]="'form.user'"
                               [documentForm]="taskForm"
                               [getDataFunction]="getUsers"
                               [dataSource]="dataSourceUsers"
                               [displayedDataField]="'fullName'"
                               [dataSet]="task.assignedTo"
                               [listColDefinitions]="SearchSelectComponent.getDefaultColDefUsers()"
            >
                <input type="hidden" formControlName="assignedToIri" value="{{task.productIri}}"/>
            </app-search-select>
            <div class="form-text" *ngIf="taskForm.get('assignedTo')?.invalid && taskForm.get('assignedTo')?.touched">
                {{ 'form.assign-to' | translate }} {{ 'form.mandatory' | translate }}.
            </div>
        </div>

        <div class="mb-3">
            <label for="dueAtValue" class="form-label">{{ 'form.due-date' | translate }}:</label>
            <input type="date" value="{{ dueAtValue }}" class="form-control" id="dueAtValue"
                   (change)="onDueAtChange($event)"/>
            <div class="form-text" *ngIf="taskForm.get('dueAt')?.invalid && taskForm.get('dueAt')?.touched">
                {{ 'form.due-date' | translate }} {{ 'form.mandatory' | translate }}.
            </div>
        </div>

        <div class="d-flex mb-3">
            <div class="form-check me-3">
                <input type="radio" class="form-check-input" id="radio-prio-low" formControlName="prio" value="low"/>
                <label for="radio-prio-low" class="form-check-label">{{ 'form.prio-low' | translate }}</label>
            </div>
            <div class="form-check me-3">
                <input type="radio" class="form-check-input" id="radio-prio-medium" formControlName="prio"
                       value="medium"/>
                <label for="radio-prio-medium" class="form-check-label">{{ 'form.prio-medium' | translate }}</label>
            </div>
            <div class="form-check me-3">
                <input type="radio" class="form-check-input" id="radio-prio-high" formControlName="prio" value="high"/>
                <label for="radio-prio-high" class="form-check-label">{{ 'form.prio-high' | translate }}</label>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" [disabled]="taskForm.invalid">{{ 'form.send' | translate }}
        </button>
    </form>
</div>