criteria.component.html

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

<div *ngIf="(datasetListIsLoaded | async)
    && (criteriaFamilyListIsLoaded | async)
    && (attributeListIsLoaded | async)" class="row mt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <app-cone-search-tab
            [datasetSelected]="datasetSelected | async"
            [datasetList]="datasetList | async"
            [coneSearch]="coneSearch | async"
            [resolver]="resolver | async"
            [resolverIsLoading]="resolverIsLoading | async"
            [resolverIsLoaded]="resolverIsLoaded | async"
            (addConeSearch)="addConeSearch($event)"
            (deleteConeSearch)="deleteConeSearch()"
            (retrieveCoordinates)="retrieveCoordinates($event)">
        </app-cone-search-tab>
        <app-criteria-tabs
            [attributeList]="attributeList | async | sortByCriteriaDisplay"
            [criteriaFamilyList]="criteriaFamilyList | async"
            [criteriaList]="criteriaList | async"
            [svomKeywords]="svomKeywords | async"
            (selectSvomAcronym)="selectSvomAcronym($event)"
            (resetSvomKeywords)="resetSvomKeywords()"
            (addCriterion)="addCriterion($event)"
            (deleteCriterion)="deleteCriterion($event)">
        </app-criteria-tabs>
    </div>
    <div class="col-12 col-md-4 col-lg-3 pt-2">
        <app-spinner *ngIf="(outputFamilyListIsLoading | async) || (outputCategoryListIsLoading | async)"></app-spinner>
        <app-summary *ngIf="(outputFamilyListIsLoaded | async) && (outputCategoryListIsLoaded | async)"
            [currentStep]="currentStep | async"
            [datasetSelected]="datasetSelected | async"
            [datasetList]="datasetList | async"
            [attributeList]="attributeList | async | sortByCriteriaDisplay"
            [criteriaFamilyList]="criteriaFamilyList | async"
            [outputFamilyList]="outputFamilyList | async"
            [outputCategoryList]="outputCategoryList | async"
            [criteriaList]="criteriaList | async"
            [outputList]="outputList | async"
            [queryParams]="queryParams | async"
            [coneSearch]="coneSearch | async">
        </app-summary>
    </div>
</div>
<div class="row mt-5 justify-content-between">
    <div class="col">
        <a routerLink="/instance/{{ instanceSelected | async }}/search/dataset/{{ datasetSelected | async }}"
            [queryParams]="queryParams | async"
            class="btn btn-outline-secondary">
            <span class="fas fa-arrow-left"></span> Dataset
        </a>
    </div>
    <div class="col col-auto">
        <a routerLink="/instance/{{ instanceSelected | async }}/search/output/{{ datasetSelected | async }}" [queryParams]="queryParams | async"
            class="btn btn-outline-primary">
            Output <span class="fas fa-arrow-right"></span>
        </a>
    </div>
</div>