matsen-tool-fe/matsen-tool/src/app/documents/new-document/new-document.component.html

<h2 *ngIf="!document.id">{{ 'basic.new-document' | translate }}</h2>
<h2 *ngIf="document.id">{{ 'basic.edit-document' | translate }}</h2>
<div class="spt-form">
    <form [formGroup]="documentForm" (ngSubmit)="onSubmit()">
        <div class="mb-3">
            <label for="name" class="form-label">{{ 'form.name' | translate }}:</label>
            <input type="text" class="form-control" id="name" formControlName="name"/>
        </div>

        <div class="mb-3">
            <label for="description" class="form-label">{{ 'form.description' | translate }}:</label>
            <input type="text" class="form-control" id="description" formControlName="description"/>
        </div>

        <div class="mb-3">
            <label for="partner" class="form-label">{{ 'form.partner' | translate }}:</label>
            <input type="text" class="form-control" id="partner" [ngbTypeahead]="searchPartners"
                   [inputFormatter]="formatter" [value]="documentForm.get('partnerName')?.value"
                   [resultFormatter]="formatter" [editable]="false" (selectItem)="onAssignedToSelectPartner($event)"/>
            <input type="hidden" formControlName="partner"/>
        </div>

        <div class="mb-3">
            <label for="product" class="form-label">{{ 'form.product' | translate }}:</label>
            <input type="text" class="form-control" id="product" [ngbTypeahead]="searchProducts"
                   [inputFormatter]="formatter" [value]="documentForm.get('productName')?.value"
                   [resultFormatter]="formatter" [editable]="false" (selectItem)="onAssignedToSelectProduct($event)"/>
            <input type="hidden" formControlName="product"/>
        </div>

        <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value === null">
            <label for="image" class="form-label">{{ 'form.upload-image' | translate }}:</label>
            <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*"/>
        </div>

        <div class="mb-3" *ngIf="documentForm.get('documentUrl')?.value !== null">
            <div class="delete-image" (click)="onDeleteFile()">
                <span class="bi bi-file-earmark-minus p-2" data-type="action-icon"></span>
                <p class="mb-0 ms-1">{{ 'system.delete-file' | translate }}</p>
            </div>
        </div>
        <button type="submit" class="btn btn-primary"
                [disabled]="this.documentForm.invalid"
        >{{ 'form.send' | translate }}
        </button>
    </form>
</div>