Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: styling * feat: overview timeline * fix: rename types * fix: pr comments
- Loading branch information
1 parent
9fb431a
commit 9b10a88
Showing
7 changed files
with
141 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 117 additions & 40 deletions
157
...onent/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,129 @@ | ||
import { FC } from 'react'; | ||
import { styled } from '@mui/material'; | ||
import { Box, Paper } from '@mui/material'; | ||
import Timeline from '@mui/lab/Timeline'; | ||
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; | ||
import TimelineSeparator from '@mui/lab/TimelineSeparator'; | ||
import TimelineDot from '@mui/lab/TimelineDot'; | ||
import TimelineConnector from '@mui/lab/TimelineConnector'; | ||
import TimelineContent from '@mui/lab/TimelineContent'; | ||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
import { ChangeRequestState } from '../changeRequest.types'; | ||
interface ISuggestChangeTimelineProps { | ||
state: ChangeRequestState; | ||
} | ||
interface ITimelineData { | ||
title: string; | ||
active: boolean; | ||
} | ||
|
||
export const ChangeRequestTimeline: FC = () => { | ||
const StyledPaper = styled(Paper)(({ theme }) => ({ | ||
marginTop: theme.spacing(2), | ||
borderRadius: `${theme.shape.borderRadiusLarge}px`, | ||
})); | ||
|
||
const StyledBox = styled(Box)(({ theme }) => ({ | ||
padding: theme.spacing(2), | ||
marginBottom: `-${theme.spacing(4)}`, | ||
})); | ||
|
||
const StyledTimeline = styled(Timeline)(() => ({ | ||
[`& .${timelineItemClasses.root}:before`]: { | ||
flex: 0, | ||
padding: 0, | ||
}, | ||
})); | ||
|
||
export const ChangeRequestTimeline: FC<ISuggestChangeTimelineProps> = ({ | ||
state, | ||
}) => { | ||
const createTimeLineData = (state: ChangeRequestState): ITimelineData[] => { | ||
const steps: ChangeRequestState[] = [ | ||
'Draft', | ||
'In review', | ||
'Approved', | ||
'Applied', | ||
]; | ||
|
||
return steps.map(step => ({ | ||
title: step, | ||
active: step === state, | ||
})); | ||
}; | ||
|
||
const renderTimeline = () => { | ||
const data = createTimeLineData(state); | ||
const index = data.findIndex(item => item.active); | ||
const activeIndex: number | null = index !== -1 ? index : null; | ||
|
||
if (state === 'Cancelled') { | ||
return createCancelledTimeline(data); | ||
} | ||
|
||
return createTimeline(data, activeIndex); | ||
}; | ||
|
||
return ( | ||
<StyledPaper elevation={0}> | ||
<StyledBox> | ||
<StyledTimeline>{renderTimeline()}</StyledTimeline> | ||
</StyledBox> | ||
</StyledPaper> | ||
); | ||
}; | ||
|
||
const createTimeline = (data: ITimelineData[], activeIndex: number | null) => { | ||
return data.map(({ title }, index) => { | ||
const shouldConnectToNextItem = index < data.length - 1; | ||
|
||
const connector = ( | ||
<ConditionallyRender | ||
condition={shouldConnectToNextItem} | ||
show={<TimelineConnector />} | ||
/> | ||
); | ||
|
||
if (activeIndex !== null && activeIndex >= index) { | ||
return createTimelineItem('success', title, connector); | ||
} | ||
|
||
if (activeIndex !== null && activeIndex + 1 === index) { | ||
return createTimelineItem('primary', title, connector, { | ||
variant: 'outlined', | ||
}); | ||
} | ||
|
||
return createTimelineItem('grey', title, connector); | ||
}); | ||
}; | ||
|
||
const createCancelledTimeline = (data: ITimelineData[]) => { | ||
return data.map(({ title }, index) => { | ||
const shouldConnectToNextItem = index < data.length - 1; | ||
|
||
const connector = ( | ||
<ConditionallyRender | ||
condition={shouldConnectToNextItem} | ||
show={<TimelineConnector />} | ||
/> | ||
); | ||
return createTimelineItem('grey', title, connector); | ||
}); | ||
}; | ||
|
||
const createTimelineItem = ( | ||
color: 'primary' | 'success' | 'grey', | ||
title: string, | ||
connector: JSX.Element, | ||
timelineDotProps: { [key: string]: string } = {} | ||
) => { | ||
return ( | ||
<Paper | ||
elevation={0} | ||
sx={theme => ({ | ||
marginTop: theme.spacing(2), | ||
borderRadius: theme => `${theme.shape.borderRadiusLarge}px`, | ||
})} | ||
> | ||
<Box sx={theme => ({ padding: theme.spacing(2) })}> | ||
<Timeline | ||
sx={{ | ||
[`& .${timelineItemClasses.root}:before`]: { | ||
flex: 0, | ||
padding: 0, | ||
}, | ||
}} | ||
> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot color="success" /> | ||
<TimelineConnector color="success" /> | ||
</TimelineSeparator> | ||
<TimelineContent>Draft</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot color="success" /> | ||
<TimelineConnector /> | ||
</TimelineSeparator> | ||
<TimelineContent>Approved</TimelineContent> | ||
</TimelineItem> | ||
<TimelineItem> | ||
<TimelineSeparator> | ||
<TimelineDot /> | ||
</TimelineSeparator> | ||
<TimelineContent>Applied</TimelineContent> | ||
</TimelineItem> | ||
</Timeline> | ||
</Box> | ||
</Paper> | ||
<TimelineItem key={title}> | ||
<TimelineSeparator> | ||
<TimelineDot color={color} {...timelineDotProps} /> | ||
{connector} | ||
</TimelineSeparator> | ||
<TimelineContent>{title}</TimelineContent> | ||
</TimelineItem> | ||
); | ||
}; |
6 changes: 6 additions & 0 deletions
6
frontend/src/component/changeRequest/ChangeRequestOverview/changeRequest.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export type ChangeRequestState = | ||
| 'Draft' | ||
| 'Approved' | ||
| 'In review' | ||
| 'Applied' | ||
| 'Cancelled'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters