Commit cdde9f7f authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Result search summary into accordion => DONE

parent 05fad0ae
......@@ -6,12 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [3.5.0] - 2020-xx
### Added
- #140 => Add description tooltip on search multiple datasets
- #140 => Add description tooltip on search multiple datasetsranch
- #136 => Add detail view for spectra type object and default object
### Fixed
### Changed
- #134 => Result search summary into accordion
- #139 => Datasets selected in search multiple is a configurable option in anis-admin
- #138 => Sort attributes and put scrollbar if table too long in Documentation module
- #133 => Change typo if only one dataset
......
<div *ngIf="dataLengthIsLoaded" class="jumbotron mb-5 py-4">
<div *ngIf="dataLengthIsLoaded" class="jumbotron mb-4 py-4">
<div class="lead">Dataset <span class="bold">{{ datasetName }}</span> selected with <span
class="bold">{{ dataLength }}</span> objects found.</div>
<hr class="my-4">
......
.tab-content {
min-height: 150px;
height: 250px;
border-bottom: #dee2e6 solid 1px;
border-left: #dee2e6 solid 1px;
border-right: #dee2e6 solid 1px;
overflow-y: auto;
}
.title {
......
<div *ngIf="dataLengthIsLoaded" class="mb-5">
<tabset [justified]="true">
<tab>
<ng-template tabHeading>
Criteria <span class="badge badge-pill badge-secondary">{{ nbCriteria() }}</span>
</ng-template>
<div class="tab-content container-fluid pt-3">
<div *ngIf="nbCriteria() === 0" class="text-center font-weight-bold pt-5">
No selected criteria
</div>
<accordion *ngIf="dataLengthIsLoaded" [isAnimated]="true">
<accordion-group #ag [isOpen]="false" [panelClass]="'custom-accordion'" class="my-2">
<button class="btn btn-link btn-block clearfix" accordion-heading>
<span class="pull-left float-left">
Search summary
&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>
</span>
</button>
<div>
<tabset [justified]="true">
<tab>
<ng-template tabHeading>
Criteria <span class="badge badge-pill badge-secondary">{{ nbCriteria() }}</span>
</ng-template>
<div class="tab-content container-fluid pt-3">
<div *ngIf="nbCriteria() === 0" class="text-center font-weight-bold pt-5">
No selected criteria
</div>
<div *ngIf="nbCriteria() > 0" class="row">
<div *ngIf="isConeSearchAdded" class="col-12 col-md-6 col-xl-4 pb-3">
<span class="title">Cone search</span>
<ul class="list-unstyled pl-3">
<li>RA = {{ coneSearch.ra }}°</li>
<li>DEC = {{ coneSearch.dec }}°</li>
<li>radius = {{ coneSearch.radius }} arcsecond</li>
</ul>
</div>
<ng-container *ngFor="let family of criteriaFamilyList">
<ng-container *ngIf="criteriaByFamily(family.id).length > 0">
<div class="col-12 col-md-6 col-xl-4 pb-3">
<span class="title">{{ family.label }}</span>
<div *ngIf="nbCriteria() > 0" class="row">
<div *ngIf="isConeSearchAdded" class="col-12 col-md-6 col-xl-4 pb-3">
<span class="title">Cone search</span>
<ul class="list-unstyled pl-3">
<li *ngFor="let criterion of criteriaByFamily(family.id)">
{{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
</li>
<li>RA = {{ coneSearch.ra }}°</li>
<li>DEC = {{ coneSearch.dec }}°</li>
<li>radius = {{ coneSearch.radius }} arcsecond</li>
</ul>
</div>
</ng-container>
</ng-container>
</div>
</div>
</tab>
<tab>
<ng-template tabHeading>
Outputs <span class="badge badge-pill badge-secondary">{{ outputList.length }}</span>
</ng-template>
<div class="tab-content container-fluid pt-3">
<div class="row">
<ng-container *ngFor="let family of outputFamilyList">
<ng-container *ngFor="let category of categoryListByFamily(family.id)">
<ng-container *ngIf="outputListByCategory(category.id).length > 0">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-3">
<span class="title">{{ family.label }}</span><br>
<span class="title pl-3">{{ category.label }}</span>
<ul class="list-unstyled pl-5">
<li *ngFor="let output of outputListByCategory(category.id)">
{{ getAttribute(output).form_label }}
</li>
</ul>
</div>
<ng-container *ngFor="let family of criteriaFamilyList">
<ng-container *ngIf="criteriaByFamily(family.id).length > 0">
<div class="col-12 col-md-6 col-xl-4 pb-3">
<span class="title">{{ family.label }}</span>
<ul class="list-unstyled pl-3">
<li *ngFor="let criterion of criteriaByFamily(family.id)">
{{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
</li>
</ul>
</div>
</ng-container>
</ng-container>
</div>
</div>
</tab>
<tab>
<ng-template tabHeading>
Outputs <span class="badge badge-pill badge-secondary">{{ outputList.length }}</span>
</ng-template>
<div class="tab-content container-fluid pt-3">
<div class="row">
<ng-container *ngFor="let family of outputFamilyList">
<ng-container *ngFor="let category of categoryListByFamily(family.id)">
<ng-container *ngIf="outputListByCategory(category.id).length > 0">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-3">
<span class="title">{{ family.label }}</span><br>
<span class="title pl-3">{{ category.label }}</span>
<ul class="list-unstyled pl-5">
<li *ngFor="let output of outputListByCategory(category.id)">
{{ getAttribute(output).form_label }}
</li>
</ul>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</div>
</div>
</tab>
</tabset>
</div>
\ No newline at end of file
</div>
</div>
</tab>
</tabset>
</div>
</accordion-group>
</accordion>
<!--<div *ngIf="dataLengthIsLoaded" class="mb-5">-->
<!-- <tabset [justified]="true">-->
<!-- <tab>-->
<!-- <ng-template tabHeading>-->
<!-- Criteria <span class="badge badge-pill badge-secondary">{{ nbCriteria() }}</span>-->
<!-- </ng-template>-->
<!-- <div class="tab-content container-fluid pt-3">-->
<!-- <div *ngIf="nbCriteria() === 0" class="text-center font-weight-bold pt-5">-->
<!-- No selected criteria-->
<!-- </div>-->
<!-- <div *ngIf="nbCriteria() > 0" class="row">-->
<!-- <div *ngIf="isConeSearchAdded" class="col-12 col-md-6 col-xl-4 pb-3">-->
<!-- <span class="title">Cone search</span>-->
<!-- <ul class="list-unstyled pl-3">-->
<!-- <li>RA = {{ coneSearch.ra }}°</li>-->
<!-- <li>DEC = {{ coneSearch.dec }}°</li>-->
<!-- <li>radius = {{ coneSearch.radius }} arcsecond</li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <ng-container *ngFor="let family of criteriaFamilyList">-->
<!-- <ng-container *ngIf="criteriaByFamily(family.id).length > 0">-->
<!-- <div class="col-12 col-md-6 col-xl-4 pb-3">-->
<!-- <span class="title">{{ family.label }}</span>-->
<!-- <ul class="list-unstyled pl-3">-->
<!-- <li *ngFor="let criterion of criteriaByFamily(family.id)">-->
<!-- {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- </div>-->
<!-- </tab>-->
<!-- <tab>-->
<!-- <ng-template tabHeading>-->
<!-- Outputs <span class="badge badge-pill badge-secondary">{{ outputList.length }}</span>-->
<!-- </ng-template>-->
<!-- <div class="tab-content container-fluid pt-3">-->
<!-- <div class="row">-->
<!-- <ng-container *ngFor="let family of outputFamilyList">-->
<!-- <ng-container *ngFor="let category of categoryListByFamily(family.id)">-->
<!-- <ng-container *ngIf="outputListByCategory(category.id).length > 0">-->
<!-- <div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-3">-->
<!-- <span class="title">{{ family.label }}</span><br>-->
<!-- <span class="title pl-3">{{ category.label }}</span>-->
<!-- <ul class="list-unstyled pl-5">-->
<!-- <li *ngFor="let output of outputListByCategory(category.id)">-->
<!-- {{ getAttribute(output).form_label }}-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </ng-container>-->
<!-- </div>-->
<!-- </div>-->
<!-- </tab>-->
<!-- </tabset>-->
<!--</div>-->
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { ReminderComponent } from './reminder.component';
import { Criterion } from '../../store/model';
......@@ -13,7 +14,10 @@ describe('[Search][Result] Component: ReminderComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ReminderComponent],
imports: [TabsModule.forRoot()]
imports: [
TabsModule.forRoot(),
AccordionModule.forRoot()
]
});
fixture = TestBed.createComponent(ReminderComponent);
component = fixture.componentInstance;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment