Skip to content

[MDS-6057] Report select condition UI tweaks #3450

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Mar 6, 2025
Merged

[MDS-6057] Report select condition UI tweaks #3450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions services/common/src/components/reports/PermitRequiredReportFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { PermitReportInfoBox } from "./ReportInfoBox";
import ArrowRightOutlined from "@ant-design/icons/ArrowRightOutlined";
import { useFeatureFlag } from "@mds/common/providers/featureFlags/useFeatureFlag";
import { Feature } from "@mds/common/utils/featureFlag";
import { uniqBy} from "lodash"

export const ConditionCategories: FC<{ permitGuid: string; formName: FORM }> = ({
permitGuid,
Expand All @@ -34,7 +35,7 @@ export const ConditionCategories: FC<{ permitGuid: string; formName: FORM }> = (
}

return (
<>
<div className="report-options">
{conditionCategories?.map((category) => (
<div key={category.condition_category_code}>
<Typography.Paragraph strong className="margin-large--top" style={{ marginBottom: 0 }}>
Expand All @@ -61,7 +62,7 @@ export const ConditionCategories: FC<{ permitGuid: string; formName: FORM }> = (
))}
</div>
))}
</>
</div>
);
};

Expand All @@ -76,7 +77,7 @@ export const PermitReportCodeRequirement: FC<{
const conditionCategories = useAppSelector(getCategoriesWithReports(permitGuid));
const reports = amendment?.mine_report_permit_requirements;
const reportOptions = createDropDownList(
reports,
uniqBy(reports,"report_name"),
"report_name",
"mine_report_permit_requirement_id"
);
Expand Down
227 changes: 115 additions & 112 deletions services/common/src/components/reports/ReportInfoBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,131 +8,134 @@ import { Alert, Typography, Button, Row, Col } from "antd";
import ExportOutlined from "@ant-design/icons/ExportOutlined";
import React, { FC } from "react";

export const CodeReportInfoBox: FC<{ mineReportDefinition: IMineReportDefinition; verb: string }> = ({
mineReportDefinition,
verb,
}) => {
export const CodeReportInfoBox: FC<{
mineReportDefinition: IMineReportDefinition;
verb: string;
}> = ({ mineReportDefinition, verb }) => {
if (mineReportDefinition) {
return (
<div className="report-info-box">
{mineReportDefinition && (
<div>
{mineReportDefinition.is_prr_only && (
<Alert
showIcon
description="Please submit this report as a permit required report."
type="warning"
className="margin-large--bottom"
/>
)}
<Typography.Title level={4} className="primary-colour">
You are {verb}
</Typography.Title>
<Typography.Title level={5}>
{formatComplianceCodeReportName(mineReportDefinition)}
</Typography.Title>

{mineReportDefinition.compliance_articles[0].long_description && (
<>
<Typography.Title level={5}>About this submission type:</Typography.Title>
<Typography.Paragraph>
{mineReportDefinition.compliance_articles[0].long_description}
</Typography.Paragraph>
</>
)}
{mineReportDefinition.compliance_articles[0].help_reference_link && (
<Button
target="_blank"
rel="noopener noreferrer"
href={mineReportDefinition.compliance_articles[0].help_reference_link}
type="default"
>
More information <ExportOutlined />
</Button>
)}
</div>
)}
<div>
{mineReportDefinition.is_prr_only && (
<Alert
showIcon
description="Please submit this report as a permit required report."
type="warning"
className="margin-large--bottom"
/>
)}
<Typography.Title level={4} className="primary-colour">
You are {verb}
</Typography.Title>
<Typography.Title level={5}>
{formatComplianceCodeReportName(mineReportDefinition)}
</Typography.Title>

{mineReportDefinition.compliance_articles[0].long_description && (
<>
<Typography.Title level={5}>About this submission type:</Typography.Title>
<Typography.Paragraph>
{mineReportDefinition.compliance_articles[0].long_description}
</Typography.Paragraph>
</>
)}
{mineReportDefinition.compliance_articles[0].help_reference_link && (
<Button
target="_blank"
rel="noopener noreferrer"
href={mineReportDefinition.compliance_articles[0].help_reference_link}
type="default"
>
More information <ExportOutlined />
</Button>
)}
</div>
</div>
);
}
return null;
};

export const PermitReportInfoBox: FC<{ summary?: boolean, twoColumn?: boolean, mineGuid: string, permitGuid: string, permitAmendmentGuid: string, permitReport: IMineReportPermitRequirement, verb: string }> = ({
summary = false,
twoColumn = false,
permitReport,
mineGuid,
permitGuid,
permitAmendmentGuid,
verb,
}) => {

const isCore = useAppSelector(getIsCore);
const transformedReport = transformPermitReportRequirement(permitReport);
const { conditionMap } = useAppSelector(getPermitConditionCategories(permitGuid, permitAmendmentGuid));
const condition = conditionMap[permitReport?.permit_condition_id]

function getConditionHref() {
return GLOBAL_ROUTES?.VIEW_MINE_PERMIT_AMENDMENT.hashRoute(
mineGuid,
permitGuid,
permitAmendmentGuid,
"conditions",
"#" + permitReport?.condition_category_code
).toString()
}


export const PermitReportInfoBox: FC<{
summary?: boolean;
twoColumn?: boolean;
mineGuid: string;
permitGuid: string;
permitAmendmentGuid: string;
permitReport: IMineReportPermitRequirement;
verb: string;
}> = ({
summary = false,
twoColumn = false,
permitReport,
mineGuid,
permitGuid,
permitAmendmentGuid,
verb,
}) => {
const isCore = useAppSelector(getIsCore);
const transformedReport = transformPermitReportRequirement(permitReport);
const { conditionMap } = useAppSelector(
getPermitConditionCategories(permitGuid, permitAmendmentGuid)
);
const condition = conditionMap[permitReport?.permit_condition_id];

function getConditionHref() {
return GLOBAL_ROUTES?.VIEW_MINE_PERMIT_AMENDMENT.hashRoute(
mineGuid,
permitGuid,
permitAmendmentGuid,
"conditions",
"#" + permitReport?.condition_category_code
).toString();
}

if (transformedReport) {
return (
<div className={`${summary ? "report-summary-box" : "report-info-box"}`}>
{transformedReport && (
<div>
<Typography.Title level={4} className="primary-colour">
You are {verb}:
</Typography.Title>
<Typography.Title level={5}>
{transformedReport.report_name}
</Typography.Title>

<Typography.Title level={5}>Condition:</Typography.Title>
<Typography.Paragraph>
{condition?.stepPath ?? "Not Specified"}
</Typography.Paragraph>

<Row>
<Col span={twoColumn ? 12 : 24}>
<Typography.Title level={5}>Frequency:</Typography.Title>
<Typography.Paragraph>
{transformedReport.frequency}
</Typography.Paragraph>

<Typography.Title level={5}>Due Date:</Typography.Title>
<Typography.Paragraph>
{transformedReport.initial_due_date ? formatDate(transformedReport.initial_due_date) : "Not Specified"}
</Typography.Paragraph>
</Col>
<Col span={twoColumn ? 12 : 24}>
<Typography.Title level={5}>Regulatory Authority:</Typography.Title>
<Typography.Paragraph>
{transformedReport.regulatory_authority}
</Typography.Paragraph>

<Typography.Title level={5}>Ministry Recipient:</Typography.Title>
<Typography.Paragraph>
{transformedReport.ministry_recipient}
</Typography.Paragraph>
</Col>
</Row>

{isCore && getConditionHref && (<Button
<div>
<Typography.Title level={4} className="primary-colour">
You are {verb}:
</Typography.Title>
<Typography.Title level={5}>{transformedReport.report_name}</Typography.Title>

<Typography.Title level={5}>Condition:</Typography.Title>
<Typography.Paragraph>{condition?.stepPath ?? "Not Specified"}</Typography.Paragraph>

<Row>
<Col span={twoColumn ? 12 : 24}>
<Typography.Title level={5}>Frequency:</Typography.Title>
<Typography.Paragraph>{transformedReport.frequency}</Typography.Paragraph>

<Typography.Title level={5}>Due Date:</Typography.Title>
<Typography.Paragraph>
{transformedReport.initial_due_date
? formatDate(transformedReport.initial_due_date)
: "Not Specified"}
</Typography.Paragraph>
</Col>
<Col span={twoColumn ? 12 : 24}>
<Typography.Title level={5}>Regulatory Authority:</Typography.Title>
<Typography.Paragraph>{transformedReport.regulatory_authority}</Typography.Paragraph>

<Typography.Title level={5}>Ministry Recipient:</Typography.Title>
<Typography.Paragraph>{transformedReport.ministry_recipient}</Typography.Paragraph>
</Col>
</Row>

{isCore && getConditionHref && (
<Button
target="_blank"
rel="noopener noreferrer"
href={getConditionHref()}
type="default"
>
View Permit Condition <ExportOutlined />
</Button>
)}

</div>
)}
)}
</div>
</div>
);
};
}
return null;
};
2 changes: 1 addition & 1 deletion services/common/src/redux/selectors/permitSelectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const getMineReportPermitRequirementById = (permitGuid, reportId) =>

export const getCategoriesWithReports = (permitGuid) => createSelector([getLatestAmendmentByPermitGuid(permitGuid)], (latestAmendment) => {
return latestAmendment?.condition_categories.map((category) => {
const reports = latestAmendment.mine_report_permit_requirements.filter((report) => category.condition_category_code === report.condition_category_code);
const reports = uniqBy(latestAmendment.mine_report_permit_requirements,"report_name").filter((report) => category.condition_category_code === report.condition_category_code);
return {
...category,
reports
Expand Down
11 changes: 8 additions & 3 deletions services/core-web/src/styles/components/Reports.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
text-align: left;
}

.report-link span{
.report-link span {
display: inline;
}

Expand All @@ -64,11 +64,16 @@
padding: 16px;
}

.report-options {
max-height: 80vh;
overflow-y: auto;
}

.report-info-box {
height: 100%;
padding: 16px;
border: 1px solid $light-violet;

position: sticky;
top: 80px;
background: #fff;

h5 {
Expand Down
10 changes: 8 additions & 2 deletions services/minespace-web/src/styles/components/Reports.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,15 @@
height: unset;
}

.report-link span{
.report-link span {
display: inline;
}

.report-options {
max-height: 80vh;
overflow-y: auto;
}

.report-summary-box {
background: $lightest-grey;
padding: 24px;
Expand All @@ -43,8 +48,9 @@
}

.report-info-box {
height: 100%;
padding: 16px;
border: 1px solid #96ABC0;
background: #fff;
position: sticky;
top: 100px;
}
Loading