@guiexpert/table 0.0.2 → 1.0.2

package/src/lib/table/data/options/tree-options.if.ts

@@ -0,0 +1,10 @@
+import { IconIf } from "./icon.if";
+
+export interface TreeOptionsIf {
+
+  arrowExpandCollapseAll: IconIf;
+  arrowExpanded: IconIf;
+  arrowCollapsed: IconIf;
+  arrowPlaceholder: IconIf;
+
+}

package/src/lib/table/data/options/tree-options.ts

@@ -0,0 +1,32 @@
+import { IconIf } from "./icon.if";
+import { TreeOptionsIf } from "./tree-options.if";
+import { Icon } from "./icon";
+
+export class TreeOptions implements TreeOptionsIf {
+
+  constructor(
+    public arrowExpanded: IconIf = new Icon(
+      ">",
+      "transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",
+      ["gt-table-tree-arrow-expanded"]
+    ),
+    public arrowCollapsed: IconIf = new Icon(
+      ">",
+      "",
+      ["ge-table-tree-arrow-collapsed"]
+    ),
+    public arrowPlaceholder: IconIf = new Icon(
+      ">",
+      "color:transparent;",
+      ["gt-table-tree-arrow-hidden"]
+    ),
+    public arrowExpandCollapseAll: IconIf = new Icon(
+      "↕",
+      "",
+      ["gt-table-tree-arrow-expanded-all"]
+    )
+  ) {
+  }
+
+
+}

package/src/lib/table/data/table-model-and-options.if.ts

@@ -0,0 +1,8 @@
+import { TableModelIf } from "./tablemodel/table-model.if";
+import { TableOptions } from "./options/table-options";
+
+
+export interface TableModelAndOptionsIf {
+  tableModel: TableModelIf;
+  tableOptions: TableOptions;
+}

package/src/lib/table/data/table-model-and-options.ts

@@ -0,0 +1,13 @@
+
+import { TableModelAndOptionsIf } from "./table-model-and-options.if";
+import { TableModelIf } from "./tablemodel/table-model.if";
+import { TableOptions } from "./options/table-options";
+
+
+export class TableModelAndOptions implements TableModelAndOptionsIf {
+  constructor(
+    public tableModel: TableModelIf,
+    public tableOptions: TableOptions
+  ) {
+  }
+}

package/src/lib/table/data/tablemodel/area-ident.type.ts

@@ -0,0 +1,18 @@
+/**
+ * The AreaIdent is an identifier for the three areas : header, boder, and footer.
+ */
+export type AreaIdent = "header" | "body" | "footer";
+
+/**
+ * Converts a string to the identifier of type AreaIdent.
+ * @param s should be "header"|"body"|"footer". The fallback return value is 'body'
+ */
+export const getAreaIdentByString = (s: string | null): AreaIdent => {
+  if (s === "header") {
+    return "header";
+  }
+  if (s === "footer") {
+    return "footer";
+  }
+  return "body";
+};

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

@@ -0,0 +1,183 @@
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { AreaModelIf } from "./area-model.if";
+import { CheckedType } from "../../common/checked-type";
+import { ColumnDefIf } from "../column/column-def.if";
+import { AreaIdent } from "../area-ident.type";
+import { CheckboxModelIf } from "../../../checkbox/checkbox-model.if";
+import { FilterFunction } from "../../common/filter-function";
+import { SortItem } from "../../common/sort-item";
+import { HasDefaultRowHeightIf } from "./has-default-row-height-if";
+
+
+export abstract class AbstractAreaModel<T> implements AreaModelIf, HasDefaultRowHeightIf {
+
+  public rowSelectionModel: CheckboxModelIf<any> | undefined = undefined;
+  protected cellRenderers: (CellRendererIf | undefined)[];
+  protected yPositions: number[] = [];
+
+  constructor(
+    public areaIdent: AreaIdent,
+    protected columnDefs: ColumnDefIf[] = [],
+    public defaultRowHeight: number = -1
+  ) {
+    this.cellRenderers = columnDefs.map(def => def.rendererMap[areaIdent]);
+  }
+
+
+  abstract getRowCount(): number;
+
+  abstract getValueAt(rowIndex: number, columnIndex: number): any;
+
+  getTooltipAt(_rowIndex: number, _columnIndex: number): any {
+    return "";
+  };
+
+  abstract getRowHeight(rowIndex: number): number;
+
+  getCellRenderer(_rowIndex: number, columnIndex: number): CellRendererIf | undefined {
+    if (columnIndex < this.cellRenderers.length) {
+      return this.cellRenderers[columnIndex];
+    }
+    return undefined;
+  }
+
+  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(_rowIndex: number): any {
+    return undefined;
+  }
+
+  isRowCheckable(_rowIndex: number): boolean {
+    return true;
+  }
+
+  isRowChecked(rowIndex: number): CheckedType | undefined {
+    const row = this.getRowByIndex(rowIndex);
+    return this.rowSelectionModel?.isRowChecked(row);
+  }
+
+  setRowChecked(rowIndex: number, checked: boolean): void {
+    if (this.rowSelectionModel) {
+      const row = this.getRowByIndex(rowIndex);
+      this.rowSelectionModel.checkRow(row, checked);
+    }
+  }
+
+  getMaxColspan(): number {
+    return 31;
+  }
+
+  getMaxRowspan(): number {
+    return 31;
+  }
+
+
+  getYPosByRowIndex(rowIndex: number): number {
+    if (this.defaultRowHeight > 0) {
+      return this.defaultRowHeight * rowIndex;
+    }
+    return this.yPositions[rowIndex];
+  }
+
+
+  init() {
+    if (!this.yPositions.length && this.getRowCount() !== undefined) {
+      if (this.defaultRowHeight === -1) {
+        this.calcYPositions();
+      }
+    }
+  }
+
+  abstract externalFilterChanged<T>(predictFn: FilterFunction<T>): void ;
+
+  isFilterable(): boolean {
+    return this.areaIdent === "body";
+  }
+
+  doSort(_sortItems: SortItem[]): boolean {
+    // do nothing
+    return false;
+  }
+
+  isEditable(_rowIndex: number, columnIndex: number): boolean {
+    if (this.columnDefs
+      && columnIndex < this.columnDefs.length
+      && this.columnDefs[columnIndex].editable) {
+      // @ts-ignore
+      return this.columnDefs[columnIndex].editable();
+    }
+    return false;
+  }
+
+  setValue(rowIndex: number, columnIndex: number, value: any): boolean {
+    const editInputPipe = this.columnDefs[columnIndex]?.editInputPipe;
+    if (editInputPipe) {
+      value = editInputPipe(value, rowIndex, columnIndex);
+    }
+    const row: T = this.getRowByIndex(rowIndex);
+    const property = this.columnDefs[columnIndex].property;
+    if (property.includes(".")) {
+      return this.setPropertyValue(row, property.split("."), value);
+    }
+    // @ts-ignore
+    row[property] = value;
+    return true;
+  }
+
+  isSelectable(_rowIndex: number, _columnIndex: number): boolean {
+    return true;
+  }
+
+  changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+    //  not this! this.arrayMove(this.columnDefs...)
+    this.arrayMove(this.cellRenderers, sourceColumnIndex, targetColumnIndex);
+  }
+
+  protected setPropertyValue(o: any, props: string[], value: any): boolean {
+    const prop = props.shift();
+    if (prop) {
+      // @ts-ignore
+      let o2 = o[prop];
+      if (o2 && props.length) {
+        return this.setPropertyValue(o2, props, value);
+
+      } else {
+        o[prop] = value;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  protected arrayMove(arr: any[], fromIndex: number, toIndex: number) {
+    const element = arr.splice(fromIndex, 1)[0];
+    arr.splice(toIndex, 0, element);
+    return arr;
+  }
+
+  private calcYPositions() {
+    const rowCount = this.getRowCount();
+    this.yPositions = new Array(rowCount + 1);
+    this.yPositions[0] = 0;
+    for (let i = 0; i < rowCount; i++) {
+      this.yPositions[i + 1] = this.getRowHeight(i) + this.yPositions[i];
+    }
+  }
+
+}
+
+

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

@@ -0,0 +1,59 @@
+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";
+
+export class AreaModelArrayOfArrays<T> extends AbstractAreaModel<T[][]> {
+
+  public filteredArr: T[][];
+
+  constructor(
+    public override areaIdent: AreaIdent,
+    public readonly arr: T[][],
+    public override defaultRowHeight: number,
+    protected override columnDefs: ColumnDefIf[] = []
+  ) {
+    super(areaIdent, columnDefs, defaultRowHeight);
+    this.filteredArr = [...arr];
+  }
+
+  externalFilterChanged(predictFn: FilterFunction<any>): void {
+    this.filteredArr = this.arr ? this.arr.filter(predictFn) : [];
+  }
+
+  getRowCount(): number {
+    if (this.filteredArr) {
+      return this.filteredArr.length;
+    }
+    return 0;
+  }
+
+  getValueAt(rowIndex: number, columnIndex: number): any {
+    return this.filteredArr[rowIndex][columnIndex];
+  }
+
+  override setValue(rowIndex: number, columnIndex: number, value: any): boolean {
+    const editInputPipe = this.columnDefs[columnIndex]?.editInputPipe;
+    if (editInputPipe) {
+      value = editInputPipe(value, rowIndex, columnIndex);
+    }
+    this.arr[rowIndex][columnIndex] = value;
+    return true;
+  }
+
+  override getRowByIndex(rowIndex: number): any {
+    return this.filteredArr[rowIndex];
+  }
+
+  getRowHeight(_rowIndex: number): number {
+    return this.defaultRowHeight;
+  }
+
+  override changeColumnOrder(sourceColumnIndex: number, targetColumnIndex: number): void {
+    this.filteredArr.forEach(row => this.arrayMove(row, sourceColumnIndex, targetColumnIndex));
+    super.changeColumnOrder(sourceColumnIndex, targetColumnIndex);
+  }
+
+
+}
+

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

@@ -0,0 +1,210 @@
+import { AreaIdent } from "../area-ident.type";
+import { ColumnDefIf } from "../column/column-def.if";
+import { AreaModelIf } from "./area-model.if";
+import { CellGroupIf } from "../cellgroup/cell-group.if";
+import { CheckboxModelIf } from "../../../checkbox/checkbox-model.if";
+import { SortItem } from "../../common/sort-item";
+import { FilterFunction } from "../../common/filter-function";
+import { CellRendererIf } from "../../../renderer/cell-render.if";
+import { CheckedType } from "../../common/checked-type";
+import { CellgroupFactory } from "../cellgroup/cellgroup-factory";
+import { CellGroupExt } from "../cellgroup/cell-group-ext";
+import { CellGroupExtCellRenderer } from "../../../renderer/cell-group-ext-cell-renderer";
+
+// TODO next steps:   fix this model
+export class AreaModelCellGroups implements AreaModelIf {
+
+  public gammaCells = true;
+
+  public rowSelectionModel: CheckboxModelIf<any> | undefined;
+  public readonly arr: (CellGroupExt | null | undefined)[][];
+
+  private groupExts: CellGroupExt[] = [];
+  private cellGroupExtCellRenderer = new CellGroupExtCellRenderer();
+
+  constructor(
+    public readonly areaIdent: AreaIdent = "header",
+    public readonly groups: CellGroupIf[],
+    public readonly columnDefs: ColumnDefIf[] = [],
+    public readonly defaultRowHeight: number
+  ) {
+    this.groupExts = CellgroupFactory.buildGroupExts(groups);
+    console.info(this.groupExts);
+    console.info(this.getAllLeafs());
+    console.info(this.getMaxRowCount());
+    for (const g of this.groupExts) {
+      g.log(this.getMaxRowCount());
+      //console.info(g.getAllRowCounts(g));
+    }
+    this.arr = this.buildArray();
+
+    if (!this.columnDefs?.length && areaIdent === "header") {
+      this.columnDefs = CellgroupFactory.buildColumnDefs(groups);
+    }
+    console.info('this.columnDefs', this.columnDefs);
+    console.info('this.arr', this.arr);
+  }
+
+  getAllLeafs(): CellGroupExt[] {
+    const flatten = CellgroupFactory.flattenGroupExts(this.groupExts);
+    return flatten.filter(ge => !ge.children);
+  }
+
+  getMaxRowCount(): number {
+    const allLeafs = this.getAllLeafs();
+    if (allLeafs?.length) {
+      return 1 + Math.max(...allLeafs.map(c => c.getParentCount(c)));
+    }
+    return 0;
+  }
+
+  buildArray(): (CellGroupExt | null | undefined)[][] {
+    console.info("");
+    let flatten = CellgroupFactory.flattenGroupExts(this.groupExts);
+    // console.info("flat", flatten);
+
+    const maxCol = flatten.length;
+    const maxRow = 1 + Math.max(...flatten.map(c => c.rowIndex));
+    console.info("max  row/col:", maxRow + "/" + maxCol);
+
+    const sb: string[] = [];
+    CellgroupFactory.iterateThrowColumns(sb, this.groupExts);
+    console.info(sb);
+
+    const arrs = Array.from(Array(maxRow).keys()).map((_r) => []);
+    let ret = CellgroupFactory.buildArrayOfArrays(flatten, arrs);
+    console.table(ret);
+
+    /*
+
+Gold                                                Hohenwarte
+Gold AB              Gold CD                        HOH AB                      HOH CD
+Gold A     Gold B    Gold C   Gold D    Gold Sum    HOH Loc    HOH A    HOH B   HOH C    HOH D
+
+*/
+    return ret;
+  }
+
+  changeColumnOrder(_sourceColumnIndex: number, _targetColumnIndex: number): void {
+    // skip
+  }
+
+  doSort(_sortItems: SortItem[]): boolean {
+    return false;
+  }
+
+  externalFilterChanged<T>(_predictFn: FilterFunction<T>): void {
+    // skip
+  }
+
+  getCellRenderer(_rowIndex: number, _columnIndex: number): CellRendererIf | undefined {
+    return this.cellGroupExtCellRenderer;
+  }
+
+  getColspanAt(rowIndex: number, columnIndex: number): number {
+    // let ret = 1;
+    //
+    // if (this.getValueAt(rowIndex, columnIndex)){
+    //   const maxCol = this.arr[0].length;
+    //   while (ret< maxCol && this.getValueAt(rowIndex, columnIndex + ret)===null){
+    //     ret++;
+    //   }
+    // }
+    // return ret;
+
+    const val = this.getValueAt(rowIndex, columnIndex);
+    if (val) {
+      return val.getColumnCount();
+    }
+    return 0;
+  }
+
+  getCustomClassesAt(_rowIndex: number, _columnIndex: number): string[] {
+    return [];
+  }
+
+  getCustomStyleAt(_rowIndex: number, _columnIndex: number): { [p: string]: string } | undefined {
+    return undefined;
+  }
+
+  getMaxColspan(): number {
+    return 12;
+  }
+
+  getMaxRowspan(): number {
+    return 12;
+  }
+
+  getRowByIndex(_rowIndex: number): any {
+    return undefined;
+  }
+
+  getRowCount(): number {
+    if (this.arr) {
+      return this.arr.length;
+    }
+    return 0;
+  }
+
+
+  getRowspanAt(rowIndex: number, columnIndex: number): number {
+    // TODO
+    const cge: CellGroupExt | null | undefined = this.getValueAt(rowIndex, columnIndex);
+    if (cge){
+      const maxRowCount = this.getRowCount();
+      return cge.getRowSpan(cge, maxRowCount);
+    }
+    return 0;
+  }
+
+  getTooltipAt(_rowIndex: number, _columnIndex: number): any {
+    // TODO
+    return "";
+  }
+
+  getValueAt(rowIndex: number, columnIndex: number): any {
+    return this.arr[rowIndex][columnIndex];
+  }
+
+  getYPosByRowIndex(_rowIndex: number): number {
+    // TODO
+    return 0;
+  }
+
+
+  init(): void {
+  }
+
+  getRowHeight(_rowIndex: number): number {
+    return this.defaultRowHeight;
+  }
+
+  isEditable(_rowIndex: number, _columnIndex: number): boolean {
+    return false;
+  }
+
+  isFilterable(): boolean {
+    return false;
+  }
+
+  isRowCheckable(_rowIndex: number): boolean {
+    return false;
+  }
+
+  isRowChecked(_rowIndex: number): CheckedType | undefined {
+    return undefined;
+  }
+
+  isSelectable(_rowIndex: number, _columnIndex: number): boolean {
+    return false;
+  }
+
+  setRowChecked(_rowIndex: number, _checked: boolean): void {
+    // skipped
+  }
+
+  setValue(_rowIndex: number, _columnIndex: number, _value: any): boolean {
+    return false;
+  }
+
+}

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
+    );
+  }
+
+}
+