feat: StudyListTable, ExpandedRow, API definitions (#1579)

* feat: StudyListTable Refactor * feat: StudyListTable + Props Refactor * fix expanded rows handler * update and fix study list doc page * fix date format * use moment to format date * expose new components * fix study list expanded row * Export and Create doc page for Pagination * API Definition, Export and Doc page for StudyListTable * StudyListTableRow * use real example to mount study list * move files * temporary change study list (viewer) structure * fix studyList * remove unused files * remove file * remove unused package * PR fixes * Remove console.dir Co-authored-by: Gustavo Lelis <galelis@gmail.com>
2020-05-15 13:46:20 +02:00
1 parent 056f56f5b4
commit f4b078912a
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+
+const StudyListExpandedRow = ({
+  seriesTableColumns,
+  seriesTableDataSource,
+  children,
+}) => {
+  return (
+    <div className="w-full bg-black py-4 pl-12 pr-2">
+      <div className="block">{children}</div>
+      <div className="mt-4">
+        <Table>
+          <TableHead>
+            <TableRow>
+              {Object.keys(seriesTableColumns).map((columnKey) => {
+                return (
+                  <TableCell key={columnKey}>
+                    {seriesTableColumns[columnKey]}
+                  </TableCell>
+                );
+              })}
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {seriesTableDataSource.map((row, i) => (
+              <TableRow key={i}>
+                {Object.keys(row).map((cellKey) => {
+                  const content = row[cellKey];
+                  return <TableCell key={cellKey}>{content}</TableCell>;
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
+
+StudyListExpandedRow.propTypes = {
+  seriesTableDataSource: PropTypes.arrayOf(PropTypes.object).isRequired,
+  seriesTableColumns: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default StudyListExpandedRow;
@@ -0,0 +1,2 @@
+import StudyListExpandedRow from './StudyListExpandedRow';
+export default StudyListExpandedRow;
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, ButtonGroup, Icon, IconButton, Typography } from '@ohif/ui';
+
+<<<<<<< HEAD:platform/ui/src/views/StudyList/components/StudyListPagination.js
+const StudyListPagination = (props) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+=======
+const StudyListPagination = ({
+  onChangePage,
+  currentPage,
+  perPage,
+  onChangePerPage,
+}) => {
+>>>>>>> d5a288db1... feat: StudyListTable, ExpandedRow, API definitions (#1579):platform/ui/src/components/StudyListPagination/StudyListPagination.js
+  const navigateToPage = (page) => {
+    const toPage = page < 1 ? 1 : page;
+    onChangePage(toPage);
+  };
+
+  return (
+    <div className="bg-black py-10">
+      <div className="container m-auto relative px-8">
+        <div className="flex justify-between">
+          <div className="flex items-center">
+            <div className="relative mr-3">
+              <select
+<<<<<<< HEAD:platform/ui/src/views/StudyList/components/StudyListPagination.js
+                defaultValue="25"
+                className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+=======
+                defaultValue={perPage}
+                className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+>>>>>>> d5a288db1... feat: StudyListTable, ExpandedRow, API definitions (#1579):platform/ui/src/components/StudyListPagination/StudyListPagination.js
+                style={{ height: 28 }}
+                onChange={(e) => onChangePerPage(e.target.value)}
+              >
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+                <Icon
+                  name="arrow-down"
+                  className="text-white"
+                  style={{ width: 6 }}
+                />
+              </div>
+            </div>
+            <Typography className="text-base opacity-60">
+              Results per page
+            </Typography>
+          </div>
+          <div className="">
+            <div className="flex items-center">
+              <Typography className="opacity-60 mr-4 text-base">
+                Page {currentPage}
+              </Typography>
+              <ButtonGroup color="primary">
+                <IconButton
+                  size="small"
+                  className="border-common-active px-4 py-2 text-base"
+                  style={{ padding: '3px 12px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(1)}
+                >
+                  <>{`<<`}</>
+                </IconButton>
+                <Button
+                  size="small"
+                  className="border-common-active py-2 text-base"
+                  style={{ padding: '3px 8px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(currentPage - 1)}
+                >{`< Previous`}</Button>
+                <Button
+                  size="small"
+                  className="border-common-active py-2 text-base"
+                  style={{ padding: '3px 20px', minWidth: 0 }}
+                  color="white"
+                  onClick={() => navigateToPage(currentPage + 1)}
+                >
+                  {`Next >`}
+                </Button>
+              </ButtonGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+StudyListPagination.propTypes = {
+  onChangePage: PropTypes.func.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  perPage: PropTypes.number.isRequired,
+  onChangePerPage: PropTypes.func.isRequired,
+};
+
+export default StudyListPagination;
@@ -0,0 +1,45 @@
+---
+name: Study List Pagination
+menu: Components
+route: components/studyListPagination
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyListPagination } from '@ohif/ui';
+
+# StudyListPagination
+
+## Import
+
+```javascript
+import { StudyListPagination } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [perPage, setPerPage] = useState(25);
+    const onChangePage = (page) => {
+      setCurrentPage(page);
+    };
+    const onChangePerPage = (perPage) => {
+      setPerPage(perPage);
+      setCurrentPage(1);
+    };
+    return (
+      <StudyListPagination
+        onChangePage={onChangePage}
+        onChangePerPage={onChangePerPage}
+        currentPage={currentPage}
+        perPage={perPage}
+      />
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyListPagination} />
@@ -0,0 +1,3 @@
+import StudyListPagination from './StudyListPagination';
+
+export default StudyListPagination;
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import StudyListTableRow from './StudyListTableRow';
+
+const StudyListTable = ({ tableDataSource }) => {
+  return (
+    <>
+      <div className="bg-black">
+        <div className="container m-auto relative">
+          <table className="w-full text-white">
+            <tbody>
+              {tableDataSource.map((tableData, i) => {
+                return <StudyListTableRow tableData={tableData} key={i} />;
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+};
+
+StudyListTable.propTypes = {
+  tableDataSource: PropTypes.arrayOf(
+    PropTypes.shape({
+      row: PropTypes.array.isRequired,
+      expandedContent: PropTypes.node.isRequired,
+      onClickRow: PropTypes.func.isRequired,
+      isExpanded: PropTypes.bool.isRequired,
+    })
+  ),
+};
+
+export default StudyListTable;
@@ -0,0 +1,62 @@
+---
+name: Study List Table
+menu: Components
+route: components/studyListTable
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { StudyListTable } from '@ohif/ui';
+
+# StudyListTable
+
+This component is used to display a studies list.
+
+## Import
+
+```javascript
+import { StudyListTable } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const studies = new Array(10).fill('');
+    const [expandedRows, setExpandedRows] = useState([]);
+    const tableDataSource = studies.map((study, key) => {
+      const rowKey = key + 1;
+      const isExpanded = expandedRows.some((k) => k === rowKey);
+      return {
+        row: [
+          { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
+          { key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
+          { key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
+          { key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
+        ],
+        expandedContent: (
+          <td className="w-full p-8">
+            Custom expanded content for row {rowKey}
+          </td>
+        ),
+        onClickRow: () =>
+          setExpandedRows((rows) =>
+            isExpanded ? rows.filter((n) => rowKey !== n) : [...rows, rowKey]
+          ),
+        isExpanded,
+      };
+    });
+    return (
+      <div className="py-4">
+        <StudyListTable
+          tableDataSource={tableDataSource}
+          numOfStudies={studies.length}
+        />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={StudyListTable} />
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const StudyListTableRow = (props) => {
+  const { tableData } = props;
+  const { row, expandedContent, onClickRow, isExpanded } = tableData;
+  return (
+    <>
+      <tr>
+        <td
+          className={classnames('border-0 p-0', {
+            'border-b border-custom-violetPale bg-custom-navyDark': isExpanded,
+          })}
+        >
+          <div
+            className={classnames('w-full transition duration-300', {
+              'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isExpanded,
+            })}
+          >
+            <table className={classnames('w-full p-4')}>
+              <tbody>
+                <tr
+                  className={classnames(
+                    'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
+                    {
+                      'bg-custom-navyDark': !isExpanded,
+                    },
+                    { 'bg-custom-navy': isExpanded }
+                  )}
+                  onClick={onClickRow}
+                >
+                  {row.map((cell) => {
+                    const { content, gridCol, name } = cell;
+
+                    return (
+                      <td
+                        key={name}
+                        className={classnames(
+                          'px-4 py-2 text-base',
+                          { 'border-b border-custom-violetPale': !isExpanded },
+                          `w-${gridCol}/24` || ''
+                        )}
+                      >
+                        <div className="flex flex-row items-center pl-1">
+                          {content}
+                        </div>
+                      </td>
+                    );
+                  })}
+                </tr>
+                {isExpanded && (
+                  <tr
+                    className={classnames(
+                      'w-full bg-black max-h-0 overflow-hidden'
+                    )}
+                  >
+                    <td colSpan={row.length}>{expandedContent}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+    </>
+  );
+};
+
+StudyListTableRow.propTypes = {
+  tableData: PropTypes.shape({
+    row: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        content: PropTypes.node.isRequired,
+        gridCol: PropTypes.number.isRequired,
+      })
+    ).isRequired,
+    expandedContent: PropTypes.node.isRequired,
+    onClickRow: PropTypes.func.isRequired,
+    isExpanded: PropTypes.bool.isRequired,
+  }),
+};
+
+export default StudyListTableRow;
@@ -0,0 +1,3 @@
+import StudyListTable from './StudyListTable';
+
+export default StudyListTable;
@@ -14,6 +14,9 @@ import Label from './Label';
 import NavBar from './NavBar';
 import Select from './Select';
 import Svg from './Svg';
+import StudyListExpandedRow from './StudyListExpandedRow';
+import StudyListPagination from './StudyListPagination';
+import StudyListTable from './StudyListTable';
 import Table from './Table';
 import TableBody from './TableBody';
 import TableCell from './TableCell';
@@ -39,6 +42,9 @@ export {
  NavBar,
  Select,
  Svg,
+  StudyListExpandedRow,
+  StudyListPagination,
+  StudyListTable,
  Table,
  TableBody,
  TableCell,