feat: rm card componenent
This commit is contained in:
@@ -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'
|
||||
}}
|
||||
>
|
||||
<
|
||||
</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'
|
||||
}}
|
||||
>
|
||||
>
|
||||
</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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user