table: reviewing themes from thematic tables

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo-knowledge-hub/geo-components-react",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "main": "dist/cjs/index.js",
   "browser": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/lib/components/list/thematic/index.js

@@ -8,4 +8,3 @@
 
 export { LatestEvents } from './LatestEvents';
 export { LatestRecords } from './LatestRecords';
-export { MoreLikeThisRecords } from './MoreLikeThisRecords';

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

@@ -23,30 +23,34 @@ export const BaseTable = ({
   getTableProps,
   getTableBodyProps,
   globalFilter,
+  showHeader,
   ...uiProps
 }) => {
   return (
     <Table {...uiProps} {...getTableProps()}>
-      <Table.Header>
-        <Table.Row>
-          {columns.map((column) => (
-            <Table.HeaderCell
-              sorted={
-                column.isSorted
-                  ? column.isSortedDesc
-                    ? 'descending'
-                    : 'ascending'
-                  : null
-              }
-              {...column.getHeaderProps(
-                column.getSortByToggleProps ? column.getSortByToggleProps() : {}
-              )}
-            >
-              {column.render('Header')}
-            </Table.HeaderCell>
-          ))}
-        </Table.Row>
-      </Table.Header>
+
+      {showHeader && (
+        <Table.Header>
+          <Table.Row>
+            {columns.map((column) => (
+              <Table.HeaderCell
+                sorted={
+                  column.isSorted
+                    ? column.isSortedDesc
+                      ? 'descending'
+                      : 'ascending'
+                    : null
+                }
+                {...column.getHeaderProps(
+                  column.getSortByToggleProps ? column.getSortByToggleProps() : {}
+                )}
+              >
+                {column.render('Header')}
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        </Table.Header>
+      )}
 
       {globalFilter && (
         <Table.Row>
@@ -82,5 +86,10 @@ BaseTable.propTypes = {
   prepareRow: PropTypes.func,
   getTableProps: PropTypes.func,
   getTableBodyProps: PropTypes.func,
+  showHeader: PropTypes.bool,
   uiProps: PropTypes.object,
 };
+
+BaseTable.defaultProps = {
+  showHeader: true
+};

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

@@ -263,6 +263,7 @@ export const ExternalResourceTable = ({ tableData, tableConfig }) => {
             preGlobalFilteredRows={preGlobalFilteredRows}
           />
         )}
+        showHeader={false}
         {...tableConfig}
       />
     </div>

src/lib/components/table/thematic/RecordsTable/RecordsTable.css

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+.table-records .ui.container .grid p {
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,154 @@
+/*
+ * 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 { PaginableTable } from '../../moldure';
+
+import _get from 'lodash/get';
+
+import regeneratorRuntime from 'regenerator-runtime';
+import { useAsyncDebounce } from 'react-table';
+
+import { Grid, Button, Icon, Input, Header, Label } from 'semantic-ui-react';
+
+import './RecordsTable.css';
+import { mutateRecordData } from '../../../list/base/mutations';
+
+
+/**
+ * Table of Records component.
+ */
+export const RecordsTable = ({ tableData, tableConfig }) => {
+  const tableColumnsDefinition = useMemo(() => {
+    return [
+      // Defining invisible columns that are used as the index for the table filter
+      {
+        Header: () => null,
+        id: 'idx_title',
+        accessor: 'title',
+      },
+      {
+        Header: () => null,
+        id: 'idx_relation_type',
+        accessor: 'relation_type.title_l10n',
+      },
+      {
+        Header: () => null,
+        id: 'idx_resource_type',
+        accessor: 'resource_type.title_l10n',
+      },
+      {
+        Header: () => null,
+        id: 'idx_scheme',
+        accessor: 'scheme',
+      },
+      // Content column
+      {
+        Header: () => null,
+        id: 'table-see-also-records',
+        Cell: ({ row }) => {
+          // Getting data
+          const { original: rowData } = row;
+
+          // Preparing data
+          // Title and date
+          const rowTitle = _get(rowData, 'title');
+          const rowDate = _get(rowData, 'date');
+
+          // URL
+          const rowUrl = _get(rowData, 'url');
+
+          // Resource Type
+          const rowLabel = _get(rowData, 'label');
+          const rowLabelColor = _get(rowData, 'labelColor');
+
+          return (
+            <Grid>
+              <Grid.Row verticalAlign="middle">
+                <Grid.Column
+                  widescreen={13}
+                  largeScreen={13}
+                  computer={13}
+                  tablet={13}
+                  mobile={12}
+                >
+                  <div>
+                    <Label size={'tiny'} color={rowLabelColor}>
+                      {rowLabel}
+                    </Label>
+                  </div>
+
+                  <Grid className={'user-stories-metadata'}>
+                    <Grid.Row columns={1}>
+                      <Grid.Column>
+                        <Header>{rowTitle}</Header>
+                      </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row columns={1}>
+                      <Grid.Column>
+                        <p className="content-description">
+                          {rowDate}
+                        </p>
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Grid.Column>
+
+                <Grid.Column
+                  widescreen={3}
+                  largeScreen={3}
+                  computer={3}
+                  tablet={3}
+                  mobile={3}
+                >
+                  <Button.Group size={'mini'} floated={'right'}>
+                    <Button
+                      content={'Access'}
+                      as={'a'}
+                      size={'mini'}
+                      href={rowUrl}
+                    >
+                      Access
+                    </Button>
+                  </Button.Group>
+                </Grid.Column>
+
+              </Grid.Row>
+            </Grid>
+          );
+        },
+      },
+    ];
+  });
+
+  const tableDataMemoized = useMemo(() => tableData.map((row) =>
+    mutateRecordData(row, 'resourceType', 'gray')
+  ));
+
+  return (
+    <div className={'table-records'}>
+      <PaginableTable
+        unstackable
+        fixed={true}
+        padded={true}
+        data={tableDataMemoized}
+        columnsConfiguration={tableColumnsDefinition}
+        initialState={{
+          hiddenColumns: [
+            'idx_title',
+            'idx_relation_type',
+            'idx_resource_type',
+            'idx_scheme',
+          ],
+        }}
+        showHeader={false}
+        {...tableConfig}
+      />
+    </div>
+  );
+};

src/lib/components/table/thematic/RecordsTable/RecordsTable.stories.js

@@ -0,0 +1,31 @@
+/*
+ * 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 from 'react';
+
+import { RecordsTable as RecordsTableComponent } from './RecordsTable';
+
+import recordsApiData from '../../../../../mocks/list/records-api.json';
+
+export default {
+  title: 'Table/Thematic/Records table',
+  component: RecordsTableComponent,
+};
+
+/**
+ * Component template
+ */
+const Template = (args) => <RecordsTableComponent {...args} />;
+
+/**
+ * Component stories
+ */
+export const Base = Template.bind({});
+Base.args = {
+  tableData: recordsApiData.hits.hits,
+};