@gisce/ooui 0.1.0

package/src/Separator.ts

@@ -0,0 +1,30 @@
+import Widget from "./Widget";
+
+class Separator extends Widget {
+  /**
+   * Label
+   */
+  _label: string = "";
+  get label(): string {
+    return this._label;
+  }
+  set label(value: string) {
+    this._label = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+
+    if (props) {
+      if (props.string) {
+        this._label = props.string;
+      }
+    }
+  }
+
+  findById(id: string): null {
+    return null;
+  }
+}
+
+export default Separator;

package/src/Text.ts

@@ -0,0 +1,76 @@
+import Field from "./Field";
+
+/**
+ * Multiline input with no length limit.
+ */
+class Text extends Field {
+  /**
+   * Field place holder
+   */
+  _placeholder: string = "";
+  get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(value: string) {
+    this._placeholder = value;
+  }
+
+  /**
+   * Must expand widget
+   */
+  _mustExpand: boolean = false;
+  get mustExpand(): boolean {
+    return this._mustExpand;
+  }
+  set mustExpand(value: boolean) {
+    this._mustExpand = value;
+  }
+
+  /**
+   * Height
+   */
+  _height: number | undefined;
+  get height(): number | undefined {
+    return this._height;
+  }
+  set height(value: number | undefined) {
+    this._height = value;
+  }
+
+  _translatable: boolean = false;
+  get translatable(): boolean {
+    return this._translatable;
+  }
+  set translatable(value: boolean) {
+    this._translatable = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+
+    if (props) {
+      if (props.placeholder) {
+        this._placeholder = props.placeholder;
+      }
+
+      if (!props.colspan) {
+        this._mustExpand = true;
+      }
+
+      if (props.height) {
+        try {
+          this._height = parseInt(props.height);
+        } catch (e) {
+          this._height = undefined;
+        }
+      }
+
+      if (props.translate) {
+        this.translatable =
+          props.translate === "True" || props.translate === true ? true : false;
+      }
+    }
+  }
+}
+
+export default Text;

package/src/Timeline.ts

@@ -0,0 +1,44 @@
+import One2many from "./One2many";
+
+class Timeline extends One2many {
+  /**
+   * Title field
+   */
+  _titleField: string;
+  get titleField(): string {
+    return this._titleField;
+  }
+  set titleField(value: string) {
+    this._titleField = value;
+  }
+
+  /**
+   * Summary field
+   */
+  _summaryField: string;
+  get summaryField(): string {
+    return this._summaryField;
+  }
+  set summaryField(value: string) {
+    this._summaryField = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+    this._titleField = "";
+    this._summaryField = "";
+
+    if (props?.widget_props) {
+
+      try {
+        const parsedWidgetProps = JSON.parse(props.widget_props.replace(/'/g, '"'));
+        this._titleField = parsedWidgetProps.titleField;
+        this._summaryField = parsedWidgetProps.summaryField;
+      } catch(err) {
+        throw new Error(`Timeline - error parsing widget_props: ${JSON.stringify(err)}`);
+      }
+    }
+  }
+}
+
+export default Timeline;

package/src/Tree.ts

@@ -0,0 +1,93 @@
+import WidgetFactory from "./WidgetFactory";
+import Widget from "./Widget";
+import { parseNodes } from "./helpers/nodeParser";
+
+class Tree {
+  /**
+   * Object containing fields specification of the form.
+   */
+  _fields: any;
+  get fields() {
+    return this._fields;
+  }
+
+  _columns: Array<any> = [];
+  get columns(): Array<any> {
+    return this._columns;
+  }
+
+  _string: string | null = null;
+  get string(): string | null {
+    return this._string;
+  }
+
+  /**
+   * Widget type
+   */
+  _type: string = "tree";
+  get type(): string {
+    return this._type;
+  }
+
+  /**
+   * Color expression value
+   */
+  _colors: string | null = null;
+  get colors(): string | null {
+    return this._colors;
+  }
+
+  constructor(fields: Object) {
+    this._fields = fields;
+  }
+
+  parse(xml: string) {
+    const parser = new DOMParser();
+    const view: Document = parser.parseFromString(xml, "text/xml");
+    this.parseNode(view.documentElement);
+    this._string = view.documentElement.getAttribute("string");
+    this._colors = view.documentElement.getAttribute("colors");
+  }
+
+  parseNode(node: Element) {
+    const widgetFactory = new WidgetFactory();
+
+    const nodesParsed = parseNodes(node.childNodes, this._fields);
+
+    nodesParsed.forEach((nodeParsed) => {
+      const { tag, tagAttributes } = nodeParsed;
+      let invisible =
+        tagAttributes.invisible || this._fields[tagAttributes.name]?.invisible;
+
+      if (
+        invisible === 1 ||
+        invisible === "1" ||
+        invisible === true ||
+        invisible === "True"
+      ) {
+        invisible = true;
+      } else {
+        invisible = false;
+      }
+
+      if (!invisible) {
+        const widget = widgetFactory.createWidget(tag, tagAttributes);
+        this._columns.push(widget);
+      }
+    });
+  }
+
+  /**
+   * Find the widgets matching with param id
+   * @param {string} id id to find
+   */
+  findById(id: string): Widget | null {
+    return this._columns.find((item) => {
+      if (item.findById) {
+        return item.findById(id);
+      }
+    });
+  }
+}
+
+export default Tree;

package/src/Widget.ts

@@ -0,0 +1,121 @@
+abstract class Widget {
+  /**
+   * Default colspan
+   */
+  static _defaultColspan: number = 1;
+  static get defaultColspan() {
+    return Widget._defaultColspan;
+  }
+  static set defaultColspan(value) {
+    Widget._defaultColspan = value;
+  }
+
+  /**
+   * Determines if widget is read only (default is false)
+   */
+  _readOnly: boolean;
+  get readOnly(): boolean {
+    return this._readOnly;
+  }
+  set readOnly(value: boolean) {
+    this._readOnly = value;
+  }
+
+  /**
+   * Column span (default is 1)
+   */
+  _colspan: number;
+  get colspan(): number {
+    return this._colspan;
+  }
+  set colspan(value: number) {
+    this._colspan = +value;
+  }
+
+  /**
+   * Invisible fields (default is false)
+   */
+  _invisible: boolean;
+  get invisible(): boolean {
+    return this._invisible;
+  }
+  set invisible(value: boolean) {
+    this._invisible = value;
+  }
+
+  /**
+   * Widget type
+   */
+  _type: string = "";
+  get type(): string {
+    return this._type;
+  }
+  set type(value: string) {
+    this._type = value;
+  }
+
+  /**
+   * Context
+   */
+  _context: any;
+  get context(): any {
+    return this._context;
+  }
+  set context(value: any) {
+    this._context = value;
+  }
+
+  /**
+   * Domain
+   */
+  _domain?: string;
+  get domain(): string | undefined {
+    return this._domain;
+  }
+  set domain(value: string | undefined) {
+    this._domain = value;
+  }
+
+  constructor(props?: any) {
+    this._colspan = Widget._defaultColspan;
+    this._readOnly = false;
+    this._invisible = false;
+
+    if (props) {
+      if (props.colspan) {
+        this._colspan = +props.colspan;
+      }
+      if (props.readonly) {
+        if (
+          props.readonly === "1" ||
+          props.readonly === 1 ||
+          props.readonly === true
+        ) {
+          this._readOnly = true;
+        }
+      }
+      if (props.invisible) {
+        if (
+          props.invisible === 1 ||
+          props.invisible === "1" ||
+          props.invisible === true
+        ) {
+          this._invisible = true;
+        }
+      }
+      if (props.type) {
+        this._type = props.type;
+      }
+      if (props.context) {
+        this._context = props.context;
+      }
+      if (props.domain && typeof props.domain === "string") {
+        this._domain = props.domain;
+      }
+    }
+  }
+
+  abstract findById(id: string): Widget | null;
+}
+
+export default Widget;

package/src/WidgetFactory.ts

@@ -0,0 +1,158 @@
+import Notebook from "./Notebook";
+import Page from "./Page";
+import Group from "./Group";
+import Button from "./Button";
+import Label from "./Label";
+import Char from "./Char";
+import Text from "./Text";
+import Selection from "./Selection";
+import Many2one from "./Many2one";
+import Boolean from "./Boolean";
+import Integer from "./Integer";
+import Widget from "./Widget";
+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 NewLine from "./NewLine";
+import Separator from "./Separator";
+import Reference from "./Reference";
+import Binary from "./Binary";
+import Image from "./Image";
+import FiberGrid from "./FiberGrid";
+import Timeline from "./Timeline";
+
+class WidgetFactory {
+  /**
+   * Widget class
+   */
+  _widgetClass: any;
+
+  setWidgetClass(type: string): void {
+    switch (type) {
+      case "notebook":
+        this._widgetClass = Notebook;
+        break;
+      case "page":
+        this._widgetClass = Page;
+        break;
+      case "group":
+        this._widgetClass = Group;
+        break;
+      case "label":
+        this._widgetClass = Label;
+        break;
+      case "char":
+        this._widgetClass = Char;
+        break;
+      case "text":
+        this._widgetClass = Text;
+        break;
+      case "button":
+        this._widgetClass = Button;
+        break;
+      case "selection":
+        this._widgetClass = Selection;
+        break;
+      case "many2one":
+        this._widgetClass = Many2one;
+        break;
+      case "boolean":
+        this._widgetClass = Boolean;
+        break;
+      case "integer":
+        this._widgetClass = Integer;
+        break;
+      case "float":
+        this._widgetClass = Float;
+        break;
+      case "float_time":
+        this._widgetClass = FloatTime;
+        break;
+      case "date":
+        this._widgetClass = Date;
+        break;
+      case "datetime":
+        this._widgetClass = DateTime;
+        break;
+      case "progressbar":
+        this._widgetClass = ProgressBar;
+        break;
+      case "many2many":
+        this._widgetClass = Many2many;
+        break;
+      case "one2many":
+      case "one2many_list":
+        this._widgetClass = One2many;
+        break;
+      case "newline":
+        this._widgetClass = NewLine;
+        break;
+      case "separator":
+        this._widgetClass = Separator;
+        break;
+      case "url":
+        this._widgetClass = Char;
+        break;
+      case "email":
+        this._widgetClass = Char;
+        break;
+      case "reference":
+        this._widgetClass = Reference;
+        break;
+      case "binary":
+        this._widgetClass = Binary;
+        break;
+      case "image":
+        this._widgetClass = Image;
+        break;
+      case "fiber_grid":
+        this._widgetClass = FiberGrid;
+        break;
+      case "timeline":
+        this._widgetClass = Timeline;
+        break;
+      default:
+        break;
+    }
+  }
+
+  createWidget(type: string, props: any) {
+    let finalType = type;
+
+    this.setWidgetClass(type);
+
+    // Fallback to default widget, we try to use the fields type widget if it exists
+    if (this._widgetClass === undefined) {
+      finalType = props.fieldsWidgetType;
+      this.setWidgetClass(props.fieldsWidgetType);
+    }
+
+    if (this._widgetClass === undefined) {
+      this._widgetClass = Widget;
+    }
+
+    // TODO: Widget Class constructors should use only the props needed, not all props.
+    switch (type) {
+      // Specific cases (only selected props should be used)
+      case "notebook":
+      case "page":
+      case "group":
+        return new this._widgetClass({ ...props, type: finalType });
+      case "button":
+        return new this._widgetClass({
+          ...props,
+          type,
+          buttonType: props.type,
+        });
+      // Generic case
+      default:
+        return new this._widgetClass({ ...props, type: finalType });
+    }
+  }
+}
+
+export default WidgetFactory;

package/src/helpers/attributeParser.ts

@@ -0,0 +1,108 @@
+const evaluateCondition = ({
+  entry,
+  values,
+  fields,
+}: {
+  entry: Array<any>;
+  values: any;
+  fields: any;
+}) => {
+  const [fieldName, operator, expectedValue] = entry;
+
+  if (fields[fieldName] === undefined) {
+    return false;
+  }
+
+  if (values[fieldName] === undefined && fields[fieldName].type !== "boolean") {
+    return false;
+  }
+
+  let filteredExpectedValue = expectedValue;
+
+  if (
+    fields[fieldName].type === "boolean" &&
+    (expectedValue === 0 || expectedValue === 1)
+  ) {
+    filteredExpectedValue = expectedValue === 0 ? false : true;
+  }
+
+  const value =
+    fields[fieldName].type === "boolean"
+      ? !!values[fieldName]
+      : values[fieldName];
+
+  switch (operator.toLowerCase()) {
+    case "=":
+    case "==":
+      return value === filteredExpectedValue;
+    case "<>":
+    case "!=":
+      return value !== filteredExpectedValue;
+    case ">":
+      return value > filteredExpectedValue;
+    case ">=":
+      return value >= filteredExpectedValue;
+    case "<":
+      return value < filteredExpectedValue;
+    case "<=":
+      return value <= filteredExpectedValue;
+    case "in":
+      return filteredExpectedValue.includes(value);
+    case "not in":
+      return !filteredExpectedValue.includes(value);
+    default:
+      return false;
+  }
+};
+
+const parseAttributes = ({
+  attrs,
+  values,
+  fields,
+}: {
+  attrs: string;
+  values: any;
+  fields: any;
+}) => {
+  const leftP = attrs.replace(/\(/g, "[");
+  const rightP = leftP.replace(/\)/g, "]");
+  const clearQuotes = rightP.replace(/\'/g, '"');
+  const replaceTrue = clearQuotes.replace(/True/g, "true");
+  const replaceFalse = replaceTrue.replace(/False/g, "false");
+  const parsedObject = JSON.parse(replaceFalse);
+  const newAttributes: any = {};
+
+  for (const attrField of Object.keys(parsedObject)) {
+    const entries = parsedObject[attrField];
+    const evaluatedEntries: boolean[] = entries.map((entry: any) => {
+      return evaluateCondition({ entry, values, fields });
+    });
+    newAttributes[attrField] = evaluatedEntries.every(
+      (i: boolean) => i === true
+    );
+  }
+
+  return newAttributes;
+};
+
+const evaluateAttributes = ({
+  tagAttributes,
+  values,
+  fields,
+}: {
+  tagAttributes: any;
+  values: any;
+  fields: any;
+}) => {
+  const newTagAttributes = tagAttributes.attrs
+    ? parseAttributes({
+        attrs: tagAttributes.attrs,
+        values,
+        fields,
+      })
+    : {};
+
+  return { ...tagAttributes, ...newTagAttributes, attrs: undefined };
+};
+
+export { evaluateAttributes };

package/src/helpers/contextParser.ts

@@ -0,0 +1,66 @@
+import { getValueForField } from "./fieldParser";
+
+export const parseContext = ({
+  context,
+  values,
+  fields,
+}: {
+  context?: string;
+  values?: any;
+  fields?: any;
+}) => {
+  // TODO: remove try/catch when we know for sure that all the incoming contexts formats are expected
+  try {
+    if (!context) return undefined;
+
+    if (context.trim().length === 0) {
+      return undefined;
+    }
+
+    // TODO: maybe this can be accomplished more performant and elegant with regex
+    const strNoWhitespaces = context.replace(/\s/g, "");
+    var replaceTrue = strNoWhitespaces.replace(/True/g, "true");
+    var replaceFalse = replaceTrue.replace(/False/g, "false");
+    const strNoClauLeft = replaceFalse.replace(/\{/g, "");
+    const strNoClauRight = strNoClauLeft.replace(/\}/g, "");
+
+    const entryValues = strNoClauRight.split(",");
+    const valuesSplitted = entryValues.map((entry) => {
+      return entry.split(":");
+    });
+
+    const parsedContext: any = {};
+
+    valuesSplitted.forEach((entry) => {
+      const fieldName = entry[1];
+
+      if (
+        entry[1].indexOf("'") === -1 &&
+        entry[1] !== "true" &&
+        entry[1] !== "false"
+      ) {
+        const valueForField = getValueForField({
+          values,
+          fields,
+          fieldName: fieldName === "active_id" ? "id" : fieldName,
+        });
+        parsedContext[entry[0].replace(/'/g, "")] = valueForField || undefined;
+      } else {
+        if (entry[1] === "true") {
+          parsedContext[entry[0].replace(/'/g, "")] = true;
+        } else if (entry[1] === "false") {
+          parsedContext[entry[0].replace(/'/g, "")] = false;
+        } else {
+          parsedContext[entry[0].replace(/'/g, "")] = entry[1].replace(
+            /'/g,
+            ""
+          );
+        }
+      }
+    });
+
+    return parsedContext;
+  } catch (e) {
+    return undefined;
+  }
+};