Merge branch '39-affichage-des-criteria-dans-la-page-result' into 'develop'

Resolve "Affichage des criteria dans la page result"

Closes #39

See merge request !36

client/src/app/instance/search/components/result/criteria-list.component.html

+<accordion [isAnimated]="true">
+    <accordion-group #ag panelClass="abstract-accordion lead" [isOpen]="true" class="mt-2">
+        <button class="btn btn-link btn-block clearfix pb-1" accordion-heading>
+            <div class="pull-left float-left font-weight-bold">
+                Search criteria
+                &nbsp;
+                <span *ngIf="ag.isOpen">
+                    <span class="fas fa-chevron-up"></span>
+                </span>
+                <span *ngIf="!ag.isOpen">
+                    <span class="fas fa-chevron-down"></span>
+                </span>
+            </div>
+        </button>
+
+        <!-- Criteria list -->
+        <ul>
+            <li *ngFor="let criterion of criteriaList">
+                {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
+            </li>
+        </ul>
+    </accordion-group>
+</accordion>

client/src/app/instance/search/components/result/criteria-list.component.ts

+/**
+ * This file is part of Anis Client.
+ *
+ * @copyright Laboratoire d'Astrophysique de Marseille / CNRS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+import { Criterion, getPrettyCriterion } from 'src/app/instance/store/models';
+import { Attribute } from 'src/app/metamodel/models';
+
+@Component({
+    selector: 'app-criteria-list',
+    templateUrl: 'criteria-list.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CriteriaListComponent {
+    @Input() criteriaList: Criterion[];
+    @Input() attributeList: Attribute[];
+
+    /**
+     * Returns attribute for the given attribute ID.
+     *
+     * @param  {number} id - The attribute ID.
+     *
+     * @return Attribute
+     */
+    getAttribute(id: number): Attribute {
+        return this.attributeList.find(attribute => attribute.id === id);
+    }
+
+    /**
+     * Returns pretty print of the given criterion.
+     *
+     * @param  {Criterion} criterion - The criterion.
+     *
+     * @return string
+     */
+    printCriterion(criterion: Criterion): string {
+        return getPrettyCriterion(criterion);
+    }
+}

client/src/app/instance/search/components/result/index.ts

@@ -4,6 +4,7 @@ import { DatatableActionsComponent } from './datatable-actions.component';
 import { UrlDisplayComponent } from './url-display.component';
 import { DatatableComponent } from './datatable.component';
 import { ConeSearchPlotComponent } from './cone-search-plot.component';
+import { CriteriaListComponent } from './criteria-list.component';
 import { rendererComponents } from './renderer';
 
 export const resultComponents = [
@@ -13,5 +14,6 @@ export const resultComponents = [
     DatatableActionsComponent,
     ConeSearchPlotComponent,
     DownloadResultComponent,
+    CriteriaListComponent,
     rendererComponents
 ];

client/src/app/instance/search/containers/result.component.html

@@ -22,8 +22,15 @@
             <div class="jumbotron row mb-4 py-4">
                 <div class="col">
                     <div class="lead">
-                        Dataset <span class="font-weight-bold">{{ (dataset | async).label }}</span> 
-                        selected with <span class="font-weight-bold">{{ dataLength | async }}</span> objects found.
+                        <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

client/src/app/instance/search/containers/result.component.ts

@@ -58,6 +58,7 @@ export class ResultComponent extends AbstractSearchComponent {
     public coneSearchConfigIsLoaded: Observable<boolean>;
     public archiveIsCreating: Observable<boolean>;
     public pristineSubscription: Subscription;
+    public criteraToolTip: string = "Criteria family list";
 
     constructor(protected store: Store<{ }>) {
         super(store);