matsen-tool-fe/matsen-tool/src/app/_views/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>
            <textarea class="form-control" id="description" formControlName="description" cols="50" rows="5"></textarea>
        </div>

        <div class="mb-3">
            <label for="partner" class="form-label">{{ 'form.partner' | translate }}:</label>
            <ng-container *ngIf="partner === undefined">
                <app-search-select #partnerSearchSelect
                                   [formId]="'partnerIri'"
                                   [formLabelLangKey]="'form.partner'"
                                   [documentForm]="documentForm"
                                   [getDataFunction]="getPartners"
                                   [displayedDataField]="'name'"
                                   [dataSet]="document.partner"
                                   [listColDefinitions]="SearchSelectComponent.getDefaultColDefPartners()"
                >
                </app-search-select>
                <input type="hidden" id="partner" formControlName="partner"
                />
            </ng-container>
            <input type="text" class="form-control" *ngIf="partner !== undefined"
                   disabled value="{{partner.name}}"/>
        </div>

        <div class="mb-3">
            <label for="product" class="form-label">{{ 'form.product' | translate }}:</label>
            <ng-container *ngIf="product === undefined">
                <app-search-select #productSearchSelect
                                   [formId]="'productIri'"
                                   [formLabelLangKey]="'form.product'"
                                   [documentForm]="documentForm"
                                   [getDataFunction]="getProducts"
                                   [displayedDataField]="'name'"
                                   [dataSet]="document.product"
                                   [listColDefinitions]="SearchSelectComponent.getDefaultColDefProducts()"
                >
                </app-search-select>
                <input type="hidden" id="product" formControlName="product"/>
            </ng-container>
            <input type="text" class="form-control" *ngIf="product !== undefined"
                   disabled value="{{product.name}}"/>
        </div>

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