diff --git a/frontend/src/components/blocks/tables/BatchOperationsTable.tsx b/frontend/src/components/blocks/tables/BatchOperationsTable.tsx index ae7e97c..1481aaa 100644 --- a/frontend/src/components/blocks/tables/BatchOperationsTable.tsx +++ b/frontend/src/components/blocks/tables/BatchOperationsTable.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { GridColDef } from '@mui/x-data-grid-pro'; import { renderHeader } from './utils/renderHeader'; import { getNumberFilterOperations, getDateTimeFilterOperations } from 'utils/search'; -import { renderUser, renderDateTime, renderMultilineText } from './utils/renderer'; +import { renderUser, renderDateTime, renderMultilineText, renderStatus } from './utils/renderer'; import { BatchOperationDto } from 'interfaces/dto/batchoperations/BatchOperationDto'; import { fetchBatchOperations } from 'store/batch'; import { Event } from 'interfaces/events/Event'; @@ -27,6 +27,7 @@ const columns: GridColDef[] = [ resizable: true, minWidth: 170, renderHeader, + renderCell: renderStatus, filterOperators: getNumberFilterOperations(), }, { diff --git a/frontend/src/components/blocks/tables/utils/renderer.tsx b/frontend/src/components/blocks/tables/utils/renderer.tsx index 04b811a..27136c0 100644 --- a/frontend/src/components/blocks/tables/utils/renderer.tsx +++ b/frontend/src/components/blocks/tables/utils/renderer.tsx @@ -62,6 +62,56 @@ export const renderUser = (params: GridRenderCellParams) => { ); }; +export const renderStatus = (params: GridRenderCellParams) => { + const text = params.value as string; + if (!text) return; + + const base = { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + margin: '5px', + padding: '1px', + fontWeight: 500, + borderRadius: '10px', + width: '70px', + height: '30px', + }; + + const progress = { + backgroundColor: '#ecc800', + color: '#e9e9e9', + ...base, + }; + + const success = { + backgroundColor: '#4caf50', + color: '#e9e9e9', + ...base, + }; + + const failed = { + backgroundColor: '#ab230e', + color: '#e9e9e9', + ...base, + }; + + const values = { + 'SUCCESS': success, + 'FAILED': failed, + 'IN_PROGRESS': progress, + }; + + return ( +
+
+ {text} +
+
+ ); +}; + const splitString = (input: string, lineLength: number): string => { const result: string[] = []; @@ -80,12 +130,12 @@ export const renderMultilineText = (params: GridRenderCellParams) => { const classes = useStyles(); return ( - +
- +
); };