fix(invoice): update json editor when an invoice is selected

Author: belsman

packages/modules/invoice/src/lib/components/invoice-edit.component.ts

@@ -12,7 +12,6 @@ import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
 import { ROUTER } from '@console-core/config';
 import { ModeType } from '@console-core/graphql';
-import { invoiceToInputDTO } from '@console-core/mappers';
 import {
   CustomerFacade,
   IamFacade,
@@ -21,7 +20,6 @@ import {
   ShopFacade,
   filterEmptyAndNullishAndUndefined,
 } from '@console-core/state';
-import { IInvoice } from '@console-core/types';
 import { omitNullishAndUndefined } from '@console-modules/shared';
 import { JSONEditorComponent } from '@console-modules/ui';
 
@@ -35,7 +33,7 @@ import { buildInvoiceSchema } from '../jss-forms';
       <div class="col flex">
         <rc-json-editor
           #jsonEditor
-          [value]="getInvoiceSource(vm.invoice)"
+          [value]="vm.invoice | invoiceSource"
           class="flex"
         />
 
@@ -117,11 +115,6 @@ export class InvoiceEditComponent {
     private readonly iamFacade: IamFacade
   ) {}
 
-  getInvoiceSource(invoice: IInvoice): string {
-    const invoiceInput = invoiceToInputDTO(invoice);
-    return JSON.stringify(invoiceInput, null, 4);
-  }
-
   onSave() {
     this.update({
       items: [

packages/modules/invoice/src/lib/modules-invoice.module.ts

@@ -10,6 +10,7 @@ import { InvoiceViewDetailsComponent } from './components/invoice-view-details.c
 import { InvoiceViewComponent } from './components/invoice-view.component';
 import { InvoiceTemplateComponent } from './components/template/invoice-template.component';
 import { modulesInvoiceRoutes } from './lib.routes';
+import { InvoiceSourcePipe } from './pipes/invoice-sources.pipe';
 
 @NgModule({
   declarations: [
@@ -19,6 +20,7 @@ import { modulesInvoiceRoutes } from './lib.routes';
     InvoiceViewComponent,
     InvoiceViewDetailsComponent,
     InvoiceTemplateComponent,
+    InvoiceSourcePipe,
   ],
   imports: [
     ModulesUiModule.forChild(),

packages/modules/invoice/src/lib/pipes/invoice-sources.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { invoiceToInputDTO } from '@console-core/mappers';
+import { IInvoice } from '@console-core/types';
+
+@Pipe({
+  name: 'invoiceSource',
+  standalone: false,
+})
+export class InvoiceSourcePipe implements PipeTransform {
+  transform(invoice: IInvoice): string {
+    const invoiceInput = invoiceToInputDTO(invoice);
+    return JSON.stringify(invoiceInput, null, 4);
+  }
+}

packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts

@@ -4,7 +4,9 @@ import {
   ElementRef,
   HostBinding,
   Input,
+  OnChanges,
   OnDestroy,
+  SimpleChanges,
 } from '@angular/core';
 import ace from 'ace-builds';
 import 'ace-builds/src-noconflict/mode-json';
@@ -15,7 +17,9 @@ import 'ace-builds/src-noconflict/theme-github_light_default';
   templateUrl: './json-editor.component.html',
   standalone: false,
 })
-export class JSONEditorComponent implements AfterViewInit, OnDestroy {
+export class JSONEditorComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   @HostBinding('class') classNames = 'col w-100p';
   private editor!: ace.Ace.Editor;
 
@@ -45,8 +49,10 @@ export class JSONEditorComponent implements AfterViewInit, OnDestroy {
     this.editor.session.setMode('ace/mode/json');
     this.editor.session.on('change', () => {
       try {
-        JSON.stringify(JSON.parse(this.getValue()));
-        this.jsonError = '';
+        if (this.getValue()) {
+          JSON.stringify(JSON.parse(this.getValue()));
+          this.jsonError = '';
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (err: any) {
         this.jsonError = err.message;
@@ -59,6 +65,19 @@ export class JSONEditorComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['value'] && this.editor && !this.editor.isFocused()) {
+      const next = changes['value'].currentValue ?? '';
+      if (next !== this.editor.getValue()) {
+        const scrollTop = this.editor.session.getScrollTop();
+        const pos = this.editor.getCursorPosition();
+        this.editor.session.setValue(next);
+        this.editor.session.setScrollTop(scrollTop);
+        this.editor.moveCursorToPosition(pos);
+      }
+    }
+  }
+
   ngOnDestroy(): void {
     this.editor.destroy();
     this.editor.container.remove();