@gisce/ooui 0.1.0

package/src/Char.ts

@@ -0,0 +1,65 @@
+import Field from "./Field";
+
+/**
+ * One-line input with a length limit.
+ */
+class Char extends Field {
+  /**
+   * Field place holder
+   */
+  _placeholder: string = "";
+  get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(value: string) {
+    this._placeholder = value;
+  }
+
+  /**
+   * Field size
+   */
+  _size: number = 150;
+  get size(): number {
+    return this._size;
+  }
+  set size(value: number) {
+    this._size = value;
+  }
+
+  _isPassword: boolean = false;
+  get isPassword(): boolean {
+    return this._isPassword;
+  }
+  set isPassword(value: boolean) {
+    this._isPassword = 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.size) {
+        this._size = props.size;
+      }
+
+      if (props.password) {
+        this.isPassword = props.password === "True" ? true : false;
+      }
+
+      if (props.translate) {
+        this.translatable =
+          props.translate === "True" || props.translate === true ? true : false;
+      }
+    }
+  }
+}
+
+export default Char;

package/src/Container.ts

@@ -0,0 +1,171 @@
+import Field from "./Field";
+import NewLine from "./NewLine";
+import Widget from "./Widget";
+import Label from "./Label";
+
+type AddWidgetOptions = {
+  addLabel: boolean;
+};
+
+class Container {
+  /**
+   * Number of columns the container is divided
+   */
+  _columns: number;
+  get columns(): number {
+    return this._columns;
+  }
+  set columns(value: number) {
+    this._columns = value;
+  }
+
+  /**
+   * Number of columns to use
+   */
+  _colspan: number;
+  get colspan(): number {
+    return this._colspan;
+  }
+  set colspan(value: number) {
+    this._colspan = value;
+  }
+
+  /**
+   * Number of rows
+   */
+  _rows: Widget[][];
+  get rows(): Widget[][] {
+    return this._rows;
+  }
+  set rows(value: Widget[][]) {
+    this._rows = value;
+  }
+
+  _index: number;
+  get index(): number {
+    return this._index;
+  }
+
+  /**
+   * Determines if widget is read only (default is false)
+   */
+  _readOnly: boolean;
+  get readOnly(): boolean {
+    return this._readOnly;
+  }
+  set readOnly(value: boolean) {
+    this._readOnly = value;
+  }
+
+  constructor(
+    columns: number = 4,
+    colspan: number = 6,
+    readOnly: boolean = false
+  ) {
+    this._columns = columns;
+    this._colspan = colspan;
+    this._rows = [[]];
+    this._index = 0;
+    this._readOnly = readOnly;
+  }
+
+  /**
+   * Returns the next free position
+   */
+  freePosition(): number {
+    const span = this._rows[this._index]
+      .filter((el) => {
+        return !el.invisible;
+      })
+      .reduce((prev, current) => {
+        return prev + current.colspan;
+      }, 0);
+    return this._columns - span;
+  }
+
+  addWidget(widget: Widget, options?: AddWidgetOptions) {
+    const widgetsToAdd: Widget[] = [];
+    const addLabel = options ? options.addLabel : true;
+
+    if (widget instanceof NewLine) {
+      this._rows.push([]);
+      this._index++;
+      return;
+    }
+
+    if (widget.colspan > this._columns) {
+      // Widget colspan is greater than container columns, so we change widget
+      // colspan to fit container columns.
+      widget.colspan = this._columns;
+    }
+
+    // If the container is set to readonly, reflect it to its children
+    widget.readOnly = widget.readOnly || this.readOnly;
+
+    // For fields without nolabel we add a preceding label widget
+    if (addLabel && widget instanceof Field && !widget.nolabel) {
+      if (widget.colspan > 1) {
+        widget.colspan -= 1; // We substract one colspan for the corresponding label
+      }
+
+      const label = new Label({
+        name: widget.id + "_label",
+        string: widget.label,
+        invisible: widget.invisible,
+        help: widget.tooltip,
+        fieldForLabel: widget.id,
+      });
+      label.type = "label";
+
+      widgetsToAdd.push(label);
+      widgetsToAdd.push(widget);
+    } else {
+      widgetsToAdd.push(widget);
+    }
+
+    const widgetsColspan = widgetsToAdd.reduce(
+      (accumulator: number, currentWidget: Widget) => {
+        return accumulator + currentWidget.colspan;
+      },
+      0
+    );
+
+    if (widgetsColspan > this.freePosition()) {
+      this._rows.push([]);
+      this._index++;
+    }
+
+    this._rows[this._index] = this._rows[this._index].concat(widgetsToAdd);
+  }
+
+  /**
+   * Traverses children to find a matching container or widget with the exact same id.
+   * @param {string} id id (name) of the field or container to find
+   */
+  findById(id: string): Widget | null {
+    let r: Widget | null = null;
+    if (this._rows && this._rows.length) {
+      this._rows.forEach((row) => {
+        if (r) {
+          // Item has been found.
+          return;
+        }
+
+        if (row && row.length) {
+          row.forEach((item) => {
+            if (r) {
+              // Item has been found.
+              return;
+            }
+            if (item) {
+              r = item.findById(id);
+            }
+          });
+        }
+      });
+    }
+    return r;
+  }
+}
+
+export default Container;

package/src/ContainerWidget.ts

@@ -0,0 +1,105 @@
+import Widget from "./Widget";
+import Container from "./Container";
+
+class ContainerWidget extends Widget {
+  /**
+   * Field identifier
+   *
+   * Corresponds to the field's name attribute from xml
+   */
+  _id: string = "";
+  get id(): string {
+    return this._id;
+  }
+  set id(value: string) {
+    this._id = value;
+  }
+
+  static _defaultColspan: number = 6;
+  static get defaultColspan(): number {
+    return ContainerWidget._defaultColspan;
+  }
+  static set defaultColspan(value: number) {
+    ContainerWidget._defaultColspan = value;
+  }
+
+  /**
+   * Container
+   */
+  _container: Container;
+  get container(): Container {
+    return this._container;
+  }
+  set container(value: Container) {
+    this._container = value;
+  }
+
+  get colspan(): number {
+    return this._container.colspan;
+  }
+  set colspan(value: number) {
+    this._container.colspan = +value;
+  }
+
+  /**
+   * Must expand widget
+   */
+  _mustExpand: boolean = false;
+  get mustExpand(): boolean {
+    return this._mustExpand;
+  }
+  set mustExpand(value: boolean) {
+    this._mustExpand = value;
+  }
+
+  /**
+   * Container label
+   */
+  _label: string = "";
+  get label(): string {
+    return this._label;
+  }
+  set label(value: string) {
+    this._label = value;
+  }
+
+  constructor(props?: any) {
+    super(props);
+
+    this._container = new Container(
+      props && props.col,
+      ContainerWidget._defaultColspan,
+      this.readOnly
+    );
+
+    if (props) {
+      if (props.name) {
+        this._id = props.name;
+      }
+
+      if (props.colspan) {
+        this._container.colspan = +props.colspan;
+      } else {
+        this._mustExpand = true;
+      }
+
+      if (props.string) {
+        this._label = props.string;
+      }
+    }
+  }
+
+  /**
+   * Calls container's findById method to find the widgets matching with param id
+   * @param {string} id id to find
+   */
+  findById(id: string): Widget | null {
+    if (id === this.id) {
+      return this;
+    }
+
+    return this.container.findById(id);
+  }
+}
+
+export default ContainerWidget;

package/src/Date.ts

@@ -0,0 +1,12 @@
+import Field from "./Field";
+
+/**
+ * Date input
+ */
+class Date extends Field {
+  constructor(props?: any) {
+    super(props);
+  }
+}
+
+export default Date;

package/src/DateTime.ts

@@ -0,0 +1,12 @@
+import Field from "./Field";
+
+/**
+ * DateTime input
+ */
+class DateTime extends Field {
+  constructor(props?: any) {
+    super(props);
+  }
+}
+
+export default DateTime;

package/src/FiberGrid.ts

@@ -0,0 +1,9 @@
+import Field from "./Field";
+
+class FiberGrid extends Field {
+  constructor(props: any) {
+    super(props);
+  }
+}
+
+export default FiberGrid;

package/src/Field.ts

@@ -0,0 +1,147 @@
+import Widget from "./Widget";
+
+class Field extends Widget {
+  /**
+   * Field identifier
+   *
+   * Corresponds to the field's name attribute from xml
+   */
+  _id: string = "";
+  get id(): string {
+    return this._id;
+  }
+  set id(value: string) {
+    this._id = value;
+  }
+
+  /**
+   * Label
+   */
+  _label: string = "";
+  get label(): string {
+    return this._label;
+  }
+  set label(value: string) {
+    this._label = value;
+  }
+
+  /**
+   * No label
+   *
+   * This field hasn't got to show the label
+   *
+   */
+  _nolabel: boolean = false;
+  get nolabel(): boolean {
+    return this._nolabel;
+  }
+  set nolabel(value: boolean) {
+    this._nolabel = value;
+  }
+
+  /**
+   *
+   * Required field
+   *
+   */
+  _required: boolean = false;
+  get required(): boolean {
+    return this._required;
+  }
+  set required(value: boolean) {
+    this._required = value;
+  }
+
+  /**
+   * Tooltip
+   */
+  _tooltip?: string;
+  get tooltip(): string | undefined {
+    return this._tooltip;
+  }
+  set tooltip(value: string | undefined) {
+    this._tooltip = value;
+  }
+
+  /**
+   * Activated (default is true)
+   */
+  _activated: boolean = true;
+  get activated(): boolean {
+    return this._activated;
+  }
+  set activated(value: boolean) {
+    this._activated = value;
+  }
+
+  /**
+   * Sum - sum parameter (label), this will mean that we have to sum this field in the tree
+   */
+  _sum?: string;
+  get sum(): string | undefined {
+    return this._sum;
+  }
+  set sum(value: string | undefined) {
+    this._sum = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+
+    // Activated by default
+    this._activated = true;
+
+    if (props) {
+      if (props.name) {
+        this._id = props.name;
+      }
+
+      if (props.activated) {
+        this._activated = props.activated;
+      }
+
+      if (props.string) {
+        this._label = props.string;
+      }
+
+      if (props.help) {
+        this._tooltip = props.help;
+      }
+
+      if (
+        props.nolabel &&
+        (props.nolabel === "1" ||
+          (typeof props.nolabel === "boolean" && props.nolabel === true))
+      ) {
+        this._nolabel = true;
+      }
+
+      if (
+        props.required &&
+        (props.required === "1" ||
+          props.required === true ||
+          props.required === "True")
+      ) {
+        this._required = true;
+      }
+
+      if (props.sum) {
+        this._sum = props.sum;
+      }
+    }
+  }
+
+  /**
+   * Returns this instance in case this id matches param id.
+   * @param {string} id id (name) to find
+   */
+  findById(id: string): Field | null {
+    let r: Field | null = null;
+    if (this._id === id) {
+      r = this;
+    }
+    return r;
+  }
+}
+
+export default Field;

package/src/Float.ts

@@ -0,0 +1,45 @@
+import Field from "./Field";
+
+/**
+ * Float input
+ */
+class Float extends Field {
+
+  /**
+   * Integer digits
+   *
+   * Number of integer digits that will be part of the float
+   */
+  _integerDigits: number = 16;
+  get integerDigits(): number {
+    return this._integerDigits;
+  }
+  set integerDigits(value: number) {
+    this._integerDigits = value;
+  }
+
+  /**
+   * Decimal digits
+   *
+   * Number of decimal digits that will be part of the float
+   */
+  _decimalDigits: number = 2;
+  get decimalDigits(): number {
+    return this._decimalDigits;
+  }
+  set decimalDigits(value: number) {
+    this._decimalDigits = value;
+  }
+
+  constructor(props?: any) {
+    super(props);
+
+    if (props?.digits) {
+      const [integers, decimals] = props.digits;
+      this._integerDigits = integers;
+      this._decimalDigits = decimals;
+    }
+  }
+}
+
+export default Float;

package/src/FloatTime.ts

@@ -0,0 +1,8 @@
+import Float from "./Float";
+
+/**
+ * FloatTime input
+ */
+class FloatTime extends Float {}
+
+export default FloatTime;