Merge pull request #124 from M3nin0/dev

table: generalizing global filter component

src/lib/components/table/base/BaseGlobalFilter.js

@@ -0,0 +1,49 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022-2024 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React from 'react';
+import { useAsyncDebounce } from 'react-table';
+import { Icon, Input } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+/**
+ * Global filter component for the external resources table.
+ */
+export const BaseGlobalFilter = ({
+  preGlobalFilteredRows,
+  globalFilter,
+  setGlobalFilter,
+}) => {
+  const count = preGlobalFilteredRows.length;
+  const [value, setValue] = React.useState(globalFilter);
+  const onChange = useAsyncDebounce((value) => {
+    setGlobalFilter(value || undefined);
+  }, 200);
+
+  return (
+    <Input
+      fluid
+      icon
+      placeholder={'Type to search...'}
+      value={value || ''}
+      onChange={(e) => {
+        setValue(e.target.value);
+        onChange(e.target.value);
+      }}
+    >
+      <input />
+      <Icon name={'search'} />
+    </Input>
+  );
+};
+
+BaseGlobalFilter.propTypes = {
+  preGlobalFilteredRows: PropTypes.object.isRequired,
+  globalFilter: PropTypes.object.isRequired,
+  setGlobalFilter: PropTypes.object,
+};

src/lib/components/table/base/BaseGlobalFilter.test.js

@@ -0,0 +1,72 @@
+/*
+ * This file is part of GEO-Components-React.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Components-React is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { useMemo } from 'react';
+import { useTable } from 'react-table';
+
+import { BaseTable } from './BaseTable';
+import { BaseGlobalFilter } from './BaseGlobalFilter';
+
+import { render, screen } from '../../../../setupTestRenders';
+
+import tabelData from '../../../../mocks/table/table-data.json';
+
+const ComponentTemplate = (args) => {
+  const tableRows = useMemo(() => tabelData);
+  const tableColumns = useMemo(() => {
+    return [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Role',
+        accessor: 'role',
+      },
+      {
+        Header: 'Type',
+        accessor: 'type',
+      },
+    ];
+  });
+
+  const { getTableProps, getTableBodyProps, rows, columns, prepareRow } =
+    useTable({
+      columns: tableColumns,
+      data: tableRows,
+    });
+
+  return (
+    <BaseTable
+      columns={columns}
+      rows={rows}
+      getTableProps={getTableProps}
+      getTableBodyProps={getTableBodyProps}
+      prepareRow={prepareRow}
+      globalFilter={(globalFilter, preGlobalFilteredRows, setGlobalFilter) => (
+        <BaseGlobalFilter
+          globalFilter={globalFilter}
+          setGlobalFilter={setGlobalFilter}
+          preGlobalFilteredRows={preGlobalFilteredRows}
+        />
+      )}
+      {...args}
+    />
+  );
+};
+
+describe('BaseGlobalFilter tests', () => {
+  describe('Render tests', () => {
+    it('should render with the required props without crashing', () => {
+      render(<ComponentTemplate />);
+
+      const tableElement = screen.getByRole('table');
+      expect(tableElement).toBeInTheDocument();
+    });
+  });
+});

src/lib/components/table/base/index.js

@@ -7,3 +7,4 @@
  */
 
 export { BaseTable } from './BaseTable';
+export { BaseGlobalFilter } from './BaseGlobalFilter';

src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.js

@@ -7,6 +7,7 @@
  */
 
 import React, { useMemo } from 'react';
+import { BaseGlobalFilter } from '../../base';
 import { PaginableTable } from '../../moldure';
 import { YouTubeViewer, isUrlFromYouTube } from './youtube';
 
@@ -17,49 +18,10 @@ import _truncate from 'lodash/truncate';
 import regeneratorRuntime from 'regenerator-runtime';
 import { useAsyncDebounce } from 'react-table';
 
-import {
-  Grid,
-  Button,
-  Icon,
-  Input,
-  Header,
-  Label,
-  Dropdown,
-} from 'semantic-ui-react';
+import { Grid, Button, Icon, Header, Label, Dropdown } from 'semantic-ui-react';
 
 import './ExternalResourceTable.css';
 
-/**
- * Global filter component for the external resources table.
- */
-function GlobalFilter({
-  preGlobalFilteredRows,
-  globalFilter,
-  setGlobalFilter,
-}) {
-  const count = preGlobalFilteredRows.length;
-  const [value, setValue] = React.useState(globalFilter);
-  const onChange = useAsyncDebounce((value) => {
-    setGlobalFilter(value || undefined);
-  }, 200);
-
-  return (
-    <Input
-      fluid
-      icon
-      placeholder={'Type to search...'}
-      value={value || ''}
-      onChange={(e) => {
-        setValue(e.target.value);
-        onChange(e.target.value);
-      }}
-    >
-      <input />
-      <Icon name={'search'} />
-    </Input>
-  );
-}
-
 /**
  * External resource table.
  */
@@ -271,7 +233,7 @@ export const ExternalResourceTable = ({ tableData, tableConfig }) => {
           preGlobalFilteredRows,
           setGlobalFilter
         ) => (
-          <GlobalFilter
+          <BaseGlobalFilter
             globalFilter={globalFilter}
             setGlobalFilter={setGlobalFilter}
             preGlobalFilteredRows={preGlobalFilteredRows}

src/lib/components/table/thematic/UserStoriesTable/UserStoriesTable.js

@@ -9,6 +9,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { BaseGlobalFilter } from '../../base';
 import { PaginableTable } from '../../moldure';
 
 import _get from 'lodash/get';
@@ -23,6 +24,18 @@ import './UserStoriesTable.css';
 export const UserStoriesTable = ({ tableData, packageId }) => {
   const tableColumnsDefinition = useMemo(() => {
     return [
+      // Defining invisible columns that are used as the index for the table filter
+      {
+        Header: () => null,
+        id: 'idx_title',
+        accessor: 'metadata.title',
+      },
+      {
+        Header: () => null,
+        id: 'idx_description',
+        accessor: 'metadata.description',
+      },
+      // Content column
       {
         Header: () => null,
         id: 'users-stories-version',
@@ -72,8 +85,7 @@ export const UserStoriesTable = ({ tableData, packageId }) => {
                   widescreen={3}
                   largeScreen={3}
                   computer={3}
-                  tablet={3}
-                  mobile={3}
+                  only={'computer'}
                 >
                   <Button.Group size={'mini'} floated={'right'}>
                     <Button
@@ -87,6 +99,19 @@ export const UserStoriesTable = ({ tableData, packageId }) => {
                   </Button.Group>
                 </Grid.Column>
               </Grid.Row>
+              <Grid.Row only={'tablet mobile'} className={'pt-0'}>
+                <Grid.Column width={16} className={'pt-0'}>
+                  <Button
+                    content={'Access'}
+                    as={'a'}
+                    size={'mini'}
+                    href={rowUrl}
+                    fluid
+                  >
+                    Access
+                  </Button>
+                </Grid.Column>
+              </Grid.Row>
             </Grid>
           );
         },
@@ -111,6 +136,20 @@ export const UserStoriesTable = ({ tableData, packageId }) => {
         columnsConfiguration={tableColumnsDefinition}
         className={'users-stories-table'}
         showHeader={false}
+        initialState={{
+          hiddenColumns: ['idx_title', 'idx_description'],
+        }}
+        globalFilter={(
+          globalFilter,
+          preGlobalFilteredRows,
+          setGlobalFilter
+        ) => (
+          <BaseGlobalFilter
+            globalFilter={globalFilter}
+            setGlobalFilter={setGlobalFilter}
+            preGlobalFilteredRows={preGlobalFilteredRows}
+          />
+        )}
       />
     </>
   );