From 59078d8868e92d5b7bfc10c6063ddb69d933e56a Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Fri, 10 Dec 2021 19:38:28 +0200
Subject: [PATCH] added annotation sorting on changes

---
 .../annotations-list.component.ts             | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index e153bd47a..437b31c31 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { HelpModeService, IqserEventTarget } from '@iqser/common-ui';
 import { File } from '@red/domain';
@@ -10,7 +10,7 @@ import { MultiSelectService } from '../../services/multi-select.service';
     styleUrls: ['./annotations-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnnotationsListComponent {
+export class AnnotationsListComponent implements OnChanges {
     @Input() file: File;
     @Input() annotations: AnnotationWrapper[];
     @Input() selectedAnnotations: AnnotationWrapper[];
@@ -24,6 +24,12 @@ export class AnnotationsListComponent {
 
     constructor(readonly multiSelectService: MultiSelectService, readonly helpModeService: HelpModeService) {}
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.annotations && this.annotations) {
+            this.annotations = this.annotations.sort(this.annotationsPositionCompare);
+        }
+    }
+
     annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
         if (($event.target as IqserEventTarget).localName === 'input') {
             return;
@@ -42,4 +48,14 @@ export class AnnotationsListComponent {
     isSelected(annotationId: string): boolean {
         return !!this.selectedAnnotations?.find(a => a?.annotationId === annotationId);
     }
+
+    annotationsPositionCompare(first: AnnotationWrapper, second: AnnotationWrapper): number {
+        if (first.y > second.y) {
+            return -1;
+        } else if (first.y < second.y) {
+            return 1;
+        } else {
+            return first.x < second.y ? -1 : 1;
+        }
+    }
 }