From 5a9fed806f633b17773a29de196a54f4d70e0023 Mon Sep 17 00:00:00 2001 From: Alexey Kovardakov Date: Wed, 29 Jul 2020 23:57:32 +0300 Subject: [PATCH 1/4] Resolve ISS-27 --- src/ResourceComposer/RenderList.tsx | 1 + src/admin/index.ts | 2 ++ src/components/Table/index.tsx | 33 +++++++++++++++++++---------- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/ResourceComposer/RenderList.tsx b/src/ResourceComposer/RenderList.tsx index b0ebb39ce..470d3bb0c 100644 --- a/src/ResourceComposer/RenderList.tsx +++ b/src/ResourceComposer/RenderList.tsx @@ -46,6 +46,7 @@ export const RenderList: React.FC<{ admin: BaseAdmin; provider: BaseProvider; us {objects && ( row.id + abstract permissions?: string[] abstract list_filters?: ListFilterDescription[] diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index ff72ca93f..4e2f1f049 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Flex, Text, Box, Collapse, Button } from '@chakra-ui/core' import { usePagination, useTable, useFilters } from 'react-table' -import { Link, useHistory } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import type { ReactNode } from 'react' import type { Row, HeaderGroup } from 'react-table' @@ -18,6 +18,7 @@ import { FilterManager } from '../../utils/filterManager' type TableProps = { data: any + detailsRoute?: Function listFilterTemplates?: ListFilterTemplateDescription[] listFilters?: ListFilterDescription[] columns: ListFieldDescription[] @@ -53,7 +54,11 @@ const mountHeader = (headerGroups: HeaderGroup[]): ReactNode => { )) } -const mountRows = (rows: Row[], prepareRow: Function): ReactNode => { +const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | undefined): ReactNode => { + const { push } = useHistory() + const goToResource = (route: string): (() => void) => { + return () => push(route) + } return rows.map((row: Row) => { prepareRow(row) @@ -61,15 +66,20 @@ const mountRows = (rows: Row[], prepareRow: Function): ReactNode => { // eslint-disable-next-line {row.cells.map((cell: any) => { + const onclickhandler = cell.column.toDetailRoute + ? { onClick: goToResource(cell.column.toDetailRoute(cell.row.original)) } + : detailsRoute + ? { onClick: goToResource(`./${detailsRoute(cell.row.original)}`) } + : {} return ( - - {cell.column.toDetailRoute ? ( - - {cell.render('Cell')} - - ) : ( - cell.render('Cell') - )} + + {cell.render('Cell')} ) })} @@ -149,6 +159,7 @@ const Table = ({ setBackendPage, user, filterable = false, + detailsRoute = undefined, }: TableProps): JSX.Element => { const { getTableProps, @@ -200,7 +211,7 @@ const Table = ({ {mountHeader(headerGroups)} - {mountRows(page, prepareRow)} + {mountRows(page, prepareRow, detailsRoute)} Date: Thu, 30 Jul 2020 10:49:55 +0300 Subject: [PATCH 2/4] Relative path is a default option --- src/components/Table/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 4e2f1f049..9365f3c4f 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -69,7 +69,7 @@ const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | u const onclickhandler = cell.column.toDetailRoute ? { onClick: goToResource(cell.column.toDetailRoute(cell.row.original)) } : detailsRoute - ? { onClick: goToResource(`./${detailsRoute(cell.row.original)}`) } + ? { onClick: goToResource(`${detailsRoute(cell.row.original)}`) } : {} return ( Date: Thu, 30 Jul 2020 11:13:33 +0300 Subject: [PATCH 3/4] Fix ESLint errors --- src/components/Table/index.tsx | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 9365f3c4f..18c4a1e8b 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -54,8 +54,7 @@ const mountHeader = (headerGroups: HeaderGroup[]): ReactNode => { )) } -const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | undefined): ReactNode => { - const { push } = useHistory() +const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | undefined, push: Function): ReactNode => { const goToResource = (route: string): (() => void) => { return () => push(route) } @@ -66,11 +65,25 @@ const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | u // eslint-disable-next-line {row.cells.map((cell: any) => { - const onclickhandler = cell.column.toDetailRoute - ? { onClick: goToResource(cell.column.toDetailRoute(cell.row.original)) } - : detailsRoute - ? { onClick: goToResource(`${detailsRoute(cell.row.original)}`) } - : {} + let onclickhandler: { + onClick?: Function, + } + + if (cell.column.toDetailRoute) { + onclickhandler = { + onClick: goToResource(cell.column.toDetailRoute(cell.row.original)) + } + } else if (detailsRoute) { + onclickhandler = { + onClick: goToResource(`./${detailsRoute(cell.row.original)}`), + } + } else { + onclickhandler = { + // Routing to id by default + onClick: goToResource(`./${cell.row.original.id}`) + } + } + return ( {mountHeader(headerGroups)} - {mountRows(page, prepareRow, detailsRoute)} + {mountRows(page, prepareRow, detailsRoute, push)} Date: Thu, 30 Jul 2020 11:14:14 +0300 Subject: [PATCH 4/4] Auto styling --- src/components/Table/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 18c4a1e8b..eb40d3a95 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -54,7 +54,12 @@ const mountHeader = (headerGroups: HeaderGroup[]): ReactNode => { )) } -const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | undefined, push: Function): ReactNode => { +const mountRows = ( + rows: Row[], + prepareRow: Function, + detailsRoute: Function | undefined, + push: Function +): ReactNode => { const goToResource = (route: string): (() => void) => { return () => push(route) } @@ -66,12 +71,12 @@ const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | u {row.cells.map((cell: any) => { let onclickhandler: { - onClick?: Function, + onClick?: Function } if (cell.column.toDetailRoute) { onclickhandler = { - onClick: goToResource(cell.column.toDetailRoute(cell.row.original)) + onClick: goToResource(cell.column.toDetailRoute(cell.row.original)), } } else if (detailsRoute) { onclickhandler = { @@ -80,7 +85,7 @@ const mountRows = (rows: Row[], prepareRow: Function, detailsRoute: Function | u } else { onclickhandler = { // Routing to id by default - onClick: goToResource(`./${cell.row.original.id}`) + onClick: goToResource(`./${cell.row.original.id}`), } }