sartography/spiff-arena
1
0
Fork 0
mirror of https://github.com/sartography/spiff-arena.git synced 2025-02-23 06:38:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

nest accordions

Browse Source
This commit is contained in:
burnettk 2025-02-13 19:12:49 -05:00
parent 02af7aaaba
commit 7d9a1905b3
No known key found for this signature in database
1 changed files with 232 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
spiffworkflow-frontend/src/a-spiffui-v3/views/StartProcess/ProcessModelTreePage.tsx
View File

@ -9,6 +9,8 @@ import {
Typography, Typography,
Breadcrumbs, Breadcrumbs,
Link, Link,
Card,
CardContent,
} from '@mui/material'; } from '@mui/material';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { Can } from '@casl/react'; import { Can } from '@casl/react';
@ -423,13 +425,7 @@ export default function ProcessModelTreePage({
: ''; : '';
}; };
return ( const breadcrumbLinks = (
<Box sx={{ margin: '0 auto', p: 3 }}>
<Typography variant="h4" sx={{ mb: 4 }}>
{processModelAction === ProcessModelAction.StartProcess
? 'Start new process'
: 'Process Groups'}
</Typography>
<Breadcrumbs sx={{ mb: 3 }}> <Breadcrumbs sx={{ mb: 3 }}>
<Link <Link
underline="hover" underline="hover"
@ -459,6 +455,16 @@ export default function ProcessModelTreePage({
</Link> </Link>
))} ))}
</Breadcrumbs> </Breadcrumbs>
);
return (
<Box sx={{ margin: '0 auto', p: 3 }}>
<Typography variant="h4" sx={{ mb: 4 }}>
{processModelAction === ProcessModelAction.StartProcess
? 'Start new process'
: 'Process Groups'}
</Typography>
{breadcrumbLinks}
<Container <Container
maxWidth={false} maxWidth={false}
sx={{ sx={{
@ -530,16 +536,21 @@ export default function ProcessModelTreePage({
)} )}
{/* <SpiffBreadCrumbs crumbs={crumbs} callback={handleCrumbClick} /> */} {/* <SpiffBreadCrumbs crumbs={crumbs} callback={handleCrumbClick} /> */}
</Stack> </Stack>
{currentProcessGroup ? ( <Card>
<Stack <CardContent>
direction="row" <Box
sx={{ sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
mb: 3,
width: '100%', width: '100%',
paddingBottom: 2,
}} }}
> >
<Typography variant="h5" className="with-icons"> {currentProcessGroup ? (
Process Group: {currentProcessGroup.display_name} <>
{breadcrumbLinks}
<Box>
<Can <Can
I="PUT" I="PUT"
a={targetUris.processGroupShowPath} a={targetUris.processGroupShowPath}
@ -567,10 +578,17 @@ export default function ProcessModelTreePage({
confirmButtonLabel="Delete" confirmButtonLabel="Delete"
/> />
</Can> </Can>
</Box>
</>
) : (
<Typography variant="h5">
{processModelAction === ProcessModelAction.StartProcess
? 'Start new process'
: 'Process Groups'}
</Typography> </Typography>
</Stack> )}
) : null} </Box>
{currentProcessGroup ? ( {currentProcessGroup && (
<Stack <Stack
direction="row" direction="row"
sx={{ sx={{
@ -580,7 +598,7 @@ export default function ProcessModelTreePage({
> >
{currentProcessGroup.description} {currentProcessGroup.description}
</Stack> </Stack>
) : null} )}
<Accordion <Accordion
expanded={modelsExpanded} expanded={modelsExpanded}
onChange={() => setModelsExpanded((prev) => !prev)} onChange={() => setModelsExpanded((prev) => !prev)}
@ -598,7 +616,9 @@ export default function ProcessModelTreePage({
pr: 2, pr: 2,
}} }}
> >
<Typography>Process Models ({models.length})</Typography> <Typography>
Process Models ({models.length})
</Typography>
<IconButton <IconButton
size="small" size="small"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -651,7 +671,9 @@ export default function ProcessModelTreePage({
pr: 2, pr: 2,
}} }}
> >
<Typography>Process Groups ({groups?.length})</Typography> <Typography>
Process Groups ({groups?.length})
</Typography>
<IconButton <IconButton
size="small" size="small"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -708,13 +730,17 @@ export default function ProcessModelTreePage({
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Box sx={gridProps}> <Box sx={gridProps}>
{dataStoresForProcessGroup?.map((dataStore: DataStore) => ( {dataStoresForProcessGroup?.map(
(dataStore: DataStore) => (
<DataStoreCard dataStore={dataStore} /> <DataStoreCard dataStore={dataStore} />
))} ),
)}
</Box> </Box>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
) : null} ) : null}
</CardContent>
</Card>
</Stack> </Stack>
</Stack> </Stack>
</Container> </Container>