Add base JSON field (#130)

* feat(json): add json field

* json field improvements (#131)

* fix: adjustments in json field

* fix: adjust test

---------

Co-authored-by: Marc Güell Segarra <[email protected]>

src/JSONField.ts

@@ -0,0 +1,7 @@
+import CodeEditor from "./CodeEditor";
+
+class JSONField extends CodeEditor {
+  _lang = "json";
+}
+
+export default JSONField;

src/WidgetFactory.ts

@@ -38,6 +38,7 @@ import Avatar from "./Avatar";
 import Time from "./Time";
 import Alert from "./Alert";
 import Comments from "./Comments";
+import JSONField from "./JSONField";
 
 class WidgetFactory {
   /**
@@ -172,13 +173,19 @@ class WidgetFactory {
       case "comments_timeline":
         this._widgetClass = Comments;
         break;
-
+      case "json":
+        this._widgetClass = JSONField;
+        break;
+      case "arrow_steps":
+        this._widgetClass = JSONField;
+        break;
       default:
         break;
     }
   }
 
   createWidget(type: string, props: any) {
+    this._widgetClass = undefined;
     let finalType = type;
 
     this.setWidgetClass(type);

src/index.ts

@@ -50,6 +50,7 @@ import Time from "./Time";
 import HTMLPreview from "./HTMLPreview";
 import Alert from "./Alert";
 import Comments from "./Comments";
+import JSONField from "./JSONField";
 
 import {
   Graph,
@@ -136,4 +137,5 @@ export {
   YAxisOpts,
   MinMaxValues,
   Comments,
+  JSONField,
 };

src/spec/Form.spec.ts

@@ -5975,4 +5975,34 @@ describe("A Form", () => {
     const field_char = form.findById("field_char");
     expect(field_char!.domain!).toBe("[('value', '=', 'form')]");
   });
+  it("a field with no supported type should fallback to field generic widget", () => {
+    const fields = {
+      field_char: {
+        digits: [16, 2],
+        is_function: true,
+        readonly: 1,
+        string: "Etapa",
+        type: "json",
+        views: {},
+        widget: "arrow_steps",
+      },
+    };
+
+    const xmlViewForm = `<?xml version="1.0"?>
+    <form string="Form1">
+    	<field name="field_char" widget="arrow_steps" colspan="4" nolabel="1"/>
+    </form>`;
+
+    const form = new Form(fields);
+    form.parse(xmlViewForm, {
+      values: {
+        field_char: "test",
+      },
+    });
+
+    const field_char = form.findById("field_char") as Field;
+    expect(field_char).toBeDefined();
+    expect(field_char?.type).toBe("arrow_steps");
+    expect(field_char?.id).toBe("field_char");
+  });
 });

src/spec/JSONField.spec.ts

@@ -0,0 +1,22 @@
+import WidgetFactory from "../WidgetFactory";
+import JSONField from "../JSONField";
+import { it, expect, describe } from "vitest";
+
+describe("A Json field", () => {
+  it("should be created by the widget factory", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "json_field",
+    };
+    const widget = widgetFactory.createWidget("json", props);
+    expect(widget).toBeInstanceOf(JSONField);
+  });
+  it("should have lang set to json as default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "json_field",
+    };
+    const widget = widgetFactory.createWidget("json", props);
+    expect(widget.lang).toBe("json");
+  });
+});

src/spec/WidgetFactory.spec.ts

@@ -14,6 +14,7 @@ import {
   Time,
   HTMLPreview,
   Comments,
+  JSONField,
 } from "..";
 
 describe("A WidgetFactory", () => {
@@ -120,11 +121,19 @@ describe("A WidgetFactory", () => {
     expect(widget).toBeInstanceOf(HTMLPreview);
     expect(widget.type).toBe("html_preview");
   });
-  it("should be albe to Comments type", () => {
+  it("should be able to Comments type", () => {
     const widgetFactory = new WidgetFactory();
     const props = {};
     const widget = widgetFactory.createWidget("comments_timeline", props);
     expect(widget).toBeInstanceOf(Comments);
     expect(widget.type).toBe("comments_timeline");
   });
+  // Add a test for JSON field type
+  it("should be able to retrieve JSON type", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {};
+    const widget = widgetFactory.createWidget("json", props);
+    expect(widget).toBeInstanceOf(JSONField);
+    expect(widget.type).toBe("json");
+  });
 });