Add entity highlight after navigation to occurrence

babsevensix · Nov 26, 2020 · a16cc83 · a16cc83
1 parent ce2328f
commit a16cc83
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 4 deletions.
diff --git a/src/app/components/named-entity-ref/named-entity-ref.component.html b/src/app/components/named-entity-ref/named-entity-ref.component.html
@@ -1,5 +1,6 @@
 <span class="namedEntityRef {{ data.entityType }}" (click)="toggleEntityData($event)" [ngClass]="{
         opened: opened,
+        entityHighlight: (evtStatusService.currentNamedEntityId$ | async) === data.entityId && !opened,
         noDetails: (availableEntities$ | async) === false
     }" [evtHighlight]="highlightData" [evtHtmlAttributes]="data?.attributes">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>

diff --git a/src/app/components/named-entity-ref/named-entity-ref.component.scss b/src/app/components/named-entity-ref/named-entity-ref.component.scss
@@ -47,4 +47,8 @@
 }
 .not-found-msg {
   font-size: .9rem;
+}
+
+.entityHighlight {
+  background: #ffffcc !important;
 }
diff --git a/src/app/components/named-entity-ref/named-entity-ref.component.ts b/src/app/components/named-entity-ref/named-entity-ref.component.ts
@@ -5,6 +5,7 @@ import { NamedEntityRef } from '../../models/evt-models';
 import { register } from '../../services/component-register.service';
 import { EntitiesSelectService } from '../../services/entities-select.service';
 import { EVTModelService } from '../../services/evt-model.service';
+import { EVTStatusService } from '../../services/evt-status.service';
 import { EditionlevelSusceptible, Highlightable, TextFlowSusceptible } from '../components-mixins';
 
 export interface NamedEntityRefComponent extends EditionlevelSusceptible, Highlightable, TextFlowSusceptible { }
@@ -41,6 +42,7 @@ export class NamedEntityRefComponent {
   public opened = false;
 
   constructor(
+    public evtStatusService: EVTStatusService,
     private evtModelService: EVTModelService,
     private entitiesSelectService: EntitiesSelectService,
   ) {

diff --git a/src/app/components/named-entity/named-entity-occurrence/named-entity-occurrence.component.ts b/src/app/components/named-entity/named-entity-occurrence/named-entity-occurrence.component.ts
@@ -12,6 +12,7 @@ import { EVTStatusService } from '../../../services/evt-status.service';
 })
 export class NamedEntityOccurrenceComponent {
   @Input() occurrence: NamedEntityOccurrence;
+  @Input() entityId: string;
 
   constructor(
     private evtModelService: EVTModelService,
@@ -24,6 +25,7 @@ export class NamedEntityOccurrenceComponent {
       const page = pages.find(p => p.id === this.occurrence.pageId);
       this.evtStatusService.updateDocument$.next(ref.docId);
       this.evtStatusService.updatePage$.next(page);
+      this.evtStatusService.currentNamedEntityId$.next(this.entityId);
     });
   }
 }
diff --git a/src/app/components/named-entity/named-entity.component.html b/src/app/components/named-entity/named-entity.component.html
@@ -32,7 +32,7 @@
                 <ng-template ngbNavContent>
                     <div class="ne-detail-content ui-font" *ngIf="occurrences$ | async as occurrences">
                         <span *ngIf="occurrences.length === 0">{{'noOccurrences' | translate}}</span>
-                        <evt-named-entity-occurrence *ngFor="let occurrence of occurrences" [occurrence]="occurrence"></evt-named-entity-occurrence>
+                        <evt-named-entity-occurrence *ngFor="let occurrence of occurrences" [occurrence]="occurrence" [entityId]="data.id"></evt-named-entity-occurrence>
                     </div>
                 </ng-template>
             </li>

diff --git a/src/app/services/evt-status.service.ts b/src/app/services/evt-status.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, filter, first, map, shareReplay } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, merge, Observable, Subject, timer } from 'rxjs';
+import { distinctUntilChanged, filter, first, map, shareReplay, switchMap } from 'rxjs/operators';
 
 import { AppConfig, EditionLevelType } from '../app.config';
 import { Page, ViewMode } from '../models/evt-models';
@@ -56,7 +56,7 @@ export class EVTStatusService {
             this.updatePage$.pipe(map(p => p.id)),
         ),
         this.evtModelService.pages$.pipe(
-            filter((pages)=> !!pages && pages.length > 0),
+            filter((pages) => !!pages && pages.length > 0),
         ),
     ]).pipe(
         map(([id, pages]) => !id ? pages[0] : pages.find((p) => p.id === id) || pages[0]),
@@ -121,6 +121,8 @@ export class EVTStatusService {
         map(currentStatus => this.getUrlFromStatus(currentStatus)),
     );
 
+    public currentNamedEntityId$: BehaviorSubject<string> = new BehaviorSubject(undefined);
+
     constructor(
         private evtModelService: EVTModelService,
         private router: Router,
@@ -148,6 +150,10 @@ export class EVTStatusService {
                 }
             }
         });
+        this.currentNamedEntityId$.pipe(
+            filter(id => !!id),
+            switchMap(id => timer(5000).pipe(map(() => id))),
+        ).subscribe(() => this.currentNamedEntityId$.next(undefined));
     }
 
     getUrlFromStatus(status: AppStatus) {