@linzjs/step-ag-grid 29.5.1 → 29.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.5.1",
+  "version": "29.7.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss

@@ -0,0 +1,20 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.GridFilterColsMultiSelect {
+    background: #fff;
+    padding: 8px;
+    @include lui.font-semibold();
+
+    .LuiCheckboxInput-selectAll,
+    .LuiCheckboxInput-item {
+        color: lui.$charcoal;
+        line-height: 20px;
+        margin-bottom: 0;
+        font-weight: 600;
+        font-style: SemiBold;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0%;
+
+    }
+}

package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx

@@ -0,0 +1,189 @@
+import './GridFilterColumnsMultiSelect.scss';
+
+import { LuiCheckboxInput } from '@linzjs/lui';
+import type { IDoesFilterPassParams, IFilterComp, IFilterParams } from 'ag-grid-community';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+
+export interface CheckboxMultiFilterParams extends IFilterParams {
+  labels?: Record<string, string>;
+  labelFormatter?: (value: string) => string;
+}
+
+export interface CheckboxMultiFilterModel {
+  values: string[];
+}
+
+interface FilterUIProps {
+  allValues: string[];
+  selected: Set<string>;
+  labels: Record<string, string>;
+  labelFormatter?: (value: string) => string;
+  onToggleAll: (checked: boolean) => void;
+  onToggleOne: (value: string, checked: boolean) => void;
+}
+
+const FilterUI: React.FC<FilterUIProps> = ({
+  allValues,
+  selected,
+  labels,
+  labelFormatter,
+  onToggleAll,
+  onToggleOne,
+}) => {
+  const allChecked = allValues.length > 0 && selected.size === allValues.length;
+
+  const getDisplayLabel = (raw: string): string => {
+    const mapped = labels[raw] ?? raw;
+    return labelFormatter ? labelFormatter(mapped) : mapped;
+  };
+
+  return (
+    <div className="GridFilterColsMultiSelect">
+      <span className="LuiSelect-label-text">Filter column</span>
+
+      <LuiCheckboxInput
+        className="LuiCheckboxInput-selectAll"
+        label={'Select All'}
+        value="true"
+        isChecked={allChecked}
+        onChange={(e) => onToggleAll(e.target.checked)}
+      />
+      {allValues.map((val) => (
+        <LuiCheckboxInput
+          key={val}
+          className="LuiCheckboxInput-item"
+          label={getDisplayLabel(val)}
+          value={val}
+          isChecked={selected.has(val)}
+          onChange={(e) => onToggleOne(val, e.target.checked)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export class GridFilterColumnsMultiSelect implements IFilterComp {
+  private params!: CheckboxMultiFilterParams;
+  private selectedValues = new Set<string>();
+  private labels: Record<string, string> = {};
+  private allValues: string[] = [];
+  private gui!: HTMLElement;
+  private labelFormatter?: (value: string) => string;
+  private reactRoot: Root | null = null;
+
+  private loadFieldValues(): string[] {
+    const field = this.params.colDef.field as string;
+    const values = new Set<string>();
+
+    this.params.api.forEachNode((node) => {
+      const data = node.data;
+      const cellValue = data?.[field];
+      if (
+        data &&
+        typeof data === 'object' &&
+        field in data &&
+        typeof cellValue === 'string' &&
+        cellValue !== undefined &&
+        cellValue !== null
+      ) {
+        values.add(cellValue);
+      }
+    });
+
+    return Array.from(values).sort();
+  }
+
+  init(params: CheckboxMultiFilterParams): void {
+    this.params = params;
+    this.labels = { ...params.labels };
+    this.labelFormatter = params.labelFormatter;
+
+    this.allValues = this.loadFieldValues();
+
+    this.gui = document.createElement('div');
+    this.reactRoot = createRoot(this.gui);
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.reactRoot) return;
+
+    this.reactRoot.render(
+      <FilterUI
+        allValues={this.allValues}
+        selected={this.selectedValues}
+        labels={this.labels}
+        labelFormatter={this.labelFormatter}
+        onToggleAll={this.handleToggleAll.bind(this)}
+        onToggleOne={this.handleToggleOne.bind(this)}
+      />,
+    );
+  }
+
+  private handleToggleAll(checked: boolean): void {
+    if (checked) {
+      this.allValues.forEach((val) => this.selectedValues.add(val));
+    } else {
+      this.selectedValues.clear();
+    }
+    this.render();
+    this.params.filterChangedCallback();
+  }
+
+  private handleToggleOne(value: string, checked: boolean): void {
+    if (checked) {
+      this.selectedValues.add(value);
+    } else {
+      this.selectedValues.delete(value);
+    }
+    this.render();
+    this.params.filterChangedCallback();
+  }
+
+  getGui(): HTMLElement {
+    return this.gui;
+  }
+
+  isFilterActive(): boolean {
+    return this.selectedValues.size > 0;
+  }
+
+  doesFilterPass(params: IDoesFilterPassParams): boolean {
+    const field = this.params.colDef.field as string;
+    if (!params.data || typeof params.data !== 'object' || !(field in params.data)) {
+      return false;
+    }
+
+    const cellValue = (params.data as Record<string, unknown>)[field];
+    if (typeof cellValue !== 'string') {
+      return false;
+    }
+
+    return this.selectedValues.has(cellValue);
+  }
+
+  getModel(): CheckboxMultiFilterModel | null {
+    return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
+  }
+
+  setModel(model: CheckboxMultiFilterModel | null): void {
+    this.selectedValues = new Set(model?.values || []);
+    this.render();
+  }
+
+  destroy(): void {
+    if (this.reactRoot) {
+      this.reactRoot.unmount();
+      this.reactRoot = null;
+    }
+  }
+}
+
+export const createCheckboxMultiFilterParams = (
+  labels: Record<string, string> = {},
+  labelFormatter?: (value: string) => string,
+): Partial<CheckboxMultiFilterParams> => ({
+  labels,
+  labelFormatter,
+});

package/src/components/gridFilter/index.ts

@@ -1,4 +1,5 @@
 export * from './GridFilterButtons';
+export * from './GridFilterColumnsMultiSelect';
 export * from './GridFilterColumnsToggle';
 export * from './GridFilterDownloadCsvButton';
 export * from './GridFilterHeaderIconButton';

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -73,7 +73,7 @@ const GridFilterButtonsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridPr
     { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
     { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
     { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
-    { id: 1005, position: 'Developer', age: 12, desc: 'Backend Developer' },
+    { id: 1005, position: 'Developer', age: 14, desc: 'Backend Developer' },
     { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
   ]);
 

package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx

@@ -0,0 +1,122 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import {
+  createCheckboxMultiFilterParams,
+  GridFilterColumnsMultiSelect,
+} from 'components/gridFilter/GridFilterColumnsMultiSelect';
+import { useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridFilterButtons,
+  GridFilterQuick,
+  GridFilters,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../..';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  decorators: [
+    (Story) => (
+      <div style={{ width: 1024, height: 400, display: 'flex' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position: string;
+  desc: string;
+}
+
+const GridFilterColumnsMultiSelectTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell({
+        field: 'position',
+        headerName: 'Position',
+        filter: GridFilterColumnsMultiSelect,
+        filterParams: createCheckboxMultiFilterParams({
+          Developer: 'FE Dev',
+          Manager: 'Tech Manager',
+        }),
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        flex: 1,
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    {
+      id: 1000,
+      position: 'Tester',
+      age: 30,
+      desc: 'Integration tester - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lectus neque. Nunc congue magna ut lorem pretium, vitae congue lorem malesuada. Etiam eget eleifend sapien, sed egestas felis. Aliquam ac augue sapien.',
+    },
+    { id: 1001, position: 'Developer', age: 12, desc: 'Frontend developer' },
+    { id: 1002, position: 'Manager', age: 65, desc: 'Technical Manager' },
+    { id: 1003, position: 'Tester', age: 30, desc: 'E2E tester' },
+    { id: 1004, position: 'Developer', age: 12, desc: 'Fullstack Developer' },
+    { id: 1005, position: 'Developer', age: 13, desc: 'Backend Developer' },
+    { id: 1006, position: 'Architect', age: 30, desc: 'Architect' },
+  ]);
+
+  return (
+    <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick quickFilterPlaceholder={'Custom placeholder...'} />
+        <GridFilterButtons<ITestRow>
+          luiButtonProps={{ style: { whiteSpace: 'nowrap' } }}
+          options={[
+            {
+              label: 'All',
+            },
+            {
+              label: 'Developers',
+              filter: (row) => row.position === 'Developer',
+            },
+            {
+              label: 'Testers',
+              filter: (row) => row.position === 'Tester',
+            },
+          ]}
+        />
+      </GridFilters>
+      <Grid
+        {...props}
+        rowSelection={'multiple'}
+        columnDefs={columnDefs}
+        rowData={rowData}
+        sizeColumns={'auto-skip-headers'}
+      />
+    </GridWrapper>
+  );
+};
+
+export const _FilterColumnsMultiSelectExample = GridFilterColumnsMultiSelectTemplate.bind({});
+_FilterColumnsMultiSelectExample.play = waitForGridReady;