display familly output category label on the dataset configuration

client/src/app/admin/instance/dataset/components/attribute/output/tr-output.component.html

@@ -3,20 +3,25 @@
         <input type="text" class="form-control" name="name" formControlName="name">
     </td>
     <td>
-        <select class="form-control" name="id_output_category" (change)="outputCategoryOnChange()" formControlName="id_output_category">
+        <select class="form-control" name="id_output_category" (change)="outputCategoryOnChange()"
+            formControlName="id_output_category">
             <option value=""></option>
-            <option *ngFor="let category of outputCategoryList" [ngValue]="category.id">{{category.label}}</option>
+            <option *ngFor="let category of outputCategoryList" [ngValue]="category.id">
+                {{getOutputFamilyLabel(category.id_output_family)}}/{{category.label}}
+            </option>
         </select>
     </td>
     <td>
-        <input *ngIf="form.controls.id_output_category.value" type="number" class="form-control" name="output_display" formControlName="output_display">
+        <input *ngIf="form.controls.id_output_category.value" type="number" class="form-control" name="output_display"
+            formControlName="output_display">
     </td>
     <td>
-        <input *ngIf="form.controls.id_output_category.value" type="checkbox" class="form-control" name="selected" formControlName="selected">
+        <input *ngIf="form.controls.id_output_category.value" type="checkbox" class="form-control" name="selected"
+            formControlName="selected">
     </td>
     <td class="text-center align-middle">
         <button (click)="submit()" [disabled]="form.invalid || form.pristine" class="btn btn-outline-primary">
             <span class="fas fa-save"></span>
         </button>
     </td>
-</ng-container>
+</ng-container>
\ No newline at end of file

client/src/app/admin/instance/dataset/components/attribute/output/tr-output.component.ts

@@ -10,17 +10,18 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 
-import { Attribute, OutputCategory } from 'src/app/metamodel/models';
+import { Attribute, OutputCategory, OutputFamily } from 'src/app/metamodel/models';
 
 @Component({
     selector: '[output]',
     templateUrl: 'tr-output.component.html',
-    styleUrls: [ '../tr.component.scss' ],
+    styleUrls: ['../tr.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TrOutputComponent implements OnInit {
     @Input() attribute: Attribute;
     @Input() outputCategoryList: OutputCategory[];
+    @Input() outputFamilyList: OutputFamily[];
     @Output() save: EventEmitter<Attribute> = new EventEmitter();
 
     public form = new UntypedFormGroup({
@@ -48,4 +49,8 @@ export class TrOutputComponent implements OnInit {
             ...this.form.value
         });
     }
+
+    getOutputFamilyLabel(idOutputFamilly: number): string {
+        return this.outputFamilyList.find(outputFamilly => outputFamilly.id === idOutputFamilly).label;
+    }
 }

client/src/app/admin/instance/dataset/containers/configure-dataset.component.html

@@ -120,6 +120,7 @@
                         <tr *ngFor="let attribute of (attributeList | async)"
                             output
                             [attribute]="attribute"
+                            [outputFamilyList]="outputFamilyList | async"
                             [outputCategoryList]="outputCategoryList | async"
                             (save)="editAttribute($event)">
                         </tr>