Skip to content

Commit

Permalink
[MDS-5298] ministry follow up user flow (#2903)
Browse files Browse the repository at this point in the history 
* rearrange form fields.

* add rows

* update header, remove unused imports and code.

* Remove commented code.
  • Loading branch information
@henryoforeh-dev
henryoforeh-dev authored Jan 22, 2024
1 parent 847a410 commit 7e136f8
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 127 deletions.
6 changes: 5 additions & 1 deletion services/core-web/src/components/Forms/incidents/IncidentForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,11 @@ export const IncidentForm: FC<IncidentFormProps & InjectedFormProps> = (props) =
<Row>
<Col span={24}>{renderEditSaveControls()}</Col>
<Col span={16} offset={4}>
<IncidentFormInitialReport incident={props.incident} isEditMode={isEditMode} />
<IncidentFormInitialReport
incident={props.incident}
isEditMode={isEditMode}
inspectorOptions={inspectorOptions}
/>
<br />
<IncidentFormDocuments
documents={documents}
Expand Down
154 changes: 151 additions & 3 deletions services/core-web/src/components/Forms/incidents/IncidentFormInitialReport.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Col, Divider, Form, Row, Typography } from "antd";
import React, { FC } from "react";
import { Field } from "redux-form";
import React, { FC, useEffect, useState } from "react";
import { Field, getFormValues } from "redux-form";
import { renderConfig } from "@/components/common/config";
import { useSelector } from "react-redux";
import {
Expand All @@ -14,22 +14,28 @@ import {
requiredList,
requiredNotUndefined,
wholeNumber,
requiredRadioButton,
} from "@common/utils/Validate";
import { normalizeDatetime, normalizePhone } from "@common/utils/helpers";
import IncidentCategoryCheckboxGroup from "@/components/Forms/incidents/IncidentCategoryCheckboxGroup";
import RenderDateTimeTz from "@/components/common/RenderDateTimeTz";
import { getDropdownIncidentCategoryCodeOptions } from "@mds/common/redux/selectors/staticContentSelectors";
import { IMineIncident } from "@mds/common";
import { IMineIncident, INCIDENT_CONTACT_METHOD_OPTIONS } from "@mds/common";
import { ADD_EDIT_INCIDENT } from "@/constants/forms";
import { dateNotBeforeStrictOther } from "@mds/common/redux/utils/Validate";

interface IncidentFormInitialReportProps {
isEditMode: boolean;
incident: IMineIncident;
inspectorOptions: any[];
}

const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
isEditMode,
incident,
inspectorOptions,
}) => {
const formValues = useSelector((state) => getFormValues(ADD_EDIT_INCIDENT)(state));
const showUnspecified = incident.mine_incident_guid && !incident.incident_location;

const locationOptions = [
Expand All @@ -42,6 +48,14 @@ const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
];

const incidentCategoryCodeOptions = useSelector(getDropdownIncidentCategoryCodeOptions);
const [inspectorContactedValidation, setInspectorContactedValidation] = useState({});
const [inspectorContacted, setInspectorContacted] = useState(null);

useEffect(() => {
const inspectorSet = formValues?.reported_to_inspector_party_guid;
setInspectorContactedValidation(inspectorSet ? { validate: [requiredRadioButton] } : {});
setInspectorContacted(formValues?.reported_to_inspector_contacted);
}, [formValues]);

return (
<div className="ant-form-vertical">
Expand Down Expand Up @@ -109,6 +123,140 @@ const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<h4>Verbal Notification</h4>
</Col>
<Col md={12} xs={24}>
<Field
label="Was verbal notification of the incident provided through the Mine Incident Reporting Line (1-888-348-0299)?"
id="verbal_notification_provided"
name="verbal_notification_provided"
component={renderConfig.RADIO}
disabled={!isEditMode}
/>
</Col>
{formValues.verbal_notification_provided && (
<Col md={12} xs={24}>
<Field
label="Date and time"
id="verbal_notification_timestamp"
name="verbal_notification_timestamp"
component={RenderDateTimeTz}
normalize={normalizeDatetime}
timezone={formValues.incident_timezone}
showTime
disabled={!isEditMode}
placeholder="Please select date"
validate={[
dateNotInFutureTZ,
dateNotBeforeStrictOther(formValues.incident_timestamp),
]}
/>
</Col>
)}
</Row>
<Col span={24}>
<h4>Ministry Inspector Details</h4>
</Col>
<Row gutter={16}>
<Col md={12} xs={24}>
<Field
label="Inspector reported to"
id="reported_to_inspector_party_guid"
name="reported_to_inspector_party_guid"
placeholder="Search for inspector..."
component={renderConfig.GROUPED_SELECT}
format={null}
data={inspectorOptions}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Was this person contacted?"
id="reported_to_inspector_contacted"
name="reported_to_inspector_contacted"
component={renderConfig.RADIO}
disabled={!isEditMode}
validate={[]}
{...inspectorContactedValidation}
/>
</Col>
</Row>
{inspectorContacted && (
<Row gutter={16}>
<Col md={12} xs={24}>
<Field
label="Date and time"
id="reported_timestamp"
name="reported_timestamp"
component={RenderDateTimeTz}
normalize={normalizeDatetime}
timezone={formValues.incident_timezone}
showTime
disabled={!isEditMode}
placeholder="Please select date"
validate={[
required,
dateNotInFutureTZ,
dateNotBeforeStrictOther(formValues.incident_timestamp),
]}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Initial Contact Method"
id="reported_to_inspector_contact_method"
name="reported_to_inspector_contact_method"
component={renderConfig.SELECT}
data={INCIDENT_CONTACT_METHOD_OPTIONS.filter((cm) => cm?.inspectorOnly)}
disabled={!isEditMode}
validate={[required]}
/>
</Col>
</Row>
)}
<Row gutter={16}>
<Col md={12} xs={24}>
<Field
label="Inspector responsible"
id="responsible_inspector_party_guid"
name="responsible_inspector_party_guid"
component={renderConfig.GROUPED_SELECT}
format={null}
placeholder="Search for responsible inspector..."
data={inspectorOptions}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Was there a follow-up inspection?"
id="followup_inspection"
name="followup_inspection"
component={renderConfig.RADIO}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Follow-up inspection date"
id="followup_inspection_date"
name="followup_inspection_date"
placeholder="Please select date..."
showTime={false}
component={RenderDateTimeTz}
normalize={normalizeDatetime}
timezone={formValues.incident_timezone}
validate={[
dateNotInFutureTZ,
dateNotBeforeStrictOther(formValues.incident_timestamp),
]}
disabled={!isEditMode}
/>
</Col>
</Row>
<br />
</Col>
{/* Incident Details */}
Expand Down
125 changes: 2 additions & 123 deletions services/core-web/src/components/Forms/incidents/IncidentFormMinistryFollowup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import {
INCIDENT_CONTACT_METHOD_OPTIONS,
INCIDENT_DETERMINATION_TYPES,
INCIDENT_FOLLOWUP_ACTIONS,
} from "@mds/common/constants/strings";
import React, { FC, useEffect, useState } from "react";
import React, { FC } from "react";
import { useSelector } from "react-redux";
import { Field, FieldArray, getFormValues } from "redux-form";
import { ADD_EDIT_INCIDENT } from "@/constants/forms";
import { Button, Col, Row, Typography } from "antd";
import { renderConfig } from "@/components/common/config";
import { required, requiredRadioButton, validateSelectOptions } from "@common/utils/Validate";
import { required, validateSelectOptions } from "@common/utils/Validate";
import RenderDateTimeTz from "@/components/common/RenderDateTimeTz";
import { normalizeDatetime } from "@mds/common/redux/utils/helpers";
import { dateNotBeforeStrictOther, dateNotInFutureTZ } from "@mds/common/redux/utils/Validate";
Expand All @@ -32,17 +31,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
}) => {
const formValues = useSelector((state) => getFormValues(ADD_EDIT_INCIDENT)(state));

const [inspectorContactedValidation, setInspectorContactedValidation] = useState({});
const [inspectorContacted, setInspectorContacted] = useState(null);

useEffect(() => {
const inspectorSet = formValues?.reported_to_inspector_party_guid;

setInspectorContactedValidation(inspectorSet ? { validate: [requiredRadioButton] } : {});

setInspectorContacted(formValues?.reported_to_inspector_contacted);
}, [formValues]);

const filteredFollowUpActions = incidentFollowUpActionOptions.filter(
(act) => act.mine_incident_followup_investigation_type !== INCIDENT_FOLLOWUP_ACTIONS.unknown
);
Expand Down Expand Up @@ -119,18 +107,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
/>
</Col>
)}
<Col span={24}>
<h4>Verbal Notification</h4>
</Col>
<Col md={12} xs={24}>
<Field
label="Was verbal notification of the incident provided through the Mine Incident Reporting Line (1-888-348-0299)?"
id="verbal_notification_provided"
name="verbal_notification_provided"
component={renderConfig.RADIO}
disabled={!isEditMode}
/>
</Col>
{formValues.verbal_notification_provided && (
<Col md={12} xs={24}>
<Field
Expand All @@ -150,103 +126,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
/>
</Col>
)}
<Col span={24}>
<h4>Follow-Up Information</h4>
</Col>
<Col md={12} xs={24}>
<Field
label="Incident reported to"
id="reported_to_inspector_party_guid"
name="reported_to_inspector_party_guid"
placeholder="Search for inspector..."
component={renderConfig.GROUPED_SELECT}
format={null}
data={inspectorOptions}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Was this person contacted?"
id="reported_to_inspector_contacted"
name="reported_to_inspector_contacted"
component={renderConfig.RADIO}
disabled={!isEditMode}
validate={[]}
{...inspectorContactedValidation}
/>
</Col>
{inspectorContacted && (
<>
<Col md={12} xs={24}>
<Field
label="Date and time"
id="reported_timestamp"
name="reported_timestamp"
component={RenderDateTimeTz}
normalize={normalizeDatetime}
timezone={formValues.incident_timezone}
showTime
disabled={!isEditMode}
placeholder="Please select date"
validate={[
required,
dateNotInFutureTZ,
dateNotBeforeStrictOther(formValues.incident_timestamp),
]}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Initial Contact Method"
id="reported_to_inspector_contact_method"
name="reported_to_inspector_contact_method"
component={renderConfig.SELECT}
data={INCIDENT_CONTACT_METHOD_OPTIONS.filter((cm) => cm?.inspectorOnly)}
disabled={!isEditMode}
validate={[required]}
/>
</Col>
</>
)}
<Col md={12} xs={24}>
<Field
label="Inspector responsible"
id="responsible_inspector_party_guid"
name="responsible_inspector_party_guid"
component={renderConfig.GROUPED_SELECT}
format={null}
placeholder="Search for responsible inspector..."
data={inspectorOptions}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Was there a follow-up inspection?"
id="followup_inspection"
name="followup_inspection"
component={renderConfig.RADIO}
disabled={!isEditMode}
/>
</Col>
<Col md={12} xs={24}>
<Field
label="Follow-up inspection date"
id="followup_inspection_date"
name="followup_inspection_date"
placeholder="Please select date..."
showTime={false}
component={RenderDateTimeTz}
normalize={normalizeDatetime}
timezone={formValues.incident_timezone}
validate={[
dateNotInFutureTZ,
dateNotBeforeStrictOther(formValues.incident_timestamp),
]}
disabled={!isEditMode}
/>
</Col>
<Col span={24}>
<Field
label="Was it escalated to EMLI investigation?"
Expand Down

0 comments on commit 7e136f8

Please sign in to comment.