feat: add finishReport button and event dispatch (#189)

iarahealth · Sep 23, 2024 · 61e24cb · 61e24cb
1 parent b18b02e
commit 61e24cb
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 28 deletions.
diff --git a/src/editor/index.ts b/src/editor/index.ts
@@ -1,4 +1,8 @@
-import { Config, IaraSpeechRecognition, IaraSpeechRecognitionDetail } from "../speech";
+import {
+  Config,
+  IaraSpeechRecognition,
+  IaraSpeechRecognitionDetail,
+} from "../speech";
 import { Ribbon } from "../syncfusion/toolbar/ribbon";
 import { IaraEditorInferenceFormatter } from "./formatter";
 import Locales from "./locales";
@@ -120,11 +124,12 @@ export abstract class EditorAdapter {
     return this._recognition.report.begin("", "");
   }
 
-  async finishReport(): Promise<void> {
-    if (!this.config.saveReport) return;
+  async finishReport(): Promise<string[]> {
+    if (!this.config.saveReport) return [];
     const content = await this.copyReport();
     this.clearReport();
     await this._recognition.report.finish(content[0], content[1]);
+    return content;
   }
 
   hasEmptyRequiredFields(): boolean {

diff --git a/src/syncfusion/footerBar/index.ts b/src/syncfusion/footerBar/index.ts
@@ -0,0 +1,82 @@
+import { IaraSyncfusionConfig } from "..";
+import { IaraSyncfusionLanguageManager } from "../language";
+
+export class IaraSyncfusionFooterBarManager {
+  private _finishReportButton: HTMLSpanElement =
+    document.createElement("button");
+  private _statusBarElement: HTMLElement | null =
+    document.querySelector(".e-de-status-bar");
+  private _savingReportSpan: HTMLSpanElement = document.createElement("span");
+
+  constructor(
+    private _languageManager: IaraSyncfusionLanguageManager,
+    private _config: IaraSyncfusionConfig,
+    private _onFinishReportClick: () => void
+  ) {
+    this._initSavingReportSpan();
+    if (this._config.showFinishReportButton) {
+      this._initFinishReportSpan();
+    }
+  }
+
+  private _initSavingReportSpan() {
+    this._savingReportSpan.style.width = "120px";
+    this._savingReportSpan.style.margin = "10px";
+    this._savingReportSpan.style.fontSize = "12px";
+    this._savingReportSpan.style.color = "black";
+    const spanContent =
+      this._languageManager.languages.language.iaraTranslate.saveMessage
+        .success;
+    this._savingReportSpan.innerHTML = `<span class="e-icons e-check" style="margin-right: 4px; color: #b71c1c"></span>${spanContent}`;
+
+    this._statusBarElement?.insertBefore(
+      this._savingReportSpan,
+      this._statusBarElement.firstChild
+    );
+  }
+
+  private _initFinishReportSpan() {
+    this._finishReportButton.classList.add("e-control");
+    this._finishReportButton.classList.add("e-btn");
+    this._finishReportButton.classList.add("e-lib");
+    this._finishReportButton.classList.add("e-primary");
+    this._finishReportButton.innerHTML = `Finalizar laudo`;
+    this._finishReportButton.setAttribute("type", "button");
+    this._finishReportButton.setAttribute("title", "Finalizar laudo");
+    this._finishReportButton.style.margin = "0px 10px";
+    this._finishReportButton.style.backgroundColor = "#b71c1c";
+
+    this._statusBarElement?.insertBefore(
+      this._finishReportButton,
+      this._statusBarElement.children[2]
+    );
+    this._finishReportButton.addEventListener(
+      "click",
+      this._onFinishReportClick
+    );
+  }
+
+  updateSavingReportStatus(status: "success" | "error" | "loading") {
+    let spanContent = "";
+    switch (status) {
+      case "success":
+        spanContent =
+          this._languageManager.languages.language.iaraTranslate.saveMessage
+            .success;
+        this._savingReportSpan.innerHTML = `<span class="e-icons e-check" style="margin-right: 4px; color: #b71c1c"></span>${spanContent}`;
+        break;
+      case "error":
+        spanContent =
+          this._languageManager.languages.language.iaraTranslate.saveMessage
+            .error;
+        this._savingReportSpan.innerHTML = `<span class="e-icons e-warning" style="margin-right: 4px; color: #ffb300"></span>${spanContent}`;
+        break;
+      case "loading":
+        spanContent =
+          this._languageManager.languages.language.iaraTranslate.saveMessage
+            .loading;
+        this._savingReportSpan.innerHTML = `<span class="e-icons e-refresh-2" style="margin-right: 4px"></span>${spanContent}`;
+        break;
+    }
+  }
+}
diff --git a/src/syncfusion/index.ts b/src/syncfusion/index.ts
@@ -15,6 +15,7 @@ import { EditorAdapter, IaraEditorConfig } from "../editor";
 import { IaraSpeechRecognition, IaraSpeechRecognitionDetail } from "../speech";
 import { IaraSFDT, IaraSyncfusionEditorContentManager } from "./content";
 import { IaraSyncfusionContextMenuManager } from "./contextMenu";
+import { IaraSyncfusionFooterBarManager } from "./footerBar";
 import {
   IaraInferenceBookmark,
   IaraSyncfusionInferenceBookmarksManager,
@@ -51,6 +52,7 @@ declare global {
 export interface IaraSyncfusionConfig extends IaraEditorConfig {
   replaceToolbar: boolean;
   showBookmarks: boolean;
+  showFinishReportButton: boolean;
 }
 
 export class IaraSyncfusionAdapter
@@ -68,17 +70,18 @@ export class IaraSyncfusionAdapter
   private _toolbarManager?: IaraSyncfusionToolbarManager;
   private _languageManager: IaraSyncfusionLanguageManager;
   private _inferenceBookmarksManager: IaraSyncfusionInferenceBookmarksManager;
+  private _footerBarManager: IaraSyncfusionFooterBarManager;
 
   protected _navigationFieldManager: IaraSyncfusionNavigationFieldManager;
   protected static DefaultConfig: IaraSyncfusionConfig = {
     ...EditorAdapter.DefaultConfig,
     replaceToolbar: false,
     showBookmarks: false,
+    showFinishReportButton: true,
   };
   protected _styleManager: IaraSyncfusionStyleManager;
 
   public defaultFormat: CharacterFormatProperties = {};
-  public savingReportSpan = document.createElement("span");
   public timeoutToSave: ReturnType<typeof setTimeout> | undefined;
 
   public get contentManager(): IaraSyncfusionEditorContentManager {
@@ -145,6 +148,12 @@ export class IaraSyncfusionAdapter
       this._toolbarManager.init();
     }
 
+    this._footerBarManager = new IaraSyncfusionFooterBarManager(
+      this._languageManager,
+      this.config,
+      this.finishReport.bind(this)
+    );
+
     DocumentEditor.Inject(Print);
 
     this._documentEditor.enablePrint = true;
@@ -306,7 +315,7 @@ export class IaraSyncfusionAdapter
     this._documentEditor.search.searchResults.clear();
   }
 
-  async finishReport(): Promise<void> {
+  async finishReport(): Promise<string[]> {
     this._inferenceBookmarksManager.updateBookmarks();
 
     Object.values(this._inferenceBookmarksManager.bookmarks).forEach(
@@ -342,8 +351,10 @@ export class IaraSyncfusionAdapter
       }
     );
 
-    await super.finishReport();
+    const content = await super.finishReport();
     this._inferenceBookmarksManager.clearBookmarks();
+    dispatchEvent(new CustomEvent("IaraOnFinishReport", { detail: content }));
+    return content;
   }
 
   formatSectionTitles(): void {
@@ -529,40 +540,21 @@ export class IaraSyncfusionAdapter
 
   private async _saveReport(): Promise<void> {
     if (this._documentEditor.isDocumentEmpty) return;
+    this._footerBarManager.updateSavingReportStatus("loading");
     if (!this._recognition.report["_key"]) await this._beginReport();
 
-    let spanContent = "";
     try {
       const contentDate = new Date();
       this._contentDate = contentDate;
 
       const content: string[] = await this._contentManager.getContent();
-      const element = document.querySelector(".e-de-status-bar");
-
-      if (element) {
-        this.savingReportSpan.style.width = "120px";
-        this.savingReportSpan.style.margin = "10px";
-        this.savingReportSpan.style.fontSize = "12px";
-        this.savingReportSpan.style.color = "black";
-        spanContent =
-          this._languageManager.languages.language.iaraTranslate.saveMessage
-            .loading;
-        this.savingReportSpan.innerHTML = `<span class="e-icons e-refresh-2" style="margin-right: 4px"></span>${spanContent}`;
-        element.insertBefore(this.savingReportSpan, element.firstChild);
-      }
 
       if (contentDate !== this._contentDate) return;
 
       await this._updateReport(content[0], content[1]);
-      spanContent =
-        this._languageManager.languages.language.iaraTranslate.saveMessage
-          .success;
-      this.savingReportSpan.innerHTML = `<span class="e-icons e-check" style="margin-right: 4px; color: #b71c1c"></span>${spanContent}`;
+      this._footerBarManager.updateSavingReportStatus("success");
     } catch {
-      spanContent =
-        this._languageManager.languages.language.iaraTranslate.saveMessage
-          .error;
-      this.savingReportSpan.innerHTML = `<span class="e-icons e-warning" style="margin-right: 4px; color: #ffb300"></span>${spanContent}`;
+      this._footerBarManager.updateSavingReportStatus("error");
     }
   }