@linzjs/step-ag-grid 1.1.1

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -0,0 +1,22 @@
+import { ICellRendererParams } from "ag-grid-community";
+import { useContext } from "react";
+import { UpdatingContext } from "../../contexts/UpdatingContext";
+import { GridLoadableCell } from "../GridLoadableCell";
+import { LuiIcon } from "@linzjs/lui";
+
+export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
+  const { checkUpdating } = useContext(UpdatingContext);
+  const isLoading = checkUpdating(props.colDef?.field ?? "", props.data.id);
+  const disabled = !props.colDef?.editable;
+
+  return (
+    <GridLoadableCell isLoading={isLoading}>
+      <LuiIcon
+        name={"ic_more_vert"}
+        alt={"More actions"}
+        size={"md"}
+        className={disabled ? `GridPopoutMenu-burgerDisabled` : `GridPopoutMenu-burger`}
+      />
+    </GridLoadableCell>
+  );
+};

package/src/contexts/GridContext.tsx

@@ -0,0 +1,82 @@
+import { createContext } from "react";
+import { GridApi } from "ag-grid-community";
+import { GridBaseRow } from "../components/Grid";
+
+export interface GridContextType {
+  gridReady: () => boolean;
+  setGridApi: (gridApi: GridApi | undefined) => void;
+  setQuickFilter: (quickFilter: string) => void;
+  editingCells: () => boolean;
+  getSelectedRows: <T extends unknown>() => T[];
+  getSelectedRowIds: () => number[];
+  selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
+  selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;
+  selectRowsById: (rowIds?: number[]) => void;
+  selectRowsByIdWithFlash: (rowIds?: number[]) => void;
+  flashRows: (rowIds?: number[]) => void;
+  flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
+  ensureRowVisible: (id: number) => void;
+  ensureSelectedRowIsVisible: () => void;
+  stopEditing: () => void;
+  updatingCells: (
+    props: { selectedRows: GridBaseRow[]; field?: string },
+    fnUpdate: (selectedRows: any[]) => Promise<boolean>,
+    setSaving?: (saving: boolean) => void,
+  ) => Promise<boolean>;
+}
+
+export const GridContext = createContext<GridContextType>({
+  gridReady: () => {
+    console.error("no context provider for gridReady");
+    return false;
+  },
+  setGridApi: () => {
+    console.error("no context provider for setGridApi");
+  },
+  setQuickFilter: () => {
+    console.error("no context provider for setQuickFilter");
+  },
+  selectRowsById: () => {
+    console.error("no context provider for selectRows");
+  },
+  getSelectedRows: <T extends unknown>(): T[] => {
+    console.error("no context provider for getSelectedRows");
+    return [];
+  },
+  getSelectedRowIds: () => {
+    console.error("no context provider for getSelectedRowIds");
+    return [];
+  },
+  selectRowsDiff: async () => {
+    console.error("no context provider for selectRowsDiff");
+  },
+  selectRowsByIdWithFlash: () => {
+    console.error("no context provider for selectRowsWithFlash");
+  },
+  selectRowsWithFlashDiff: async () => {
+    console.error("no context provider for selectRowsWithFlashDiff");
+  },
+  flashRows: () => {
+    console.error("no context provider for flashRows");
+  },
+  flashRowsDiff: async () => {
+    console.error("no context provider for flashRows");
+  },
+  ensureRowVisible: () => {
+    console.error("no context provider for ensureRowVisible");
+  },
+  ensureSelectedRowIsVisible: () => {
+    console.error("no context provider for ensureSelectedRowIsVisible");
+  },
+  editingCells: () => {
+    console.error("no context provider for editingCells");
+    return false;
+  },
+  stopEditing: () => {
+    console.error("no context provider for stopEditing");
+  },
+  updatingCells: async () => {
+    console.error("no context provider for modifyUpdating");
+    return false;
+  },
+});

package/src/contexts/GridContextProvider.tsx

@@ -0,0 +1,292 @@
+import { ReactElement, ReactNode, useContext, useRef } from "react";
+import { GridApi, RowNode } from "ag-grid-community";
+import { GridContext } from "./GridContext";
+import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
+import { isNotEmpty } from "../utils/util";
+import { UpdatingContext } from "./UpdatingContext";
+import { GridBaseRow } from "../components/Grid";
+
+interface GridContextProps {
+  children: ReactNode;
+}
+
+/**
+ * Context for AgGrid operations.
+ * Make sure you wrap AgGrid in this.
+ * Also, make sure the provider is created in a separate component, otherwise it won't be found.
+ */
+export const GridContextProvider = (props: GridContextProps): ReactElement => {
+  const { modifyUpdating } = useContext(UpdatingContext);
+  const gridApiRef = useRef<GridApi>();
+  const idsBeforeUpdate = useRef<number[]>([]);
+
+  /**
+   * Has Grid api has been set?
+   * Some ops in components may occur before onGridReady has been called,
+   * and thus will need to check grid is ready before calling.
+   */
+  const gridReady = () => gridApiRef.current != null;
+
+  /**
+   * Set current ref to grid api.
+   */
+  const setGridApi = (_gridApi: GridApi | undefined) => {
+    gridApiRef.current = _gridApi;
+  };
+
+  /**
+   * Wraps things that require gridApi in common handling, for when gridApi not present.
+   *
+   * @param hasApiFn Execute when api is ready.
+   * @param noApiFn Execute if api is not ready.
+   */
+  const gridApiOp = <T extends unknown, R extends unknown>(
+    hasApiFn: (gridApi: GridApi) => T,
+    noApiFn?: () => R,
+  ): T | R => {
+    if (!noApiFn) {
+      noApiFn = (() => {}) as () => R;
+    }
+    const gridApi = gridApiRef.current;
+    if (gridApi) return hasApiFn(gridApi);
+    console.error("GridApi not ready");
+    return noApiFn();
+  };
+
+  /**
+   * Set the quick filter value to grid.
+   */
+  const setQuickFilter = (quickFilter: string) => {
+    gridApiOp((gridApi) => gridApi.setQuickFilter(quickFilter));
+  };
+
+  /**
+   * Get all row id's in grid.
+   */
+  const _getAllRowIds = () => {
+    const result: number[] = [];
+    return gridApiOp(
+      (gridApi) => {
+        gridApi.forEachNode((node) => result.push(node.data.id));
+        return result;
+      },
+      () => result,
+    );
+  };
+
+  /**
+   * Record all row id's before update so that we can select/flash the new rows after update.
+   */
+  const beforeUpdate = () => {
+    idsBeforeUpdate.current = _getAllRowIds();
+  };
+
+  /**
+   * Find new row ids
+   * Uses beforeUpdate ids to find new nodes.
+   */
+  const _getNewNodes = (): RowNode[] => {
+    return gridApiOp(
+      (gridApi) =>
+        difference(_getAllRowIds(), idsBeforeUpdate.current)
+          .map((rowId) => gridApi.getRowNode("" + rowId)) //
+          .filter((r) => r) as RowNode[],
+      () => [],
+    );
+  };
+
+  /**
+   * Get grid nodes via rowIds.  If rowIds has no matching node the result may be smaller than expected.
+   * This can happen if the grid has not re-rendered yet.
+   *
+   * @param rowIds Row ids to get from grid.
+   */
+  const _rowIdsToNodes = (rowIds: number[]): RowNode[] => {
+    return gridApiOp(
+      (gridApi) =>
+        rowIds
+          .map((rowId) => gridApi.getRowNode("" + rowId)) //
+          .filter((r) => r) as RowNode[],
+      () => [] as RowNode[],
+    );
+  };
+
+  /**
+   * Internal method for selecting and flashing rows.
+   *
+   * @param rowIds RowIds to select and flash. If undefined a diff is done with beforeUpdate and current state to select
+   * @param select Whether to select rows
+   * @param flash Whether to flash rows
+   * @param retryCount Table updates may not be present when this is called, so retry is needed.
+   */
+  const _selectRowsWithOptionalFlash = (
+    rowIds: number[] | undefined,
+    select: boolean,
+    flash: boolean,
+    retryCount = 5, // We retry for approximately 5x200ms=1s
+  ) => {
+    return gridApiOp((gridApi) => {
+      const rowNodes = rowIds ? _rowIdsToNodes(rowIds) : _getNewNodes();
+      const gridRowIdsNotUpdatedYet = rowIds && rowNodes.length !== rowIds.length; // rowIds are specified
+      const gridRowIdsNotChangedYet = !rowIds && isEmpty(rowNodes); // rowIds are from beforeUpdate
+      const gridHasNotUpdated = gridRowIdsNotUpdatedYet || gridRowIdsNotChangedYet;
+      // After retry count expires we give-up and deselect all rows, then select any subset of rows that have updated
+      if (gridHasNotUpdated && retryCount > 0) {
+        delay(() => _selectRowsWithOptionalFlash(rowIds, select, flash, retryCount - 1), 250);
+        return;
+      }
+
+      const rowsThatNeedSelecting = sortBy(
+        rowNodes.filter((node) => !node.isSelected()),
+        (node) => node.data.id,
+      );
+      const firstNode = rowsThatNeedSelecting[0];
+      firstNode && gridApi.ensureNodeVisible(firstNode);
+      if (select) {
+        // Select rows that shouldn't be selected
+        rowsThatNeedSelecting.forEach((node) => node.setSelected(true));
+        // Unselect rows that shouldn't be selected
+        gridApi.getSelectedNodes()?.forEach((node) => {
+          if (node && !rowNodes.includes(node)) {
+            node.setSelected(false);
+          }
+        });
+      }
+      if (flash) {
+        delay(() => {
+          try {
+            gridApi.flashCells({ rowNodes });
+          } catch {
+            // ignore, flash cells sometimes throws errors as nodes have gone out of scope
+          }
+        }, 250);
+      }
+    });
+  };
+
+  const selectRowsById = (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, false);
+  const selectRowsByIdWithFlash = (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, true, true);
+  const flashRows = (rowIds?: number[]) => _selectRowsWithOptionalFlash(rowIds, false, true);
+
+  const selectRowsDiff = async (fn: () => Promise<any>) => {
+    beforeUpdate();
+    await fn();
+    _selectRowsWithOptionalFlash(undefined, true, false);
+  };
+
+  const selectRowsWithFlashDiff = async (fn: () => Promise<any>) => {
+    beforeUpdate();
+    await fn();
+    _selectRowsWithOptionalFlash(undefined, true, true);
+  };
+
+  const flashRowsDiff = async (fn: () => Promise<any>) => {
+    beforeUpdate();
+    await fn();
+    _selectRowsWithOptionalFlash(undefined, false, true);
+  };
+
+  const getSelectedRows = <T extends unknown>(): T[] => {
+    return gridApiOp(
+      (gridApi) => gridApi.getSelectedRows(),
+      () => [],
+    );
+  };
+
+  const getSelectedRowIds = (): number[] => getSelectedRows().map((row) => (row as any).id as number);
+
+  const editingCells = (): boolean => {
+    return gridApiOp(
+      (gridApi) => isNotEmpty(gridApi.getEditingCells()),
+      () => false,
+    );
+  };
+
+  const ensureRowVisible = (id: number): void => {
+    gridApiOp((gridApi) => {
+      const node = gridApi.getRowNode(`${id}`);
+      node && gridApi.ensureNodeVisible(node);
+    });
+  };
+
+  /**
+   * Scroll last selected row into view on grid sort change
+   */
+  const ensureSelectedRowIsVisible = (): void => {
+    gridApiOp((gridApi) => {
+      const selectedNodes = gridApi.getSelectedNodes();
+      if (isEmpty(selectedNodes)) return;
+      gridApi.ensureNodeVisible(last(selectedNodes));
+    });
+  };
+
+  const stopEditing = (): void => gridApiOp((gridApi) => gridApi.stopEditing());
+
+  const updatingCells = async (
+    props: { selectedRows: GridBaseRow[]; field?: string },
+    fnUpdate: (selectedRows: any[]) => Promise<boolean>,
+    setSaving?: (saving: boolean) => void,
+  ): Promise<boolean> => {
+    setSaving && setSaving(true);
+
+    return await gridApiOp(async (gridApi) => {
+      const selectedRows = props.selectedRows;
+      //TODO do I need to do this for all rows?
+      /*if (!props.multiEdit) {
+        // You can't use data as it could be an orphaned reference due to updates
+        selectedRows = selectedRows.filter((row) => row.id === props.data.id);
+      }
+*/
+      let ok = false;
+      await modifyUpdating(
+        props.field ?? "",
+        selectedRows.map((data) => data.id),
+        async () => {
+          // Need to refresh to get spinners to work on all rows
+          gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+          ok = await fnUpdate(selectedRows);
+        },
+      );
+
+      // async processes need to refresh their own rows
+      gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+
+      if (ok) {
+        const cell = gridApi.getFocusedCell();
+        if (cell && gridApi.getFocusedCell() == null) {
+          gridApi.setFocusedCell(cell.rowIndex, cell.column);
+        }
+        // This is needed to trigger postSortRowsHook
+        gridApi.refreshClientSideRowModel();
+        stopEditing();
+      }
+      setSaving && setSaving(false);
+      return ok;
+    });
+  };
+
+  return (
+    <GridContext.Provider
+      value={{
+        gridReady,
+        setGridApi,
+        setQuickFilter,
+        selectRowsById,
+        selectRowsDiff,
+        selectRowsByIdWithFlash,
+        selectRowsWithFlashDiff,
+        flashRows,
+        flashRowsDiff,
+        getSelectedRows,
+        getSelectedRowIds,
+        editingCells,
+        ensureRowVisible,
+        ensureSelectedRowIsVisible,
+        stopEditing,
+        updatingCells,
+      }}
+    >
+      {props.children}
+    </GridContext.Provider>
+  );
+};

package/src/contexts/UpdatingContext.tsx

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+export type UpdatingContextType = {
+  checkUpdating: (fields: string | string[], id: number | string) => boolean;
+  modifyUpdating: (field: string, ids: (number | string)[], fn: () => void | Promise<void>) => Promise<void>;
+};
+
+export const UpdatingContext = createContext<UpdatingContextType>({
+  checkUpdating: () => {
+    console.error("Missing UpdatingContext");
+    return false;
+  },
+  modifyUpdating: async () => {
+    console.error("Missing UpdatingContext");
+  },
+});

package/src/contexts/UpdatingContextProvider.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useRef } from "react";
+import { castArray, flatten, remove } from "lodash-es";
+import { UpdatingContext } from "./UpdatingContext";
+
+interface UpdatingContextProviderProps {
+  children: ReactNode;
+}
+
+export type UpdatingContextStatus = Record<string, (number | string)[] | undefined>;
+
+type FieldName = string;
+type IdList = (number | string)[];
+type UpdatingBlock = Record<FieldName, IdList[]>;
+
+export const UpdatingContextProvider = (props: UpdatingContextProviderProps) => {
+  const updatingBlocks = useRef<UpdatingBlock>({});
+  const updating = useRef<UpdatingContextStatus>({});
+
+  const resetUpdating = () => {
+    const mergedUpdatingBlocks: UpdatingContextStatus = {};
+    for (const key in updatingBlocks.current) {
+      mergedUpdatingBlocks[key] = flatten(updatingBlocks.current[key]);
+    }
+    updating.current = mergedUpdatingBlocks;
+  };
+
+  const modifyUpdating = async (field: string, ids: (number | string)[], fn: () => void | Promise<void>) => {
+    const fieldUpdatingIds = updatingBlocks.current[field] ?? (updatingBlocks.current[field] = []);
+    const idRef = [...ids];
+    fieldUpdatingIds.push(idRef);
+    resetUpdating();
+    await fn();
+    remove(fieldUpdatingIds, (idList) => idList === idRef);
+    resetUpdating();
+  };
+
+  const checkUpdating = (fields: string | string[], id: number | string): boolean =>
+    castArray(fields).some((f) => updating.current[f]?.includes(id));
+
+  return (
+    <UpdatingContext.Provider value={{ modifyUpdating, checkUpdating }}>{props.children}</UpdatingContext.Provider>
+  );
+};

package/src/lui/TextAreaInput.tsx

@@ -0,0 +1,50 @@
+import { ChangeEventHandler, InputHTMLAttributes, useState } from "react";
+import clsx from "clsx";
+import { LuiIcon } from "@linzjs/lui";
+import { v4 as uuidv4 } from "uuid";
+
+export const useGenerateOrDefaultId = (idFromProps?: string) => {
+  const [id] = useState(idFromProps ? idFromProps : uuidv4());
+  return id;
+};
+
+export interface LuiTextAreaInputProps {
+  label?: JSX.Element | string;
+  mandatory?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  value: string;
+  error?: string | boolean | null;
+}
+
+export const TextAreaInput = (props: LuiTextAreaInputProps) => {
+  const id = useGenerateOrDefaultId(props.inputProps?.id);
+
+  return (
+    <div
+      className={clsx(
+        "LuiTextAreaInput Grid-popoverContainer",
+        props.inputProps?.disabled ? "isDisabled" : "",
+        props?.error ? "hasError" : "",
+      )}
+    >
+      <label htmlFor={id}>
+        {props.mandatory && <span className="LuiTextAreaInput-mandatory">*</span>}
+        {props.label && <span className="LuiTextAreaInput-label">{props.label}</span>}
+        <div className="LuiTextAreaInput-wrapper">
+          {" "}
+          {/* wrapper div used for error styling */}
+          <textarea id={id} value={props.value} onChange={props.onChange} rows={5} {...props.inputProps} />
+        </div>
+      </label>
+
+      {/* Error message */}
+      {props.error && (
+        <span className="LuiTextAreaInput-error">
+          <LuiIcon alt="error" name="ic_error" className="LuiTextAreaInput-error-icon" size="sm" status="error" />
+          {props.error}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/lui/TextInputFormatted.scss

@@ -0,0 +1,11 @@
+.LuiTextInput {
+  margin-bottom: 0px;
+}
+
+.LuiTextInput-formatted {
+  position: absolute;
+  right: 14px;
+  top: 0;
+  line-height: 48px;
+  color: #beb9b4;
+}

package/src/lui/TextInputFormatted.tsx

@@ -0,0 +1,60 @@
+import "./TextInputFormatted.scss";
+
+import { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+import clsx from "clsx";
+import { LuiIcon } from "@linzjs/lui";
+
+export interface LuiTextInputProps {
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+  error?: string | boolean | null;
+  warning?: string | boolean | null;
+
+  className?: string;
+  value: string;
+
+  icon?: JSX.Element;
+  placeholder?: string;
+  formatted: string;
+}
+
+export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
+  return (
+    <div
+      className={clsx(
+        "LuiTextInput Grid-popoverContainer",
+        props.error && "hasError",
+        props.warning && "hasWarning",
+        props.className,
+      )}
+    >
+      <span className="LuiTextInput-inputWrapper">
+        <input
+          type={"text"}
+          className={"LuiTextInput-input"}
+          min="0"
+          value={props.value}
+          onChange={props.onChange}
+          {...props.inputProps}
+        />
+        <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
+        {props.icon}
+      </span>
+
+      {props.error && (
+        <span className="LuiTextInput-error">
+          <LuiIcon alt="error" name="ic_error" className="LuiTextInput-error-icon" size="sm" status="error" />
+          {props.error}
+        </span>
+      )}
+
+      {props.warning && (
+        <span className="LuiTextInput-warning">
+          <LuiIcon alt="warning" name="ic_warning" className="LuiTextInput-warning-icon" size="sm" status="warning" />
+          {props.warning}
+        </span>
+      )}
+    </div>
+  );
+};