From 4413c7570bdf81d6c82b861bd2b67db04035406c Mon Sep 17 00:00:00 2001
From: George <george.balanesc@gmail.com>
Date: Fri, 19 May 2023 19:08:53 +0300
Subject: [PATCH] RED-6786, add spinner when pasting text in dictionary editor.

---
 .../dictionary-manager.component.html             |  2 ++
 .../dictionary-manager.component.ts               |  8 +++++++-
 .../components/editor/editor.component.html       |  1 +
 .../shared/components/editor/editor.component.ts  | 15 +++++++++++----
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 2d2e5c915..362a168ef 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -83,6 +83,7 @@
             [diffEditorText]="diffEditorText"
             [initialEntries]="initialEntries"
             [showDiffEditor]="compare && showDiffEditor"
+            (enableSaveButton)="onEnableSaveButton($event)"
         ></redaction-editor>
 
         <div *ngIf="compare && optionNotSelected" class="no-dictionary-selected">
@@ -96,6 +97,7 @@
             (action)="saveDictionary.emit()"
             [label]="'dictionary-overview.save-changes' | translate"
             [type]="iconButtonTypes.primary"
+            [disabled]="!(saveButtonEnabled$ | async)"
             icon="iqser:check"
         ></iqser-icon-button>
         <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index b9e754cd1..4dc5c27dd 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { Debounce, IconButtonTypes, List, LoadingService } from '@iqser/common-ui';
-import { firstValueFrom, Observable, of } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs';
 import { catchError, map, take, tap } from 'rxjs/operators';
 import { Dictionary, DICTIONARY_TYPE_KEY_MAP, DictionaryType, Dossier, DossierTemplate } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -27,6 +27,7 @@ const HELP_MODE_KEYS = {
 })
 export class DictionaryManagerComponent implements OnChanges {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly saveButtonEnabled$ = new BehaviorSubject(true);
 
     @Input() type: DictionaryType = 'dictionary';
     @Input() entityType?: string;
@@ -92,6 +93,7 @@ export class DictionaryManagerComponent implements OnChanges {
 
         this._onDossierChanged(dossier.dossierTemplateId, dossier.id)
             .pipe(take(1))
+            // eslint-disable-next-line rxjs/no-ignored-subscription
             .subscribe(entries => {
                 this.diffEditorText = entries;
                 this.showDiffEditor = true;
@@ -210,6 +212,10 @@ export class DictionaryManagerComponent implements OnChanges {
         }
     }
 
+    onEnableSaveButton(value: boolean) {
+        this.saveButtonEnabled$.next(value);
+    }
+
     private _applySearchDecorations() {
         this._searchDecorations = this.editor.codeEditor?.deltaDecorations(this._searchDecorations, []) || [];
 
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
index dc7e0038e..0a113be28 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
@@ -4,6 +4,7 @@
     *ngIf="!showDiffEditor"
     [(ngModel)]="value"
     [options]="editorOptions"
+    (paste)="onPaste()"
 ></ngx-monaco-editor>
 
 <ngx-monaco-diff-editor
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index 63da1509f..ad0c13928 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -1,6 +1,5 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Debounce, List, OnChange } from '@iqser/common-ui';
-import { UserPreferenceService } from '@users/user-preference.service';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Debounce, List, LoadingService, OnChange } from '@iqser/common-ui';
 import { EditorThemeService } from '@services/editor-theme.service';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import ICodeEditor = monaco.editor.ICodeEditor;
@@ -31,6 +30,7 @@ export class EditorComponent implements OnInit, OnChanges {
     @Input() diffEditorText: string;
     @Input() @OnChange<List, EditorComponent>('revert') initialEntries: List;
     @Input() canEdit = false;
+    @Output() enableSaveButton = new EventEmitter<boolean>();
 
     /**
      * Used as [modified] input on diff editor
@@ -43,7 +43,7 @@ export class EditorComponent implements OnInit, OnChanges {
     private _diffEditor: IDiffEditor;
     private _decorations: string[] = [];
 
-    constructor(private readonly _userPreferenceService: UserPreferenceService, private readonly _editorThemeService: EditorThemeService) {}
+    constructor(private readonly _loadingService: LoadingService, private readonly _editorThemeService: EditorThemeService) {}
 
     get currentEntries(): string[] {
         return this.value.split('\n');
@@ -97,6 +97,8 @@ export class EditorComponent implements OnInit, OnChanges {
         const newDecorations = this.currentEntries.filter(entry => this._isNew(entry)).map(entry => this._getDecoration(entry));
         this._decorations = this.codeEditor.deltaDecorations(this._decorations, newDecorations);
         this.diffValue = this.value;
+        this._loadingService.stop();
+        this.enableSaveButton.emit(true);
     }
 
     revert() {
@@ -105,6 +107,11 @@ export class EditorComponent implements OnInit, OnChanges {
         this._diffEditor?.getModifiedEditor().setValue(this.diffValue);
     }
 
+    onPaste() {
+        this._loadingService.start();
+        this.enableSaveButton.emit(false);
+    }
+
     private _defineThemes(): void {
         for (const theme of this._editorThemeService.themes) {
             (window as any).monaco.editor.defineTheme(theme, this._editorThemeService.configurations[theme]);