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'"
                               [dataSet]="document.partner"
            >
            </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'"
                               [dataSet]="document.product"
            >
            </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>