ui-soxo-bootstrap-core 2.6.62-dev.4 → 2.6.63-dev.1

package/core/lib/elements/basic/table/column-filter/column-filter.scss

@@ -0,0 +1,48 @@
+/* Excel style column filter of the table */
+
+.column-filter-dropdown {
+  width: 240px;
+  padding: 8px;
+
+  .column-filter-search {
+    margin-bottom: 8px;
+  }
+
+  .column-filter-select-all {
+    width: 100%;
+    padding: 4px 0 6px;
+    border-bottom: 1px solid #f0f0f0;
+    font-weight: 600;
+  }
+
+  .column-filter-options {
+    display: flex;
+    flex-direction: column;
+    max-height: 220px;
+    padding: 6px 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    .ant-checkbox-wrapper {
+      margin: 0;
+      padding: 3px 0;
+      word-break: break-word;
+    }
+  }
+
+  .column-filter-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+.column-filter-icon {
+  color: #bfbfbf;
+
+  &--active {
+    color: #1677ff;
+  }
+}

package/core/lib/elements/basic/table/column-filter/column-filter.test.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import {
+  getColumnFilterKey,
+  getColumnFilterValue,
+  isFilterableColumn,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnValues,
+  withColumnFilters,
+  ColumnFilterDropdown,
+} from './column-filter';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (text) => text }),
+}));
+
+// The core Button reads the theme from the global store, a plain button is enough here
+jest.mock('../../button/button', () => ({ children, onClick, disabled }) => (
+  <button type="button" onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+));
+
+const genderColumn = { key: 'gender', title: 'Gender', render: (record) => <span>{record.gender}</span> };
+
+const cityColumn = { key: 'city', title: 'City', dataIndex: ['address', 'city'] };
+
+const statusColumn = { key: 'status', title: 'Status', render: () => <select />, exportDefinition: (record) => record.status };
+
+const records = [
+  { id: 1, gender: 'Male', address: { city: 'Calicut' }, status: 'Booked' },
+  { id: 2, gender: 'Female', address: { city: 'Kochi' }, status: 'Arrived' },
+  { id: 3, gender: 'Male', address: { city: 'Kochi' }, status: 'Booked' },
+  { id: 4, gender: '', address: { city: 'Calicut' }, status: 'Arrived' },
+];
+
+describe('column filter helpers', () => {
+  it('reads the rendered text of the cell', () => {
+    expect(getColumnFilterValue(genderColumn, records[0])).toBe('Male');
+  });
+
+  it('reads the dataIndex value, path arrays included', () => {
+    expect(getColumnFilterValue(cityColumn, records[1])).toBe('Kochi');
+  });
+
+  it('falls back to the export value when the cell has no text', () => {
+    expect(getColumnFilterValue(statusColumn, records[1])).toBe('Arrived');
+  });
+
+  it('keys the filter by key, else by dataIndex', () => {
+    expect(getColumnFilterKey({ dataIndex: ['address', 'city'] })).toBe('address.city');
+    expect(getColumnFilterKey({ key: 'gender', dataIndex: 'x' })).toBe('gender');
+  });
+
+  it('leaves out columns marked filterable false or without a value', () => {
+    expect(isFilterableColumn(genderColumn)).toBe(true);
+    expect(isFilterableColumn({ ...genderColumn, filterable: false })).toBe(false);
+    expect(isFilterableColumn({ key: 'empty', title: 'Empty' })).toBe(false);
+  });
+
+  it('keeps only the records matching every filtered column', () => {
+    const columns = [genderColumn, cityColumn];
+
+    expect(applyColumnFilters(records, columns, { gender: ['Male'] }).map((r) => r.id)).toEqual([1, 3]);
+    expect(applyColumnFilters(records, columns, { gender: ['Male'], city: ['Kochi'] }).map((r) => r.id)).toEqual([3]);
+    expect(applyColumnFilters(records, columns, {})).toBe(records);
+  });
+
+  it('ignores the excepted column, to list its values from the other filters', () => {
+    const columns = [genderColumn, cityColumn];
+
+    expect(applyColumnFilters(records, columns, { gender: ['Male'], city: ['Kochi'] }, 'city').map((r) => r.id)).toEqual([1, 3]);
+  });
+
+  it('tells whether any filter is applied', () => {
+    expect(hasColumnFilters({})).toBe(false);
+    expect(hasColumnFilters({ gender: undefined })).toBe(false);
+    expect(hasColumnFilters({ gender: ['Male'] })).toBe(true);
+  });
+
+  it('lists distinct values sorted with blanks last', () => {
+    expect(getColumnValues(genderColumn, records)).toEqual(['Female', 'Male', '']);
+  });
+
+  it('adds the filter dropdown only to filterable columns', () => {
+    const columns = withColumnFilters([{ key: '#', filterable: false, render: () => 1 }, genderColumn], records, { gender: ['Male'] }, jest.fn());
+
+    expect(columns[0].filterDropdown).toBeUndefined();
+    expect(columns[1].filterDropdown).toBeInstanceOf(Function);
+    expect(columns[1].filteredValue).toEqual(['Male']);
+  });
+});
+
+describe('ColumnFilterDropdown', () => {
+  function renderDropdown(props = {}) {
+    const onApply = jest.fn();
+    const close = jest.fn();
+
+    render(<ColumnFilterDropdown column={genderColumn} records={records} visible onApply={onApply} close={close} {...props} />);
+
+    return { onApply, close };
+  }
+
+  it('lists every value ticked when the column has no filter, blanks labelled', () => {
+    renderDropdown();
+
+    ['Female', 'Male', '(Blanks)'].forEach((label) => expect(screen.getByLabelText(label)).toBeChecked());
+  });
+
+  it('applies the picked values and closes', () => {
+    const { onApply, close } = renderDropdown();
+
+    fireEvent.click(screen.getByLabelText('Female'));
+    fireEvent.click(screen.getByText('OK'));
+
+    expect(onApply).toHaveBeenCalledWith(['Male', '']);
+    expect(close).toHaveBeenCalled();
+  });
+
+  it('removes the filter when every value is selected', () => {
+    const { onApply } = renderDropdown({ applied: ['Male'] });
+
+    fireEvent.click(screen.getByLabelText('Select All'));
+    fireEvent.click(screen.getByText('OK'));
+
+    expect(onApply).toHaveBeenCalledWith(undefined);
+  });
+
+  it('Clear All unticks everything and disables OK', () => {
+    renderDropdown();
+
+    fireEvent.click(screen.getByText('Clear All'));
+
+    expect(screen.getByLabelText('Male')).not.toBeChecked();
+    expect(screen.getByText('OK').closest('button')).toBeDisabled();
+  });
+
+  it('narrows the list with the search', () => {
+    renderDropdown();
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), { target: { value: 'fem' } });
+
+    expect(screen.getByLabelText('Female')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Male')).not.toBeInTheDocument();
+  });
+});

package/core/lib/elements/basic/table/readme.md

@@ -6,4 +6,53 @@ Here is how we can simply add a table.
 import Table from "./table";
 
 <Table />;
-```
+```
+
+## Column filters
+
+`columnFilters` adds an Excel style filter to every column header: the distinct values of
+the column with Search, Select All / Clear All and a "(Blanks)" option. Filters of several
+columns work together, and the values listed for a column are the ones left by the other
+filters.
+
+The values are the text shown in the cell (the column `render`), the `exportDefinition`
+when the cell is a component, else the `dataIndex` value. Leave a column out with
+`filterable: false`, or pass the keys of the columns to filter:
+
+```jsx
+<TableComponent columns={columns} dataSource={rows} columnFilters={['gender', 'source']} />
+```
+
+### Filtered by the table
+
+When the whole list is in `dataSource`, the table filters it:
+
+```jsx
+<TableComponent columns={columns} dataSource={rows} columnFilters />
+```
+
+### Filtered by the screen
+
+With server side paging the screen keeps the filters and filters the data itself:
+
+```jsx
+import { TableComponent, applyColumnFilters, hasColumnFilters } from 'ui-soxo-bootstrap-core';
+
+const [filters, setFilters] = useState({});
+
+const rows = applyColumnFilters(records, columns, filters);
+
+<TableComponent
+  columns={columns}
+  dataSource={rows}
+  columnFilters
+  filters={filters}
+  onFilterChange={(key, values) => setFilters({ ...filters, [key]: values })}
+  // Records the values are listed from, the dataSource when not given
+  filterRecords={records}
+/>;
+```
+
+`onFilterChange` gets the column key and the selected values, `undefined` when the filter
+is removed (every value selected). `hasColumnFilters(filters)` tells whether any filter is
+applied, ex: to load the whole range instead of one page.

package/core/lib/elements/basic/table/table.js

@@ -1,7 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { GlobalContext } from '../../../Store';
+import { withColumnFilters, applyColumnFilters, getColumnFilterKey } from './column-filter/column-filter';
 
 import './table.scss';
 
@@ -12,9 +13,55 @@ import './table.scss';
  * use it for long lists only. The header cells stay inside the same table as the rows
  * (see table.scss), so the columns always line up with the header.
  */
-const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange, freezeHeader }) => {
+const TableComponent = ({
+  columns,
+  dataSource,
+  loading,
+  fixed,
+  scroll,
+  summary,
+  pagination,
+  title,
+  onChange,
+  freezeHeader,
+  // Excel style filter - true for every column (a column is left out with `filterable: false`), or the keys of the columns to filter
+  columnFilters = false,
+  // Applied filters ({ [columnKey]: values }), when the screen filters the data itself (ex: server side paging)
+  filters,
+  // Called with the column key and the selected values (undefined when the filter is removed)
+  onFilterChange,
+  // Records the filter values are listed from, the dataSource when not given
+  filterRecords,
+}) => {
   const { state } = useContext(GlobalContext);
 
+  const [localFilters, setLocalFilters] = useState({});
+
+  // Controlled when the screen passes the filters, else the table filters its own dataSource
+  const isControlled = filters !== undefined;
+
+  const appliedFilters = isControlled ? filters || {} : localFilters;
+
+  const filterSource = filterRecords || dataSource || [];
+
+  // With a list of keys only those columns get the filter
+  const filterColumns = Array.isArray(columnFilters)
+    ? columns.map((col) => (columnFilters.includes(getColumnFilterKey(col)) ? col : { ...col, filterable: false }))
+    : columns;
+
+  const filteredColumns = columnFilters
+    ? withColumnFilters(filterColumns, filterSource, appliedFilters, (key, values) => {
+        if (!isControlled) setLocalFilters((current) => ({ ...current, [key]: values }));
+
+        if (onFilterChange) onFilterChange(key, values);
+      })
+    : columns;
+
+  // The opt out flag is only for the filter, it is not passed on to antd
+  const visibleColumns = filteredColumns.map(({ filterable, ...col }) => col);
+
+  const visibleData = columnFilters && !isControlled ? applyColumnFilters(dataSource, filterColumns, localFilters) : dataSource;
+
   useEffect(() => {}, [state.theme.colors]);
 
   // Header styling
@@ -57,7 +104,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
   }));
 
   // Apply fixed property to the columns you need
-  const updatedColumns = columns.map((col) => ({
+  const updatedColumns = visibleColumns.map((col) => ({
     ...col,
     onHeaderCell: () => ({
       style: headerStyle,
@@ -70,7 +117,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
       title={title ? () => title : undefined}
       scroll={scroll}
       className={freezeHeader ? 'frozen-header-table' : undefined}
-      dataSource={dataSource}
+      dataSource={visibleData}
       loading={loading}
       bordered
       fixed={fixed}
@@ -97,6 +144,14 @@ TableComponent.propTypes = {
   data: PropTypes.array.isRequired,
   loading: PropTypes.bool,
   freezeHeader: PropTypes.bool,
+  /** Excel style filter - true for every column (a column is left out with `filterable: false`), or the keys of the columns to filter */
+  columnFilters: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
+  /** Applied filters ({ [columnKey]: values }), pass it to filter the data in the screen */
+  filters: PropTypes.object,
+  /** Called with the column key and the selected values, undefined when the filter is removed */
+  onFilterChange: PropTypes.func,
+  /** Records the filter values are listed from, the dataSource when not given */
+  filterRecords: PropTypes.array,
 };
 
 TableComponent.defaultProps = {

package/core/lib/elements/basic/table/table.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import TableComponent from './table';
+import { GlobalContext } from '../../../Store';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (text) => text }),
+}));
+
+// The real store pulls in every module of the library, the table only reads the theme from it
+jest.mock('../../../Store', () => ({ GlobalContext: require('react').createContext({}) }));
+
+// The core Button reads the theme from the global store, a plain button is enough here
+jest.mock('../button/button', () => ({ children, onClick, disabled }) => (
+  <button type="button" onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+));
+
+// antd Table watches the screen size, jsdom has no matchMedia
+beforeAll(() => {
+  window.matchMedia =
+    window.matchMedia ||
+    (() => ({ matches: false, addListener: () => {}, removeListener: () => {}, addEventListener: () => {}, removeEventListener: () => {} }));
+});
+
+const columns = [
+  { key: 'name', title: 'Name', render: (record) => record.name },
+  { key: 'gender', title: 'Gender', render: (record) => record.gender },
+  { key: 'city', title: 'City', dataIndex: 'city' },
+];
+
+const rows = [
+  { key: 1, name: 'Anu', gender: 'Female', city: 'Kochi' },
+  { key: 2, name: 'Ravi', gender: 'Male', city: 'Calicut' },
+];
+
+function renderTable(props) {
+  return render(
+    <GlobalContext.Provider value={{ state: { theme: { colors: {} } } }}>
+      <TableComponent columns={columns} dataSource={rows} {...props} />
+    </GlobalContext.Provider>
+  );
+}
+
+describe('TableComponent column filters', () => {
+  it('has no filter without columnFilters', () => {
+    const { container } = renderTable();
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(0);
+  });
+
+  it('filters every column with columnFilters', () => {
+    const { container } = renderTable({ columnFilters: true });
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(3);
+  });
+
+  it('filters only the listed columns', () => {
+    const { container } = renderTable({ columnFilters: ['gender'] });
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(1);
+  });
+
+  it('filters its own rows with the applied filters', () => {
+    const { getByText, queryByText } = renderTable({ columnFilters: ['gender'], filters: undefined });
+
+    expect(getByText('Anu')).toBeTruthy();
+    expect(queryByText('Ravi')).toBeTruthy();
+  });
+
+  it('shows the screen filters as active, leaving the rows to the screen', () => {
+    const { container, getByText } = renderTable({ columnFilters: ['gender'], filters: { gender: ['Male'] }, onFilterChange: jest.fn() });
+
+    expect(container.querySelectorAll('.column-filter-icon--active')).toHaveLength(1);
+    // Controlled: the screen filters the dataSource, the table shows what it gets
+    expect(getByText('Anu')).toBeTruthy();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.62-dev.4",
+  "version": "2.6.63-dev.1",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"