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

Refactoring detail components => DONE

parent ca01f0df
<div class="row justify-content-center">
<div class="col col-lg-10 col-xl-8 mt-4">
<app-object-data
[datasetName]="datasetName"
[outputFamilyList]="outputFamilyList"
[categoryList]="categoryList"
[attributeList]="attributeList"
[object]="object">
</app-object-data>
</div>
</div>
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Attribute, Category, Family } from '../../metamodel/model';
@Component({
selector: 'app-default-object',
templateUrl: 'default-object.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DefaultObjectComponent {
@Input() datasetName: string;
@Input() outputFamilyList: Family[];
@Input() categoryList: Category[];
@Input() attributeList: Attribute[];
@Input() object: any;
}
import { SpectraObjectComponent } from './spectra/spectra-object.component';
import { SpectraGraphComponent } from './spectra/spectra-graph/spectra-graph.component';
import { DefaultObjectComponent } from './default-object.component';
import { ObjectDataComponent } from './object-data.component';
export const dummiesComponents = [
SpectraObjectComponent,
SpectraGraphComponent
SpectraGraphComponent,
DefaultObjectComponent,
ObjectDataComponent
];
<div class="row">
<div [ngClass]="{'col-md-4 col-sm-12': getAttributeSpectraGraph()}" class="col mt-4">
<div *ngIf="getSpectra()" class="col text-right mb-2 p-0">
<a [href]="getSpectra()" class="btn btn-outline-primary" target="_blank">
Download spectra <span class="fas fa-download"></span>
</a>
</div>
<div *ngIf="getAttributeBySearchFlag('RA') && getAttributeBySearchFlag('DEC')" class="row">
<div class="col-12">
<table class="table mb-1">
<tr>
<th>Alpha</th>
<th>Delta</th>
<th class="text-center" rowspan="2"><img src="assets/cesam_anis80.png" alt="CeSAM logo" /></th>
</tr>
<tr>
<td>{{ object[getAttributeBySearchFlag('RA').label] }}</td>
<td>{{ object[getAttributeBySearchFlag('DEC').label] }}</td>
</tr>
</table>
<hr class="mt-0 mb-4">
</div>
</div>
<div *ngIf="getAttributeBySearchFlag('RA') && getAttributeBySearchFlag('DEC')" class="row">
<div class="col-12">
<table class="table mb-1">
<tr>
<th>Alpha</th>
<th>Delta</th>
<th class="text-center" rowspan="2"><img src="assets/cesam_anis80.png" alt="CeSAM logo" /></th>
</tr>
<tr>
<td>{{ object[getAttributeBySearchFlag('RA').label] }}</td>
<td>{{ object[getAttributeBySearchFlag('DEC').label] }}</td>
</tr>
</table>
<hr class="mt-0 mb-4">
</div>
</div>
<!-- Accordion families -->
<accordion [isAnimated]="true">
<accordion-group *ngFor="let family of outputFamilyList" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-2">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ family.label }}
&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>
<!-- Accordion families -->
<!-- Accordion categories -->
<accordion [isAnimated]="true">
<accordion-group *ngFor="let family of outputFamilyList" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-2">
<accordion-group *ngFor="let category of getCategoryByFamilySortedByDisplay(family.id)" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-4">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ family.label }}
{{ category.label }}
&nbsp;
<span *ngIf="ag.isOpen">
<span class="fas fa-chevron-up"></span>
</span>
<span class="fas fa-chevron-up"></span>
</span>
<span *ngIf="!ag.isOpen">
<span class="fas fa-chevron-down"></span>
</span>
<span class="fas fa-chevron-down"></span>
</span>
</span>
</button>
<!-- Accordion categories -->
<accordion [isAnimated]="true">
<accordion-group *ngFor="let category of getCategoryByFamilySortedByDisplay(family.id)" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-4">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ category.label }}
&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>
<!-- Output list -->
<div *ngFor="let attribute of getAttributesVisibleByCategory(category.id)" class="row pb-2">
<div class="col-5 font-weight-bold">{{ attribute.form_label }}</div>
<div class="col">{{ object[attribute.label] }}</div>
</div>
</accordion-group>
</accordion>
<!-- Output list -->
<div *ngFor="let attribute of getAttributesVisibleByCategory(category.id)" class="row pb-2">
<div class="col-5 font-weight-bold">{{ attribute.form_label }}</div>
<div class="col">{{ object[attribute.label] }}</div>
</div>
</accordion-group>
</accordion>
</div>
</div>
\ No newline at end of file
</accordion-group>
</accordion>
......@@ -15,10 +15,6 @@ export class ObjectDataComponent {
@Input() attributeList: Attribute[];
@Input() object: any;
getSpectra(): string {
return getHost() + '/download-file/' + this.datasetName + '/' + this.object[this.getAttributeBySearchFlag('SPECTRUM_1D').label];
}
getCategoryByFamilySortedByDisplay(idFamily: number): Category[] {
return this.categoryList
.filter(category => category.id_output_family === idFamily)
......@@ -41,17 +37,4 @@ export class ObjectDataComponent {
getAttributeBySearchFlag(searchFlag: string): Attribute {
return this.getAttributesVisible().find(attribute => attribute.search_flag === searchFlag);
}
getAttributeSpectraGraph(): Attribute {
return this.getAttributesVisible().find(attribute => attribute.renderer_detail === 'spectra_graph');
}
getZ(): number {
const attributeZ = this.getAttributeBySearchFlag('Z');
if (attributeZ) {
return +this.object[attributeZ.label];
} else {
return 0;
}
}
}
.dl-btn {
height: 80px;
display: inline-block;
}
\ No newline at end of file
......@@ -8,70 +8,28 @@
</div>
<div [ngClass]="{'col-md-4 col-sm-12': getAttributeSpectraGraph()}" class="col mt-4">
<div *ngIf="getSpectra()" class="col text-right mb-2 p-0">
<a [href]="getSpectra()" class="btn btn-outline-primary" target="_blank">
Download spectra <span class="fas fa-download"></span>
</a>
</div>
<div *ngIf="getAttributeBySearchFlag('RA') && getAttributeBySearchFlag('DEC')" class="row">
<div class="col-12">
<table class="table mb-1">
<tr>
<th>Alpha</th>
<th>Delta</th>
<th class="text-center" rowspan="2"><img src="../../../../assets/cesam_anis80.png" alt="CeSAM logo" /></th>
</tr>
<tr>
<td>{{ object[getAttributeBySearchFlag('RA').label] }}</td>
<td>{{ object[getAttributeBySearchFlag('DEC').label] }}</td>
</tr>
</table>
<hr class="mt-0 mb-4">
<div *ngIf="getSpectra()" class="jumbotron row mb-3 p-4">
<div class="col-auto align-self-center">
<p>Download:</p>
</div>
<div class="w-100 d-block d-xl-none"></div>
<div class="col">
<div class="row justify-content-center">
<div class="col-auto">
<a [href]="getSpectra()" target="_blank" class="btn btn-lg btn-block dl-btn">
<span [inlineSVG]="'assets/logo_spectra.svg'" title="Download SPECTRA archive"></span>
</a>
</div>
</div>
</div>
</div>
<!-- Accordion families -->
<accordion [isAnimated]="true">
<accordion-group *ngFor="let family of outputFamilyList" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-2">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ family.label }}
&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>
<!-- Accordion categories -->
<accordion [isAnimated]="true">
<accordion-group *ngFor="let category of getCategoryByFamilySortedByDisplay(family.id)" #ag panelClass="abstract-accordion" [isOpen]="true" class="pl-4">
<button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
<span class="pull-left float-left text-primary">
{{ category.label }}
&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>
<!-- Output list -->
<div *ngFor="let attribute of getAttributesVisibleByCategory(category.id)" class="row pb-2">
<div class="col-5 font-weight-bold">{{ attribute.form_label }}</div>
<div class="col">{{ object[attribute.label] }}</div>
</div>
</accordion-group>
</accordion>
</accordion-group>
</accordion>
<app-object-data
[datasetName]="datasetName"
[outputFamilyList]="outputFamilyList"
[categoryList]="categoryList"
[attributeList]="attributeList"
[object]="object">
</app-object-data>
</div>
</div>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { ObjectDisplayComponent } from './spectra-object.component';
import { Attribute } from '../../../metamodel/model';
import { ATTRIBUTE_LIST, CATEGORY_LIST, OBJECT_DETAIL } from '../../../../settings/test-data';
describe('[Detail] Component: ObjectDisplayComponent', () => {
let component: ObjectDisplayComponent;
let fixture: ComponentFixture<ObjectDisplayComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ObjectDisplayComponent],
imports: [AccordionModule.forRoot()]
});
fixture = TestBed.createComponent(ObjectDisplayComponent);
component = fixture.componentInstance;
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
it('#ngOnInit() should emit getSpectraCSV event if an attribute have spectra_graph renderer_detail', () => {
component.attributeList = ATTRIBUTE_LIST;
component.object = OBJECT_DETAIL;
component.getSpectraCSV.subscribe((event: string) => expect(event).toEqual('spec1d'));
component.ngOnInit();
// To prevent `Spec has no expectation' bug
expect(true).toBeTruthy();
});
it('#getSpectra() should return url to download spectra', () => {
component.datasetName = 'dname';
component.attributeList = ATTRIBUTE_LIST;
component.object = OBJECT_DETAIL;
expect(component.getSpectra()).toEqual('http://localhost:8080/download-file/dname/spec1d');
});
it('#getCategoryByFamilySortedByDisplay() should return sorted categories for the given family', () => {
component.categoryList = CATEGORY_LIST;
expect(component.getCategoryByFamilySortedByDisplay(1).length).toEqual(2);
});
it('#getAttributesVisibleByCategory() should return visible attributes for the given category', () => {
component.attributeList = ATTRIBUTE_LIST;
expect(component.getAttributesVisibleByCategory(1).length).toEqual(1);
expect(component.getAttributesVisibleByCategory(1)[0].id).toEqual(1);
});
it('#getAttributesVisible() should return visible attributes', () => {
component.attributeList = ATTRIBUTE_LIST;
expect(component.getAttributesVisible().length).toEqual(2);
});
it('#getAttributeBySearchFlag() should return attribute for the given search_flag', () => {
component.attributeList = ATTRIBUTE_LIST;
expect(component.getAttributeBySearchFlag('ID').name).toEqual('name_one');
});
it('#getAttributeSpectraGraph() should return attribute for the spectra_graph renderer_detail', () => {
component.attributeList = ATTRIBUTE_LIST;
expect(component.getAttributeSpectraGraph().name).toEqual('name_two');
});
it('#getZ() should return Z value', () => {
component.attributeList = ATTRIBUTE_LIST;
component.object = OBJECT_DETAIL;
expect(component.getZ()).toEqual(0);
const attributeZ: Attribute = {
id: 3,
name: 'name_three',
table_name: 'table_2',
label: 'label_three',
form_label: 'form_label_three',
description: 'description_three',
output_display: 1,
criteria_display: 1,
search_flag: 'Z',
search_type: 'field',
operator: '=',
type: '',
min: null,
max: null,
placeholder_min: '',
placeholder_max: '',
renderer: '',
renderer_config: null,
display_detail: 1,
selected: true,
order_by: true,
order_display: 1,
detail: true,
renderer_detail: '',
options: null,
vo_utype: '',
vo_ucd: '',
vo_unit: '',
vo_description: '',
vo_datatype: '',
vo_size: 1,
id_criteria_family: 2,
id_output_category: 2
};
component.attributeList = [...ATTRIBUTE_LIST, attributeZ];
expect(component.getZ()).toEqual(4);
});
});
// import { ComponentFixture, TestBed } from '@angular/core/testing';
//
// import { AccordionModule } from 'ngx-bootstrap/accordion';
//
// import { ObjectDisplayComponent } from './spectra-object.component';
// import { Attribute } from '../../../metamodel/model';
// import { ATTRIBUTE_LIST, CATEGORY_LIST, OBJECT_DETAIL } from '../../../../settings/test-data';
//
// describe('[Detail] Component: ObjectDisplayComponent', () => {
// let component: ObjectDisplayComponent;
// let fixture: ComponentFixture<ObjectDisplayComponent>;
//
// beforeEach(() => {
// TestBed.configureTestingModule({
// declarations: [ObjectDisplayComponent],
// imports: [AccordionModule.forRoot()]
// });
// fixture = TestBed.createComponent(ObjectDisplayComponent);
// component = fixture.componentInstance;
// });
//
// it('should create the component', () => {
// expect(component).toBeTruthy();
// });
//
// it('#ngOnInit() should emit getSpectraCSV event if an attribute have spectra_graph renderer_detail', () => {
// component.attributeList = ATTRIBUTE_LIST;
// component.object = OBJECT_DETAIL;
// component.getSpectraCSV.subscribe((event: string) => expect(event).toEqual('spec1d'));
// component.ngOnInit();
// // To prevent `Spec has no expectation' bug
// expect(true).toBeTruthy();
// });
//
// it('#getSpectra() should return url to download spectra', () => {
// component.datasetName = 'dname';
// component.attributeList = ATTRIBUTE_LIST;
// component.object = OBJECT_DETAIL;
// expect(component.getSpectra()).toEqual('http://localhost:8080/download-file/dname/spec1d');
// });
//
// it('#getCategoryByFamilySortedByDisplay() should return sorted categories for the given family', () => {
// component.categoryList = CATEGORY_LIST;
// expect(component.getCategoryByFamilySortedByDisplay(1).length).toEqual(2);
// });
//
// it('#getAttributesVisibleByCategory() should return visible attributes for the given category', () => {
// component.attributeList = ATTRIBUTE_LIST;
// expect(component.getAttributesVisibleByCategory(1).length).toEqual(1);
// expect(component.getAttributesVisibleByCategory(1)[0].id).toEqual(1);
// });
//
// it('#getAttributesVisible() should return visible attributes', () => {
// component.attributeList = ATTRIBUTE_LIST;
// expect(component.getAttributesVisible().length).toEqual(2);
// });
//
// it('#getAttributeBySearchFlag() should return attribute for the given search_flag', () => {
// component.attributeList = ATTRIBUTE_LIST;
// expect(component.getAttributeBySearchFlag('ID').name).toEqual('name_one');
// });
//
// it('#getAttributeSpectraGraph() should return attribute for the spectra_graph renderer_detail', () => {
// component.attributeList = ATTRIBUTE_LIST;
// expect(component.getAttributeSpectraGraph().name).toEqual('name_two');
// });
//
// it('#getZ() should return Z value', () => {
// component.attributeList = ATTRIBUTE_LIST;
// component.object = OBJECT_DETAIL;
// expect(component.getZ()).toEqual(0);
// const attributeZ: Attribute = {
// id: 3,
// name: 'name_three',
// table_name: 'table_2',
// label: 'label_three',
// form_label: 'form_label_three',
// description: 'description_three',
// output_display: 1,
// criteria_display: 1,
// search_flag: 'Z',
// search_type: 'field',
// operator: '=',
// type: '',
// min: null,
// max: null,
// placeholder_min: '',
// placeholder_max: '',
// renderer: '',
// renderer_config: null,
// display_detail: 1,
// selected: true,
// order_by: true,
// order_display: 1,
// detail: true,
// renderer_detail: '',
// options: null,
// vo_utype: '',
// vo_ucd: '',
// vo_unit: '',
// vo_description: '',
// vo_datatype: '',
// vo_size: 1,
// id_criteria_family: 2,
// id_output_category: 2
// };
// component.attributeList = [...ATTRIBUTE_LIST, attributeZ];
// expect(component.getZ()).toEqual(4);
// });
// });
......@@ -6,6 +6,7 @@ import { getHost } from '../../../shared/utils';
@Component({
selector: 'app-spectra-object',
templateUrl: 'spectra-object.component.html',
styleUrls: ['spectra-object.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpectraObjectComponent implements OnInit {
......@@ -27,38 +28,22 @@ export class SpectraObjectComponent implements OnInit {
}
getSpectra(): string {
return getHost() + '/download-file/' + this.datasetName + '/' + this.object[this.getAttributeBySearchFlag('SPECTRUM_1D').label];
}
getCategoryByFamilySortedByDisplay(idFamily: number): Category[] {
return this.categoryList
.filter(category => category.id_output_family === idFamily)
.sort((a, b) => a.display - b.display);
}
getAttributesVisibleByCategory(idCategory: number): Attribute[] {
return this.attributeList
const spectraAttribute: Attribute = this.attributeList
.filter(a => a.detail)
.filter(a => a.id_output_category === idCategory)
.sort((a, b) => a.display_detail - b.display_detail);
.find(attribute => attribute.search_flag === 'SPECTRUM_1D');
return getHost() + '/download-file/' + this.datasetName + '/' + this.object[spectraAttribute.label];
}
getAttributesVisible(): Attribute[] {
getAttributeSpectraGraph(): Attribute {
return this.attributeList
.filter(a => a.detail)
.sort((a, b) => a.display_detail - b.display_detail);
}
getAttributeBySearchFlag(searchFlag: string): Attribute {
return this.getAttributesVisible().find(attribute => attribute.search_flag === searchFlag);
}
getAttributeSpectraGraph(): Attribute {
return this.getAttributesVisible().find(attribute => attribute.renderer_detail === 'spectra_graph');
.find(attribute => attribute.renderer_detail === 'spectra_graph');
}
getZ(): number {
const attributeZ = this.getAttributeBySearchFlag('Z');
const attributeZ = this.attributeList
.filter(a => a.detail)
.find(attribute => attribute.search_flag === 'Z');
if (attributeZ) {
return +this.object[attributeZ.label];
} else {
......
......@@ -22,12 +22,12 @@
[spectraCSV]="spectraCSV | async"
(getSpectraCSV)="getSpectraCSV($event)">
</app-spectra-object>
<!-- <app-object-data *ngSwitchDefault-->
<!-- [datasetName]="datasetName | async"-->
<!-- [outputFamilyList]="outputFamilyList | async"-->
<!-- [categoryList]="categoryList | async"-->
<!-- [attributeList]="attributeList | async"-->
<!-- [object]="object | async">-->
<!-- </app-object-data>-->
<app-default-object *ngSwitchDefault
[datasetName]="datasetName | async"
[outputFamilyList]="outputFamilyList | async"
[categoryList]="categoryList | async"
[attributeList]="attributeList | async"
[object]="object | async">
</app-default-object>
</div>
</div>