feat: revamp cap text run ui
This commit is contained in:
@@ -27,6 +27,7 @@ import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import 'highlight.js/styles/github.css';
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useThemeMode } from "../../context/theme-provider";
|
||||
|
||||
interface RunContentProps {
|
||||
row: Data,
|
||||
@@ -54,6 +55,8 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
const [legacyColumns, setLegacyColumns] = useState<string[]>([]);
|
||||
const [isLegacyData, setIsLegacyData] = useState<boolean>(false);
|
||||
|
||||
const { darkMode } = useThemeMode();
|
||||
|
||||
useEffect(() => {
|
||||
setTab(tab);
|
||||
}, [interpretationInProgress]);
|
||||
@@ -262,8 +265,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
|
||||
if (!currentData || currentData.length === 0) return null;
|
||||
|
||||
const downloadData = isPaginatedList ? currentData : data;
|
||||
const downloadColumns = isPaginatedList ? currentColumns : columns;
|
||||
const isSchemaData = title.toLowerCase().includes('text') || title.toLowerCase().includes('schema');
|
||||
|
||||
return (
|
||||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||||
@@ -283,7 +285,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
<Box>
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadJSON(downloadData, jsonFilename)}
|
||||
onClick={() => downloadJSON(currentData, jsonFilename)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
@@ -297,12 +299,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
}
|
||||
}}
|
||||
>
|
||||
Download as JSON
|
||||
{t('run_content.captured_data.download_json', 'Download as JSON')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
component="a"
|
||||
onClick={() => downloadCSV(downloadData, downloadColumns, csvFilename)}
|
||||
onClick={() => downloadCSV(currentData, currentColumns, csvFilename)}
|
||||
sx={{
|
||||
color: '#FF00C3',
|
||||
textTransform: 'none',
|
||||
@@ -315,7 +317,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
}
|
||||
}}
|
||||
>
|
||||
Download as CSV
|
||||
{t('run_content.captured_data.download_csv', 'Download as CSV')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@@ -338,6 +340,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
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)'
|
||||
@@ -353,21 +356,66 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
|
||||
<Table stickyHeader aria-label="sticky table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
<TableCell key={column}>{column}</TableCell>
|
||||
))}
|
||||
{isSchemaData ? (
|
||||
<>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Label
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
Value
|
||||
</TableCell>
|
||||
</>
|
||||
) : (
|
||||
(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
<TableCell
|
||||
key={column}
|
||||
sx={{
|
||||
borderBottom: '1px solid',
|
||||
borderColor: darkMode ? '#3a4453' : '#dee2e6',
|
||||
backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
|
||||
}}
|
||||
>
|
||||
{column}
|
||||
</TableCell>
|
||||
))
|
||||
)}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{(isPaginatedList ? currentData : data).map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
<TableCell key={column}>
|
||||
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
|
||||
{isSchemaData ? (
|
||||
currentColumns.map((column) => (
|
||||
<TableRow key={column}>
|
||||
<TableCell sx={{ fontWeight: 500 }}>
|
||||
{column}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
<TableCell>
|
||||
{currentData[0][column] === undefined || currentData[0][column] === "" ? "-" : currentData[0][column]}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
currentData.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
{(isPaginatedList ? currentColumns : columns).map((column) => (
|
||||
<TableCell key={column}>
|
||||
{row[column] === undefined || row[column] === "" ? "-" : row[column]}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
Reference in New Issue
Block a user