From 7323ca093647c6ef84573ab7917ecb7927cab70d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20P=C3=B6mp?= <jp@poemp.net>
Date: Wed, 4 Dec 2024 16:17:50 +0100
Subject: [PATCH] fix(octra): Octra validation is invalid but no errors visible

---
 .../transcr-overview.component.html           | 115 +++++++++++-------
 .../transcr-overview.component.ts             |  53 +++++---
 .../transcription/transcription.component.ts  |  18 ++-
 apps/octra/src/assets/i18n/de.json            |   2 +
 apps/octra/src/assets/i18n/en.json            |   2 +
 5 files changed, 129 insertions(+), 61 deletions(-)

diff --git a/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.html b/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.html
index a338502d1..010f71e21 100644
--- a/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.html
+++ b/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.html
@@ -1,5 +1,6 @@
-<h4>{{ 'g.statistics' | transloco }}</h4>
+@if(annotationStoreService) {
 
+<h4>{{ 'g.statistics' | transloco }}</h4>
 <table id="statistics" class="table table-bordered">
   <thead>
     <tr>
@@ -22,20 +23,41 @@ <h4>{{ 'g.statistics' | transloco }}</h4>
     </tr>
   </tbody>
 </table>
-<p [hidden]="shownSegments.length === 0" style="text-align: center">
-  @if (validationFound) { @if (foundErrors === 0) {
-  <span class="text-success found-errors">{{
-    'g.no errors found' | transloco
-  }}</span>
-  } @if (foundErrors > 0) {
-  <span class="text-danger found-errors">{{
-    'g.errors found' | transloco : { errors: foundErrors + '' }
-  }}</span>
-  } } @if (!validationFound) {
+<div [hidden]="shownSegments.length === 0" style="text-align: center">
+  <h4 class="text-start mt-5">{{"g.validation" | transloco}}</h4>
+
+  @if (validationFound) {
+  <table class="table table-sm table-striped w-100">
+    <thead>
+      <tr>
+        <th>{{ 'g.level' | transloco }}</th>
+        <th>{{ 'g.errors' | transloco }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for(validation of validationErrors; track validation.id) {
+      <tr>
+        <td>{{ validation.level }}</td>
+        @if (validation.errors > 0) {
+        <td class="text-danger">
+          {{
+            'g.errors found' | transloco : { errors: validation.errors + '' }
+          }}
+        </td>
+        } @else {
+        <td class="text-success">
+          {{ 'g.no errors found' | transloco }}
+        </td>
+        }
+      </tr>
+      }
+    </tbody>
+  </table>
+  } @if (!validationFound) {
   <span>No validation methods found</span>
   }
-</p>
-<h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
+</div>
+<h4 [hidden]="!showTranscriptionTable" class="mt-5">{{ 'g.transcript' | transloco }}</h4>
 <div [hidden]="!showLoading">
   <div
     style="
@@ -86,11 +108,11 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
       [ngClass]="{
         'bg-success':
           segment.transcription.text !== '' &&
-          segment.transcription.text !==
-            annotationStoreService.breakMarker!.code,
+          (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
         'bg-info':
-          segment.transcription.text ===
-          annotationStoreService.breakMarker!.code,
+          (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
         'bg-danger': segment.transcription.text === '',
         'bg-highlight': playAllState.currentSegment === i
       }"
@@ -100,11 +122,11 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
         [ngClass]="{
           'bg-success':
             segment.transcription.text !== '' &&
-            segment.transcription.text !==
-              annotationStoreService.breakMarker!.code,
+            (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
           'bg-info':
-            segment.transcription.text ===
-            annotationStoreService.breakMarker!.code,
+            (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
           'bg-danger': segment.transcription.text === '',
           'bg-highlight': playAllState.currentSegment === i
         }"
@@ -125,11 +147,11 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
         [ngClass]="{
           'bg-success':
             segment.transcription.text !== '' &&
-            segment.transcription.text !==
-              annotationStoreService.breakMarker!.code,
+            (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
           'bg-info':
-            segment.transcription.text ===
-            annotationStoreService.breakMarker!.code,
+            (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
           'bg-danger': segment.transcription.text === '',
           'bg-highlight': playAllState.currentSegment === i
         }"
@@ -143,11 +165,11 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
         [ngClass]="{
           'bg-success':
             segment.transcription.text !== '' &&
-            segment.transcription.text !==
-              annotationStoreService.breakMarker!.code,
+            (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
           'bg-info':
-            segment.transcription.text ===
-            annotationStoreService.breakMarker!.code,
+            (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
           'bg-danger': segment.transcription.text === '',
           'bg-highlight': playAllState.currentSegment === i
         }"
@@ -158,7 +180,11 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
             #transcrEditor
             [settings]="editorConfig"
             [height]="60"
-            [validationEnabled]="appStorage.useMode !== 'url' && (appStorage.useMode! === 'demo' || settingsService.projectsettings?.octra?.validationEnabled)"
+            [validationEnabled]="
+              appStorage.useMode !== 'url' &&
+              (appStorage.useMode! === 'demo' ||
+                settingsService.projectsettings?.octra?.validationEnabled)
+            "
             [markers]="
               annotationStoreService.guidelines !== undefined
                 ? annotationStoreService.guidelines.markers
@@ -176,13 +202,13 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
       <td
         style="position: relative"
         [ngClass]="{
-          'bg-success':
-            segment.transcription.text !== '' &&
-            segment.transcription.text !==
-              annotationStoreService.breakMarker!.code,
-          'bg-info':
-            segment.transcription.text ===
-            annotationStoreService.breakMarker!.code,
+        'bg-success':
+          segment.transcription.text !== '' &&
+          (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
+        'bg-info':
+          (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
           'bg-danger': segment.transcription.text === '',
           'bg-highlight': playAllState.currentSegment === i
         }"
@@ -204,13 +230,13 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
       <td
         class="last-column"
         [ngClass]="{
-          'bg-success':
-            segment.transcription.text !== '' &&
-            segment.transcription.text !==
-              annotationStoreService.breakMarker!.code,
-          'bg-info':
-            segment.transcription.text ===
-            annotationStoreService.breakMarker!.code,
+        'bg-success':
+          segment.transcription.text !== '' &&
+          (!annotationStoreService?.breakMarker || segment.transcription.text !==
+              annotationStoreService.breakMarker!.code),
+        'bg-info':
+          (annotationStoreService?.breakMarker && segment.transcription.text ===
+              annotationStoreService.breakMarker!.code),
           'bg-danger': segment.transcription.text === '',
           'bg-highlight': playAllState.currentSegment === i
         }"
@@ -225,3 +251,4 @@ <h4 [hidden]="!showTranscriptionTable">{{ 'g.transcript' | transloco }}</h4>
   </tbody>
 </table>
 }
+}
diff --git a/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.ts b/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.ts
index 7b0bd2ced..78d31b25e 100644
--- a/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.ts
+++ b/apps/octra/src/app/core/component/transcr-overview/transcr-overview.component.ts
@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -32,6 +31,7 @@ import { AppStorageService } from '../../shared/service/appstorage.service';
 import { AnnotationStoreService } from '../../store/login-mode/annotation/annotation.store.service';
 import { TranscrEditorComponent, TranscrEditorConfig } from '../transcr-editor';
 import { ValidationPopoverComponent } from '../transcr-editor/validation-popover/validation-popover.component';
+import { sum } from '@octra/api-types';
 
 declare const validateAnnotation: (transcript: string, guidelines: any) => any;
 declare const tidyUpAnnotation: (transcript: string, guidelines: any) => any;
@@ -52,7 +52,7 @@ export class TranscrOverviewComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   editorConfig: TranscrEditorConfig = new TranscrEditorConfig({
-    btnPopover: false
+    btnPopover: false,
   });
 
   @ViewChild('transcrEditor', { static: false })
@@ -65,7 +65,7 @@ export class TranscrOverviewComponent implements OnInit, OnDestroy, OnChanges {
       text: string;
     };
   }[] = [];
-  public transcript = "";
+  public transcript = '';
 
   @Input() currentLevel?: OctraAnnotationAnyLevel<
     OctraAnnotationSegment<ASRContext>
@@ -149,19 +149,15 @@ export class TranscrOverviewComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   public get foundErrors(): number {
-    let found = 0;
-
-    if (this.shownSegments.length > 0) {
-      let resultStr = '';
-      for (let i = 0; i < this.shownSegments.length; i++) {
-        resultStr += this.shownSegments[i].transcription.html;
-        found += (this.shownSegments[i].transcription.html.match(/<span class='val-error'/) || []).length;
-      }
-    }
-
-    return found;
+    return sum(this.validationErrors.map(a => a.errors));
   }
 
+  validationErrors: {
+    id: number;
+    level: string;
+    errors: number;
+  }[] = [];
+
   public get validationFound() {
     return (
       typeof validateAnnotation !== 'undefined' &&
@@ -412,6 +408,7 @@ export class TranscrOverviewComponent implements OnInit, OnDestroy, OnChanges {
 
       this.shownSegments = result;
       this.showLoading = false;
+      this.validationErrors = this.readValidationErrors();
     }
   }
 
@@ -789,4 +786,32 @@ export class TranscrOverviewComponent implements OnInit, OnDestroy, OnChanges {
       this.audio.audiomanagers[0].stopPlayback().then(resolve).catch(reject);
     });
   }
+
+  private readValidationErrors() {
+    const result: {
+      id: number;
+      level: string;
+      errors: number;
+    }[] = [];
+
+    for (const validationArrayElement of this.annotationStoreService
+      .validationArray) {
+      const index = result.findIndex(
+        (a) => a.id === validationArrayElement.level
+      );
+      if (index < 0) {
+        result.push({
+          id: validationArrayElement.level,
+          level: this.annotationStoreService.transcript.levels.find(
+            (a) => a.id === validationArrayElement.level
+          )!.name,
+          errors: validationArrayElement.validation.length,
+        });
+      } else {
+        result[index].errors += validationArrayElement.validation.length;
+      }
+    }
+
+    return result;
+  }
 }
diff --git a/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts b/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts
index ee7be955e..79e7f3c83 100644
--- a/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts
+++ b/apps/octra/src/app/core/pages/intern/transcription/transcription.component.ts
@@ -667,7 +667,11 @@ export class TranscriptionComponent
                       this.appStoreService.setShortcutsEnabled(true);
                       this.modalOverview?.close();
                       this.modalVisiblities.overview = false;
-                      this.onSendNowClick();
+                      timer(1000).subscribe({
+                        next: () => {
+                          this.onSendNowClick();
+                        },
+                      });
                     },
                     'overview modal transcr send'
                   );
@@ -790,7 +794,11 @@ export class TranscriptionComponent
           this.appStoreService.setShortcutsEnabled(true);
           this.modalOverview?.close();
           this.modalVisiblities.overview = false;
-          this.onSendNowClick();
+          timer(1000).subscribe({
+            next: () => {
+              this.onSendNowClick();
+            },
+          });
         },
         'overview modal transcr send'
       );
@@ -927,7 +935,11 @@ export class TranscriptionComponent
         this.appStoreService.setShortcutsEnabled(true);
         this.modalOverview?.close();
         this.modalVisiblities.overview = false;
-        this.onSendNowClick();
+        timer(1000).subscribe({
+          next: () => {
+            this.onSendNowClick();
+          },
+        });
       },
       'overview modal transcr send'
     );
diff --git a/apps/octra/src/assets/i18n/de.json b/apps/octra/src/assets/i18n/de.json
index 848b56a17..18755d7fc 100644
--- a/apps/octra/src/assets/i18n/de.json
+++ b/apps/octra/src/assets/i18n/de.json
@@ -110,6 +110,8 @@
     "very good intelligible": "sehr gut verständlich"
   },
   "g": {
+    "errors": "Fehler",
+    "level": "Ebene",
     "File extension": "Dateiendung",
     "Format": "Format",
     "Language": "Sprache",
diff --git a/apps/octra/src/assets/i18n/en.json b/apps/octra/src/assets/i18n/en.json
index c8044ddad..23ff396ac 100644
--- a/apps/octra/src/assets/i18n/en.json
+++ b/apps/octra/src/assets/i18n/en.json
@@ -110,6 +110,8 @@
     "very good intelligible": "very good intelligibility"
   },
   "g": {
+    "errors": "Errors",
+    "level": "Level",
     "File extension": "File extension",
     "Format": "Format",
     "Language": "Language",