From f41a273ffd7cbbc90277d832cb733ca3ebd2c9f2 Mon Sep 17 00:00:00 2001 From: vargastat Date: Thu, 12 Dec 2024 18:29:50 +0100 Subject: [PATCH 1/5] feat: work on going --- .../home/components/StudiesPagination.tsx | 2 +- .../home/components/StudyTableDisplay.tsx | 132 +++--------------- .../home/components/StudyTableHeaders.tsx | 92 ++++++++++++ .../home/components/StudyTableUtils.tsx | 83 +++++++++++ vite.config.js | 5 + 5 files changed, 199 insertions(+), 115 deletions(-) create mode 100644 src/pages/pegase/home/components/StudyTableHeaders.tsx create mode 100644 src/pages/pegase/home/components/StudyTableUtils.tsx diff --git a/src/pages/pegase/home/components/StudiesPagination.tsx b/src/pages/pegase/home/components/StudiesPagination.tsx index 91938ca..750dfe3 100644 --- a/src/pages/pegase/home/components/StudiesPagination.tsx +++ b/src/pages/pegase/home/components/StudiesPagination.tsx @@ -12,7 +12,7 @@ type StudiesPaginationProps = StdTablePaginationProps; const StudiesPagination = ({ count, intervalSize, current, onChange }: StudiesPaginationProps) => { return ( -
+
); diff --git a/src/pages/pegase/home/components/StudyTableDisplay.tsx b/src/pages/pegase/home/components/StudyTableDisplay.tsx index f2b0de3..600e87a 100644 --- a/src/pages/pegase/home/components/StudyTableDisplay.tsx +++ b/src/pages/pegase/home/components/StudyTableDisplay.tsx @@ -3,20 +3,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import StdAvatar from '@/components/common/layout/stdAvatar/StdAvatar'; import StdSimpleTable from '@/components/common/data/stdSimpleTable/StdSimpleTable'; -import { createColumnHelper } from '@tanstack/react-table'; import { useState } from 'react'; -import { useTranslation } from 'react-i18next'; import { StudyDTO } from '@/shared/types/index'; -import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; -import StdIcon from '@common/base/stdIcon/StdIcon'; import StudiesPagination from './StudiesPagination'; -import StdTagList from '@common/base/StdTagList/StdTagList'; -import StdRadioButton from '@/components/common/forms/stdRadioButton/StdRadioButton'; import { useStudyTableDisplay } from './useStudyTableDisplay'; - -const columnHelper = createColumnHelper(); +import getStudyTableHeaders from './StudyTableHeaders'; +import { addSortColumn, renderButtons } from './StudyTableUtils'; interface StudyTableDisplayProps { searchStudy: string | undefined; @@ -24,8 +17,8 @@ interface StudyTableDisplayProps { } const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) => { - const { t } = useTranslation(); const [sortBy, setSortBy] = useState<{ [key: string]: 'asc' | 'desc' }>({}); + const [selectedRows, setSelectedRows] = useState([]); const handleSort = (column: string) => { const newSortOrder = sortBy[column] === 'asc' ? 'desc' : 'asc'; @@ -34,65 +27,7 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = }; const [sortedColumn, setSortedColumn] = useState('status'); - const headers = [ - columnHelper.display({ - id: 'radioColumn', - header: ({ table }) => ( - table.toggleAllRowsSelected()} - name="headerRadio" - /> - ), - cell: ({ row }) => ( -
e.stopPropagation()} - className={`${row.getIsSelected() ? 'block' : 'hidden group-hover:block'}`} - > - -
- ), - }), - - columnHelper.accessor('study_name', { - header: t('home.@study_name'), - cell: ({ getValue, row }) => { - const status = row.original.status; - const textClass = status === 'GENERATED' ? 'text-primary-900' : 'group-hover:text-green-500'; - - return {getValue()}; - }, - }), - - columnHelper.accessor('user_name', { - header: t('home.@user_name'), - cell: ({ getValue }: { getValue: () => string }) => ( - - ), - }), - columnHelper.accessor('project', { header: t('home.@project') }), - columnHelper.accessor('status', { header: t('home.@status') }), - columnHelper.accessor('horizon', { header: t('home.@horizon') }), - columnHelper.accessor('keywords', { - header: 'keywords', - minSize: 500, - size: 500, - cell: ({ getValue, row }) => ( -
- -
- ), - }), - columnHelper.accessor('creation_date', { header: t('home.@creation_date') }), - ]; + const headers = getStudyTableHeaders(); const [isHeaderHovered, setIsHeaderHovered] = useState(false); @@ -100,58 +35,27 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = setIsHeaderHovered(hovered); }; - function addSortColumn(headers: any[]) { - return headers.map((column) => { - const isSortable = column.accessorKey !== 'keywords'; - return { - ...column, - header: ( -
isSortable && handleHeaderHover(true)} - onMouseLeave={() => isSortable && handleHeaderHover(false)} - onClick={() => { - if (isSortable) { - handleHeaderHover(false); - handleSort(column.accessorKey as string); - } - }} - > -
{column.header}
- {isSortable && ( -
- {sortBy[column.accessorKey as string] && sortedColumn === column.accessorKey ? ( - sortBy[column.accessorKey as string] === 'asc' ? ( - - - - ) : ( - - - - ) - ) : ( - - - - )} -
- )} -
- ), - }; - }); - } + const handleRowSelectionChange = (selectedIds: any) => { + console.log('Selected IDs:', selectedIds); // Log to check the value of selectedIds + if (Array.isArray(selectedIds)) { + const newSelectedRows = rows.filter((row) => selectedIds.includes(row.id.toString())); + console.log('Selected Rows:', newSelectedRows); + setSelectedRows(newSelectedRows); + } else { + console.error('Expected selectedIds to be an array'); + } + }; + const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({ searchStudy, projectId, sortBy }); + const sortedHeaders = addSortColumn(headers, handleSort, sortBy, sortedColumn, handleHeaderHover, isHeaderHovered); return (
- +
+ {renderButtons(selectedRows)}
diff --git a/src/pages/pegase/home/components/StudyTableHeaders.tsx b/src/pages/pegase/home/components/StudyTableHeaders.tsx new file mode 100644 index 0000000..7d6d5ea --- /dev/null +++ b/src/pages/pegase/home/components/StudyTableHeaders.tsx @@ -0,0 +1,92 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import StdTagList from '@/components/common/base/StdTagList/StdTagList'; +import StdRadioButton from '@/components/common/forms/stdRadioButton/StdRadioButton'; +import StdAvatar from '@/components/common/layout/stdAvatar/StdAvatar'; +import { StudyDTO } from '@/shared/types/pegase/study'; +import { createColumnHelper } from '@tanstack/react-table'; +import { useTranslation } from 'react-i18next'; + +const columnHelper = createColumnHelper(); + +const getStudyTableHeaders = () => { + const { t } = useTranslation(); + + return [ + columnHelper.display({ + id: 'radioColumn', + header: ({ table }) => ( + table.toggleAllRowsSelected()} + name="headerRadio" + /> + ), + cell: ({ row }) => ( +
e.stopPropagation()} + className={`${row.getIsSelected() ? 'block' : 'hidden group-hover:block'}`} + > + +
+ ), + }), + + columnHelper.accessor('study_name', { + header: t('home.@study_name'), + cell: ({ getValue, row }) => { + const status = row.original.status; + const textClass = status === 'GENERATED' ? 'text-primary-900' : 'group-hover:text-green-500'; + return {getValue()}; + }, + }), + + columnHelper.accessor('user_name', { + header: t('home.@user_name'), + cell: ({ getValue }) => ( + + ), + }), + + columnHelper.accessor('project', { + header: t('home.@project'), + }), + + columnHelper.accessor('status', { + header: t('home.@status'), + }), + + columnHelper.accessor('horizon', { + header: t('home.@horizon'), + }), + + columnHelper.accessor('keywords', { + header: 'keywords', + minSize: 500, + size: 500, + cell: ({ getValue, row }) => ( +
+ +
+ ), + }), + + columnHelper.accessor('creation_date', { + header: t('home.@creation_date'), + }), + ]; +}; + +export default getStudyTableHeaders; diff --git a/src/pages/pegase/home/components/StudyTableUtils.tsx b/src/pages/pegase/home/components/StudyTableUtils.tsx new file mode 100644 index 0000000..712131c --- /dev/null +++ b/src/pages/pegase/home/components/StudyTableUtils.tsx @@ -0,0 +1,83 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import StdButton from '@/components/common/base/stdButton/StdButton'; +import StdIcon from '@/components/common/base/stdIcon/StdIcon'; +import { StudyDTO } from '@/shared/types/index'; +import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; + +export function addSortColumn( + headers: any[], + handleSort: (column: string) => void, + sortBy: { [key: string]: 'asc' | 'desc' }, + sortedColumn: string | null, + handleHeaderHover: (hovered: boolean) => void, + isHeaderHovered: boolean, +) { + return headers.map((column) => { + const isSortable = column.accessorKey !== 'keywords'; + return { + ...column, + header: ( +
isSortable && handleHeaderHover(true)} + onMouseLeave={() => isSortable && handleHeaderHover(false)} + onClick={() => { + if (isSortable) { + handleHeaderHover(false); + handleSort(column.accessorKey as string); + } + }} + > +
{column.header}
+ {isSortable && ( +
+ {sortBy[column.accessorKey as string] && sortedColumn === column.accessorKey ? ( + sortBy[column.accessorKey as string] === 'asc' ? ( + + + + ) : ( + + + + ) + ) : ( + + + + )} +
+ )} +
+ ), + }; + }); +} + +export const renderButtons = (selectedRows: StudyDTO[]) => { + if (selectedRows.length === 0) { + return console.log('Create new study')} />; + } + + const hasInProgress = selectedRows.some((row) => row.status === 'IN_PROGRESS'); + + if (hasInProgress) { + return ( + <> + console.log('Duplicate study')} /> + console.log('Delete study')} /> + + ); + } + + return null; +}; diff --git a/vite.config.js b/vite.config.js index 3160a3f..e7a3899 100644 --- a/vite.config.js +++ b/vite.config.js @@ -32,6 +32,11 @@ export default defineConfig({ globals: true, environment: 'jsdom', setupFiles: './src/testSetup.ts', + coverage: { + provider: 'v8', + reporter: ['lcov', 'text'], + exclude: ['src/*.test.ts', 'src/shared/**', 'src/components/common/**'], + }, }, server: { port: DEFAULT_PORT, From 3e623fe917d924811902eefdba1a789140383900 Mon Sep 17 00:00:00 2001 From: vargastat Date: Mon, 16 Dec 2024 15:16:01 +0100 Subject: [PATCH 2/5] feat: buttons for homepage added --- .../data/stdSimpleTable/StdSimpleTable.tsx | 3 + .../common/data/stdTable/TableCore.tsx | 26 +++++- .../home/components/StudyTableDisplay.tsx | 90 +++++++++++++------ .../home/components/StudyTableHeaders.tsx | 16 +--- .../home/components/StudyTableUtils.tsx | 21 ----- src/shared/types/common/StudyStatus.type.ts | 13 +++ 6 files changed, 107 insertions(+), 62 deletions(-) create mode 100644 src/shared/types/common/StudyStatus.type.ts diff --git a/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx b/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx index 07ddddd..27395a9 100644 --- a/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx +++ b/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx @@ -33,8 +33,10 @@ const StdSimpleTable = ({ columnResizeMode = undefined, enableRowSelection = false, enableMultiRowSelection = false, + hasMainColumnGroup = false, ...tableOptions }: StdSimpleTableProps) => { + 'use no memo'; const table = useReactTable({ columns, data, @@ -53,6 +55,7 @@ const StdSimpleTable = ({ columnSize={columnSize} columnResizeMode={columnResizeMode} trClassName={trClassName} + hasMainColumnGroup={hasMainColumnGroup} /> ); }; diff --git a/src/components/common/data/stdTable/TableCore.tsx b/src/components/common/data/stdTable/TableCore.tsx index 3af18b1..bb4bebe 100644 --- a/src/components/common/data/stdTable/TableCore.tsx +++ b/src/components/common/data/stdTable/TableCore.tsx @@ -83,6 +83,7 @@ export type TableCoreProps = { columnSize?: ColumnSizeType; columnResizeMode?: ColumnResizeMode; table: Table; + hasMainColumnGroup?: boolean; }; const ROW_CLASSES = '[&_tr]:border-b [&_tr]:border-gray-400 [&_tr]:text-body-s'; @@ -96,7 +97,15 @@ const tableStyleBuilder = (table: Table, columnSize: ColumnSizeTy } : undefined; -const TableCore = ({ table, id: propId, striped, trClassName, columnSize = 'meta' }: TableCoreProps) => { +const TableCore = ({ + table, + id: propId, + striped, + trClassName, + columnSize = 'meta', + hasMainColumnGroup = false, +}: TableCoreProps) => { + 'use no memo'; const id = useStdId('table-', propId); const handleToggleRow = (row: Row) => () => { @@ -111,6 +120,7 @@ const TableCore = ({ table, id: propId, striped, trClassName, columnSize {table .getHeaderGroups() + .slice(hasMainColumnGroup ? 1 : 0) .map((headerGroup) => headerGroup.headers.map((header) => ( @@ -132,6 +142,20 @@ const TableCore = ({ table, id: propId, striped, trClassName, columnSize ))} + + {table + .getFooterGroups() + .slice(1) + .map((footerGroup) => ( + + {footerGroup.headers.map((header) => ( + + {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())} + + ))} + + ))} + ); }; diff --git a/src/pages/pegase/home/components/StudyTableDisplay.tsx b/src/pages/pegase/home/components/StudyTableDisplay.tsx index 600e87a..5de3a56 100644 --- a/src/pages/pegase/home/components/StudyTableDisplay.tsx +++ b/src/pages/pegase/home/components/StudyTableDisplay.tsx @@ -6,10 +6,13 @@ import StdSimpleTable from '@/components/common/data/stdSimpleTable/StdSimpleTable'; import { useState } from 'react'; import { StudyDTO } from '@/shared/types/index'; -import StudiesPagination from './StudiesPagination'; import { useStudyTableDisplay } from './useStudyTableDisplay'; import getStudyTableHeaders from './StudyTableHeaders'; -import { addSortColumn, renderButtons } from './StudyTableUtils'; +import { addSortColumn } from './StudyTableUtils'; +import StudiesPagination from './StudiesPagination'; +import { RowSelectionState } from '@tanstack/react-table'; +import StdButton from '@/components/common/base/stdButton/StdButton'; +import { StudyStatus } from '@/shared/types/common/StudyStatus.type'; interface StudyTableDisplayProps { searchStudy: string | undefined; @@ -17,45 +20,80 @@ interface StudyTableDisplayProps { } const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) => { - const [sortBy, setSortBy] = useState<{ [key: string]: 'asc' | 'desc' }>({}); - const [selectedRows, setSelectedRows] = useState([]); + const [sortByState, setSortByState] = useState<{ [key: string]: 'asc' | 'desc' }>({}); + const [rowSelection, setRowSelection] = useState({}); + const [sortedColumn, setSortedColumn] = useState('status'); + const [isHeaderHovered, setIsHeaderHovered] = useState(false); const handleSort = (column: string) => { - const newSortOrder = sortBy[column] === 'asc' ? 'desc' : 'asc'; - setSortBy({ [column]: newSortOrder }); + const newSortOrder = sortByState[column] === 'asc' ? 'desc' : 'asc'; + setSortByState({ [column]: newSortOrder }); setSortedColumn(column); }; - const [sortedColumn, setSortedColumn] = useState('status'); + const handleHeaderHover = (hovered: boolean) => { + setIsHeaderHovered(hovered); + }; + + const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({ + searchStudy, + projectId, + sortBy: sortByState, + }); const headers = getStudyTableHeaders(); - const [isHeaderHovered, setIsHeaderHovered] = useState(false); + const sortedHeaders = addSortColumn( + headers, + handleSort, + sortByState, + sortedColumn, + handleHeaderHover, + isHeaderHovered, + ); - const handleHeaderHover = (hovered: boolean) => { - setIsHeaderHovered(hovered); - }; + const selectedRowId = Object.keys(rowSelection)[0]; - const handleRowSelectionChange = (selectedIds: any) => { - console.log('Selected IDs:', selectedIds); // Log to check the value of selectedIds - if (Array.isArray(selectedIds)) { - const newSelectedRows = rows.filter((row) => selectedIds.includes(row.id.toString())); - console.log('Selected Rows:', newSelectedRows); - setSelectedRows(newSelectedRows); - } else { - console.error('Expected selectedIds to be an array'); - } - }; + const selectedStatus = rows[Number.parseInt(selectedRowId || '-1')]?.status?.toUpperCase(); - const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({ searchStudy, projectId, sortBy }); - const sortedHeaders = addSortColumn(headers, handleSort, sortBy, sortedColumn, handleHeaderHover, isHeaderHovered); + const isDuplicateActive = selectedStatus === StudyStatus.GENERATED; + const isDeleteActive = selectedStatus === StudyStatus.ERROR || selectedStatus === StudyStatus.IN_PROGRESS; return (
- + ) => setRowSelection(rowsSelected)} + />
-
- {renderButtons(selectedRows)} +
+
+ {selectedRowId !== undefined ? ( + <> + console.log('duplicate')} + variant="outlined" + disabled={!isDuplicateActive} + /> + console.log('Delete')} + variant="outlined" + color="danger" + disabled={!isDeleteActive} + /> + + ) : ( + console.log('NewStudy')} /> + )} +
diff --git a/src/pages/pegase/home/components/StudyTableHeaders.tsx b/src/pages/pegase/home/components/StudyTableHeaders.tsx index 7d6d5ea..7b2010f 100644 --- a/src/pages/pegase/home/components/StudyTableHeaders.tsx +++ b/src/pages/pegase/home/components/StudyTableHeaders.tsx @@ -15,24 +15,12 @@ const columnHelper = createColumnHelper(); const getStudyTableHeaders = () => { const { t } = useTranslation(); - return [ columnHelper.display({ id: 'radioColumn', - header: ({ table }) => ( - table.toggleAllRowsSelected()} - name="headerRadio" - /> - ), + header: ({ table }) => <>, cell: ({ row }) => ( -
e.stopPropagation()} - className={`${row.getIsSelected() ? 'block' : 'hidden group-hover:block'}`} - > +
{ - if (selectedRows.length === 0) { - return console.log('Create new study')} />; - } - - const hasInProgress = selectedRows.some((row) => row.status === 'IN_PROGRESS'); - - if (hasInProgress) { - return ( - <> - console.log('Duplicate study')} /> - console.log('Delete study')} /> - - ); - } - - return null; -}; diff --git a/src/shared/types/common/StudyStatus.type.ts b/src/shared/types/common/StudyStatus.type.ts new file mode 100644 index 0000000..09d7d6d --- /dev/null +++ b/src/shared/types/common/StudyStatus.type.ts @@ -0,0 +1,13 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +export enum StudyStatus { + IN_PROGRESS = 'IN_PROGRESS', + GENERATED = 'GENERATED', + ERROR = 'ERROR', + CLOSED = 'CLOSED', + DELETED = 'DELETED', +} From 92d61bdc4ae59dad4adce027cdee79be7c4e31fd Mon Sep 17 00:00:00 2001 From: vargastat Date: Mon, 16 Dec 2024 16:24:21 +0100 Subject: [PATCH 3/5] feat: StudyDto names changed --- src/pages/pegase/home/components/StudyTableHeaders.tsx | 9 +++++---- src/pages/pegase/home/components/StudyTableUtils.tsx | 2 +- src/pages/pegase/home/components/useStudyTableDisplay.ts | 7 +++---- src/shared/types/pegase/study.ts | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/pegase/home/components/StudyTableHeaders.tsx b/src/pages/pegase/home/components/StudyTableHeaders.tsx index 7b2010f..ecd5615 100644 --- a/src/pages/pegase/home/components/StudyTableHeaders.tsx +++ b/src/pages/pegase/home/components/StudyTableHeaders.tsx @@ -7,6 +7,7 @@ import StdTagList from '@/components/common/base/StdTagList/StdTagList'; import StdRadioButton from '@/components/common/forms/stdRadioButton/StdRadioButton'; import StdAvatar from '@/components/common/layout/stdAvatar/StdAvatar'; +import { StudyStatus } from '@/shared/types/common/StudyStatus.type'; import { StudyDTO } from '@/shared/types/pegase/study'; import { createColumnHelper } from '@tanstack/react-table'; import { useTranslation } from 'react-i18next'; @@ -32,16 +33,16 @@ const getStudyTableHeaders = () => { ), }), - columnHelper.accessor('study_name', { + columnHelper.accessor('name', { header: t('home.@study_name'), cell: ({ getValue, row }) => { const status = row.original.status; - const textClass = status === 'GENERATED' ? 'text-primary-900' : 'group-hover:text-green-500'; + const textClass = status === StudyStatus.GENERATED ? 'text-primary-900' : 'group-hover:text-green-500'; return {getValue()}; }, }), - columnHelper.accessor('user_name', { + columnHelper.accessor('createdBy', { header: t('home.@user_name'), cell: ({ getValue }) => ( @@ -71,7 +72,7 @@ const getStudyTableHeaders = () => { ), }), - columnHelper.accessor('creation_date', { + columnHelper.accessor('creationDate', { header: t('home.@creation_date'), }), ]; diff --git a/src/pages/pegase/home/components/StudyTableUtils.tsx b/src/pages/pegase/home/components/StudyTableUtils.tsx index 77cd631..928f6d9 100644 --- a/src/pages/pegase/home/components/StudyTableUtils.tsx +++ b/src/pages/pegase/home/components/StudyTableUtils.tsx @@ -16,7 +16,7 @@ export function addSortColumn( isHeaderHovered: boolean, ) { return headers.map((column) => { - const isSortable = column.accessorKey !== 'keywords'; + const isSortable = column.accessorKey !== 'keywords' && column.id !== 'radioColumn'; return { ...column, header: ( diff --git a/src/pages/pegase/home/components/useStudyTableDisplay.ts b/src/pages/pegase/home/components/useStudyTableDisplay.ts index 9418e3d..a075865 100644 --- a/src/pages/pegase/home/components/useStudyTableDisplay.ts +++ b/src/pages/pegase/home/components/useStudyTableDisplay.ts @@ -44,12 +44,11 @@ export const useStudyTableDisplay = ({ }, [searchStudy, projectId, sortBy]); useEffect(() => { - const sortParams = Object.entries(sortBy) - .map(([key, order]) => `${key},${order}`) - .join('&sort='); + const [sortColumn, sortDirection] = Object.entries(sortBy)[0] || ['', '']; fetch( - `${BASE_URL}/v1/study/search?page=${current + 1}&size=${intervalSize}&projectId=${projectId}&search=${searchStudy}&sort=${sortParams}`, + `${BASE_URL}/v1/study/search?page=${current + 1}&size=${intervalSize}&projectId=${projectId}&search=${searchStudy} + &sortColumn=${sortColumn}&sortDirection=${sortDirection}`, ) .then((response) => response.json()) .then((json) => { diff --git a/src/shared/types/pegase/study.ts b/src/shared/types/pegase/study.ts index 29430fa..00b498c 100644 --- a/src/shared/types/pegase/study.ts +++ b/src/shared/types/pegase/study.ts @@ -6,9 +6,9 @@ export type StudyDTO = { id: number; - study_name: string; - user_name: string; - creation_date: Date; + name: string; + createdBy: string; + creationDate: Date; keywords: string[]; project: string; status: string; From 1e4d3b027a7fdb376d2189a3355683ee8772c9b1 Mon Sep 17 00:00:00 2001 From: vargastat Date: Mon, 16 Dec 2024 16:59:03 +0100 Subject: [PATCH 4/5] feat: clean unnecessary comments --- src/pages/pegase/home/components/StudyTableDisplay.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/pegase/home/components/StudyTableDisplay.tsx b/src/pages/pegase/home/components/StudyTableDisplay.tsx index 4f4df74..25f268a 100644 --- a/src/pages/pegase/home/components/StudyTableDisplay.tsx +++ b/src/pages/pegase/home/components/StudyTableDisplay.tsx @@ -73,10 +73,8 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = updaterOrValue: RowSelectionState | ((oldState: RowSelectionState) => RowSelectionState), ) => { if (typeof updaterOrValue === 'function') { - // Handle updater function setRowSelection((prev: RowSelectionState) => updaterOrValue(prev)); } else { - // Handle direct value setRowSelection(updaterOrValue); } }} From b78ee14671dd12fca1eb1afec270e3f18668eb3b Mon Sep 17 00:00:00 2001 From: vargastat Date: Mon, 16 Dec 2024 17:30:24 +0100 Subject: [PATCH 5/5] feat: header label for keywords corrected --- .../data/stdSimpleTable/StdSimpleTable.tsx | 3 --- .../common/data/stdTable/TableCore.tsx | 26 +------------------ .../home/components/StudyTableDisplay.tsx | 16 +++++++----- .../home/components/StudyTableHeaders.tsx | 2 +- 4 files changed, 11 insertions(+), 36 deletions(-) diff --git a/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx b/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx index 27395a9..07ddddd 100644 --- a/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx +++ b/src/components/common/data/stdSimpleTable/StdSimpleTable.tsx @@ -33,10 +33,8 @@ const StdSimpleTable = ({ columnResizeMode = undefined, enableRowSelection = false, enableMultiRowSelection = false, - hasMainColumnGroup = false, ...tableOptions }: StdSimpleTableProps) => { - 'use no memo'; const table = useReactTable({ columns, data, @@ -55,7 +53,6 @@ const StdSimpleTable = ({ columnSize={columnSize} columnResizeMode={columnResizeMode} trClassName={trClassName} - hasMainColumnGroup={hasMainColumnGroup} /> ); }; diff --git a/src/components/common/data/stdTable/TableCore.tsx b/src/components/common/data/stdTable/TableCore.tsx index bb4bebe..3af18b1 100644 --- a/src/components/common/data/stdTable/TableCore.tsx +++ b/src/components/common/data/stdTable/TableCore.tsx @@ -83,7 +83,6 @@ export type TableCoreProps = { columnSize?: ColumnSizeType; columnResizeMode?: ColumnResizeMode; table: Table; - hasMainColumnGroup?: boolean; }; const ROW_CLASSES = '[&_tr]:border-b [&_tr]:border-gray-400 [&_tr]:text-body-s'; @@ -97,15 +96,7 @@ const tableStyleBuilder = (table: Table, columnSize: ColumnSizeTy } : undefined; -const TableCore = ({ - table, - id: propId, - striped, - trClassName, - columnSize = 'meta', - hasMainColumnGroup = false, -}: TableCoreProps) => { - 'use no memo'; +const TableCore = ({ table, id: propId, striped, trClassName, columnSize = 'meta' }: TableCoreProps) => { const id = useStdId('table-', propId); const handleToggleRow = (row: Row) => () => { @@ -120,7 +111,6 @@ const TableCore = ({ {table .getHeaderGroups() - .slice(hasMainColumnGroup ? 1 : 0) .map((headerGroup) => headerGroup.headers.map((header) => ( @@ -142,20 +132,6 @@ const TableCore = ({ ))} - - {table - .getFooterGroups() - .slice(1) - .map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - - {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())} - - ))} - - ))} - ); }; diff --git a/src/pages/pegase/home/components/StudyTableDisplay.tsx b/src/pages/pegase/home/components/StudyTableDisplay.tsx index 25f268a..29c1419 100644 --- a/src/pages/pegase/home/components/StudyTableDisplay.tsx +++ b/src/pages/pegase/home/components/StudyTableDisplay.tsx @@ -34,13 +34,8 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = setIsHeaderHovered(hovered); }; - const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({ - searchStudy, - projectId, - sortBy: sortByState, - }); - const headers = getStudyTableHeaders(); + console.log('Original Headers:', headers); const sortedHeaders = addSortColumn( headers, @@ -51,6 +46,14 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = isHeaderHovered, ); + console.log('Sorted Headers:', sortedHeaders); + + const { rows, count, intervalSize, current, setPage } = useStudyTableDisplay({ + searchStudy, + projectId, + sortBy: sortByState, + }); + const selectedRowId = Object.keys(rowSelection)[0]; const selectedStatus = rows[Number.parseInt(selectedRowId || '-1')]?.status?.toUpperCase(); @@ -65,7 +68,6 @@ const StudyTableDisplay = ({ searchStudy, projectId }: StudyTableDisplayProps) = columns={sortedHeaders} data={rows as StudyDTO[]} enableRowSelection={true} - hasMainColumnGroup state={{ rowSelection, }} diff --git a/src/pages/pegase/home/components/StudyTableHeaders.tsx b/src/pages/pegase/home/components/StudyTableHeaders.tsx index 764f373..69c0db3 100644 --- a/src/pages/pegase/home/components/StudyTableHeaders.tsx +++ b/src/pages/pegase/home/components/StudyTableHeaders.tsx @@ -62,7 +62,7 @@ const getStudyTableHeaders = () => { }), columnHelper.accessor('keywords', { - header: 'keywords', + header: t('home.@keywords'), minSize: 500, size: 500, cell: ({ getValue, row }) => (