feat: rm card componenent

This commit is contained in:
Rohit
2025-04-30 21:39:55 +05:30
parent db256270c5
commit 5cd756c742

View File

@@ -9,11 +9,6 @@ import {
Accordion,
AccordionSummary,
AccordionDetails,
Card,
CardHeader,
CardContent,
Grid,
IconButton,
Chip,
ButtonGroup
} from "@mui/material";
@@ -375,187 +370,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
);
};
const renderDataCard = (
data: any[],
columns: string[],
title: string,
dataType: string,
csvFilename: string,
jsonFilename: string,
isPaginatedList: boolean = false
) => {
if (!isPaginatedList && data.length === 0) return null;
if (isPaginatedList && (listData.length === 0 || currentListIndex >= listData.length)) return null;
const currentData = isPaginatedList ? listData[currentListIndex] : data;
const currentColumns = isPaginatedList ? listColumns[currentListIndex] : columns;
if (!currentData || currentData.length === 0) return null;
const previewData = currentData.slice(0, 1);
const previewColumns = currentColumns.slice(0, 3);
const showMoreColumns = currentColumns.length > 3;
return (
<Card sx={{
width: '100%',
mb: 3,
height: '100%',
display: 'flex',
flexDirection: 'column',
boxShadow: 3
}}>
<CardHeader
title={title}
action={
<Box>
<IconButton
size="small"
onClick={() => {
if (isPaginatedList) {
downloadCSV(currentData, currentColumns, `list_table_${currentListIndex + 1}.csv`);
} else {
downloadCSV(data, columns, csvFilename);
}
}}
title={t('run_content.captured_data.download_csv')}
>
<DownloadIcon />
</IconButton>
<IconButton
size="small"
onClick={() => {
if (isPaginatedList) {
downloadJSON(currentData, `list_table_${currentListIndex + 1}.json`);
} else {
downloadJSON(data, jsonFilename);
}
}}
title="Download JSON"
sx={{ mx: 0.5 }}
>
<DataObjectIcon />
</IconButton>
<IconButton
size="small"
onClick={() => {
if (isPaginatedList) {
setExpandedView(`list-${currentListIndex}`);
} else {
setExpandedView(dataType);
}
}}
title={t('run_content.captured_data.view_full')}
>
<FullscreenIcon />
</IconButton>
</Box>
}
sx={{ pb: 1 }}
/>
<CardContent sx={{ pt: 0, pb: 1, flexGrow: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
{isPaginatedList ? (
<Chip
label={listData.length > 1
? `Table ${currentListIndex + 1} of ${listData.length} (${currentData.length} ${currentData.length === 1 ? 'item' : 'items'})`
: `${currentData.length} ${currentData.length === 1 ? 'item' : 'items'}`
}
size="small"
sx={{ backgroundColor: '#FF00C3', color: 'white' }}
/>
) : (
<Chip
label={`${data.length} ${data.length === 1 ? 'item' : 'items'}`}
size="small"
sx={{ backgroundColor: '#FF00C3', color: 'white' }}
/>
)}
{isPaginatedList && listData.length > 1 && (
<ButtonGroup size="small">
<Button
onClick={() => navigateListTable('prev')}
disabled={currentListIndex === 0}
sx={{
borderColor: '#FF00C3',
color: currentListIndex === 0 ? 'gray' : '#FF00C3',
'&.Mui-disabled': {
borderColor: 'rgba(0, 0, 0, 0.12)'
},
padding: '0 8px',
minWidth: 'auto'
}}
>
&lt;
</Button>
<Button
onClick={() => navigateListTable('next')}
disabled={currentListIndex === listData.length - 1}
sx={{
borderColor: '#FF00C3',
color: currentListIndex === listData.length - 1 ? 'gray' : '#FF00C3',
'&.Mui-disabled': {
borderColor: 'rgba(0, 0, 0, 0.12)'
},
padding: '0 8px',
minWidth: 'auto'
}}
>
&gt;
</Button>
</ButtonGroup>
)}
</Box>
<TableContainer component={Paper} sx={{ maxHeight: 180 }}>
<Table size="small" aria-label="preview table">
<TableHead>
<TableRow>
{previewColumns.map((column) => (
<TableCell key={column}>{column}</TableCell>
))}
{showMoreColumns && <TableCell>...</TableCell>}
</TableRow>
</TableHead>
<TableBody>
{previewData.map((row, index) => (
<TableRow key={index}>
{previewColumns.map((column) => (
<TableCell key={column}>
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
</TableCell>
))}
{showMoreColumns && <TableCell>...</TableCell>}
</TableRow>
))}
{currentData.length > 1 && (
<TableRow>
<TableCell colSpan={previewColumns.length + (showMoreColumns ? 1 : 0)} align="center">
<Button
size="small"
onClick={() => {
if (isPaginatedList) {
setExpandedView(`list-${currentListIndex}`);
} else {
setExpandedView(dataType);
}
}}
sx={{ color: '#FF00C3', mt: 1 }}
>
View all {currentData.length} items
</Button>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
</CardContent>
</Card>
);
};
const renderExpandedView = (dataTypeWithIndex: string) => {
if (expandedView !== dataTypeWithIndex) return null;