Merge pull request evt-project#98 from evt-project/feature/nav-from-e…

…ntity-to-occurrence

Feature/nav from entity to occurrence

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>

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;
 }

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,
   ) {

src/app/components/named-entity/named-entity-occurrence/named-entity-occurrence.component.html

@@ -1,4 +1,4 @@
-<span class="ne-occurrence" *ngFor="let refByDoc of occurrence.refsByDoc">
+<span class="ne-occurrence" *ngFor="let refByDoc of occurrence.refsByDoc" (click)="goToOccurrenceRef(refByDoc)">
     {{ occurrence.pageLabel }} {{ refByDoc.docLabel ? '(' + refByDoc.docLabel + ')' : '' }}
     <span class="badge badge-info badge-light ne-occurrence-count"
         #popover="ngbPopover" 

src/app/components/named-entity/named-entity-occurrence/named-entity-occurrence.component.ts

@@ -1,5 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { NamedEntityOccurrence } from '../../../models/evt-models';
+import { take } from 'rxjs/operators';
+
+import { NamedEntityOccurrence, NamedEntityOccurrenceRef } from '../../../models/evt-models';
+import { EVTModelService } from '../../../services/evt-model.service';
+import { EVTStatusService } from '../../../services/evt-status.service';
 
 @Component({
   selector: 'evt-named-entity-occurrence',
@@ -8,4 +12,20 @@ import { NamedEntityOccurrence } from '../../../models/evt-models';
 })
 export class NamedEntityOccurrenceComponent {
   @Input() occurrence: NamedEntityOccurrence;
+  @Input() entityId: string;
+
+  constructor(
+    private evtModelService: EVTModelService,
+    private evtStatusService: EVTStatusService,
+  ) {
+  }
+
+  goToOccurrenceRef(ref: NamedEntityOccurrenceRef) {
+    this.evtModelService.pages$.pipe(take(1)).subscribe(pages => {
+      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);
+    });
+  }
 }

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>

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) {