Skip to content
Snippets Groups Projects
Commit dc0c6ea6 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Refactoring detail components => DONE

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