editor: add icon type on entity typeahead

Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Oct 10, 2023 · 7ed8e33 · 7ed8e33
1 parent 7ae8dd5
commit 7ed8e33
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/projects/admin/src/app/classes/typeahead/mef-typeahead.ts b/projects/admin/src/app/classes/typeahead/mef-typeahead.ts
@@ -20,7 +20,7 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ApiService, RecordService, SuggestionMetadata } from '@rero/ng-core';
-import { AppSettingsService } from '@rero/shared';
+import { AppSettingsService, Entity } from '@rero/shared';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { ITypeahead } from './ITypeahead-interface';
@@ -51,7 +51,7 @@ export class MefTypeahead implements ITypeahead {
     protected appSettingsService: AppSettingsService,
     private recordService: RecordService,
     private apiService: ApiService
-  ) {  }
+  ) { }
 
   /** Get name of typeahead */
   getName() {
@@ -112,8 +112,9 @@ export class MefTypeahead implements ITypeahead {
         }),
         map((data: any) => {
           const entity = {
+            label: data?.metadata?.authorized_access_point,
+            type: data?.metadata?.type,
             uri: this._get_source_uri(data?.metadata?.identifiedBy, source) || value,
-            label: data?.metadata?.authorized_access_point
           };
           const badges = [{label: source.toUpperCase()}];
           return this._buildEntityResolutionResponse(entity, badges);
@@ -137,6 +138,7 @@ export class MefTypeahead implements ITypeahead {
          map((data: any) => {
            const entity = {
              label: data.metadata.authorized_access_point,
+             type: data.metadata.type,
              uri: this._buildLocalEntityDetailViewURI(data.metadata.pid)
            };
            const badges = [];
@@ -155,8 +157,12 @@ export class MefTypeahead implements ITypeahead {
    * @param badges: badges list to append to the entity.
    * @returns the HTML representation for the entity.
    */
-  private _buildEntityResolutionResponse(entity: {label:string, uri?: string}, badges: Array<{label: string, type?: string}>): string {
-    let output = (entity?.uri)
+  private _buildEntityResolutionResponse(entity: {label:string, type: string, uri?: string}, badges: Array<{label: string, type?: string}>): string {
+    // Type of entity
+    const icon = Entity.getIcon(entity.type);
+    const title = this.translateService.instant(entity.type);
+    let output = `<i class="fa ${icon} mr-1" title="${title}"></i>`;
+    output += (entity?.uri)
       ? `<a href="${entity.uri}" target="_blank">${entity.label} <i class="fa fa-external-link"></i></a>`
       : `<span>${entity.label}</span>`;
     badges.forEach(badge => {

diff --git a/projects/shared/src/lib/class/entities.ts b/projects/shared/src/lib/class/entities.ts
@@ -33,3 +33,25 @@ export enum EntityTypeIcon {
   TOPIC = 'fa-tag',
   WORK = 'fa-book',
 }
+
+export class Entity {
+  /**
+   * Get Entity icon
+   * @param resourceType type of entity
+   * @returns the icon class name
+   */
+   static getIcon(resourceType: string): string {
+    const icons = new Map<string, string>([
+      [EntityType.ORGANISATION, EntityTypeIcon.ORGANISATION],
+      [EntityType.PERSON, EntityTypeIcon.PERSON],
+      [EntityType.TEMPORAL, EntityTypeIcon.TEMPORAL],
+      [EntityType.PLACE, EntityTypeIcon.PLACE],
+      [EntityType.TOPIC, EntityTypeIcon.TOPIC],
+      [EntityType.WORK, EntityTypeIcon.WORK]
+    ]);
+    if (!icons.has(resourceType)) {
+      return 'fa-question-circle';
+    }
+    return icons.get(resourceType);
+  }
+}
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
@@ -18,7 +18,7 @@
 
 import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
-import { EntityType, EntityTypeIcon } from '../../../class/entities';
+import { Entity, EntityType } from '../../../class/entities';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
 import { BriefViewTag } from '../../core/brief-view/brief-view.component';
 import { EntityBriefViewRemoteOrganisationComponent } from './entity-brief-view.organisation';
@@ -85,7 +85,7 @@ export class EntityBriefViewComponent implements ResultItem, OnInit, AfterViewIn
       case 'local': this._buildLocalEntityData(); break;
       default: throw new Error('Unknown entity resource type !')
     }
-    this.entityIcon = this._getEntityIcon(this.record.metadata.type);
+    this.entityIcon = Entity.getIcon(this.record.metadata.type);
   }
 
   /** AfterViewInit hook */
@@ -129,22 +129,4 @@ export class EntityBriefViewComponent implements ResultItem, OnInit, AfterViewIn
     }
     this.entityTitle = this.record.metadata.authorized_access_point;
   }
-
-  /**
-   * Get the best possible font awesome icon for an entity type
-   * @param resourceType: the entity resource type
-   * @return the icon to use.
-   */
-  private _getEntityIcon(resourceType: EntityType): string {
-    switch (resourceType) {
-      case EntityType.ORGANISATION: return EntityTypeIcon.ORGANISATION;
-      case EntityType.PERSON: return EntityTypeIcon.PERSON;
-      case EntityType.TEMPORAL: return EntityTypeIcon.TEMPORAL;
-      case EntityType.PLACE: return EntityTypeIcon.PLACE;
-      case EntityType.TOPIC: return EntityTypeIcon.TOPIC;
-      case EntityType.WORK: return EntityTypeIcon.WORK;
-      default: return 'fa-question-circle';
-    }
-  }
-
 }