#88 => done

client/src/app/admin/instance/dataset/components/output-category/output-category-list.component.html

@@ -7,6 +7,7 @@
     <table class="table table-striped" aria-describedby="Output category list">
         <thead>
             <tr>
+                <th scope="col">Id</th>
                 <th scope="col">Label</th>
                 <th scope="col">Display</th>
                 <th scope="col">Output family</th>
@@ -15,6 +16,7 @@
         </thead>
         <tbody>
             <tr *ngFor="let outputCategory of outputCategoryList">
+                <td class="align-middle">{{ outputCategory.id }}</td>
                 <td class="align-middle">{{ outputCategory.label }}</td>
                 <td class="align-middle">{{ outputCategory.display }}</td>
                 <td class="align-middle">{{ (outputFamilyList | outputFamilyById:outputCategory.id_output_family).label }}</td>

client/src/app/admin/instance/dataset/components/output-family/output-family-list.component.html

@@ -4,6 +4,7 @@
     <table class="table table-striped" aria-describedby="Output family list">
         <thead>
             <tr>
+                <th scope="col">Id</th>
                 <th scope="col">Label</th>
                 <th scope="col">Display</th>
                 <th scope="col">Actions</th>
@@ -11,6 +12,7 @@
         </thead>
         <tbody>
             <tr *ngFor="let outputFamily of outputFamilyList">
+                <td class="align-middle">{{ outputFamily.id }}</td>
                 <td class="align-middle">{{ outputFamily.label }}</td>
                 <td class="align-middle">{{ outputFamily.display }}</td>
                 <td class="align-middle">

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object-by-output-category.component.html

+<!-- Accordion categories -->
+<accordion [isAnimated]="true">
+    <accordion-group #ag [isOpen]="true">
+        <button class="btn btn-link btn-block clearfix pb-2" accordion-heading>
+            <span class="pull-left float-left text-primary">
+                {{ getCategory().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 getAttributeListByOutputCategory(getCategory().id)" class="row pb-2">
+            <div class="col-5 font-weight-bold">{{ attribute.form_label }}</div>
+            <div class="col">
+                <app-display-detail-renderer
+                    [rendererType]="'detail'"
+                    [value]="object[attribute.label]"
+                    [dataset]="dataset"
+                    [instance]="instance"
+                    [attribute]="attribute"
+                    [queryParams]="queryParams"
+                    (downloadFile)="downloadFile($event)">
+                </app-display-detail-renderer>
+            </div>
+        </div>
+    </accordion-group>
+</accordion>

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object-by-output-category.component.ts

+import { Component, Input } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { Attribute, Dataset, Instance, OutputCategory, OutputFamily } from 'src/app/metamodel/models';
+import { SearchQueryParams } from 'src/app/instance/store/models';
+import * as searchActions from 'src/app/instance/store/actions/search.actions';
+
+@Component({
+    selector: 'app-display-object-by-output-category',
+    templateUrl: 'display-object-by-output-category.component.html'
+})
+export class DisplayObjectByOutputCategoryComponent {
+    @Input() object: any;
+    @Input() dataset: Dataset;
+    @Input() instance: Instance;
+    @Input() attributeList: Attribute[];
+    @Input() outputCategoryList: OutputCategory[];
+    @Input() queryParams: SearchQueryParams;
+    @Input() outputCategoryId: number;
+
+    constructor(protected store: Store<{}>) { }
+
+    getCategory() {
+        return this.outputCategoryList.find(outputCategory => outputCategory.id === this.outputCategoryId);
+    }
+
+    getAttributeListByOutputCategory(idOutputCategory: number): Attribute[] {
+        return this.attributeList.filter(attribute => attribute.id_detail_output_category === idOutputCategory);
+    }
+
+    /**
+     * Dispatches action to launch the file download
+     * 
+     * @param { url: string, filename: string } download
+     */
+    downloadFile(download: { url: string, filename: string }): void {
+        this.store.dispatch(searchActions.downloadFile(download));
+    }
+}

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object-by-output-family.component.html

+<!-- Accordion families -->
+<accordion [isAnimated]="true">
+    <accordion-group #ag [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">
+                {{ getFamily().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 getOutputCategoryListByFamily(getFamily().id)" #ag [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 getAttributeListByOutputCategory(category.id)" class="row pb-2">
+                    <div class="col-5 font-weight-bold">{{ attribute.form_label }}</div>
+                    <div class="col">
+                        <app-display-detail-renderer
+                            [rendererType]="'detail'"
+                            [value]="object[attribute.label]"
+                            [dataset]="dataset"
+                            [instance]="instance"
+                            [attribute]="attribute"
+                            [queryParams]="queryParams"
+                            (downloadFile)="downloadFile($event)">
+                        </app-display-detail-renderer>
+                    </div>
+                </div>
+            </accordion-group>
+        </accordion>
+    </accordion-group>
+</accordion>

client/src/app/instance/search/detail/dynamic-content/dynamic-components/display-object-by-output-family.component.ts

+import { Component, Input } from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+import { Attribute, Dataset, Instance, OutputCategory, OutputFamily } from 'src/app/metamodel/models';
+import { SearchQueryParams } from 'src/app/instance/store/models';
+import * as searchActions from 'src/app/instance/store/actions/search.actions';
+
+@Component({
+    selector: 'app-display-object-by-output-family',
+    templateUrl: 'display-object-by-output-family.component.html'
+})
+export class DisplayObjectByOutputFamilyComponent {
+    @Input() object: any;
+    @Input() dataset: Dataset;
+    @Input() instance: Instance;
+    @Input() attributeList: Attribute[];
+    @Input() outputFamilyList: OutputFamily[];
+    @Input() outputCategoryList: OutputCategory[];
+    @Input() queryParams: SearchQueryParams;
+    @Input() outputFamilyId: number;
+
+    constructor(protected store: Store<{}>) { }
+
+    getFamily() {
+        return this.outputFamilyList.find(outputFamily => outputFamily.id === this.outputFamilyId);
+    }
+
+    getOutputCategoryListByFamily(idOutputFamily: number): OutputCategory[] {
+        return this.outputCategoryList
+            .filter(outputCategory => outputCategory.id_output_family === idOutputFamily)
+            .filter(outputCategory => this.getAttributeListByOutputCategory(outputCategory.id).length > 0);
+    }
+
+    getAttributeListByOutputCategory(idOutputCategory: number): Attribute[] {
+        return this.attributeList.filter(attribute => attribute.id_detail_output_category === idOutputCategory);
+    }
+
+    /**
+     * Dispatches action to launch the file download
+     * 
+     * @param { url: string, filename: string } download
+     */
+    downloadFile(download: { url: string, filename: string }): void {
+        this.store.dispatch(searchActions.downloadFile(download));
+    }
+}

client/src/app/instance/search/detail/dynamic-content/dynamic-components/index.ts

@@ -8,6 +8,8 @@
  */
 
 import { DisplayObjectComponent } from './display-object.component';
+import { DisplayObjectByOutputCategoryComponent } from './display-object-by-output-category.component';
+import { DisplayObjectByOutputFamilyComponent } from './display-object-by-output-family.component';
 import { DisplayValueByAttributeComponent } from './display-value-by-attribute.component';
 import { DisplayRaDecComponent } from './display-ra-dec.component';
 import { DisplaySpectraComponent } from './display-spectra.component';
@@ -16,6 +18,8 @@ import { SpectraGraphComponent } from './spectra-graph/spectra-graph.component';
 
 export const dynamicComponents = [
     DisplayObjectComponent,
+    DisplayObjectByOutputCategoryComponent,
+    DisplayObjectByOutputFamilyComponent,
     DisplayValueByAttributeComponent,
     DisplayRaDecComponent,
     DisplaySpectraComponent,