feat: sync changes from v2 to v2-develop (#156) [skip ci]

Co-authored-by: mguellsegarra <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/ooui",
-  "version": "2.23.0-rc.1",
+  "version": "2.24.0",
   "engines": {
     "node": "20.5.0"
   },

src/Field.ts

@@ -1,5 +1,6 @@
 import Widget from "./Widget";
 import { replaceEntities, isTrue } from "./helpers/attributeParser";
+import { parseBoolAttribute } from "./helpers/nodeParser";
 
 class Field extends Widget {
   /**
@@ -105,6 +106,14 @@ class Field extends Widget {
     this._sum = value;
   }
 
+  get suffix(): string {
+    return this._parsedWidgetProps.suffix || "";
+  }
+
+  get prefix(): string {
+    return this._parsedWidgetProps.prefix || "";
+  }
+
   /**
    * Values and keys
    */
@@ -117,6 +126,27 @@ class Field extends Widget {
     this._selectionValues = value;
   }
 
+  _autoRefresh?: boolean = false;
+  get autoRefresh(): boolean {
+    return this._autoRefresh ?? false;
+  }
+
+  set autoRefresh(value: boolean) {
+    this._autoRefresh = value;
+  }
+
+  get readOnly(): boolean | undefined {
+    if (this.autoRefresh) {
+      return true;
+    } else {
+      return super.readOnly;
+    }
+  }
+
+  set readOnly(value: boolean | undefined) {
+    super.readOnly = value;
+  }
+
   constructor(props: any) {
     super(props);
 
@@ -168,6 +198,9 @@ class Field extends Widget {
       if (props.help_inline) {
         this.tooltipInline = isTrue(props.help_inline);
       }
+      if (props.autorefresh) {
+        this.autoRefresh = parseBoolAttribute(props.autorefresh);
+      }
     }
   }
 

src/Form.ts

@@ -3,7 +3,11 @@ import Container from "./Container";
 import ContainerWidget from "./ContainerWidget";
 import Widget from "./Widget";
 import { ParsedNode } from "./helpers/nodeParser";
-import { evaluateAttributes, replaceEntities } from "./helpers/attributeParser";
+import {
+  evaluateAttributes,
+  replaceEntities,
+  parseWidgetProps,
+} from "./helpers/attributeParser";
 import { evaluateStates, evaluateButtonStates } from "./helpers/stateParser";
 import { parseContext } from "./helpers/contextParser";
 import { parseOnChange } from "./helpers/onChangeParser";
@@ -120,6 +124,14 @@ class Form {
     this._invisibleFields = value;
   }
 
+  /**
+   * List of autorefreshable fields
+   */
+  _autorefreshableFields: string[] = [];
+  get autorefreshableFields(): string[] {
+    return this._autorefreshableFields;
+  }
+
   /**
    * Context for each field in the form
    */
@@ -166,6 +178,11 @@ class Form {
         this._contextForFields[unknownWidget._id] = widget._context;
       }
     });
+
+    // Also we store all the autorefreshables fields in a list
+    this._autorefreshableFields = allWidgets
+      .filter((widget) => widget instanceof Field && widget.autoRefresh)
+      .map((field) => (field as Field)._id);
   }
 
   parseNode({
@@ -195,6 +212,11 @@ class Form {
               );
             }
             widgetType = this._fields[name].type;
+            // Merge _fields[widget_props] with attributes[widget_props]
+            attributes.widget_props = {
+              ...parseWidgetProps(attributes.widget_props),
+              ...(this._fields[name].widget_props || {}),
+            };
           }
           tagAttributes = {
             ...this._fields[name],

src/Tree.ts

@@ -1,7 +1,7 @@
 import WidgetFactory from "./WidgetFactory";
 import Widget from "./Widget";
 import { replaceEntities } from "./helpers/attributeParser";
-import { ParsedNode } from "./helpers/nodeParser";
+import { parseBoolAttribute, ParsedNode } from "./helpers/nodeParser";
 import * as txml from "txml";
 import { parseContext } from "./helpers/contextParser";
 
@@ -67,6 +67,14 @@ class Tree {
     this._contextForFields = value;
   }
 
+  /**
+   * List of autorefreshable fields
+   */
+  _autorefreshableFields: string[] = [];
+  get autorefreshableFields(): string[] {
+    return this._autorefreshableFields;
+  }
+
   /**
    * Is infinite
    */
@@ -145,6 +153,10 @@ class Tree {
           const widget = widgetFactory.createWidget(widgetType, mergedAttrs);
           this._columns.push(widget);
         }
+
+        if (parseBoolAttribute(mergedAttrs.autorefresh)) {
+          this._autorefreshableFields.push(name);
+        }
       }
     });
   }

src/Widget.ts

@@ -1,4 +1,5 @@
-import { replaceEntities } from "./helpers/attributeParser";
+import { replaceEntities, parseWidgetProps } from "./helpers/attributeParser";
+import { parseBoolAttribute } from "./helpers/nodeParser";
 
 abstract class Widget {
   /**
@@ -132,19 +133,7 @@ abstract class Widget {
         this._colspan = +props.colspan;
       }
       if (props.readonly !== undefined) {
-        if (
-          props.readonly === "1" ||
-          props.readonly === 1 ||
-          props.readonly === true
-        ) {
-          this._readOnly = true;
-        } else if (
-          props.readonly === "0" ||
-          props.readonly === 0 ||
-          props.readonly === false
-        ) {
-          this._readOnly = false;
-        }
+        this._readOnly = parseBoolAttribute(props.readonly);
       }
       if (props.invisible) {
         if (
@@ -172,17 +161,7 @@ abstract class Widget {
         this._fieldType = props.fieldsWidgetType;
       }
       if (props.widget_props) {
-        if (typeof props.widget_props === "string") {
-          try {
-            this._parsedWidgetProps = JSON.parse(
-              props.widget_props.replace(/'/g, '"'),
-            );
-          } catch (err) {
-            console.error("Error parsing widget_props");
-          }
-        } else {
-          this._parsedWidgetProps = props.widget_props;
-        }
+        this._parsedWidgetProps = parseWidgetProps(props.widget_props);
       }
       if (props.key) {
         this._key = props.key;

src/helpers/attributeParser.ts

@@ -184,6 +184,22 @@ const parseAttributes = ({
   return newAttributes;
 };
 
+export const parseWidgetProps = (widget_props: string | object): object => {
+  if (widget_props === undefined) {
+    return {};
+  }
+  if (typeof widget_props === "string") {
+    try {
+      return JSON.parse(widget_props.replace(/'/g, '"'));
+    } catch (err) {
+      console.error("Error parsing widget_props");
+      return {};
+    }
+  } else {
+    return widget_props;
+  }
+};
+
 export const parseJsonAttributes = ({
   attrs,
   values,

src/helpers/nodeParser.ts

@@ -5,7 +5,13 @@ type ParsedNode = {
 };
 
 const parseBoolAttribute = (attr: any): boolean => {
-  if (attr === 1 || attr === "1" || attr === true || attr === "True") {
+  if (
+    attr === 1 ||
+    attr === "1" ||
+    attr === true ||
+    attr === "True" ||
+    attr === "true"
+  ) {
     return true;
   } else {
     return false;

src/spec/Field.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import Field from "../Field";
+
+describe("Field", () => {
+  describe("with the autoRefresh property", () => {
+    it("should be false as default", () => {
+      const props = {};
+      const field = new Field(props);
+      expect(field.autoRefresh).toBe(false);
+    });
+    it("should work with text", () => {
+      const props = {
+        autorefresh: "1",
+      };
+      const field = new Field(props);
+      expect(field.autoRefresh).toBe(true);
+    });
+    describe("if autorefresh is not a valid boold", () => {
+      it("should return false", () => {
+        const props = {
+          autorefresh: "abc",
+        };
+        const field = new Field(props);
+        expect(field.autoRefresh).toBe(false);
+      });
+    });
+    it("should return true for readOnly if autoRefresh is set", () => {
+      const props = {
+        autorefresh: true,
+      };
+      const field = new Field(props);
+      expect(field.readOnly).toBe(true);
+    });
+  });
+});

src/spec/Form.spec.ts

@@ -6015,4 +6015,84 @@ describe("A Form", () => {
     expect(field_char?.type).toBe("arrow_steps");
     expect(field_char?.id).toBe("field_char");
   });
+  it("a field with autorefresh evaluated in attrs should be present in form autorefreshable fields property", () => {
+    const fields = {
+      field_char: {
+        string: "Etapa",
+        type: "char",
+      },
+      state: {
+        readonly: true,
+        required: true,
+        selection: [
+          ["esborrany", "Borrador"],
+          ["validar", "Validar"],
+          ["pendent", "Pendiente"],
+          ["activa", "Activa"],
+          ["cancelada", "Cancelada"],
+          ["contracte", "Activación Contrato"],
+          ["novapolissa", "Creación nuevo contrato"],
+          ["modcontractual", "Modificación Contractual"],
+          ["impagament", "Impago"],
+          ["tall", "Corte"],
+          ["running", "En ejecución"],
+          ["baixa", "Baja"],
+          ["facturacio", "Facturación"],
+        ],
+        string: "Estado",
+        type: "selection",
+        views: {},
+      },
+    };
+
+    const xmlViewForm = `<?xml version="1.0"?>
+    <form string="Form1">
+    	<field name="field_char" widget="arrow_steps" colspan="4" nolabel="1" attrs="{'autorefresh':[('state', '=', 'running')]}" />
+    </form>`;
+
+    const form = new Form(fields);
+    form.parse(xmlViewForm, {
+      values: {
+        field_char: "test",
+        state: "running",
+      },
+    });
+
+    const field_char = form.findById("field_char") as Field;
+    expect(field_char).toBeDefined();
+    expect(field_char?.autoRefresh).toBeTruthy();
+    expect(field_char?.readOnly).toBeTruthy();
+    expect(form.autorefreshableFields.length).toBe(1);
+    expect(form.autorefreshableFields[0]).toBe("field_char");
+  });
+  describe("If the field has widget_props", () => {
+    it("should merge widget_props from fields definition and xml", () => {
+      const fields = {
+        field_integer: {
+          readonly: 1,
+          string: "Power",
+          type: "integer",
+          widget_props: {
+            suffix: "kW",
+          },
+        },
+      };
+
+      const xmlViewForm = `<?xml version="1.0"?>
+    <form string="Form1">
+    	<field name="field_integer" widget_props="{'prefix': 'Wow'}" />
+    </form>`;
+
+      const form = new Form(fields);
+      form.parse(xmlViewForm, {
+        values: {
+          field_integer: 10,
+        },
+      });
+      const field = form.findById("field_integer") as Field;
+      expect(field).toBeDefined();
+      expect(field.suffix).toBe("kW");
+      expect(field.prefix).toBe("Wow");
+    });
+  });
 });

src/spec/Tree.spec.ts

@@ -377,4 +377,23 @@ describe("A Tree", () => {
     const nameWidget = tree.findById("name") as Char;
     expect(nameWidget.isFunction).toBeTruthy();
   });
+  it("Should parse autorefreshable fields", () => {
+    const tree = new Tree({
+      name: {
+        required: true,
+        select: true,
+        size: 128,
+        string: "Potència contractada (kW)",
+        type: "char",
+        views: {},
+      },
+    });
+    tree.parse(
+      `<tree string="Partners" colors="red:type=='updated'"><field name="name" sum="Pot&#232;ncia contractada (kW)" autorefresh="1"/></tree>`,
+    );
+
+    const nameWidget = tree.findById("name") as Char;
+    expect(nameWidget.autoRefresh).toBeTruthy();
+    expect(tree._autorefreshableFields.length).toBe(1);
+  });
 });