@linzjs/step-ag-grid 1.1.1

package/src/lui-overrides.scss

@@ -0,0 +1,163 @@
+/**
+ * Lui Table additions, to be brought into Lui
+ */
+
+.lui-base-table.lui-table-bold-headings th {
+  font-weight: 600;
+}
+
+.lui-base-table.lui-table-nowrap-headings th {
+  white-space: nowrap;
+}
+
+.lui-base-table.lui-compact-table th,
+.lui-base-table.lui-compact-table td {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 0.875rem;
+}
+
+.lui-base-table.lui-compact-table th.lui-table-heading-dark,
+.lui-base-table.lui-compact-table td.lui-table-heading-dark {
+  background-color: #55504b; /* $grey-60 */
+  color: white;
+}
+
+.lui-base-table.lui-table-no-top-line thead {
+  border-top: none;
+}
+
+/**
+ * Lui Button additions, to be brought into Lui
+ */
+
+.lui-button.lui-button-toolbar,
+a.lui-button.lui-button-toolbar {
+  border-color: transparent;
+  padding: 4px;
+  line-height: 12px;
+  margin: 2px;
+}
+
+.lui-compact-table .lui-bearing-input-wrapper .lui-bearing-display {
+  line-height: 25px !important;
+}
+
+/* Until LUI fix comes (For different font weights) */
+input,
+select .survey-information {
+  font-weight: 400 !important;
+}
+
+.table-select input {
+  line-height: 25px !important;
+}
+
+.lui-standard-form .lui-compact-table .lui-input-error input {
+  border-left-width: 28px !important;
+}
+
+.lui-standard-form .lui-compact-table .lui-input-error .lui-form-status-icon {
+  font-size: 1rem;
+}
+
+/* To be replaced by Darrell's changes */
+.lui-standard-form .temporary-tighter-form-style label {
+  margin-top: 20px !important;
+}
+
+/** Survey map header */
+.lui-header.lui-header-white::after {
+  height: 2px;
+  background: linear-gradient(270deg, #bbb 1%, #ccc 100%);
+}
+
+/** Context Menu for the tables */
+.edit-cell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border: none;
+  text-align: left;
+}
+
+/** Free text input */
+
+.lui-menu .free-text-input {
+  border: transparent;
+  outline: transparent;
+  line-height: 33px;
+  padding-left: 4px;
+}
+
+.lui-menu textarea.free-text-input {
+  font-weight: 400;
+  line-height: 1.5;
+  width: 300px;
+  height: 150px;
+  resize: none;
+  border: 0.06rem solid #beb9b4;
+}
+
+.LuiCheckboxInput:focus {
+  border: 1px solid black;
+}
+
+.LuiCheckboxInput-group:focus {
+  border: 1px solid black;
+}
+
+/* Bounding box in a popout - any menus will be placed in the space of this div */
+div.menu-bounding-box {
+  position: absolute;
+  height: 100%;
+  width: 95%;
+  z-index: -9999;
+}
+
+.lui-button-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lui-button.lui-button-lg.lui-button-icon .LuiIcon.LuiIcon--sm {
+  margin-bottom: 0;
+}
+
+.lui-button.lui-button-med.lui-button-icon .LuiIcon.LuiIcon--md {
+  margin-bottom: -1px;
+}
+
+.lui-menu {
+  /**
+   * Scrollbar (Only Chrome)
+   */
+  ::-webkit-scrollbar {
+    width: 20px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #a8bbbf;
+  }
+
+  .szh-menu__item {
+    padding: 2px 1rem;
+  }
+
+  .LuiCheckboxInput {
+    margin-bottom: 0;
+  }
+}

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/src/stories/components/FormTest.scss

@@ -0,0 +1,10 @@
+
+.FormTest {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.FormTest-textInput {
+  width: 100px;
+}

package/src/stories/components/FormTest.tsx

@@ -0,0 +1,51 @@
+import "./FormTest.scss";
+
+import { useCallback, useState } from "react";
+import { LuiTextInput } from "@linzjs/lui";
+import { wait } from "../../utils/util";
+import { GridFormProps } from "../../components/GridCell";
+import { useGridPopoutHook } from "../../components/GridPopoutHook";
+import { GridBaseRow } from "../../components/Grid";
+
+export interface IFormTestRow {
+  id: number;
+  name: string;
+  nameType: string;
+  numba: string;
+  plan: string;
+}
+
+export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowType>): JSX.Element => {
+  const [v1, v2, ...v3] = props.value.split(" ");
+
+  const [nameType, setNameType] = useState(v1);
+  const [numba, setNumba] = useState(v2);
+  const [plan, setPlan] = useState(v3.join(" "));
+
+  const save = useCallback(async (): Promise<boolean> => {
+    // eslint-disable-next-line no-console
+    console.log("onSave", props.selectedRows, nameType, numba, plan);
+
+    // @ts-ignore
+    props.selectedRows.forEach((row) => (row["name"] = [nameType, numba, plan].join(" ")));
+    await wait(1000);
+
+    // Close form
+    return true;
+  }, [nameType, numba, plan, props.selectedRows]);
+  const { popoutWrapper } = useGridPopoutHook(props, save);
+
+  return popoutWrapper(
+    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+      </div>
+    </div>,
+  );
+};

package/src/stories/components/GridPopoutBearing.stories.tsx

@@ -0,0 +1,100 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useMemo, useState } from "react";
+import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+import { GridPopoverEditBearing } from "../../components/gridPopoverEdit/GridPopoverEditBearing";
+import { wait } from "../../utils/util";
+import { GridCell } from "../../components/GridCell";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  bearing1: number | null;
+  bearing2: number | null;
+}
+
+const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridPopoverEditBearing<ITestRow>({
+        field: "bearing1",
+        headerName: "Bearing GCE",
+        cellRendererParams: {
+          warning: (props) => props.data.id == 1002 && "Testers are testing",
+          info: (props) => props.data.id == 1001 && "Developers are developing",
+        },
+        cellEditorParams: {
+          multiEdit: false,
+          placeHolder: "Enter Bearing",
+        },
+      }),
+      GridPopoverEditBearing<ITestRow>({
+        field: "bearing2",
+        headerName: "Bearing onSave",
+        cellEditorParams: {
+          multiEdit: true,
+          placeHolder: "Enter Bearing",
+          onSave: async (selectedRows: ITestRow[], value: ITestRow["bearing2"]) => {
+            await wait(1000);
+            selectedRows.forEach((row) => (row["bearing2"] = value));
+            return true;
+          },
+        },
+      }),
+    ],
+    [],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, bearing1: 1.234, bearing2: 90 },
+        { id: 1001, bearing1: 1.565, bearing2: 240 },
+        { id: 1002, bearing1: null, bearing2: 355.1 },
+      ] as ITestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+export const Bearings = GridReadOnlyTemplate.bind({});

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -0,0 +1,174 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useCallback, useMemo, useState } from "react";
+import {
+  GridFormDropDown,
+  GridFormPopoutDropDownProps,
+  MenuSeparator,
+  MenuSeparatorString,
+} from "../../components/gridForm/GridFormDropDown";
+import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+import { ColDef } from "ag-grid-community";
+import { wait } from "../../utils/util";
+import { GridCell } from "../../components/GridCell";
+import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string | null;
+  position2: string | null;
+  position3: string | null;
+}
+
+const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+
+  const optionsFn = useCallback(async (selectedRows: ITestRow[], filter?: string) => {
+    // eslint-disable-next-line no-console
+    console.log("optionsFn selected rows", selectedRows, filter);
+    filter = filter?.toLowerCase();
+    await wait(1000);
+    return [
+      null,
+      "Architect",
+      "Developer",
+      "Product Owner",
+      "Scrum Master",
+      "Tester",
+      MenuSeparatorString,
+      "(other)",
+    ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
+  }, []);
+
+  const columnDefs = useMemo(
+    () =>
+      [
+        GridCell({
+          field: "id",
+          headerName: "Id",
+          initialWidth: 65,
+          maxWidth: 85,
+        }),
+        GridCell<ITestRow, GridFormPopoutDropDownProps<ITestRow, ITestRow["position"]>>({
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Position",
+          cellEditorParams: {
+            form: GridFormDropDown,
+            options: ["Architect", "Developer", "Product Owner", "Scrum Master", "Tester", MenuSeparator, "(other)"],
+            multiEdit: false,
+          },
+        }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position2"]>({
+          field: "position2",
+          maxWidth: 100,
+          headerName: "Multi-edit",
+          cellEditorParams: {
+            multiEdit: true,
+            options: [
+              {
+                value: "1",
+                label: <span style={{ border: "2px dashed blue" }}>One</span>,
+              },
+              { value: "2", label: <span style={{ border: "2px dashed red" }}>Two</span> },
+              MenuSeparator,
+              { value: "3", label: <span style={{ border: "2px dashed green" }}>Three</span> },
+            ],
+          },
+        }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
+          field: "position3",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Custom callback",
+          cellEditorParams: {
+            multiEdit: true,
+            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
+            onSelectedItem: async (selected) => {
+              await wait(2000);
+              selected.selectedRows.forEach((row) => (row.position3 = selected.value));
+            },
+          },
+        }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position"]>({
+          field: "position",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Options Fn",
+          cellEditorParams: {
+            filtered: "reload",
+            filterPlaceholder: "Search me...",
+            options: optionsFn,
+            optionsRequestCancel: () => {
+              // TODO wrap options in an abortable request
+              // When performing rest requests call the abort controller,
+              // otherwise you'll get multiple requests coming back in different order
+              // eslint-disable-next-line no-console
+              console.log("optionsRequestCancelled");
+            },
+            multiEdit: false,
+          },
+        }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
+          field: "position3",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Filtered",
+          cellEditorParams: {
+            multiEdit: true,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
+          },
+        }),
+      ] as ColDef[],
+    [optionsFn],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
+        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+      ] as ITestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+export const EditDropdown = GridEditDropDownTemplate.bind({});

package/src/stories/components/GridPopoutEditGeneric.stories.tsx

@@ -0,0 +1,76 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useMemo, useState } from "react";
+import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+import { GridCell } from "../../components/GridCell";
+import { FormTest, IFormTestRow } from "./FormTest";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell({
+        field: "name",
+        headerName: "Popout Generic Edit",
+        maxWidth: 140,
+        cellEditorParams: {
+          form: FormTest,
+          multiEdit: false,
+        },
+      }),
+    ],
+    [],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
+        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
+      ] as IFormTestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+export const EditGeneric = GridPopoutEditGenericTemplate.bind({});

package/src/stories/components/GridPopoutEditGenericTextArea.stories.tsx

@@ -0,0 +1,106 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridContextProvider } from "../../contexts/GridContextProvider";
+import { Grid, GridProps } from "../../components/Grid";
+import { useMemo, useState } from "react";
+import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider";
+import { GridCell } from "../../components/GridCell";
+import { IFormTestRow } from "./FormTest";
+import { GridFormTextArea, GridFormTextAreaProps } from "../../components/gridForm/GridFormTextArea";
+import { GridFormTextInput, GridFormTextInputProps } from "../../components/gridForm/GridFormTextInput";
+import { wait } from "../../utils/util";
+
+export default {
+  title: "Components / Grids",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1200, height: 400, display: "flex" }}>
+        <UpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </UpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs = useMemo(
+    () => [
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        initialWidth: 65,
+        maxWidth: 85,
+      }),
+      GridCell<IFormTestRow, GridFormTextInputProps<IFormTestRow>>({
+        field: "name",
+        headerName: "Text input",
+        maxWidth: 140,
+        cellEditorParams: {
+          form: GridFormTextInput,
+          required: true,
+          maxlength: 12,
+          placeholder: "Enter some text...",
+          width: 240,
+          multiEdit: false,
+          onSave: async (selectedRows, value) => {
+            await wait(1000);
+            selectedRows.forEach((selectedRow) => (selectedRow["name"] = value));
+            return true;
+          },
+        },
+      }),
+      GridCell<IFormTestRow, GridFormTextAreaProps<IFormTestRow>>({
+        field: "plan",
+        headerName: "Text area",
+        maxWidth: 140,
+        cellEditorParams: {
+          form: GridFormTextArea,
+          required: true,
+          maxlength: 32,
+          placeholder: "Enter some text...",
+          width: 260,
+          multiEdit: true,
+          onSave: async (selectedRows, value) => {
+            await wait(1000);
+            selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));
+            return true;
+          },
+        },
+      }),
+    ],
+    [],
+  );
+
+  const rowData = useMemo(
+    () =>
+      [
+        { id: 1000, name: "IS IS DP12345", nameType: "IS", numba: "IX", plan: "DP 12345" },
+        { id: 1001, name: "PEG V SD523", nameType: "PEG", numba: "V", plan: "SD 523" },
+      ] as IFormTestRow[],
+    [],
+  );
+
+  return (
+    <Grid
+      {...props}
+      externalSelectedItems={externalSelectedItems}
+      setExternalSelectedItems={setExternalSelectedItems}
+      columnDefs={columnDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+export const EditGenericTextArea = GridPopoutEditGenericTemplate.bind({});