feat(admin-ui): Improve facet selector with the code (#3175)

packages/admin-ui/src/lib/core/src/data/definitions/facet-definitions.ts

@@ -18,6 +18,7 @@ export const FACET_VALUE_FRAGMENT = gql`
             createdAt
             updatedAt
             name
+            code
         }
     }
 `;

packages/admin-ui/src/lib/core/src/shared/components/facet-value-chip/facet-value-chip.component.html

@@ -2,8 +2,16 @@
     [icon]="removable ? 'times' : undefined"
     [colorFrom]="facetValue.facet.name"
     (iconClick)="remove.emit()"
-    [title]="facetValue.facet.name + ' - ' + facetValue.name"
+    [title]="formattedTitle"
 >
-    <span *ngIf="displayFacetName" class="facet-name">{{ facetValue.facet.name }}</span>
+    <span *ngIf="displayFacetName" class="facet-name">
+        {{ facetValue.facet.name }}
+    </span>
     <span>{{ facetValue.name }}</span>
+    <div class="flex">
+        <vdr-help-tooltip
+            *ngIf="facetValue.facet.code"
+            [content]="'Facet code: ' + facetValue.facet.code"
+        ></vdr-help-tooltip>
+    </div>
 </vdr-chip>

packages/admin-ui/src/lib/core/src/shared/components/facet-value-chip/facet-value-chip.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 import { FacetValueFragment } from '../../../common/generated-types';
 
@@ -8,9 +8,15 @@ import { FacetValueFragment } from '../../../common/generated-types';
     styleUrls: ['./facet-value-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FacetValueChipComponent {
+export class FacetValueChipComponent implements OnInit {
     @Input() facetValue: FacetValueFragment;
     @Input() removable = true;
     @Input() displayFacetName = true;
     @Output() remove = new EventEmitter<void>();
+    formattedTitle: string;
+
+    ngOnInit() {
+        const facetCode = this.facetValue.facet?.code ? `(${this.facetValue.facet.code}) ` : '';
+        this.formattedTitle = `${this.facetValue.facet.name} ${facetCode}- ${this.facetValue.name}`;
+    }
 }