Displau outputs => DONE

client/src/app/instance/doc/components/index.ts

 import { DatasetByFamilyComponent } from './dataset-by-family.component';
 import { DatasetCardDocComponent } from './dataset-card-doc.component';
+import { OutputListComponent } from "./output-list.component";
 
 export const dummiesComponents = [
     DatasetByFamilyComponent,
-    DatasetCardDocComponent
+    DatasetCardDocComponent,
+    OutputListComponent
 ];

client/src/app/instance/doc/components/output-list.component.html

+<h4>Available outputs for {{ datasetSelected }}</h4>
+
+<table id="table" class="attributes-table p-0">
+    <tr>
+        <th>id</th>
+        <th>attribute</th>
+    </tr>
+    <tr *ngFor="let attribute of attributeList">
+        <td>{{ attribute.id }}</td>
+        <td>{{ attribute.name }}</td>
+    </tr>
+</table>

client/src/app/instance/doc/components/output-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, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+
+import {Survey, Dataset, Attribute} from 'src/app/metamodel/models';
+
+@Component({
+    selector: 'app-output-list',
+    templateUrl: 'output-list.component.html',
+    styleUrls: ['../doc.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+/**
+ * @class
+ * @classdesc Documentation output list component.
+ */
+export class OutputListComponent {
+    @Input() datasetSelected: string;
+    @Input() attributeList: Attribute[];
+
+    // constructor(private router: Router) { }
+    //
+    // selectDataset(datasetName: string) {
+    //     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    //     this.router.navigate([`/instance/${this.instanceSelected}/doc/${datasetName}`]);
+    // }
+}

client/src/app/instance/doc/containers/doc.component.html

@@ -28,44 +28,10 @@
                     <blockquote>c=3::eq::ping;2::eq::pong</blockquote>
                 </ul>
 
-                <h4>Available parameters</h4>
-
-<!--                <h5>Datasets</h5>-->
-<!--                <div *ngIf="datasetListIsLoading | async">-->
-<!--                    <span class="fas fa-circle-notch fa-spin fa-3x"></span>-->
-<!--                    <span class="sr-only">Loading...</span>-->
-<!--                </div>-->
-<!--                <table *ngIf="datasetListIsLoaded | async" id="table">-->
-<!--                    <tr>-->
-<!--                        <th>Dataset</th>-->
-<!--                        <th>Description</th>-->
-<!--                    </tr>-->
-<!--                    <tr *ngFor="let dataset of datasetList | async">-->
-<!--                        <td>{{ dataset.name }}</td>-->
-<!--                        <td>{{ dataset.description }}</td>-->
-<!--                    </tr>-->
-<!--                </table>-->
-
-                <!-- <h5>Outputs</h5>
-                <div *ngIf="attributeListsIsLoading | async">
-                    <span class="fas fa-circle-notch fa-spin fa-3x"></span>
-                    <span class="sr-only">Loading...</span>
-                </div>
-                <div *ngIf="attributeListsIsLoaded | async" class="row">
-                    <div *ngFor="let dataset of datasetList | async" class="col-auto mb-5">
-                        <h6>{{ dataset.label }} output list</h6>
-                            <table id="table" class="attributes-table p-0">
-                                <tr>
-                                    <th>id</th>
-                                    <th>attribute</th>
-                                </tr>
-                                <tr *ngFor="let attribute of getAttributeList(dataset.name, attributeList | async)">
-                                    <td>{{ attribute.id }}</td>
-                                    <td>{{ attribute.name }}</td>
-                                </tr>
-                            </table>
-                    </div>
-                </div> -->
+                <app-output-list
+                    [datasetSelected]="datasetSelected | async"
+                    [attributeList]="attributeList | async"
+                ></app-output-list>
 
                 <h5>Operators</h5>
                 <table id="table">