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

<h2 *ngIf="!taskNote.id">{{ 'basic.new-task-note' | translate }}</h2>
<h2 *ngIf="taskNote.id">{{ 'basic.edit-task-note' | translate }}</h2>
<div class="spt-form">
    <form [formGroup]="taskNoteForm" (ngSubmit)="onSubmit()">
        <div class="mb-3">
            <label for="message" class="form-label">{{ 'form.comment' | translate }}:</label>
            <textarea class="form-control" id="message" formControlName="message" cols="50" rows="5"></textarea>
            <div class="form-text" *ngIf="taskNoteForm.get('message')?.invalid && taskNoteForm.get('message')?.touched">
                {{ 'form.comment' | translate }} {{ 'form.mandatory' | translate }}.
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">{{ 'form.contact' | translate }}:</label>
            <app-search-select #contactSearchSelect
                               [formId]="'contactIri'"
                               [formLabelLangKey]="'form.product'"
                               [documentForm]="taskNoteForm"
                               [getDataFunction]="getContacts"
                               [dataSource]="dataSourceContacts"
                               [searchSelectColDefs]="colDefContacts"
                               [displayedDataField]="'fullName'"
                               [dataSet]="taskNote.contact"
            >
            </app-search-select>
            <input type="hidden" formControlName="contactIri" value="{{taskNote.contactIri}}"/>
        </div>

        <p class="form-label">{{ 'form.contact-type' | translate }}:</p>
        <div class="d-flex mb-3">
            <div class="form-check me-3" *ngFor="let type of contactTypes; let i = index">
                <input type="radio" class="form-check-input" id="radio-{{ type }}" formControlName="contactType" [value]="type" />
                <label for="radio-{{ type }}" class="form-check-label bi" [class.bi-people]="type === 'personal'"
                       [class.bi-telephone]="type === 'phone'"
                       [class.bi-envelope]="type === 'email'">
                    {{ getContactTypeTranslationKey(type) | translate }}
                </label>
            </div>
        </div>

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