@guiexpert/demo-table-models 1.0.9 → 1.0.11

package/src/lib/createSimplePersonModel.ts

@@ -0,0 +1,265 @@
+import {
+  AreaObjectMap,
+  CellRendererIf,
+  ColumnDef,
+  ColumnDefIf,
+  px100,
+  px120,
+  px150,
+  px250,
+  px300,
+  TableFactory,
+  TableModelIf,
+  TableOptions,
+  TableOptionsIf
+} from "@guiexpert/table";
+
+export interface SimplePersonIf {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  gender: string;
+  ipAddress: string;
+}
+
+export function createTableRows(): SimplePersonIf[] {
+  return [
+    {
+      "id": 1,
+      "firstName": "Mirilla",
+      "lastName": "Reide",
+      "email": "mreide0@tripod.com",
+      "gender": "Female",
+      "ipAddress": "84.193.221.115"
+    },
+    {
+      "id": 2,
+      "firstName": "Lexie",
+      "lastName": "Ouldcott",
+      "email": "louldcott1@yahoo.co.jp",
+      "gender": "Female",
+      "ipAddress": "179.69.88.24"
+    },
+    {
+      "id": 3,
+      "firstName": "Muffin",
+      "lastName": "Lisett",
+      "email": "mlisett2@aboutads.info",
+      "gender": "Female",
+      "ipAddress": "86.37.98.14"
+    },
+    {
+      "id": 4,
+      "firstName": "Gertrudis",
+      "lastName": "Mandrey",
+      "email": "gmandrey3@nbcnews.com",
+      "gender": "Genderfluid",
+      "ipAddress": "15.39.203.38"
+    },
+    {
+      "id": 5,
+      "firstName": "Marlee",
+      "lastName": "Russam",
+      "email": "mrussam4@deliciousdays.com",
+      "gender": "Agender",
+      "ipAddress": "132.38.90.220"
+    },
+    {
+      "id": 6,
+      "firstName": "Romona",
+      "lastName": "Winnett",
+      "email": "rwinnett5@independent.co.uk",
+      "gender": "Female",
+      "ipAddress": "40.56.254.111"
+    },
+    {
+      "id": 7,
+      "firstName": "Hillary",
+      "lastName": "Cranney",
+      "email": "hcranney6@washington.edu",
+      "gender": "Male",
+      "ipAddress": "45.51.211.4"
+    },
+    {
+      "id": 8,
+      "firstName": "Pat",
+      "lastName": "Ribbon",
+      "email": "pribbon7@tiny.cc",
+      "gender": "Male",
+      "ipAddress": "182.47.199.240"
+    },
+    {
+      "id": 9,
+      "firstName": "Linzy",
+      "lastName": "Olensby",
+      "email": "lolensby8@free.fr",
+      "gender": "Female",
+      "ipAddress": "99.184.96.163"
+    },
+    {
+      "id": 10,
+      "firstName": "Garold",
+      "lastName": "Jocic",
+      "email": "gjocic9@ocn.ne.jp",
+      "gender": "Male",
+      "ipAddress": "11.10.161.248"
+    },
+    {
+      "id": 11,
+      "firstName": "Jemie",
+      "lastName": "O' Shea",
+      "email": "josheaa@acquirethisname.com",
+      "gender": "Genderfluid",
+      "ipAddress": "212.229.101.149"
+    },
+    {
+      "id": 12,
+      "firstName": "Shandeigh",
+      "lastName": "Umbers",
+      "email": "sumbersb@google.ca",
+      "gender": "Female",
+      "ipAddress": "156.118.216.80"
+    },
+    {
+      "id": 13,
+      "firstName": "Rosamond",
+      "lastName": "Bulluck",
+      "email": "rbulluckc@imageshack.us",
+      "gender": "Female",
+      "ipAddress": "97.45.97.187"
+    },
+    {
+      "id": 14,
+      "firstName": "Elfie",
+      "lastName": "Keelin",
+      "email": "ekeelind@desdev.cn",
+      "gender": "Female",
+      "ipAddress": "105.68.243.40"
+    },
+    {
+      "id": 15,
+      "firstName": "Georges",
+      "lastName": "Talbot",
+      "email": "gtalbote@cnn.com",
+      "gender": "Male",
+      "ipAddress": "58.24.213.107"
+    },
+    {
+      "id": 16,
+      "firstName": "Alard",
+      "lastName": "McGrane",
+      "email": "amcgranef@adobe.com",
+      "gender": "Male",
+      "ipAddress": "100.71.86.142"
+    },
+    {
+      "id": 17,
+      "firstName": "Emmanuel",
+      "lastName": "Chave",
+      "email": "echaveg@washington.edu",
+      "gender": "Male",
+      "ipAddress": "81.77.217.55"
+    },
+    {
+      "id": 18,
+      "firstName": "Tobie",
+      "lastName": "Passie",
+      "email": "tpassieh@tripod.com",
+      "gender": "Male",
+      "ipAddress": "201.217.85.157"
+    },
+    {
+      "id": 19,
+      "firstName": "Nappie",
+      "lastName": "Ridge",
+      "email": "nridgei@wordpress.org",
+      "gender": "Male",
+      "ipAddress": "35.13.53.11"
+    },
+    {
+      "id": 20,
+      "firstName": "Meredeth",
+      "lastName": "Siviter",
+      "email": "msiviterj@google.com.hk",
+      "gender": "Male",
+      "ipAddress": "253.119.92.236"
+    },
+    {
+      "id": 21,
+      "firstName": "Abra",
+      "lastName": "Hysom",
+      "email": "ahysomk@123-reg.co.uk",
+      "gender": "Female",
+      "ipAddress": "119.247.49.190"
+    },
+    {
+      "id": 22,
+      "firstName": "Merwin",
+      "lastName": "Leele",
+      "email": "mleelel@blogtalkradio.com",
+      "gender": "Male",
+      "ipAddress": "170.61.225.163"
+    }
+  ];
+}
+
+export function createColumnDefs(): ColumnDefIf[] {
+  return [
+    new ColumnDef("firstName", "First Name", px120),
+    new ColumnDef("lastName", "Last Name"),
+
+    ColumnDef.create({
+      property: "gender",
+      headerLabel: "Gender",
+      width: px100,
+      bodyClasses: ["ge-table-text-align-left"]
+    }),
+
+    ColumnDef.create({
+      property: "email",
+      headerLabel: "Email",
+      width: px300,
+      bodyClasses: ["ge-table-text-align-left"]
+    }),
+
+    new ColumnDef("ipAddress", "IP", px150),
+
+    ColumnDef.create({
+      property: "id",
+      headerLabel: "ID",
+      width: px250,
+      // bodyRenderer: actionRenderer,
+      bodyClasses: ["ge-table-text-align-left"]
+    })
+  ];
+}
+
+export function createTableOptions(): TableOptions {
+  const tableOptions: TableOptionsIf = {
+    ...new TableOptions(),
+    hoverColumnVisible: false,
+    defaultRowHeights: {
+      header: 40,
+      body: 34,
+      footer: 0
+    }
+  };
+  return tableOptions;
+}
+
+export function createSimplePersonModel(): TableModelIf {
+  const tableOptions = createTableOptions();
+  const rows: SimplePersonIf[] = createTableRows();
+  const columnDefs: ColumnDefIf[] = createColumnDefs();
+  return TableFactory.createTableModel({
+    rows,
+    columnDefs,
+    tableOptions,
+    fixedLeftColumnCount: 0
+  });
+}
+
+export function applyBodyRenderer(columnDef: ColumnDefIf, bodyRenderer: CellRendererIf) {
+  columnDef.rendererMap = new AreaObjectMap<CellRendererIf>(undefined, bodyRenderer, undefined);
+}

package/src/lib/createTimeTableModel.ts

@@ -0,0 +1,353 @@
+import {
+  AreaModelArrayOfArrays,
+  AreaModelObjectArrayWithColumndefs,
+  ColumnDef,
+  ColumnDefIf,
+  DateToTecCellRenderer,
+  Size,
+  TableFactory,
+  TableModelIf,
+  TableOptions,
+  TrueFalseCellRenderer
+} from "@guiexpert/table";
+
+
+export interface TeamIf {
+  name: string,
+  active: boolean
+}
+
+export interface TeamDataIf {
+  id?: number,
+  city?: string,
+  location?: string,
+  team?: TeamIf,
+  data?: [number, number, number, number, number, number, number, number, number, number, number, number],
+  updatedAt?: Date,
+}
+
+export const data: TeamDataIf[] = (
+  [
+    {
+      id: 1,
+      city: "London",
+      location: "Building A",
+      team: { name: "Team LAA", active: true },
+      data: [123, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 2,
+      city: "London",
+      location: "Building A",
+      team: { name: "Team LAB", active: true },
+      data: [0, 432, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 3,
+      city: "London",
+      location: "Building A",
+      team: { name: "Team LAC", active: false },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 4,
+      city: "London",
+      location: "Building A",
+      team: { name: "Team LAD", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 5,
+      city: "London",
+      location: "Building B",
+      team: { name: "Team LBA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 6,
+      city: "London",
+      location: "Building B",
+      team: { name: "Team LBB", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 7,
+      city: "London",
+      location: "Building B",
+      team: { name: "Team LBC", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 8,
+      city: "New York",
+      location: "Building A",
+      team: { name: "Team NAA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 9,
+      city: "New York",
+      location: "Building A",
+      team: { name: "Team NAB", active: false },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 10,
+      city: "New York",
+      location: "Building A",
+      team: { name: "Team NAC", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 11,
+      city: "New York",
+      location: "Building A",
+      team: { name: "Team NAD", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 12,
+      city: "New York",
+      location: "Building B",
+      team: { name: "Team NBA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 13,
+      city: "New York",
+      location: "Building B",
+      team: { name: "Team NBB", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 14,
+      city: "New York",
+      location: "Building B",
+      team: { name: "Team NBC", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 15,
+      city: "Tokio",
+      location: "Building A",
+      team: { name: "Team TAA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 16,
+      city: "Tokio",
+      location: "Building A",
+      team: { name: "Team TAB", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 17,
+      city: "Tokio",
+      location: "Building B",
+      team: { name: "Team TBA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 18,
+      city: "Tokio",
+      location: "Building B",
+      team: { name: "Team TBB", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 19,
+      city: "Tokio",
+      location: "Building C",
+      team: { name: "Team TCA", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 20,
+      city: "Tokio",
+      location: "Building C",
+      team: { name: "Team TCB", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
+    {
+      id: 21,
+      city: "Tokio",
+      location: "Building C",
+      team: { name: "Team TCC", active: true },
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    }
+  ] as TeamDataIf[])
+  .map(r => {
+    r.updatedAt = new Date();
+    return r;
+  });
+
+/*
+export function createTreeTableRows(): TreeRow<TeamDataIf>[] {
+  const rows = data
+    .map(r => new TreeRow<TeamDataIf>(r, true, [], undefined));
+  const ret: TreeRow<TeamDataIf>[] = [];
+
+  const map = {};
+  for (const r of rows) {
+    const key = r.data.city;
+    // @ts-ignore
+    if (!map[key]) map[key] = [];
+    // @ts-ignore
+    map[key] = r;
+  }
+  for (const mapKey in map) {
+    // @ts-ignore
+    const tr = new TreeRow({ city: mapKey }, true, map[mapKey], undefined);
+    ret.push(tr);
+  }
+
+  return ret;
+}
+*/
+const columnDefs: ColumnDefIf[] = [
+  new ColumnDef("city", "City", new Size(90, "px")),
+  new ColumnDef("location", "Location", new Size(100, "px")),
+  new ColumnDef("team.name", "Team", new Size(100, "px")),
+  ColumnDef.create({
+    property: "team.active",
+    headerLabel: "Active",
+    width: new Size(60, "px"),
+    bodyRenderer: new TrueFalseCellRenderer()
+  }),
+  new ColumnDef("data.0", "00", new Size(60, "px")),
+  new ColumnDef("data.1", "15", new Size(60, "px")),
+  new ColumnDef("data.2", "30", new Size(60, "px")),
+  new ColumnDef("data.3", "45", new Size(60, "px")),
+  new ColumnDef("data.4", "00", new Size(60, "px")),
+  new ColumnDef("data.5", "15", new Size(60, "px")),
+  new ColumnDef("data.6", "30", new Size(60, "px")),
+  new ColumnDef("data.7", "45", new Size(60, "px")),
+  new ColumnDef("data.8", "00", new Size(60, "px")),
+  new ColumnDef("data.9", "15", new Size(60, "px")),
+  new ColumnDef("data.10", "30", new Size(60, "px")),
+  new ColumnDef("data.11", "45", new Size(60, "px")),
+  ColumnDef.create({
+    property: "updatedAt",
+    headerLabel: "Updated at",
+    width: new Size(175, "px"),
+    bodyRenderer: new DateToTecCellRenderer()
+  })
+];
+export const COL_IDX_UPDATED_AT = columnDefs.length - 1;
+
+export const tableOptions = {
+  ...new TableOptions(),
+  hoverRowVisible: false,
+  hoverColumnVisible: false,
+  defaultRowHeights: {
+    header: 34,
+    body: 34,
+    footer: 34
+  },
+  columnsDraggable: false,
+  columnsResizable: true
+};
+
+export function createTimeTableModel(): TableModelIf {
+
+
+  const defaultRowHeights = tableOptions.defaultRowHeights;
+  return TableFactory.createTableModel({
+    headerAreaModel: new TimeTableHeaderModel(defaultRowHeights.header),
+    bodyAreaModel: new TimeTableBodyModel(defaultRowHeights.body),
+    footerAreaModel: new TimeTableFooterModel(defaultRowHeights.footer),
+    columnDefs,
+    fixedLeftColumnCount: 2,
+    fixedRightColumnCount: 1,
+    defaultRowHeights,
+    columnCount: columnDefs.length
+  });
+}
+
+class TimeTableBodyModel extends AreaModelObjectArrayWithColumndefs<TeamDataIf> {
+  constructor(rowHeight: number) {
+    super("body", data, columnDefs, rowHeight);
+  }
+
+  override getRowspanAt(rowIndex: number, columnIndex: number): number {
+    if (columnIndex === 0 || columnIndex == 1) {
+      const v = this.getValueAt(rowIndex, columnIndex);
+      if (rowIndex === 0 || v !== this.getValueAt(rowIndex - 1, columnIndex)) {
+        return this.countNextWithValue(rowIndex, columnIndex, v);
+      }
+    }
+    return 1;
+  }
+
+  private countNextWithValue(rowIndex: number, columnIndex: number, value: any): number {
+    let ret = 1;
+    while (value === this.getValueAt(rowIndex + ret, columnIndex)) {
+      ret++;
+    }
+    return ret;
+  }
+}
+
+class TimeTableHeaderModel extends AreaModelArrayOfArrays<string> {
+  constructor(rowHeight: number) {
+    super(
+      "header",
+      [
+        ["City", "Location", "Team", "", "08:00 - 09:00", "", "", "", "09:00 - 10:00", "", "", "", "10:00 - 11:00", "", "", "", "Updated At"],
+        ["", "", "Name", "Active", "00", "15", "30", "45", "00", "15", "30", "45", "00", "15", "30", "45", ""]
+      ],
+      rowHeight
+    );
+  }
+
+  override getColspanAt(rowIndex: number, columnIndex: number): number {
+    if (rowIndex === 0) {
+      if (columnIndex === 2 || columnIndex === 2) {
+        return 2;
+      }
+      if (columnIndex === 4 || columnIndex === 8 || columnIndex === 12) {
+        return 4;
+      }
+    }
+    return 1;
+  }
+
+  override getRowspanAt(rowIndex: number, columnIndex: number): number {
+    if (rowIndex === 0) {
+      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 16) {
+        return 2;
+      }
+    }
+    return 1;
+  }
+
+  override getCustomClassesAt(_rowIndex: number, _columnIndex: number): string[] {
+    return ["ge-font-weight-bold"];
+  }
+}
+
+
+class TimeTableFooterModel extends AreaModelArrayOfArrays<string> {
+  constructor(rowHeight: number) {
+    super(
+      "footer",
+      [["", "", "Sum of Quarters:", "", "123", "432", "", "", "", "", "", "", "", "", "", "", ""]],
+      rowHeight
+    );
+  }
+
+  override getColspanAt(_rowIndex: number, columnIndex: number): number {
+    if (columnIndex == 0 || columnIndex == 2) {
+      return 2;
+    }
+    return 1;
+  }
+
+
+  override getCustomClassesAt(_rowIndex: number, columnIndex: number): string[] {
+    if (columnIndex === 2) return ["ge-text-align-right", "ge-font-weight-bold"];
+    return [];
+  }
+
+}
+