WCMS-21593: Move rows per page control above data table and adjust ot…

…her UI elements (#231)
GetDKAN · Jul 22, 2024 · 72cf4cd · 72cf4cd
1 parent 181fb8c
commit 72cf4cd
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 88 deletions.
diff --git a/src/components/DataTablePageResults/DataTablePageResults.tsx b/src/components/DataTablePageResults/DataTablePageResults.tsx
@@ -24,7 +24,7 @@ const DataTablePageResults = ({
   const page = offset / limit;
   const startTotal = () => (page * limit + 1)
   return (
-    <p className={`ds-u-margin-bottom--2 ${className}`}>
+    <p className={className}>
       Displaying{' '}
       <span className="ds-u-font-weight--bold">{`${startTotal().toLocaleString()} - ${ofTotal().toLocaleString()}`}</span>{' '}
       of <span className="ds-u-font-weight--bold">{`${numTotalRows.toLocaleString()}`}</span>{' '}

diff --git a/src/components/DatasetTableTab/index.tsx b/src/components/DatasetTableTab/index.tsx
@@ -51,7 +51,6 @@ const DatasetTable = ({
     ? customColumnHeaders
     : prepareColumns(resource.columns, resource.schema[id]);
 
-  const rowOptions = [10, 25, 50, 100];
   const { limit, setLimit, setOffset } = resource;
   const pageSize = limit ? limit : defaultPageSize;
 
@@ -70,11 +69,18 @@ const DatasetTable = ({
       <>
         <QueryBuilder resource={resource} id={distribution.identifier} customColumns={customColumnHeaders} />
         {dataDictionaryBanner && (
-          <div className="ds-u-display--flex">
+          <div>
             <Alert>Click on the "Data Dictionary" tab above for full column definitions</Alert>
           </div>
         )}
-        {<DataTableHeader resource={resource} downloadURL={downloadURL} unfilteredDownloadURL={distribution.data.downloadURL} jsonUrl={jsonUrl} /> }
+        {
+          <DataTableHeader
+            resource={resource}
+            downloadURL={downloadURL}
+            unfilteredDownloadURL={distribution.data.downloadURL}
+            jsonUrl={jsonUrl}
+            setPage={setPage}
+          /> }
         <div className="ds-u-border-x--1 ds-u-border-bottom--1">
           <DataTable
             data={resource.values}
@@ -99,20 +105,7 @@ const DatasetTable = ({
               renderHref={(page) => {
                 return '';
               }}
-              className="ds-l-lg-col--7 ds-l-md-col--9 ds-l-col--12 ds-u-padding-x--0"
-            />
-            <Dropdown
-              options={rowOptions.map((row) => ({ label: row.toString(), value: row }))}
-              size="medium"
-              label="Rows per page:"
-              labelClassName="ds-u-margin-top--0"
-              name="datatable_rows_per_page"
-              onChange={(e) => {
-                setLimit(parseInt(e.target.value));
-                setPage(1);
-                setOffset(0);
-              }}
-              defaultValue={limit.toString()}
+              className="ds-l-col--12 ds-u-padding-x--0"
             />
           </div>
         )}

diff --git a/src/components/DatatableHeader/index.tsx b/src/components/DatatableHeader/index.tsx
@@ -1,16 +1,81 @@
 import React from 'react';
 import DataTablePageResults from '../DataTablePageResults';
-import { Button, Tooltip } from '@cmsgov/design-system';
+import { Button, Tooltip, Dropdown } from '@cmsgov/design-system';
 import { ResourceType } from '../../types/dataset';
 
-const DataTableHeader = ({ resource, downloadURL, unfilteredDownloadURL, jsonUrl } : {resource: ResourceType, downloadURL: string, unfilteredDownloadURL: string, jsonUrl: string | undefined}) => {
-  const { limit, offset, count, conditions } = resource;
+const DataTableHeader = ({ resource, downloadURL, unfilteredDownloadURL, jsonUrl, setPage } : {resource: ResourceType, downloadURL: string, unfilteredDownloadURL: string, jsonUrl: string | undefined, setPage: Function}) => {
+  const { limit, offset, count, conditions, setLimit, setOffset } = resource;
   const intCount = count ? count : 0;
+  const rowOptions = [10, 25, 50, 100];
 
   return (
-    <div className="ds-l-row ds-u-align-items--center">
-      <div className="ds-l-col--12 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between ds-u-align-items--center">
-        <div className="ds-l-col--12 ds-l-lg-col--4">
+    <div className="ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--between">
+      <div className="dc-c-resource-header--buttons ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end ds-l-col--12 ds-u-margin-top--2 ds-u-padding-x--0">
+        <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-margin-bottom--2">
+          {conditions && conditions.length ? (
+            <Tooltip
+              onOpen={() => {
+                navigator.clipboard.writeText(window.location.href);
+              }}
+              className="ds-c-button ds-u-text-align--center ds-u-display--inline-block ds-l-col--12"
+              placement="bottom"
+              dialog
+              ariaLabel="Copy link to filtered data"
+              title="Link copied to clipboard"
+              aria-disabled={!conditions || conditions.length === 0}
+            >
+              <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
+                <i className="fas fa-copy"></i> Copy link to filtered data
+              </span>
+            </Tooltip>
+          ) : (
+            <Button aria-disabled={true} aria-label="Copy link to filtered data" className="ds-c-button ds-u-text-align--center ds-u-display--inline-block ds-l-col--12">
+              <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
+                <i className="fas fa-copy"></i> Copy link to filtered data
+              </span>
+            </Button>
+          )}
+
+        </div>
+        <div className="ds-l-col--12 ds-l-md-col--auto ds-u-padding-x--0 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end">
+          <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-sm-margin-left--2 ds-u-margin-bottom--2">
+            <Button
+              className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
+              href={downloadURL}
+              aria-disabled={!conditions || conditions.length === 0}
+            >
+              <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
+                <i className="fas fa-file-csv"></i> Download filtered data (CSV)
+              </span>
+            </Button>
+          </div>
+          <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-sm-margin-left--2 ds-u-margin-bottom--2">
+            <Button
+              className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
+              href={unfilteredDownloadURL}
+            >
+              <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
+                <i className="fas fa-file-csv"></i> Download full dataset (CSV)
+              </span>
+            </Button>
+          </div>
+        </div>
+        {jsonUrl && (
+          <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-margin-left--2 ds-u-margin-top--2 ds-u-sm-margin-top--0">
+            <Button
+              className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
+              href={jsonUrl}
+              aria-label="Export to .JSON"
+            >
+              <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
+                <i className="fas fa-file-code"></i> Export to JSON
+              </span>
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="ds-l-col--12 ds-u-display--flex ds-u-align-items--end ds-u-flex-direction--row-reverse ds-u-sm-flex-direction--row ds-u-padding-x--0 ds-u-margin-bottom--2 ds-u-flex-wrap--wrap">
+        <div className="ds-l-col--12 ds-l-sm-col--8 ds-u-padding-x--0">
           {!resource.loading && (
             <DataTablePageResults
               totalRows={intCount}
@@ -19,70 +84,22 @@ const DataTableHeader = ({ resource, downloadURL, unfilteredDownloadURL, jsonUrl
             />
           )}
         </div>
-        <div className="dc-c-resource-header--buttons ds-l-col--12 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end ds-u-padding-x--0">
-          <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-margin-bottom--2">
-            {conditions && conditions.length ? (
-              <Tooltip
-                onOpen={() => {
-                  navigator.clipboard.writeText(window.location.href);
-                }}
-                className="ds-c-button ds-u-text-align--center ds-u-display--inline-block ds-l-col--12"
-                placement="bottom"
-                dialog
-                ariaLabel="Copy link to filtered data"
-                title="Link copied to clipboard"
-                aria-disabled={!conditions || conditions.length === 0}
-              >
-                <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
-                  <i className="fas fa-copy"></i> Copy link to filtered data
-                </span>
-              </Tooltip>
-            ) : (
-              <Button aria-disabled={true} aria-label="Copy link to filtered data" className="ds-c-button ds-u-text-align--center ds-u-display--inline-block ds-l-col--12">
-                <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
-                  <i className="fas fa-copy"></i> Copy link to filtered data
-                </span>
-              </Button>
-            )}
-
-          </div>
-          <div className="ds-l-col--12 ds-l-md-col--auto ds-u-padding-x--0 ds-u-display--flex ds-u-flex-wrap--wrap ds-u-justify-content--end">
-            <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-sm-margin-left--2 ds-u-margin-bottom--2">
-              <Button
-                className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
-                href={downloadURL}
-                aria-disabled={!conditions || conditions.length === 0}
-              >
-                <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
-                  <i className="fas fa-file-csv"></i> Download filtered data (CSV)
-                </span>
-              </Button>
-            </div>
-            <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-sm-margin-left--2 ds-u-margin-bottom--2">
-              <Button
-                className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
-                href={unfilteredDownloadURL}
-              >
-                <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
-                  <i className="fas fa-file-csv"></i> Download full dataset (CSV)
-                </span>
-              </Button>
-            </div>
+        <div className="ds-l-col--12 ds-l-sm-col--4 ds-u-display--flex ds-u-justify-content--end ds-u-padding-x--0">
+          <div>
+            <Dropdown
+              options={rowOptions.map((row) => ({ label: row.toString(), value: row }))}
+              size="medium"
+              label="Rows per page:"
+              labelClassName="ds-u-margin-top--0"
+              name="datatable_rows_per_page"
+              onChange={(e) => {
+                setLimit(parseInt(e.target.value));
+                setPage(1);
+                setOffset(0);
+              }}
+              defaultValue={limit.toString()}
+            />
           </div>
-
-          {jsonUrl && (
-            <div className="ds-l-col--12 ds-l-sm-col--auto ds-u-padding-x--0 ds-u-margin-left--2 ds-u-margin-top--2 ds-u-sm-margin-top--0">
-              <Button
-                className="ds-u-text-align--center ds-u-font-weight--normal ds-u-font-size--base ds-u-margin-right--1 ds-u-display--inline-block ds-l-col--12"
-                href={jsonUrl}
-                aria-label="Export to .JSON"
-              >
-                <span className="ds-u-font-weight--semibold ds-u-margin-left--1 ds-u-padding--0">
-                  <i className="fas fa-file-code"></i> Export to JSON
-                </span>
-              </Button>
-            </div>
-          )}
         </div>
       </div>
     </div>

diff --git a/src/components/ResourceHeader/index.jsx b/src/components/ResourceHeader/index.jsx
@@ -53,7 +53,7 @@ const ResourceHeader = ({
       </div>
       <div className="ds-l-row ds-u-align-items--center">
         <div className="ds-l-col--12 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center">
-          <div className="ds-u-font-weight--bold">
+          <div className="ds-u-font-weight--bold ds-u-margin-bottom--2">
             <DataTablePageResults
               totalRows={parseInt(intCount)}
               limit={parseInt(limit)}