From 2626c3736a1b45593e3d5297d27a5b865da76486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Thu, 7 Apr 2022 17:22:30 +0200
Subject: [PATCH] Refactor result page => WIP
---
.../result/datatable-actions.component.html | 2 +-
.../result/datatable.component.html | 8 +--
.../result/datatable.component.scss | 11 +++-
.../components/result/datatable.component.ts | 4 --
.../search/containers/result.component.html | 50 ++++++++++++++++++-
.../search/containers/result.component.ts | 5 +-
6 files changed, 67 insertions(+), 13 deletions(-)
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 f5403152..d20f9c16 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 ab328df5..0157470b 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 25eb4367..4d408583 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 32d1a1b5..739b27df 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 1525c6e0..cb01ac25 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 5540c05c..979bd1dc 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);
--
GitLab