WCMS-20201: Data Dictionary Table improvements: filter, sort, other updates (#213)

brdunfield · web-flow · commit aa9f2b208c62 · 2024-06-04T14:17:43.000-06:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
diff --git a/src/components/DataDictionaryTable/index.tsx b/src/components/DataDictionaryTable/index.tsx
@@ -1,48 +1,104 @@
 import React, { useState } from 'react';
-import { useReactTable, flexRender, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';
-import { Table, TableHead, TableRow, TableCell, TableBody, Pagination } from '@cmsgov/design-system';
+import { useReactTable, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, SortingState, getFilteredRowModel, ColumnFiltersState } from '@tanstack/react-table';
+import { useMediaQuery } from 'react-responsive';
+import { Table, TableHead, TableRow, TableCell, TableBody, Pagination, Dropdown, DropdownChangeObject } from '@cmsgov/design-system';
 import HeaderResizeElement from '../Datatable/HeaderResizeElement';
 import './dataDictionaryTable.scss';
 
-const DataDictionaryTable = ({tableColumns, tableData, count, pageSize} :
-  {tableColumns: Array<any>, tableData: Array<any>, count: number, pageSize: number}
+const DataDictionaryTable = ({tableColumns, tableData, pageSize, columnFilters} :
+  {tableColumns: Array<any>, tableData: Array<any>, pageSize: number, columnFilters?: ColumnFiltersState}
   ) => {
-  const [pagination, setPagination] = useState({
-    pageIndex: 1,
-    pageSize: pageSize,
-  });
-  const [ariaLiveFeedback, setAriaLiveFeedback] = useState('')
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [ariaLiveFeedback, setAriaLiveFeedback] = useState('');
+
+  const mobile = useMediaQuery({ minWidth: 0, maxWidth: 544 });
+
+  const sortElement = (isSorted : string) => {
+    if(isSorted === 'asc') {
+      return 'dc-c-sort--asc'
+    }
+    if(isSorted === 'desc') {
+      return 'dc-c-sort--desc'
+    }
+    return 'dc-c-sort--default'
+  }
 
   const table = useReactTable({
     data: tableData,
     columns: tableColumns,
     columnResizeMode: 'onChange',
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    onPaginationChange: setPagination,
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
     state: {
-      pagination: pagination
+      sorting,
+      columnFilters
     }
   });
 
+  const sortOptions = [
+    {value: 'default', label: 'No Sort'},
+    {value: 'titleasc', label: 'Title A-Z'},
+    {value: 'titledesc', label: 'Title Z-A'},
+    {value: 'typeasc', label: 'Type A-Z'},
+    {value: 'typedesc', label: 'Type Z-A'},
+  ];
+
+  const sortStatesLookup : {[key: string] : Array<any>} = {
+    default: [],
+    titleasc: [{id: 'titleResizable', desc: false}],
+    titledesc: [{id: 'titleResizable', desc: true}],
+    typeasc: [{id: 'type', desc: false}],
+    typedesc: [{id: 'type', desc: true}]
+  }
   return (
     <div>
+      {mobile && (
+        <div className="ds-u-margin-bottom--3 ds-l-col--12 ds-l-sm-col--6">
+          <Dropdown
+            labelClassName="ds-u-margin-top--1 ds-u-sm-margin-top--0"
+            options={sortOptions}
+            label="Sort"
+            value={Object.keys(sortStatesLookup).find(key => {
+              return JSON.stringify(sortStatesLookup[key]) == JSON.stringify(sorting);
+            })}
+            name="dc-data-dictionary-type"
+            onChange={(e: DropdownChangeObject) => {
+              setSorting(sortStatesLookup[e.target.value])
+            }}
+          />
+        </div>
+      )}
       <div className="dc-c-datadictionary-table">
-        <Table className="dc-c-datatable" {...{style:{width: '100%'}}} >
+        <Table className="dc-c-datatable" {...{style:{width: '100%'}}} stackable>
           <TableHead className="dc-thead--truncated dc-thead--resizeable">
             {table.getHeaderGroups().map(headerGroup => (
               <TableRow key={"header" + headerGroup.id}>
                 {headerGroup.headers.map(header => {
                   return (header.id === "titleResizable") ? (
-                    <HeaderResizeElement key={header.id + "_resize"} table={table} header={header} setAriaLiveFeedback={setAriaLiveFeedback} />
+                    <HeaderResizeElement key={header.id + "_resize"} table={table} header={header} setAriaLiveFeedback={setAriaLiveFeedback} sortElement={sortElement} />
                   ) : (
                     <TableCell
                       {...{
                         key: header.id
                       }}
-                      className="ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0"
+                      className= {`ds-u-border-y--2 ds-u-border--dark ds-u-border-x--0`}
+                      id={'dataDictionary_' + header.id}
                     >
                       {flexRender(header.column.columnDef.header, header.getContext()) as React.ReactNode}
+                      {header.id === 'type' && (
+                        <button
+                        onClick={header.column.getToggleSortingHandler()}
+                        {...{
+                          className: header.column.getCanSort()
+                            ? `cursor-pointer select-none ds-u-focus-visible ${sortElement(header.column.getIsSorted() as string)}`
+                            : '',
+                        }}
+                        aria-label={`${header.column.columnDef.header} sort order`}
+                      />
+                      )}
                     </TableCell>
                   )
                 }) }
@@ -60,10 +116,13 @@ const DataDictionaryTable = ({tableColumns, tableData, count, pageSize} :
                       {...{
                         key: cell.id,
                         style: {
-                          maxWidth: cell.column.getSize(),
+                          maxWidth: mobile ? '100%' : cell.column.getSize(),
+                          whiteSpace: cell.column.id === "description" ? 'pre-wrap' : 'normal'
                         },
                       }}
                       className={`${cell.column.id === 'titleResizable' ? 'ds-u-word-break' : ''}`}
+                      headers={'dataDictionary_' + cell.column.id}
+                      stackedTitle={cell.column.id === 'titleResizable' ? 'Title' : cell.column.columnDef.header as string}
                       >
                         {flexRender(cell.column.columnDef.cell, cell.getContext()) as React.ReactNode}
                       </TableCell>
@@ -76,16 +135,13 @@ const DataDictionaryTable = ({tableColumns, tableData, count, pageSize} :
         </Table>
         <div className='sr-only' aria-live='assertive' aria-atomic='true'>{ariaLiveFeedback}</div>
       </div>
-      {count > pageSize ? (
+      {table.getRowCount() > pageSize ? (
         <Pagination
-          totalPages={Math.ceil(count / pagination.pageSize)}
-          currentPage={pagination.pageIndex + 1}
+          totalPages={table.getPageCount()}
+          currentPage={table.getState().pagination.pageIndex + 1}
           onPageChange={(evt, page) => {
             evt.preventDefault();
-            setPagination({
-              pageIndex: page - 1,
-              pageSize: pageSize
-            })
+            table.setPageIndex(page - 1)
           }}
           renderHref={(page) => {
             return '';
diff --git a/src/components/DatasetDataDictionaryTab/index.tsx b/src/components/DatasetDataDictionaryTab/index.tsx
@@ -7,7 +7,7 @@ import axios from 'axios';
 import { DatasetDictionaryItemType } from '../../types/dataset';
 import SitewideDataDictionaryTable from '../SitewideDataDictionaryTable';
 import DatasetDictionaryTable from '../DatasetDictionaryTable';
-import { Button } from '@cmsgov/design-system';
+import { Button, Spinner } from '@cmsgov/design-system';
 
 const DataDictionary = (
   { datasetDictionaryEndpoint, datasetSitewideDictionary, title, pageSize = 20, additionalParams } : 
@@ -30,7 +30,7 @@ const DataDictionary = (
   });
 
   const datasetDictionary = data && data.data && data.data.fields && data.data.fields.length ? data.data.fields : null;
-
+  
   return (
     <>
       <h2 className="ds-text-heading--2xl ds-u-margin-y--3">{title}</h2>
@@ -41,7 +41,7 @@ const DataDictionary = (
               <i className="fa fa-file-download ds-u-color--primary ds-u-padding-right--1"></i> View Dictionary JSON
             </Button>
           </div>
-          <DatasetDictionaryTable datasetDictionary={datasetDictionary} pageSize={pageSize} />
+          <DatasetDictionaryTable datasetDictionary={datasetDictionary} pageSize={pageSize}/>
         </>
       )}
 
diff --git a/src/components/DatasetDictionaryTable/index.tsx b/src/components/DatasetDictionaryTable/index.tsx
@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
+import { TextField, Dropdown, AccordionItem, Button, DropdownChangeObject } from '@cmsgov/design-system';
 import { DatasetDictionaryItemType } from '../../types/dataset';
 import DataDictionaryTable from '../DataDictionaryTable';
 import { Tooltip, TooltipIcon } from '@cmsgov/design-system';
 import "./dataDictionary.scss"
+import ClearFiltersButton from '../QueryBuilder/ClearFiltersButton';
 
 const DatasetDictionaryTable = ({ datasetDictionary, pageSize} : {datasetDictionary: DatasetDictionaryItemType[], pageSize: number}) => {
+  const [titleFilter, setTitleFilter ] = useState("");
+  const [typeFilter, setTypeFilter ] = useState("all");
+  const columnFilters = useMemo(() => [
+    {id: "titleResizable", value: titleFilter},
+    {id: "type", value: typeFilter === "all" ? "" : typeFilter}
+  ], [titleFilter, typeFilter])
+
   const tableData = datasetDictionary.map((item) => {
     return {
       titleResizable: item.title,
@@ -21,7 +30,7 @@ const DatasetDictionaryTable = ({ datasetDictionary, pageSize} : {datasetDiction
         <div className="dc-c-tooltip-width-override">
           Title
           <Tooltip
-            title={"Title represents the column headers of the data file (e.g., Change_Type)"}
+            title={"Title represents the column headers of the data file"}
             // @ts-ignore
             style={{ border: 'none', background: 'none' }}
             maxWidth="400px"
@@ -43,7 +52,60 @@ const DatasetDictionaryTable = ({ datasetDictionary, pageSize} : {datasetDiction
     }),
   ];
 
-  return ( <DataDictionaryTable tableColumns={tableColumns} tableData={tableData} count={datasetDictionary.length} pageSize={pageSize} /> )
+  const typeOptions = [
+    {value: 'all', label: 'All Types'},
+    {value: 'string', label: 'String'},
+    {value: 'date', label: 'Date'},
+    {value: 'datetime', label: 'Datetime'},
+    {value: 'year', label: 'Year'},
+    {value: 'integer', label: 'Integer'},
+    {value: 'number', label: 'Number'},
+    {value: 'boolean', label: 'Boolean'}
+  ];
+
+  return ( 
+    <>
+      <div className="dc-query-builder ds-u-margin-bottom--3">
+        <div className="ds-c-accordion ds-c-accordion--bordered">
+          <AccordionItem
+            heading={"Data Dictionary Filters"}
+            defaultOpen={true}
+          >
+            <div className="ds-u-display--flex ds-u-flex-wrap--wrap">
+              <TextField
+                className="ds-l-col--12 ds-l-sm-col--6"
+                labelClassName="ds-u-margin-top--1 ds-u-sm-margin-top--0"
+                label="Title"
+                value={titleFilter}
+                name="dc-data-dictionary-title"
+                onChange={(e: Event) => setTitleFilter((e.target as HTMLInputElement).value)}
+              />
+              <div className="ds-l-col--12 ds-l-sm-col--6">
+                <Dropdown
+                  labelClassName="ds-u-margin-top--1 ds-u-sm-margin-top--0"
+                  options={typeOptions}
+                  label="Type"
+                  value={typeFilter}
+                  name="dc-data-dictionary-type"
+                  onChange={(e: DropdownChangeObject) => setTypeFilter(e.target.value)}
+                />
+              </div>
+              <div className="ds-u-float--right ds-u-padding-y--2 ds-l-col--12 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end">
+                <div className="ds-u-display--flex ds-u-justify-content--end ds-l-col--12 ds-l-md-col--6 ds-u-padding-x--0">
+                  <ClearFiltersButton
+                    clearFiltersFn={() => {
+                      setTitleFilter("");
+                      setTypeFilter("all");
+                    }} />
+                </div>
+              </div>
+            </div>
+          </AccordionItem>
+        </div>
+      </div>
+      <DataDictionaryTable tableColumns={tableColumns} tableData={tableData} pageSize={pageSize} columnFilters={columnFilters} />
+    </>
+  )
 }
 
 export default DatasetDictionaryTable;
diff --git a/src/components/Datatable/HeaderResizeElement.tsx b/src/components/Datatable/HeaderResizeElement.tsx
@@ -16,7 +16,7 @@ const HeaderResizeElement = ({table, header, sortElement, setAriaLiveFeedback} :
     className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark  ds-u-font-weight--bold"
     >
       <div className="ds-u-display--flex">
-        <span style={{maxWidth: header.getSize() - 16}} >
+        <span style={{maxWidth: header.getSize() - 16}} title={header.column.columnDef.header}>
           {header.isPlaceholder
             ? null
             : flexRender(
diff --git a/src/components/QueryBuilder/ClearFiltersButton.tsx b/src/components/QueryBuilder/ClearFiltersButton.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Button } from "@cmsgov/design-system";
+import { useMediaQuery } from "react-responsive";
+
+const ClearFiltersButton = ({disabled = false, clearFiltersFn} : { disabled?: boolean, clearFiltersFn: Function}) => {
+  const small = useMediaQuery({ minWidth: 0, maxWidth: 544 });
+  return (
+    <Button
+      disabled={disabled}
+      className="ds-u-float--right ds-l-md-col--6 ds-l-col--5"
+      variation={small ? 'ghost' : undefined}
+      onClick={() => clearFiltersFn()}
+    >
+      {small ? 'Clear all' : 'Clear all filters'}
+    </Button>
+  )
+}
+
+export default ClearFiltersButton;
diff --git a/src/components/QueryBuilder/index.tsx b/src/components/QueryBuilder/index.tsx
@@ -6,6 +6,7 @@ import { buildOperatorOptions } from '../../templates/FilteredResource/functions
 import QueryTitle from '../../templates/FilteredResource/QueryTitle';
 import QueryRow from '../QueryRow';
 import { ConditionType, SchemaType } from '../../types/dataset';
+import ClearFiltersButton from './ClearFiltersButton';
 
 type QueryBuilderPropTypes = {
   resource: {
@@ -188,18 +189,13 @@ const QueryBuilder = (props: QueryBuilderPropTypes) => {
                 >
                   Apply filters
                 </Button>
-                <Button
+                <ClearFiltersButton
                   disabled={queryConditions.length === 0}
-                  className="ds-u-float--right ds-l-md-col--6 ds-l-col--5"
-                  variation={small ? 'ghost' : undefined}
-                  onClick={() => {
+                  clearFiltersFn={() => {
                     setQueryConditions([]);
                     setTitleConditions([]);
                     setConditionsCleared(true);
-                  }}
-                >
-                  {small ? 'Clear all' : 'Clear all filters'}
-                </Button>
+                  }} />
               </div>
             </div>
           </form>
diff --git a/src/components/SitewideDataDictionaryTable/index.tsx b/src/components/SitewideDataDictionaryTable/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
 import { DatasetDictionaryItemType } from '../../types/dataset';
 import DataDictionaryTable from '../DataDictionaryTable';
@@ -20,7 +20,7 @@ const SitewideDataDictionaryTable = ({ datasetDictionary, pageSize} : {datasetDi
     }),
   ];
 
-  return ( <DataDictionaryTable tableColumns={tableColumns} tableData={datasetDictionary} count={datasetDictionary.length} pageSize={pageSize} /> )
+  return ( <DataDictionaryTable tableColumns={tableColumns} tableData={datasetDictionary} pageSize={pageSize} /> )
 }
 
 export default SitewideDataDictionaryTable;
diff --git a/src/templates/FilteredResource/QueryBuilder.jsx b/src/templates/FilteredResource/QueryBuilder.jsx
@@ -36,9 +36,7 @@ function updateQueryForDatastore(condition) {
 const QueryBuilder = ({ resource, id, includeSearchParams, customColumns }) => {
   const { conditions, schema, setConditions } = resource;
   const fields = Object.keys(schema[id].fields);
-  const hasConditions = conditions.length > 0;
 
-  const [queryCount, setQueryCount] = useState(0);
   const [queryConditions, setQueryConditions] = useState([]);
   const [titleConditions, setTitleConditions] = useState([]); // Add use effect to load conditions on first load if needed
   const [conditionsChanged, setConditionsChanged] = useState(false);

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@civicactions/cmsds-open-data-components",`
`3`		`- "version": "3.1.9",`
	`3`	`+ "version": "3.1.10",`
`4`	`4`	`"description": "Components for the open data catalog frontend using CMS Design System",`
`5`	`5`	`"main": "dist/main.js",`
`6`	`6`	`"source": "src/index.ts",`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const HeaderResizeElement = ({table, header, sortElement, setAriaLiveFeedback} :`
`16`	`16`	`className="ds-u-border-y--2 ds-u-padding--2 ds-u-border--dark ds-u-font-weight--bold"`
`17`	`17`	`>`
`18`	`18`	`<div className="ds-u-display--flex">`
`19`		`- <span style={{maxWidth: header.getSize() - 16}} >`
	`19`	`+ <span style={{maxWidth: header.getSize() - 16}} title={header.column.columnDef.header}>`
`20`	`20`	`{header.isPlaceholder`
`21`	`21`	`? null`
`22`	`22`	`: flexRender(`