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">
            <app-search-select #partnerSearchSelect
                              [formId]="'partnerIri'"
                              [formLabelLangKey]="'form.partner'"
                              [documentForm]="documentForm"
                              [getDataFunction]="getPartners"
                              [dataSource]="dataSourcePartners"
                              [searchSelectColDefs]="colDefPartners"
                              [displayedDataField]="'name'"
            >
            </app-search-select>
            <input type="hidden" formControlName="partner"/>
        </div>

        <div class="mb-3">
            <app-search-select #productSearchSelect
                              [formId]="'productIri'"
                              [formLabelLangKey]="'form.product'"
                              [documentForm]="documentForm"
                              [getDataFunction]="getProducts"
                              [dataSource]="dataSourceProducts"
                              [searchSelectColDefs]="colDefProducts"
                              [displayedDataField]="'name'"
            >
            </app-search-select>
            <input type="hidden" formControlName="product"/>
        </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>