feat: rm card componenent
This commit is contained in:
@@ -9,11 +9,6 @@ import {
|
|||||||
Accordion,
|
Accordion,
|
||||||
AccordionSummary,
|
AccordionSummary,
|
||||||
AccordionDetails,
|
AccordionDetails,
|
||||||
Card,
|
|
||||||
CardHeader,
|
|
||||||
CardContent,
|
|
||||||
Grid,
|
|
||||||
IconButton,
|
|
||||||
Chip,
|
Chip,
|
||||||
ButtonGroup
|
ButtonGroup
|
||||||
} from "@mui/material";
|
} 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) => {
|
const renderExpandedView = (dataTypeWithIndex: string) => {
|
||||||
if (expandedView !== dataTypeWithIndex) return null;
|
if (expandedView !== dataTypeWithIndex) return null;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user