@guiexpert/table 0.0.1 → 1.0.1

package/src/lib/table/renderer/cell-group-ext-cell-renderer.ts

@@ -0,0 +1,27 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+import { CellGroupExt } from "../data/tablemodel/cellgroup/cell-group-ext";
+
+
+export class CellGroupExtCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: CellGroupExt | undefined | null,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const label = cellValue?.data ? cellValue.data : "";
+    cellDiv.innerHTML = `${label}`;
+
+    return undefined;
+  }
+
+
+}

package/{lib/table/renderer/cell-render.if.d.ts → src/lib/table/renderer/cell-render.if.ts}

@@ -2,6 +2,15 @@ import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
 import { DomServiceIf } from "../service/dom-service.if";
 import { AreaIdent } from "../data/tablemodel/area-ident.type";
 import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
 export interface CellRendererIf {
-    render<T>(cellDiv: HTMLDivElement, rowIndex: number, columnIndex: number, areaIdent: AreaIdent, areaModel: AreaModelIf, cellValue: any, domService: DomServiceIf): RendererCleanupFnType | undefined;
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined;
 }

package/src/lib/table/renderer/checkbox-boolean-property-cell-renderer.ts

@@ -0,0 +1,58 @@
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+import { AreaModelObjectyArray } from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class CheckboxBooleanPropertyCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string,
+    public skipCheckableCheck: boolean = true
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectyArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (this.skipCheckableCheck || areaModel.isRowCheckable(rowIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-checkbox-div");
+      const row = areaModel.getRowByIndex(rowIndex);
+      const rowChecked = areaModel.getValueByT(row, this.property) === true;
+      const checked = rowChecked ? "checked" : "";
+
+      domService.addClass(cellDiv, "ge-padding-property-checkbox");
+      cellDiv.innerHTML = `
+        <input
+          type="checkbox"
+          data-area="${areaIdent}"
+          data-row-index="${rowIndex}"
+          data-col-index="${columnIndex}"
+          data-property-index="${this.property}"
+          data-input-type="checkbox"
+          ${checked}
+          class="ge-input-checkbox">`;
+
+      const inputEle = cellDiv.querySelector<HTMLInputElement>(".ge-input-checkbox");
+      if (inputEle) {
+        // @ts-ignore
+        inputEle.addEventListener("click", (_ele: HTMLInputElement, _evt: MouseEvent) => {
+          // @ts-ignore
+          row[this.property] = !row[this.property];
+          return true;
+        });
+      }
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/checkbox-cell-renderer.ts

@@ -0,0 +1,39 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class CheckboxCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isRowCheckable(rowIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-checkbox-div");
+      const rowChecked = areaModel.isRowChecked(rowIndex);
+      const checked = (rowChecked === "full") ? "checked" : "";
+      const semi = (rowChecked === "semi") ? "<span style=\"opacity: 0.4;\">✓<span>" : "";
+      cellDiv.innerHTML = `
+        <input
+            type="checkbox"
+            data-area="${areaIdent}"
+            data-row-index="${rowIndex}"
+            data-col-index="${columnIndex}"
+            data-input-type="checkbox"
+            ${checked}
+            class="ge-table-row-checkbox">
+        ${semi}  `;
+    }
+    return undefined;
+  }
+
+
+}

package/src/lib/table/renderer/date-to-int-date-cell-renderer.ts

@@ -0,0 +1,34 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToIntlDDMMYYYYCellRenderer implements CellRendererIf {
+
+  readonly formatter = new Intl.DateTimeFormat("de-DE", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      try {
+        cellDiv.innerText = this.formatter.format(new Date(cellValue));
+      } catch (e) {
+        cellDiv.innerText = cellValue;
+      }
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/date-to-iso-cell-renderer.ts

@@ -0,0 +1,25 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToIsoCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue).toISOString();
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/date-to-locale-date-cell-renderer.ts

@@ -0,0 +1,24 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToLocaleDateCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue).toLocaleDateString();
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/date-to-tec-cell-renderer.ts

@@ -0,0 +1,28 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToTecCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue)
+        .toISOString()
+        .replace(/T/g, " ")
+        .replace(/\..*/g, "");
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/edit/edit-cell-renderer.type.ts

@@ -0,0 +1,3 @@
+import { CellRendererIf } from "../cell-render.if";
+
+export type GetEditRenderer = (rowIndex: number, columnIndex: number) => CellRendererIf | undefined;

package/src/lib/table/renderer/edit/edit-input-pipe-for-number.ts

@@ -0,0 +1,6 @@
+import { editInputPipe } from "./edit-input-pipe.if";
+
+export const editInputPipeForNumber: editInputPipe = function(value: any, _rowIndex: number, _columnIndex: number) {
+  return value ? Number(value) : "";
+}
+

package/src/lib/table/renderer/edit/edit-input-pipe.if.ts

@@ -0,0 +1,7 @@
+
+
+export interface editInputPipe {
+  (input: any, rowIndex: number, columnIndex: number): any | undefined;
+}
+
+

package/src/lib/table/renderer/edit/input-cell-renderer.ts

@@ -0,0 +1,41 @@
+import { CellRendererIf } from "../cell-render.if";
+import { AreaIdent } from "../../data/tablemodel/area-ident.type";
+import { AreaModelIf } from "../../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../../service/dom-service.if";
+import { RendererCleanupFnType } from "../renderer-cleanup-fn.type";
+
+
+export class InputCellRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isEditable(rowIndex, columnIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-input-div");
+
+      const val = areaModel.getValueAt(rowIndex, columnIndex);
+      cellDiv.innerHTML = `
+            <input
+                type="text"
+                value="${val}"
+                autofocus
+                onfocus="this.setSelectionRange(0, this.value.length)"
+                data-listen="change"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-col-index="${columnIndex}"
+                data-input-type="text"
+                style="width:calc(100% - 8px);height:100%;border:0;padding:0 0 0 8px;"
+                class="ge-table-cell-editor-input">`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/edit/select-cell-renderer.ts

@@ -0,0 +1,60 @@
+import { CellRendererIf } from "../cell-render.if";
+import { AreaIdent } from "../../data/tablemodel/area-ident.type";
+import { AreaModelIf } from "../../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../../service/dom-service.if";
+import { RendererCleanupFnType } from "../renderer-cleanup-fn.type";
+import { ValueLabelIf } from "../../data/common/value-label.if";
+import { ValueLabel } from "../../data/common/value-label";
+
+
+export class SelectCellRenderer implements CellRendererIf {
+
+  constructor(
+    protected options: ValueLabelIf[]
+  ) {
+  }
+
+  static create(values: string[]) {
+    return new SelectCellRenderer(
+      values.map(v => new ValueLabel(v, v))
+    );
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isEditable(rowIndex, columnIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-select-div");
+
+      const val = areaModel.getValueAt(rowIndex, columnIndex);
+
+      let opts = [];
+      for (let option of this.options) {
+        const selected = (option.value === val) ? " selected " : "";
+        opts.push(`<option value="${option.value}" ${selected}>${option.label}</option>`);
+      }
+      const o = opts.join("");
+
+      cellDiv.innerHTML = `
+            <select
+                type="text"
+                value="${val}"
+                autofocus
+                data-listen="change"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-col-index="${columnIndex}"
+                data-input-type="text"
+                style="width:100%;height:100%;border:0;padding:0 0 0 8px;"
+                class="ge-table-cell-editor-select">${o}</select>`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/male-female-to-icon-cell-renderer.ts

@@ -0,0 +1,26 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class MaleFemaleToIconCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue === "male" || cellValue === "m") {
+      cellDiv.innerText = "♂";
+    } else if (cellValue === "female" || cellValue === "f") {
+      cellDiv.innerText = "♀";
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/number-cell-renderer.ts

@@ -0,0 +1,38 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class NumberCellRenderer implements CellRendererIf {
+
+  constructor(
+    protected min: number = Number.MIN_SAFE_INTEGER,
+    protected max: number = Number.MAX_SAFE_INTEGER) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (cellValue) {
+      cellDiv.innerText = cellValue;
+      if (typeof cellValue === "string"
+        || isNaN(cellValue)
+        || cellValue < this.min
+        || cellValue > this.max
+      ) {
+        domService.addClass(cellDiv, "ge-cell-error");
+      }
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/renderer-cleanup-fn.type.ts

@@ -0,0 +1 @@
+export type RendererCleanupFnType = Function;

package/src/lib/table/renderer/renderer.ts

@@ -0,0 +1,11 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaObjectMap } from "../data/common/area-map";
+
+
+export class Renderer {
+
+  static bodyRenderer(bodyCellRenderer: CellRendererIf): AreaObjectMap<CellRendererIf> {
+    return new AreaObjectMap<CellRendererIf>(undefined, bodyCellRenderer, undefined);
+  }
+
+}

package/src/lib/table/renderer/true-false-cell-renderer.ts

@@ -0,0 +1,28 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class TrueFalseCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue === "true" || cellValue === true) {
+      cellDiv.innerHTML = "<span class=\"ge-true-text-color\">✅</span>";
+    } else if (cellValue === "false" || cellValue === false) {
+      cellDiv.innerHTML = "<span class=\"ge-false-text-color\">❌</span>";
+    } else {
+      cellDiv.innerText = "";
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/selection/selection-model.if.ts

@@ -0,0 +1,20 @@
+import { CellRange } from "../data/common/cell-range";
+
+export interface SelectionModelIf {
+
+  togglePoint(row: number, col: number): void;
+
+  getRanges(): CellRange[];
+
+  clear(): void;
+
+  hasSelection(): boolean;
+
+  addSelection(range: CellRange): void;
+
+  removeSelection(range: CellRange): void;
+
+  getSelectionCount(rowIndex: number, columnIndex: number): number;
+
+  selectAll(): void;
+}

package/src/lib/table/selection/selection-model.ts

@@ -0,0 +1,109 @@
+import { CellRange } from "../data/common/cell-range";
+import { SelectionMode, SelectionType } from "./selection.type";
+import { SelectionModelIf } from "./selection-model.if";
+
+export class SelectionModel implements SelectionModelIf {
+
+  protected ranges: CellRange[] = [];
+  protected negativeRanges: CellRange[] = [];
+  protected allSelected: boolean = false;
+
+  constructor(
+    public selectionType: SelectionType = "none",
+    public selectionMode: SelectionMode = "single"
+  ) {
+  }
+
+  getSelectionCount(rowIndex: number, columnIndex: number): number {
+    let count = 0;
+    for (const range of this.ranges) {
+      if (range.isInRange(rowIndex, columnIndex)) {
+        count++;
+      }
+    }
+    if (this.allSelected) {
+      count++;
+    }
+    if (this.isInNegativeRange(rowIndex, columnIndex)) {
+      count = 0;
+    }
+    return count;
+  }
+
+  isInNegativeRange(rowIndex: number, columnIndex: number): boolean {
+    for (const range of this.negativeRanges) {
+      if (range.isInRange(rowIndex, columnIndex)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getRanges() {
+    return this.ranges;
+  }
+
+  clear(): void {
+    this.ranges = [];
+    this.negativeRanges = [];
+    this.allSelected = false;
+  }
+
+  hasSelection(): boolean {
+    return !!this.ranges.length;
+  }
+
+  selectAll() {
+    this.allSelected = true;
+  }
+
+  addSelection(range: CellRange): void {
+    this.addRange(range);
+  }
+
+  removeSelection(range: CellRange): void {
+    if (this.selectionType === "none") {
+      return; // skip!
+    }
+    let r = range;
+    if (this.selectionType === "row") {
+      r = CellRange.singleRow(range.r1);
+    } else if (this.selectionType === "column") {
+      r = CellRange.singleColumn(range.c1);
+    }
+    this.negativeRanges.push(r);
+  }
+
+  togglePoint(row: number, col: number): void {
+    if (this.getSelectionCount(row, col) > 0) {
+      this.removeSelection(CellRange.singleCell(row, col));
+    } else {
+      this.addSelection(CellRange.singleCell(row, col));
+    }
+  }
+
+
+  private addRange(range: CellRange) {
+    if (this.selectionType === "none") {
+      return; // skip!
+    }
+    this.allSelected = false;
+    if (this.selectionMode === "single") {
+      this.ranges = [];
+    }
+    if (this.selectionType === "row") {
+      range.c1 = 0;
+      range.c2 = Number.MAX_SAFE_INTEGER;
+    } else if (this.selectionType === "column") {
+      range.r1 = 0;
+      range.r2 = Number.MAX_SAFE_INTEGER;
+    } else if (this.selectionType === "cell") {
+      range.r2 = range.r1;
+      range.c2 = range.c1;
+    } else if (this.selectionType === "range") {
+      //
+    }
+    this.ranges.push(range);
+  }
+
+}