-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TNO-2527 Improve My Reports #1752
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,7 +9,5 @@ export const ReportEditActions = styled.div` | |
background: ${(props) => props.theme.css.bkTertiary}; | ||
|
||
position: sticky; | ||
bottom: 0; | ||
left: 0; | ||
right: 0; | ||
inset-block-end: 0; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Seems to work. |
||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,7 @@ import styled from 'styled-components'; | |
export const ReportEditForm = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
overflow-x: auto; | ||
overflow-x: clip; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @kkwangsir This line broke the stick footers that provide the action buttons for each form. Switching from |
||
|
||
.preview-report { | ||
border: solid 2px ${(props) => props.theme.css.linePrimaryColor}; | ||
|
@@ -74,4 +74,8 @@ export const ReportEditForm = styled.div` | |
background: ${(props) => props.theme.css.bkInfo}; | ||
color: ${(props) => props.theme.css.fInfo}; | ||
} | ||
|
||
.report-edit-section { | ||
flex: 1; | ||
} | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { Action } from 'components/action'; | ||
import { getStatus } from 'features/my-reports/utils'; | ||
import { formatDate } from 'features/utils'; | ||
import React from 'react'; | ||
import { FaSquarePollVertical } from 'react-icons/fa6'; | ||
import { useApp, useReports } from 'store/hooks'; | ||
import { useReportsStore } from 'store/slices'; | ||
import { Col, IReportInstanceModel, Loading, ReportStatusName, Show } from 'tno-core'; | ||
|
||
import { useReportEditContext } from '../ReportEditContext'; | ||
import * as styled from './styled'; | ||
|
||
export const ReportHistoryForm = () => { | ||
const { values } = useReportEditContext(); | ||
const [{ requests }] = useApp(); | ||
const [, { findInstancesForReportId }] = useReports(); | ||
const [, { storeReportView }] = useReportsStore(); | ||
|
||
const [instances, setInstances] = React.useState<IReportInstanceModel[]>([]); | ||
|
||
const isLoading = requests.some((r) => r.group.includes('view-report')); | ||
const instanceId = values.instances.length ? values.instances[0].id : undefined; | ||
|
||
const fetchInstances = React.useCallback( | ||
async (reportId: number) => { | ||
try { | ||
const instances = await findInstancesForReportId(reportId); | ||
setInstances(instances.filter((i) => i.status !== ReportStatusName.Pending)); | ||
} catch {} | ||
}, | ||
[findInstancesForReportId], | ||
); | ||
|
||
React.useEffect(() => { | ||
if (values.id) { | ||
fetchInstances(values.id); | ||
} | ||
// The functions will result in infinite loop. | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [instanceId]); | ||
|
||
const handleViewReport = React.useCallback( | ||
(instance: IReportInstanceModel) => { | ||
storeReportView({ instanceId: instance.id, subject: instance.subject, body: instance.body }); | ||
}, | ||
[storeReportView], | ||
); | ||
|
||
return ( | ||
<styled.ReportHistoryForm className="report-edit-section"> | ||
<Show visible={isLoading}> | ||
<Loading /> | ||
</Show> | ||
<Col className="report-history"> | ||
<div className="col-1">Published On</div> | ||
<div className="col-2">Sent On</div> | ||
<div className="col-3">Status</div> | ||
<div className="col-4"></div> | ||
{instances.map((instance) => { | ||
return ( | ||
<React.Fragment key={instance.id}> | ||
<div className="col-1">{formatDate(instance.publishedOn ?? '', true)}</div> | ||
<div className="col-2">{formatDate(instance.sentOn ?? '', true)}</div> | ||
<div className="col-3">{getStatus(instance.status)}</div> | ||
<div className="col-4"> | ||
<Action | ||
icon={<FaSquarePollVertical />} | ||
title="View" | ||
onClick={() => { | ||
handleViewReport(instance); | ||
}} | ||
/> | ||
</div> | ||
</React.Fragment> | ||
); | ||
})} | ||
</Col> | ||
</styled.ReportHistoryForm> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { Button } from 'components/button'; | ||
import { FaX } from 'react-icons/fa6'; | ||
import { useReportsStore } from 'store/slices'; | ||
import { Col } from 'tno-core'; | ||
|
||
import * as styled from './styled'; | ||
|
||
export const ReportHistoryView = () => { | ||
const [{ reportView }, { storeReportView }] = useReportsStore(); | ||
|
||
if (!reportView) return null; | ||
|
||
return ( | ||
<styled.ReportHistoryView className="report-edit-section"> | ||
<div> | ||
<h1>View Prior Report</h1> | ||
<Button | ||
variant="info" | ||
onClick={() => { | ||
storeReportView(undefined); | ||
}} | ||
> | ||
<FaX /> | ||
</Button> | ||
</div> | ||
<Col className="preview-report"> | ||
<div | ||
className="preview-subject" | ||
dangerouslySetInnerHTML={{ __html: reportView?.subject ?? '' }} | ||
></div> | ||
<div | ||
className="preview-body" | ||
dangerouslySetInnerHTML={{ __html: reportView?.body ?? '' }} | ||
></div> | ||
</Col> | ||
</styled.ReportHistoryView> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,4 @@ | ||
export * from './ReportHistoryForm'; | ||
export * from './ReportHistoryView'; | ||
export * from './ReportSendForm'; | ||
export * from './ReportView'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import styled from 'styled-components'; | ||
|
||
export const ReportHistoryForm = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
padding: 1rem; | ||
|
||
div.report-history { | ||
display: grid; | ||
grid-template-columns: repeat(4, 1fr); | ||
|
||
> div { | ||
padding: 0.25rem 1rem; | ||
} | ||
|
||
> div:nth-child(8n + 1), | ||
> div:nth-child(8n + 2), | ||
> div:nth-child(8n + 3), | ||
> div:nth-child(8n + 4) { | ||
background: ${(props) => props.theme.css.highlightSecondary}; | ||
} | ||
|
||
> div:nth-child(1), | ||
> div:nth-child(2), | ||
> div:nth-child(3), | ||
> div:nth-child(4) { | ||
background: ${(props) => props.theme.css.sectionHeader}; | ||
color: ${(props) => props.theme.css.sectionHeaderText}; | ||
font-weight: 800; | ||
} | ||
|
||
> div.col-1 { | ||
} | ||
|
||
> div.col-4 { | ||
display: flex; | ||
justify-content: flex-end; | ||
gap: 1rem; | ||
} | ||
} | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can page through history now