@guiexpert/table 0.0.1 → 1.0.1

package/src/lib/table/data/tablemodel/areamodel/area-model-hidden.ts

@@ -0,0 +1,120 @@
+import { AreaModelIf } from "./area-model.if";
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { CheckedType } from "../../common/checked-type";
+import { CheckboxModelIf } from "../../../checkbox/checkbox-model.if";
+import { FilterFunction } from "../../common/filter-function";
+import { SortItem } from "../../common/sort-item";
+import { AreaIdent } from "../area-ident.type";
+
+/**
+ * An unvisible model, which is used internally for hiding a header.
+ */
+export class AreaModelHidden implements AreaModelIf {
+
+  rowSelectionModel: CheckboxModelIf<any> | undefined = undefined;
+
+  constructor(
+    public areaIdent: AreaIdent = "body"
+  ) {
+  }
+
+  getRowCount(): number {
+    return 0;
+  }
+
+  getValueAt(_rowIndex: number, _columnIndex: number): any {
+    return "";
+  }
+
+  getCellRenderer(_rowIndex: number, _columnIndex: number): CellRendererIf | undefined {
+    return undefined;
+  }
+
+  getRowHeight(_rowIndex: number): number {
+    return 0;
+  }
+
+  getColspanAt(_rowIndex: number, _columnIndex: number): number {
+    return 0;
+  }
+
+  getCustomClassesAt(_rowIndex: number, _columnIndex: number): string[] {
+    return [];
+  }
+
+  getCustomStyleAt(_rowIndex: number, _columnIndex: number): { [key: string]: string } | undefined {
+    return undefined;
+  }
+
+  getRowspanAt(_rowIndex: number, _columnIndex: number): number {
+    return 0;
+  }
+
+  getRowByIndex(_idx: number): any {
+    return undefined;
+  }
+
+  isRowCheckable(_rowIndex: number): boolean {
+    return false;
+  }
+
+  isRowChecked(_rowIndex: number): CheckedType | undefined {
+    return undefined;
+  }
+
+  setRowChecked(_rowIndex: number, _checked: boolean): void {
+    // nothing
+  }
+
+  getTooltipAt(_rowIndex: number, _columnIndex: number): any {
+    return "";
+  }
+
+  getMaxColspan(): number {
+    return 0;
+  }
+
+  getMaxRowspan(): number {
+    return 0;
+  }
+
+
+  getYPosByRowIndex(_rowIndex: number): number {
+    return 0;
+  }
+
+  init(): void {
+    // nothing
+  }
+
+  externalFilterChanged(_predictFn: FilterFunction<any>): void {
+    // nothing
+  }
+
+  isFilterable(): boolean {
+    return false;
+  }
+
+  doSort(_sortItems: SortItem[]): boolean {
+    // do nothing
+    return false;
+  }
+
+  isEditable(_rowIndex: number, _columnIndex: number): boolean {
+    return false;
+  }
+
+  setValue(_rowIndex: number, _columnIndex: number, _value: string): boolean {
+    return false;
+  }
+
+  isSelectable(_rowIndex: number, _columnIndex: number): boolean {
+    return false;
+  }
+
+  changeColumnOrder(_sourceColumnIndex: number, _targetColumnIndex: number): void {
+    // skip
+  }
+
+}
+

package/src/lib/table/data/tablemodel/areamodel/area-model-object-array-with-columndefs.ts

@@ -0,0 +1,23 @@
+import { AreaModelObjectyArray } from "./area-model-object-array";
+import { ColumnDefIf } from "../column/column-def.if";
+import { AreaIdent } from "../area-ident.type";
+
+export class AreaModelObjectArrayWithColumndefs<T> extends AreaModelObjectyArray<T> {
+
+
+  constructor(
+    public override areaIdent: AreaIdent,
+    protected override readonly rows: T[],
+    protected override readonly columnDefs: ColumnDefIf[],
+    public override defaultRowHeight: number
+  ) {
+    super(
+      areaIdent,
+      rows,
+      defaultRowHeight,
+      columnDefs
+    );
+  }
+
+}
+

package/src/lib/table/data/tablemodel/areamodel/area-model-object-array.ts

@@ -0,0 +1,105 @@
+import { AbstractAreaModel } from "./abstract-area-model";
+import { TreeRow } from "../../common/tree-row";
+import { ColumnDefIf } from "../column/column-def.if";
+import { AreaIdent } from "../area-ident.type";
+import { FilterFunction } from "../../common/filter-function";
+import { SorterService } from "../../../service/sorter.service";
+import { SortItem } from "../../common/sort-item";
+
+export class AreaModelObjectyArray<T> extends AbstractAreaModel<T> {
+
+  protected readonly properties: string[];
+  protected filteredRows: T[];
+  protected sorterService: SorterService = new SorterService();
+
+  constructor(
+    public override areaIdent: AreaIdent,
+    protected readonly rows: T[],
+    public override defaultRowHeight: number,
+    protected override columnDefs: ColumnDefIf[] = []
+  ) {
+    super(areaIdent, columnDefs, defaultRowHeight);
+    this.filteredRows = [...rows];
+    this.properties = columnDefs.map(def => def.property);
+  }
+
+  getRowCount(): number {
+    return this.filteredRows?.length ?? 0;
+  }
+
+  getValueAt(rowIndex: number, columnIndex: number): any {
+    const property = this.properties[columnIndex];
+    let t = this.filteredRows[rowIndex];
+    if (t instanceof TreeRow) {
+      t = t.data;
+    }
+    if (t) {
+      return this.getValueByT(t, property);
+    }
+    return "";
+  }
+
+  getFilteredRows(): T[] {
+    return this.filteredRows;
+  }
+
+  getAllRows(): T[] {
+    return this.rows;
+  }
+
+  getRowHeight(_rowIndex: number): number {
+    return this.defaultRowHeight;
+  }
+
+  override getRowByIndex(rowIndex: number): any {
+    return this.filteredRows[rowIndex];
+  }
+
+  externalFilterChanged(predictFn: FilterFunction<any>): void {
+    this.filteredRows = (this.rows ? this.rows.filter(predictFn) : []);
+  }
+
+  override doSort(sortItems: SortItem[]): boolean {
+    for (const sortItem of sortItems) {
+      const { columnIndex, sortState } = sortItem;
+      const f = sortState === "asc" ? 1 :
+        sortState === "desc" ? -1 : 0;
+      const property = this.properties[columnIndex];
+      this.filteredRows = this.filteredRows.sort(this.genericFlatTableSortComparator(property, f));
+    }
+    return true;
+  }
+
+  getValueByT(t: T, property: string) {
+    if (property.includes(".")) {
+      return this.getPropertyValue(t, property.split("."));
+    }
+    // @ts-ignore
+    return t[property];
+  }
+
+  override changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+    this.arrayMove(this.properties, sourceColumnIndex, targetColumnIndex);
+    super.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+  }
+
+  protected genericFlatTableSortComparator(property: string, f: number) {
+    return (a: T, b: T) => {
+      const va = this.getValueByT(a, property);
+      const vb = this.getValueByT(b, property);
+      return this.sorterService.genericSortComparator(va, vb, f);
+    };
+  }
+
+
+  private getPropertyValue(o: any, props: string[]): any {
+    const prop = props.shift();
+    // @ts-ignore
+    let o2 = o[prop];
+    if (o2 && props.length) {
+      return this.getPropertyValue(o2, props);
+    }
+    return o2;
+  }
+}
+

package/src/lib/table/data/tablemodel/areamodel/area-model-tree.ts

@@ -0,0 +1,215 @@
+import { TreeRow } from "../../common/tree-row";
+import { TreeRowService } from "../../../service/tree-row.service";
+import { AbstractAreaModel } from "./abstract-area-model";
+import { AreaIdent } from "../area-ident.type";
+import { ColumnDefIf } from "../column/column-def.if";
+import { FilterFunction } from "../../common/filter-function";
+import { SorterService } from "../../../service/sorter.service";
+import { SortItem } from "../../common/sort-item";
+
+export class AreaModelTree<S> extends AbstractAreaModel<TreeRow<S>> {
+
+  protected readonly properties: string[];
+  protected sorterService: SorterService = new SorterService();
+
+  private readonly service = new TreeRowService();
+  private filteredFlattenRows: TreeRow<S>[];
+  private flattenRows: TreeRow<S>[];
+  private lastPredictFn?: FilterFunction<any>;
+
+  constructor(
+    public override areaIdent: AreaIdent,
+    public readonly rows: TreeRow<S>[],
+    public override  defaultRowHeight: number,
+    protected override columnDefs: ColumnDefIf[] = []
+  ) {
+    super(areaIdent, columnDefs, defaultRowHeight);
+    this.properties = columnDefs.map(def => def.property);
+    this.flattenRows = this.service.flattenTree(rows);
+    this.filteredFlattenRows = [...this.flattenRows];
+  }
+
+  override changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+    //  not this! this.arrayMove(this.columnDefs...)
+    this.arrayMove(this.properties, sourceColumnIndex, targetColumnIndex);
+    super.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+  }
+
+  recalcVisibleTreeRows() {
+    this.filteredFlattenRows = this.service.flattenTree(this.rows);
+  }
+
+  getFilteredFlattenRows(): TreeRow<S>[] {
+    return this.filteredFlattenRows;
+  }
+
+  getRowCount(): number {
+    let n = 0;
+    for (const r of this.filteredFlattenRows) {
+      if (this.service.isVisible(r)) {
+        n++;
+      }
+    }
+    return n;
+  }
+
+  getValueAt(rowIndex: number, columnIndex: number): any {
+    const row = this.getRowByIndex(rowIndex);
+    if (row) {
+      const prop = this.properties[columnIndex];
+      if (prop) {
+        if (prop.includes(".")) {
+          return this.getPropertyValue(row.data, prop.split("."));
+        }
+        // @ts-ignore
+        return row.data[prop];
+      }
+    }
+    return "";
+  }
+
+  getRowHeight(_rowIndex: number): number {
+    return this.defaultRowHeight;
+  }
+
+  override getCustomClassesAt(rowIndex: number, _columnIndex: number): string[] {
+    const row = this.filteredFlattenRows[rowIndex];
+    return ["ge-table-tree-cell", "ge-table-tree-deep-" + row.deep];
+  }
+
+  override getRowByIndex(idx: number): TreeRow<S> | undefined {
+    return this.filteredFlattenRows[idx];
+  }
+
+  getValueByT(t: S, property: string) {
+    if (property.includes(".")) {
+      return this.getPropertyValue(t, property.split("."));
+    }
+    // @ts-ignore
+    return t[property];
+  }
+
+  externalFilterChanged<S>(predictFn: FilterFunction<S>): void {
+    this.lastPredictFn = predictFn;
+    this.doFiltering();
+  }
+
+  override doSort(sortItems: SortItem[]): boolean {
+    const { columnIndex, sortState } = sortItems[sortItems.length - 1];
+    const f = sortState === "asc" ? 1 :
+      sortState === "desc" ? -1 : 0;
+
+    const property = this.properties[columnIndex];
+    this.treeSort(this.rows, property, f);
+
+    this.flattenRows = this.service.flattenTree(this.rows);
+    this.filteredFlattenRows = [...this.flattenRows];
+    return true;
+  }
+
+  toggleExpandCollapseAll(expanded: boolean) {
+    this.expandAllRecursive(this.rows, expanded);
+
+    this.flattenRows = this.service.flattenTree(this.rows);
+    this.doFiltering();
+  }
+
+  setAllParentsOk(item: TreeRow<any>) {
+    if (item.parent) {
+      item.parent.keep = true;
+      this.setAllParentsOk(item.parent);
+    }
+    return false;
+  }
+
+  override setValue(rowIndex: number, columnIndex: number, value: any): boolean {
+    const editInputPipe = this.columnDefs[columnIndex]?.editInputPipe;
+    if (editInputPipe) {
+      value = editInputPipe(value, rowIndex, columnIndex);
+    }
+    const treeRow: TreeRow<S> | undefined = this.getRowByIndex(rowIndex);
+    if (treeRow) {
+      const row: S = treeRow.data;
+      const property = this.columnDefs[columnIndex].property;
+      if (property.includes(".")) {
+        return this.setPropertyValue(row, property.split("."), value);
+      }
+      // @ts-ignore
+      row[property] = value;
+      return true;
+    }
+    return false;
+  }
+
+  protected genericTreeTableSortComparator(property: string, f: number) {
+    return (a: TreeRow<S>, b: TreeRow<S>) => {
+      const va = this.getValueByT(a.data, property);
+      const vb = this.getValueByT(b.data, property);
+      return this.sorterService.genericSortComparator(va, vb, f);
+    };
+  }
+
+  private expandAllRecursive(arr: TreeRow<S>[], expanded: boolean) {
+    for (const row of arr) {
+      row.expanded = expanded;
+      if (row.children) {
+        this.expandAllRecursive(row.children, expanded);
+      }
+    }
+  }
+
+  private doFiltering() {
+    if (!this.lastPredictFn) {
+      this.filteredFlattenRows = [...(this.flattenRows ? this.flattenRows : [])];
+    } else {
+
+      if (!this.flattenRows) {
+        this.flattenRows = [];
+      }
+
+      let maxDeep = 0;
+      this.flattenRows.forEach(v => {
+        maxDeep = Math.max(maxDeep, v.deep);
+      });
+
+      const okRows = this.flattenRows.filter(
+        (value, index, array) => {
+          // @ts-ignore
+          return this.lastPredictFn(value, index, array);
+        }
+      );
+      this.flattenRows.forEach(v => v.keep = false);
+      this.flattenRows.forEach(v => {
+        if (okRows.includes(v)) {
+          v.keep = true;
+          this.setAllParentsOk(v);
+        }
+      });
+
+      this.filteredFlattenRows = this.flattenRows.filter(
+        (value, _index, _array) => {
+          return value.keep;
+        }
+      );
+    }
+  }
+
+  private getPropertyValue(o: any, props: string[]): any {
+    const prop = props.shift();
+    // @ts-ignore
+    let o2 = o[prop];
+    if (o2 && props.length) {
+      return this.getPropertyValue(o2, props);
+    }
+    return o2;
+  }
+
+  private treeSort(rows: TreeRow<S>[], property: string, f: number) {
+    rows.sort(this.genericTreeTableSortComparator(property, f));
+    for (const row of rows) {
+      if (row.children) {
+        this.treeSort(row.children, property, f);
+      }
+    }
+  }
+}

package/src/lib/table/data/tablemodel/areamodel/area-model.if.ts

@@ -0,0 +1,186 @@
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { CheckedType } from "../../common/checked-type";
+import { CheckboxModelIf } from "../../../checkbox/checkbox-model.if";
+import { FilterFunction } from "../../common/filter-function";
+import { SortItem } from "../../common/sort-item";
+import { AreaIdent } from "../area-ident.type";
+
+/**
+ * This is the model interface for an area model. A table can have three of these models, one for the header,
+ * one for the body , and one for the footer.
+ * An AreaModelIf gives you information about the rows and cell contents.
+ * The column information is given by the TableModelIf.
+ */
+export interface AreaModelIf {
+
+
+  /**
+   * The identifier for one of the areas: header, body, footer.
+   */
+  areaIdent: AreaIdent;
+
+  /**
+   * A model and controller for a row checkbox selection
+   */
+  rowSelectionModel: CheckboxModelIf<any> | undefined;
+
+  /**
+   * Method for moving a column from position sourceColumnIndex to targetColumnIndex.
+   */
+  changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void;
+
+  /**
+   * Method for changing a cell value.
+   */
+  setValue(rowIndex: number, columnIndex: number, value: any): boolean;
+
+  /**
+   * Internally used by TableModel.
+   */
+  init(): void;
+
+  /**
+   * Returns the number of rows of the area
+   */
+  getRowCount(): number;
+
+  /**
+   * Returns the value of the cell at position rowIndex/columnIndex.
+   */
+  getValueAt(rowIndex: number, columnIndex: number): any;
+
+  /**
+   * Returns the value of a colspan of the cell at position rowIndex/columnIndex.
+   * A value below 2 is ignored.
+   */
+  getColspanAt(rowIndex: number, columnIndex: number): number;
+
+  /**
+   * This return value is internally used to optimize the render performance.
+   * Set this value to the lowest possible value. If the model has no colspan,
+   * a value of 0 would be good. The dafault is 32. If your model has a colspan
+   * cell greater 32, don't forget to increase this value.
+   */
+  getMaxColspan(): number;
+
+  /**
+   * Returns the value of a rowspan of the cell at position rowIndex/columnIndex.
+   * A value below 2 is ignored.
+   */
+  getRowspanAt(rowIndex: number, columnIndex: number): number;
+
+  /**
+   * This return value is internally used to optimize the render performance.
+   * Set this value to the lowest possible value. If the model has no rowspan,
+   * a value of 0 would be good. The dafault is 32. If your model has a rowspan
+   * cell greater 32, don't forget to increase this value.
+   */
+  getMaxRowspan(): number;
+
+  /**
+   * This method can be used to return a list of css classes for the given cell
+   * @param rowIndex row index of the cell
+   * @param columnIndex column index of the cell
+   */
+  getCustomClassesAt(rowIndex: number, columnIndex: number): string[];
+
+  /**
+   * This method can be used to return an object with css style information for the given cell
+   * @param rowIndex row index of the cell
+   * @param columnIndex column index of the cell
+   */
+  getCustomStyleAt(rowIndex: number, columnIndex: number): { [key: string]: string } | undefined;
+
+  /**
+   * Returns the cell value of the given cell. This value will be rendered
+   * directly in the cell or rendered by a cell renderer: see {@link getCellRenderer}.
+   * @param rowIndex
+   * @param columnIndex
+   */
+  getValueAt(rowIndex: number, columnIndex: number): any;
+
+  /**
+   * Returns the value of a tooltip of the given cell (rowIndex/columnIndex).
+   * @param rowIndex
+   * @param columnIndex
+   */
+  getTooltipAt(rowIndex: number, columnIndex: number): any;
+
+  /**
+   * Returns a cell renderer class for the given cell (rowIndex/columnIndex).
+   * If the return value is undefined, no renderer is used and the model value will be rendered directly in the cell.
+   * @param rowIndex
+   * @param columnIndex
+   */
+  getCellRenderer(rowIndex: number, columnIndex: number): CellRendererIf | undefined;
+
+  /**
+   * Returns the row height in pixel of the given row (rowIndex).
+   * @param rowIndex
+   */
+  getRowHeight(rowIndex: number): number;
+
+  /**
+   * Returns the row of the model, which correspond to the rowIndex.
+   * @param rowIndex
+   */
+  getRowByIndex(rowIndex: number): any;
+
+  /**
+   * Return the y-position in pixel of the top of the row on the scrollpane.
+   * For big tables it can be a big value (greate than the height of the viewport).
+   * @param rowIndex
+   */
+  getYPosByRowIndex(rowIndex: number): number;
+
+  /**
+   * If this method returns true, the cell can be edited by the user.
+   * @param rowIndex
+   * @param columnIndex
+   */
+  isEditable(rowIndex: number, columnIndex: number): boolean;
+
+  /**
+   * If true, the cell is selectable.
+   * @param rowIndex
+   * @param columnIndex
+   */
+  isSelectable(rowIndex: number, columnIndex: number): boolean;
+
+  /**
+   * If true, the row is checkable and a checkbox is rendered at the beginning of the row.
+   * @param rowIndex
+   */
+  isRowCheckable(rowIndex: number): boolean;
+
+  /**
+   * Returns the checked state of an row.
+   * @param rowIndex
+   */
+  isRowChecked(rowIndex: number): CheckedType | undefined;
+
+  /**
+   * Set the checked state of the row (rowIndex) to #checked.
+   * @param rowIndex
+   * @param checked
+   */
+  setRowChecked(rowIndex: number, checked: boolean): void;
+
+  /**
+   * If true, the table is filterable. Rows can be filtered with help of {@link #externalFilterChanged()}
+   */
+  isFilterable(): boolean;
+
+  /**
+   * Will be called internally, when a filtering is trigger.
+   * @param predictFn Defines, what row are invisible or visible after filtering.
+   */
+  externalFilterChanged<T>(predictFn: FilterFunction<T>): void;
+
+  /**
+   * If the 'restore sort' option is set (see), this method will be triggered automatically by the table,
+   * @param sortItems
+   */
+  doSort(sortItems: SortItem[]): boolean;
+}
+