feat: show validation error in the json-editor

restorecommerce · Sep 23, 2024 · db120ab · db120ab
1 parent 6ded0d2
commit db120ab
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/packages/modules/order/src/lib/components/order-edit.component.ts b/packages/modules/order/src/lib/components/order-edit.component.ts
@@ -34,7 +34,7 @@ import { transformOrderToInput } from '../utils';
           [schema]="schema"
           [update]="update"
         /> -->
-        <form class="col flex">
+        <div class="col flex">
           <rc-json-editor
             #jsonEditor
             [value]="getOrderSource(vm.order)"
@@ -43,22 +43,17 @@ import { transformOrderToInput } from '../utils';
 
           <div class="py-2 row justify-content-end">
             <div class="loose-button-group">
+              <button class="button transparent">Cancel</button>
               <button
-                vcl-button
-                class="transparent"
-              >
-                Cancel
-              </button>
-              <button
-                vcl-button
+                class="button"
                 (click)="onSave()"
                 [disabled]="jsonError"
               >
                 Save
               </button>
             </div>
           </div>
-        </form>
+        </div>
       </div>
     </ng-container>
   `,
@@ -105,7 +100,7 @@ export class OrderEditComponent {
 
   getOrderSource(order: IOrder): string {
     const orderInput = transformOrderToInput(order);
-    // console.log(order);
+    console.log('sHOW ANYTHIME WE HOVER...');
     // The above log always shows up whenever we hover on the cancel and save button.
     // Investigate this by first removing the vcl-button directive to see if this is the
     // issue.

diff --git a/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts b/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts
@@ -16,10 +16,10 @@ import 'ace-builds/src-noconflict/theme-github_light_default';
 })
 export class JSONEditorComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class') classNames = 'col w-100p';
-
   private editor!: ace.Ace.Editor;
 
   @Input() value = '';
+  jsonError = '';
 
   constructor(private elRef: ElementRef) {}
 
@@ -36,8 +36,26 @@ export class JSONEditorComponent implements AfterViewInit, OnDestroy {
       value: this.value,
     });
 
+    const innerTextArea = containerElement.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement;
+
     this.editor.setTheme('ace/theme/github_light_default');
     this.editor.session.setMode('ace/mode/json');
+    this.editor.session.on('change', () => {
+      try {
+        JSON.stringify(JSON.parse(this.getValue()));
+        this.jsonError = '';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (err: any) {
+        this.jsonError = err.message;
+      }
+
+      innerTextArea.setCustomValidity(
+        this.jsonError ? 'Invalid JSON: ' + this.jsonError : ''
+      );
+      innerTextArea.reportValidity();
+    });
   }
 
   ngOnDestroy(): void {