diff --git a/client/src/app/instance/search/components/result/datatable-actions.component.html b/client/src/app/instance/search/components/result/datatable-actions.component.html index f54031521f73c94cb57c0d2f0f02a0c63a475e85..d20f9c16448339958b173ae5a7b146b50728a98c 100644 --- a/client/src/app/instance/search/components/result/datatable-actions.component.html +++ b/client/src/app/instance/search/components/result/datatable-actions.component.html @@ -29,4 +29,4 @@ </a> </li> </ul> -</div> \ No newline at end of file +</div> diff --git a/client/src/app/instance/search/components/result/datatable.component.html b/client/src/app/instance/search/components/result/datatable.component.html index ab328df5e00907f2e8c647d0c19913a14b868895..0157470b45a41ca095b802ef6f995292de32749a 100644 --- a/client/src/app/instance/search/components/result/datatable.component.html +++ b/client/src/app/instance/search/components/result/datatable.component.html @@ -1,10 +1,10 @@ -<app-spinner *ngIf="(dataIsLoading)"></app-spinner> +<app-spinner *ngIf="dataIsLoading"></app-spinner> -<div *ngIf="(dataIsLoaded)"> - <table class="table table-bordered table-hover" aria-describedby="List of results"> +<div class="table-responsive" *ngIf="dataIsLoaded"> + <table class="table table-hover" aria-describedby="List of results"> <thead> <tr> - <th *ngIf="dataset.datatable_selectable_rows" scope="col">#</th> + <th *ngIf="dataset.datatable_selectable_rows" scope="col" class="select">#</th> <th *ngFor="let attribute of getOutputList()" scope="col"> {{ attribute.label }} <span *ngIf="attribute.id === sortedCol && attribute.order_by" class="pl-2" class="clickable" (click)="sort(attribute.id)"> diff --git a/client/src/app/instance/search/components/result/datatable.component.scss b/client/src/app/instance/search/components/result/datatable.component.scss index 25eb4367ac08aed41d91918efe14aab3b283474b..4d4085831e280f22c13f1d70d5e164691ffca869 100644 --- a/client/src/app/instance/search/components/result/datatable.component.scss +++ b/client/src/app/instance/search/components/result/datatable.component.scss @@ -7,7 +7,16 @@ * file that was distributed with this source code. */ - .data-selected { +.table-responsive { + overflow-y: scroll; + height: 650px; +} + +table th:not(.select) { + min-width: 130px; +} + +.data-selected { cursor: pointer; } diff --git a/client/src/app/instance/search/components/result/datatable.component.ts b/client/src/app/instance/search/components/result/datatable.component.ts index 32d1a1b5eaee89873166bd2cbc2d4b4e4fd1bf65..739b27df65417b20b3d92c1db34b346375ca719b 100644 --- a/client/src/app/instance/search/components/result/datatable.component.ts +++ b/client/src/app/instance/search/components/result/datatable.component.ts @@ -66,9 +66,7 @@ export class DatatableComponent implements OnInit { * Returns renderer configuration for the given attribute. * * @param {Attribute} attribute - The attribute. - * */ - // getRendererConfig(attribute: Attribute): DetailLinkRendererConfig | LinkRendererConfig | DownloadRendererConfig | ImageRendererConfig | RendererConfig | null { getRendererConfig(attribute: Attribute) { let config = null; switch(attribute.renderer) { @@ -91,10 +89,8 @@ export class DatatableComponent implements OnInit { config = null; } return config; - } - /** * Returns output list from attribute list. * diff --git a/client/src/app/instance/search/containers/result.component.html b/client/src/app/instance/search/containers/result.component.html index 1525c6e01f7742e2beca0e8f982fbadd60f98e1a..cb01ac25c98cb0ff8c8f0c56a97ebd7920a2b9a0 100644 --- a/client/src/app/instance/search/containers/result.component.html +++ b/client/src/app/instance/search/containers/result.component.html @@ -24,8 +24,54 @@ Dataset <span class="font-weight-bold">{{ (datasetList | async | datasetByName:(datasetSelected | async)).label }}</span> selected with <span class="font-weight-bold">{{ dataLength | async }}</span> objects found. </div> + <div class="lead mt-3"> + Download results: + <a class="btn btn-primary" title="Download results in JSON format"> + <span class="fas fa-file"></span> JSON + </a> + + <a class="btn btn-primary" title="Download results in CSV format"> + <span class="fas fa-file-csv"></span> CSV + </a> + + <a class="btn btn-primary" title="Download results in ASCII format"> + <span class="fas fa-file"></span> ASCII + </a> + + <a class="btn btn-primary" title="Download results in VO format"> + <span class="fas fa-file"></span> VOtable + </a> + </div> </div> - <div *ngIf="(instance | async).samp_enabled" class="jumbotron mb-4 py-4"> + + <app-datatable-actions + [selectedData]="selectedData | async" + [datasetSelected]="datasetSelected | async" + [datasetList]="datasetList | async" + [sampRegistered]="sampRegistered | async" + (broadcast)="broadcastVotable($event)" + (startTaskCreateResult)="startTaskCreateResult($event)" + (startTaskCreateArchive)="startTaskCreateArchive($event)"> + </app-datatable-actions> + + <app-datatable + [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> + + <!-- <div *ngIf="(instance | async).samp_enabled" class="jumbotron mb-4 py-4"> <div class="lead"> <ng-container *ngIf="!(sampRegistered | async)"> You are not connected to a SAMP-hub @@ -97,7 +143,7 @@ (startTaskCreateResult)="startTaskCreateResult($event)" (startTaskCreateArchive)="startTaskCreateArchive($event)" (downloadFile)="downloadFile($event)"> - </app-datatable-tab> + </app-datatable-tab> --> </ng-container> </div> </div> diff --git a/client/src/app/instance/search/containers/result.component.ts b/client/src/app/instance/search/containers/result.component.ts index 5540c05ca04b19bceeba10fb179e21e743312cfb..979bd1dca280e87454f1b182e83c1c3ad686c640 100644 --- a/client/src/app/instance/search/containers/result.component.ts +++ b/client/src/app/instance/search/containers/result.component.ts @@ -14,7 +14,7 @@ import { Observable, Subscription } from 'rxjs'; import { AbstractSearchComponent } from './abstract-search.component'; import { Pagination, DownloadFile } from '../../store/models'; -import { Instance, Image } from 'src/app/metamodel/models'; +import { Instance, Dataset, Image } from 'src/app/metamodel/models'; import * as instanceSelector from 'src/app/metamodel/selectors/instance.selector'; import * as searchActions from '../../store/actions/search.actions'; import * as searchSelector from '../../store/selectors/search.selector'; @@ -24,6 +24,7 @@ import * as downloadFileActions from '../../store/actions/download-file.actions' import * as downloadFileSelector from '../../store/selectors/download-file.selector'; import * as imageActions from 'src/app/metamodel/actions/image.actions'; import * as imageSelector from 'src/app/metamodel/selectors/image.selector'; +import * as datasetSelector from 'src/app/metamodel/selectors/dataset.selector'; /** * @class @@ -38,6 +39,7 @@ import * as imageSelector from 'src/app/metamodel/selectors/image.selector'; }) export class ResultComponent extends AbstractSearchComponent { public instance: Observable<Instance>; + public dataset: Observable<Dataset>; public dataLength: Observable<number>; public dataLengthIsLoading: Observable<boolean>; public dataLengthIsLoaded: Observable<boolean>; @@ -54,6 +56,7 @@ export class ResultComponent extends AbstractSearchComponent { constructor(protected store: Store<{ }>) { super(store); + this.dataset = store.select(datasetSelector.selectDatasetByRouteName); this.instance = store.select(instanceSelector.selectInstanceByRouteName); this.dataLength = this.store.select(searchSelector.selectDataLength); this.dataLengthIsLoading = this.store.select(searchSelector.selectDataLengthIsLoading);