result.component.html

<app-spinner *ngIf="(datasetListIsLoading | async) 
    || (attributeListIsLoading | async) 
    || (criteriaFamilyListIsLoading | async) 
    || (outputFamilyListIsLoading | async)
    || (outputCategoryListIsLoading | async)
    || (dataLengthIsLoading | async)">
</app-spinner>

<div *ngIf="(datasetListIsLoaded | async)
    && (attributeListIsLoaded | async) 
    && (criteriaFamilyListIsLoaded | async) 
    && (outputFamilyListIsLoaded | async)
    && (outputCategoryListIsLoaded | async)
    && (dataLengthIsLoaded | async)" class="row mt-4">
    <div class="col-12">
        <div *ngIf="(dataLength | async) < 1" class="jumbotron mb-4 py-4">
            <div class="lead">
                No data found for this search
            </div>
        </div>
        <ng-container *ngIf="(dataLength | async) > 0">
            <div class="jumbotron row mb-4 py-4">
                <div class="col">
                    <div class="lead">
                        <span class="font-weight-bold">{{ dataLength | async }}</span> objects found in the 
                        <span class="font-weight-bold">{{ (dataset | async).label }}</span> dataset 
                        <span *ngIf="(criteriaList | async).length > 0">
                            with <span class="font-weight-bold">{{ (criteriaList | async).length }}</span> search criteria.
                        </span>
                        <app-criteria-list *ngIf="(criteriaList | async).length > 0"
                            [criteriaList]="criteriaList | async"
                            [attributeList]="attributeList | async">
                        </app-criteria-list>
                    </div>
                    <div class="lead mt-4">
                        <app-download-result
                            [instance]="instance | async"
                            [dataset]="dataset | async"
                            [attributeList]="attributeList | async"
                            [criteriaList]="criteriaList | async"
                            [outputList]="outputList | async"
                            [coneSearch]="coneSearch | async"
                            [sampRegistered]="sampRegistered | async"
                            [archiveIsCreating]="archiveIsCreating | async"
                            (sampRegister)="sampRegister()"
                            (sampUnregister)="sampUnregister()"
                            (downloadFile)="downloadFile($event)"
                            (broadcastVotable)="broadcastVotable($event)"
                            (startTaskCreateArchive)="startTaskCreateArchive($event)">
                        </app-download-result>
                    </div>
                </div>
                <div class="col-md-6" *ngIf="coneSearch | async">
                    <app-image-list-result
                        [dataset]="dataset | async"
                        [attributeList]="attributeList | async"
                        [coneSearch]="coneSearch | async"
                        [coneSearchConfig]="coneSearchConfig | async"
                        [data]="data | async"
                        [dataIsLoading]="dataIsLoading | async"
                        [dataIsLoaded]="dataIsLoaded | async"
                        [imageList]="imageList | async"
                        [imageListIsLoading]="imageListIsLoading | async"
                        [imageListIsLoaded]="imageListIsLoaded | async"
                        [sampRegistered]="sampRegistered | async"
                        (downloadFile)="downloadFile($event)">
                    </app-image-list-result>
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <app-datatable-actions 
                        [dataset]="dataset | async"
                        [criteriaList]="criteriaList | async"
                        [outputList]="outputList | async"
                        [coneSearch]="coneSearch | async"
                        [attributeList]="attributeList | async"
                        [selectedData]="selectedData | async"
                        [sampRegistered]="sampRegistered | async"
                        [archiveIsCreating]="archiveIsCreating | async"
                        (downloadFile)="downloadFile($event)"
                        (broadcastVotable)="broadcastVotable($event)"
                        (startTaskCreateArchive)="startTaskCreateArchive($event)">
                    </app-datatable-actions>
                </div>
                <div class="col align-self-center">
                    <app-url-display
                        [dataset]="dataset | async"
                        [criteriaList]="criteriaList | async"
                        [outputList]="outputList | async"
                        [coneSearch]="coneSearch | async">
                    </app-url-display>
                </div>
            </div>
            <app-datatable *ngIf="(dataset | async).datatable_enabled"
                [dataset]="dataset | async"
                [instance]="instance | async"
                [attributeList]="attributeList | async"
                [outputList]="outputList | async"
                [queryParams]="queryParams | async"
                [dataLength]="dataLength | async"
                [data]="data | async"
                [dataIsLoading]="dataIsLoading | async"
                [dataIsLoaded]="dataIsLoaded | async"
                [selectedData]="selectedData | async"
                (retrieveData)="retrieveData($event)"
                (addSelectedData)="addSearchData($event)"
                (deleteSelectedData)="deleteSearchData($event)"
                (downloadFile)="downloadFile($event)">
            </app-datatable>
        </ng-container>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/instance/{{ instanceSelected | async }}/search/output/{{ datasetSelected | async }}" [queryParams]="queryParams | async" class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Output
        </a>
    </div>
</div>