@gisce/ooui 0.1.0

package/src/helpers/domainParser.ts

@@ -0,0 +1,39 @@
+const transformDomainForChildWidget = ({
+  domain,
+  widgetFieldName,
+}: {
+  domain: any;
+  widgetFieldName: string;
+}) => {
+  const transformedDomain: any[] = [];
+
+  domain.forEach((domainEntry: any) => {
+    if (!Array.isArray(domainEntry)) {
+      return;
+    }
+    
+    const [fieldName, operator, value] = domainEntry;
+
+    let rootFieldName;
+    let targetFieldName;
+
+    if (fieldName.indexOf(".") !== -1) {
+      rootFieldName = fieldName.substr(0, fieldName.indexOf("."));
+      targetFieldName = fieldName.substr(
+        fieldName.indexOf(".") + 1,
+        fieldName.length - 1
+      );
+    } else {
+      rootFieldName = fieldName;
+      targetFieldName = "id";
+    }
+
+    if (rootFieldName === widgetFieldName) {
+      transformedDomain.push([targetFieldName, operator, value]);
+    }
+  });
+
+  return transformedDomain;
+};
+
+export { transformDomainForChildWidget };

package/src/helpers/fieldParser.ts

@@ -0,0 +1,27 @@
+export function getValueForField({
+  values,
+  fieldName,
+  fields,
+}: {
+  values: any;
+  fieldName: string;
+  fields: any;
+}) {
+  if (!fields) {
+    return false;
+  }
+
+  if (!fields[fieldName]) {
+    return values[fieldName] || false;
+  }
+
+  const fieldType = fields[fieldName].type;
+
+  if (fieldType === "many2one") {
+    return values[fieldName] ? values[fieldName][0] || null : false;
+  } else if (fieldType === "one2many" || fieldType === "many2many") {
+    return values[fieldName].map((item: any) => item.id);
+  } else {
+    return values[fieldName];
+  }
+}

package/src/helpers/nodeParser.ts

@@ -0,0 +1,57 @@
+type ParsedNode = {
+  tag: string;
+  tagAttributes: any;
+  child: Element;
+};
+
+const parseNodes = (
+  nodes: NodeListOf<ChildNode>,
+  fields: any
+): ParsedNode[] => {
+  const parsedNodes: ParsedNode[] = [];
+  Array.prototype.forEach.call(nodes, (child: Element) => {
+    if (child.nodeType === child.ELEMENT_NODE) {
+      let tag = child.nodeName;
+
+      let tagAttributes: any = {};
+      Array.prototype.forEach.call(child.attributes, (attr: Attr) => {
+        tagAttributes[attr.name] = attr.value;
+      });
+
+      if (tag === "field") {
+        const name = child.getAttribute("name");
+        const attrWidget = child.getAttribute("widget");
+        if (attrWidget) {
+          tag = attrWidget;
+        } else if (name) {
+          if (!fields[name]) {
+            throw new Error(`Field ${name} doesn't exist in fields defintion`);
+          }
+          tag = fields[name].type;
+        }
+
+        // We do this in order to ignore the blank domain attribute in fields and to prioritize the attributes value
+        if (
+          ((Array.isArray(fields[name!].domain) &&
+            fields[name!].domain.length === 0) ||
+            fields[name!].domain === false) &&
+          tagAttributes["domain"] &&
+          tagAttributes["domain"].length > 0
+        ) {
+          delete fields[name!].domain;
+        }
+
+        tagAttributes = {
+          ...fields[name!],
+          ...tagAttributes,
+          fieldsWidgetType: fields[name!]?.type,
+        };
+      }
+
+      parsedNodes.push({ tag, tagAttributes, child });
+    }
+  });
+  return parsedNodes;
+};
+
+export { parseNodes };

package/src/helpers/onChangeParser.ts

@@ -0,0 +1,18 @@
+const parseOnChange = (onChangeString: string) => {
+  const splitted = onChangeString
+    .replace(/\s/g, "")
+    .replace(/'/g, "")
+    .replace(")", "")
+    .split("(");
+
+  const method = splitted[0];
+  const argsGross = splitted[1];
+  const argsSplitted = argsGross.split(",");
+
+  return {
+    method,
+    args: argsSplitted
+  };
+};
+
+export { parseOnChange };

package/src/helpers/stateParser.ts

@@ -0,0 +1,62 @@
+const evaluateStates = ({
+  fieldName,
+  values,
+  fields,
+}: {
+  fieldName: string;
+  values: any;
+  fields: any;
+}) => {
+  if (!fieldName) {
+    return {};
+  }
+
+  const fieldStatesConfig = fields[fieldName]?.states;
+
+  if (!fieldStatesConfig) {
+    return {};
+  }
+
+  const newTagStateAttrs: any = {};
+  const evaluatedStates: any = {};
+
+  for (const stateCondition of Object.keys(fieldStatesConfig)) {
+    if (values["state"] === stateCondition) {
+      const configAttrValues = fieldStatesConfig[stateCondition];
+
+      for (const entryConfig of configAttrValues) {
+        const [attribute, value] = entryConfig;
+        if (!evaluatedStates[attribute]) {
+          evaluatedStates[attribute] = [];
+        }
+        evaluatedStates[attribute].push(value);
+      }
+    }
+  }
+
+  for (const evaluatedState of Object.keys(evaluatedStates)) {
+    const values = evaluatedStates[evaluatedState];
+    newTagStateAttrs[evaluatedState] = values.some((i: boolean) => i === true);
+  }
+
+  return newTagStateAttrs;
+};
+
+const evaluateButtonStates = ({
+  states,
+  values,
+}: {
+  states: string;
+  values: any;
+}) => {
+  if (!values?.state) {
+    return {};
+  }
+  const splittedStates = states.split(",");
+  if (splittedStates.length === 0) {
+    return {};
+  }
+  return !splittedStates.includes(values.state) ? { invisible: true } : {};
+};
+
+export { evaluateStates, evaluateButtonStates };

package/src/index.ts

@@ -0,0 +1,67 @@
+import Form from "./Form";
+import Tree from "./Tree";
+import Char from "./Char";
+import Container from "./Container";
+import ContainerWidget from "./ContainerWidget";
+import Selection from "./Selection";
+import Many2one from "./Many2one";
+import Field from "./Field";
+import Widget from "./Widget";
+import Boolean from "./Boolean";
+import Integer from "./Integer";
+import Float from "./Float";
+import FloatTime from "./FloatTime";
+import ProgressBar from "./ProgressBar";
+import Date from "./Date";
+import DateTime from "./DateTime";
+import Many2many from "./Many2many";
+import One2many from "./One2many";
+import SearchFilter from "./SearchFilter";
+import Text from "./Text";
+import Label from "./Label";
+import Notebook from "./Notebook";
+import Group from "./Group";
+import Page from "./Page";
+import Separator from "./Separator";
+import Button from "./Button";
+import Reference from "./Reference";
+import Binary from "./Binary";
+import Image from "./Image";
+import { parseContext } from "./helpers/contextParser";
+import { transformDomainForChildWidget } from "./helpers/domainParser";
+import Timeline from "./Timeline";
+
+export {
+  Char,
+  Selection,
+  Many2one,
+  Field,
+  Widget,
+  Form,
+  Tree,
+  Boolean,
+  One2many,
+  Integer,
+  Float,
+  FloatTime,
+  Date,
+  DateTime,
+  Many2many,
+  SearchFilter,
+  Container,
+  ContainerWidget,
+  Text,
+  ProgressBar,
+  Notebook,
+  Group,
+  Page,
+  Label,
+  Separator,
+  Button,
+  Reference,
+  Binary,
+  Image,
+  parseContext,
+  transformDomainForChildWidget,
+  Timeline,
+};

package/src/spec/Boolean.spec.ts

@@ -0,0 +1,36 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Boolean", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "boolean1",
+    };
+
+    const widget = widgetFactory.createWidget("boolean", props);
+
+    expect(widget.id).toBe("boolean1");
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "boolean1",
+      string: "Boolean caption",
+    };
+    const widget = widgetFactory.createWidget("boolean", props);
+
+    expect(widget.label).toBe("Boolean caption");
+  });
+
+  it("should properly set readonly", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "boolean1",
+      readonly: 1,
+    };
+    const widget = widgetFactory.createWidget("boolean", props);
+
+    expect(widget.readOnly).toBe(true);
+  });
+});

package/src/spec/Button.spec.ts

@@ -0,0 +1,58 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Button", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "button1",
+    };
+
+    const widget = widgetFactory.createWidget("button", props);
+
+    expect(widget.id).toBe("button1");
+  });
+
+  it("should have colspan 1 by default (with no label)", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "button1",
+    };
+    const widget = widgetFactory.createWidget("button", props);
+
+    expect(widget.colspan).toBe(1);
+  });
+
+  it("should properly set caption", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      string: "Button caption",
+    };
+    const widget = widgetFactory.createWidget("button", props);
+
+    expect(widget.caption).toBe("Button caption");
+  });
+
+  it("should properly have nolabel as true by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      string: "Button caption",
+    };
+    const widget = widgetFactory.createWidget("button", props);
+
+    expect(widget.nolabel).toBe(true);
+  });
+
+  it("should properly have nolabel value passed as props", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      string: "Button caption",
+      nolabel: false,
+    };
+    const widget = widgetFactory.createWidget("button", props);
+
+    expect(widget.nolabel).toBe(false);
+  });
+});

package/src/spec/Char.spec.ts

@@ -0,0 +1,80 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Char", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+    };
+
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.id).toBe("char1");
+  });
+
+  it("should have colspan 1 by default", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.colspan).toBe(1);
+  });
+
+  it("with label should have colspan 1 even with label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      string: "Char caption",
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.colspan).toBe(1);
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      string: "Char caption",
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.label).toBe("Char caption");
+  });
+
+  it("should properly set size", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      size: 256,
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.size).toBe(256);
+  });
+
+  it("should properly set readonly", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      readonly: 1,
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.readOnly).toBe(true);
+  });
+
+  it("should properly set tooltip", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "char1",
+      help: "This is a help field",
+    };
+    const widget = widgetFactory.createWidget("char", props);
+
+    expect(widget.tooltip).toBe("This is a help field");
+  });
+
+});

package/src/spec/Container.spec.ts

@@ -0,0 +1,47 @@
+import Container from "../Container";
+import WidgetImpl from "./fixtures/WidgetImpl";
+
+describe("A container", () => {
+  it("should have 4 columns as default", () => {
+    const cont = new Container();
+    expect(cont.columns).toEqual(4);
+    expect(cont.rows.length).toEqual(1);
+  });
+
+  it("should add widgets", () => {
+    const cont = new Container(2);
+    const w1 = new WidgetImpl({ name: "1" });
+
+    cont.addWidget(w1);
+    expect(cont.rows[0][0]).toEqual(w1);
+
+    const w2 = new WidgetImpl({ name: "2" });
+    cont.addWidget(w2);
+    expect(cont.rows[0][1]).toEqual(w2);
+
+    const w3 = new WidgetImpl({ name: "3" });
+    cont.addWidget(w3);
+    expect(cont.index).toEqual(1);
+    expect(cont.rows[1][0]).toEqual(w3);
+
+    const w4 = new WidgetImpl({ name: "4", colspan: 2 });
+    cont.addWidget(w4);
+    expect(cont.index).toEqual(2);
+    expect(cont.rows[2][0]).toEqual(w4);
+
+    const w5 = new WidgetImpl({ name: "5" });
+    cont.addWidget(w5);
+    expect(cont.index).toEqual(3);
+    expect(cont.rows[3][0]).toEqual(w5);
+  });
+
+  it("should don't count colspans of invisible widgets", () => {
+    const cont = new Container(4);
+    const w1 = new WidgetImpl({ colspan: 2 });
+    const w2 = new WidgetImpl({ colspan: 2, invisible: true });
+    cont.addWidget(w1);
+    cont.addWidget(w2);
+    expect(cont.freePosition()).toEqual(2);
+    expect(cont.rows[0].length).toEqual(2);
+  });
+});

package/src/spec/ContainerWidget.spec.ts

@@ -0,0 +1,35 @@
+import ContainerWidget from "../ContainerWidget";
+
+describe('A ContainerWidget', () => {
+    it('should be constructed with a colspan by default', () => {
+        const widget = new ContainerWidget();
+        
+        expect(widget.colspan).toBeGreaterThan(0);
+        expect(widget.colspan).toBe(ContainerWidget.defaultColspan);
+    });
+
+    it('should properly set colspan', () => {
+        const widget = new ContainerWidget();
+        widget.colspan = 3;
+
+        expect(widget.colspan).toBe(3);
+    });
+
+    it('colspan should match with internal container colspan', () => {
+        const widget = new ContainerWidget();
+        widget.colspan = 3;
+
+        expect(widget.colspan).toBe(widget.container.colspan);
+    });
+
+    /*
+    it('set colspan as string should store as a number', () => {
+        const widget = new ContainerWidget();
+
+        widget.colspan = "3";
+        
+        expect(typeof widget.colspan).toBe("number");
+        expect(widget.colspan).toBe(3);
+    });
+    */
+});

package/src/spec/Date.spec.ts

@@ -0,0 +1,36 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A Date", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "date1",
+    };
+
+    const widget = widgetFactory.createWidget("date", props);
+
+    expect(widget.id).toBe("date1");
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "date1",
+      string: "Date caption",
+    };
+    const widget = widgetFactory.createWidget("date", props);
+
+    expect(widget.label).toBe("Date caption");
+  });
+
+  it("should properly set readonly", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "date1",
+      readonly: 1,
+    };
+    const widget = widgetFactory.createWidget("date", props);
+
+    expect(widget.readOnly).toBe(true);
+  });
+});

package/src/spec/DateTime.spec.ts

@@ -0,0 +1,36 @@
+import WidgetFactory from "../WidgetFactory";
+
+describe("A DateTime", () => {
+  it("should have an id corresponding to field name", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "datetime1",
+    };
+
+    const widget = widgetFactory.createWidget("datetime", props);
+
+    expect(widget.id).toBe("datetime1");
+  });
+
+  it("should properly set label", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "datetime1",
+      string: "Datetime caption",
+    };
+    const widget = widgetFactory.createWidget("datetime", props);
+
+    expect(widget.label).toBe("Datetime caption");
+  });
+
+  it("should properly set readonly", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "datetime1",
+      readonly: 1,
+    };
+    const widget = widgetFactory.createWidget("datetime", props);
+
+    expect(widget.readOnly).toBe(true);
+  });
+});

package/src/spec/Float.spec.ts

@@ -0,0 +1,29 @@
+import WidgetFactory from "../WidgetFactory";
+import Float from "../Float";
+
+describe("A Float", () => {
+  it("should have 16,2 as integers/decimals digits", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "float",
+    };
+
+    const widget: Float = widgetFactory.createWidget("float", props);
+
+    expect(widget.integerDigits).toBe(16);
+    expect(widget.decimalDigits).toBe(2);
+  });
+
+  it("should be able to parse digits (integer/decimals dimensions)", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {
+      name: "float",
+      digits: [4,3]
+    };
+
+    const widget: Float = widgetFactory.createWidget("float", props);
+
+    expect(widget.integerDigits).toBe(4);
+    expect(widget.decimalDigits).toBe(3);
+  });
+});