From 70e7e480620f4542577185c69ddec2b68a508a8a Mon Sep 17 00:00:00 2001 From: Mat Busby <83598933+matbusby-fw@users.noreply.github.com> Date: Fri, 15 Dec 2023 10:33:29 -0700 Subject: [PATCH] [MDS-5672] Fixed non re-rendering of documents section in incidents form (#2855) * Fixed non re-rendering of documents section in incidents form --- .../Forms/incidents/IncidentForm.tsx | 1489 +++++++++-------- .../mine/Incidents/MineIncident.tsx | 15 +- 2 files changed, 759 insertions(+), 745 deletions(-) diff --git a/services/core-web/src/components/Forms/incidents/IncidentForm.tsx b/services/core-web/src/components/Forms/incidents/IncidentForm.tsx index 8eb8fce3fc..3930671fba 100644 --- a/services/core-web/src/components/Forms/incidents/IncidentForm.tsx +++ b/services/core-web/src/components/Forms/incidents/IncidentForm.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { withRouter } from "react-router-dom"; import PropTypes from "prop-types"; import { bindActionCreators, compose } from "redux"; -import { connect, useSelector } from "react-redux"; +import { connect, useSelector, useDispatch } from "react-redux"; import { change, Field, FieldArray, formValueSelector, getFormValues, reduxForm } from "redux-form"; import { LockOutlined, PlusOutlined } from "@ant-design/icons"; import { Form } from "@ant-design/compatible"; @@ -48,6 +48,7 @@ import MinistryInternalComments from "@/components/mine/Incidents/MinistryIntern import IncidentFileUpload from "./IncidentFileUpload"; import IncidentCategoryCheckboxGroup from "./IncidentCategoryCheckboxGroup"; import RenderDateTimeTz from "@/components/common/RenderDateTimeTz"; +import { removeDocumentFromMineIncident } from "@mds/common/redux/actionCreators/incidentActionCreator"; const propTypes = { // eslint-disable-next-line react/no-unused-prop-types @@ -142,524 +143,364 @@ const retrieveInitialReportDynamicValidation = (childProps) => { }; }; -const renderInitialReport = (incidentCategoryCodeOptions, locationOptions, isEditMode) => { - return ( - - {/* Reporter Details */} - - - Initial Report - -

Reporter Details

- - Enter all available details about the reporter of this incident. - - - - - - - - - - - - - - - - - - - - - - - -
- - {/* Incident Details */} - -

Incident Details

- - Enter more information regarding the reported incident. Some fields may be marked as - optional but help the ministry understand the nature of the incident, please consider - including them. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - - ); -}; - -const renderDocumentation = (childProps, isEditMode, handlers, parentHandlers) => { - const initialIncidentDocuments = childProps.documents.filter( - (doc) => doc.mine_incident_document_type_code === "INI" - ); - const finalReportDocuments = childProps.documents.filter( - (doc) => doc.mine_incident_document_type_code === "FIN" +export const IncidentForm = (props) => { + const [uploadedFiles, setUploadedFiles] = useState([]); + // 2nd parameter in getDropdownIncidentCategoryCodeOptions controls inclusion of historic categories + const incidentCategoryCodeOptions = useSelector((state) => + getDropdownIncidentCategoryCodeOptions(state) ); - const handleRemoveDocument = (event, documentGuid: string) => { - parentHandlers.deleteDocument(documentGuid); - }; - - return ( - - - - Documentation - - - -

Upload Initial Notification Documents

- - -
-

Incident Documents

-
- - Please upload any initial notifications that will provide context with this incident - report. - - - {isEditMode && ( + const renderInitialReport = (incidentCategoryCodeOptions, locationOptions, isEditMode) => { + return ( + + {/* Reporter Details */} - - - handlers.onFileLoad( - document_name, - document_manager_guid, - Strings.INCIDENT_DOCUMENT_TYPES.initial, - INITIAL_INCIDENT_DOCUMENTS_FORM_FIELD - ) - } - onRemoveFile={parentHandlers.deleteDocument} - mineGuid={childProps.match.params?.mineGuid} - component={IncidentFileUpload} - /> - + + Initial Report + +

Reporter Details

+ + Enter all available details about the reporter of this incident. + + + + + + + + + + + + + + + + + + + + + + + +
- )} - - -
- - -

Final Report

-
- - {isEditMode && ( + {/* Incident Details */} - - - handlers.onFileLoad( - document_name, - document_manager_guid, - Strings.INCIDENT_DOCUMENT_TYPES.final, - FINAL_REPORT_DOCUMENTS_FORM_FIELD - ) - } - onRemoveFile={parentHandlers.deleteDocument} - mineGuid={childProps.match.params?.mineGuid} - component={IncidentFileUpload} - /> - +

Incident Details

+ + Enter more information regarding the reported incident. Some fields may be marked as + optional but help the ministry understand the nature of the incident, please consider + including them. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
- )} - - + ); + }; + + const renderRecommendations = ({ fields, isEditMode }) => ( +
+ {fields.map((recommendation, index) => ( + -
- - {!isEditMode && finalReportDocuments?.length === 0 && ( - - - - This incident requires a final investigation report. - - - Pursuant to section 1.7.2 of the HSRC, an investigation report must be submitted - within 60 days of the reportable incident. Please add the final report - documentation by clicking below. - -
- } - /> - + ))} + {isEditMode && ( + )} - + ); -}; - -const renderRecommendations = ({ fields, isEditMode }) => ( -
- {fields.map((recommendation, index) => ( - - ))} - {isEditMode && ( - - )} -
-); -const renderMinistryFollowUp = (childProps, isEditMode) => { - const filteredFollowUpActions = childProps.incidentFollowUpActionOptions.filter( - (act) => - act.mine_incident_followup_investigation_type !== Strings.INCIDENT_FOLLOWUP_ACTIONS.unknown - ); - const { - inspectorContactedValidation, - inspectorContacted, - } = retrieveInitialReportDynamicValidation(childProps); + const renderMinistryFollowUp = (childProps, isEditMode) => { + const filteredFollowUpActions = childProps.incidentFollowUpActionOptions.filter( + (act) => + act.mine_incident_followup_investigation_type !== Strings.INCIDENT_FOLLOWUP_ACTIONS.unknown + ); + const { + inspectorContactedValidation, + inspectorContacted, + } = retrieveInitialReportDynamicValidation(childProps); - const formValues = useSelector((state) => getFormValues(FORM.ADD_EDIT_INCIDENT)(state)); + const formValues = useSelector((state) => getFormValues(FORM.ADD_EDIT_INCIDENT)(state)); - return ( - - - - Ministry Follow Up - -

Dangerous Occurence Determination

- - - - - - - {formValues?.determination_type_code && - formValues?.determination_type_code !== - Strings.INCIDENT_DETERMINATION_TYPES.pending && ( + return ( + + + + Ministry Follow Up + +

Dangerous Occurence Determination

+ + + + + + + {formValues?.determination_type_code && + formValues?.determination_type_code !== + Strings.INCIDENT_DETERMINATION_TYPES.pending && ( + + + + + + )} + {formValues?.determination_type_code === + Strings.INCIDENT_DETERMINATION_TYPES.dangerousOccurance && ( - + )} - {formValues?.determination_type_code === - Strings.INCIDENT_DETERMINATION_TYPES.dangerousOccurance && ( - - - - + +

Verbal Notification

- )} - -

Verbal Notification

- - - - - - - {formValues.verbal_notification_provided && ( - + - )} - -

Follow-Up Information

- - - - - - - - - - - - {inspectorContacted && ( - <> + {formValues.verbal_notification_provided && ( { disabled={!isEditMode} placeholder="Please select date" validate={[ - required, dateNotInFutureTZ, dateNotBeforeStrictOther(formValues.incident_timestamp), ]} /> - - - cm?.inspectorOnly)} - disabled={!isEditMode} - validate={[required]} - /> - + )} + +

Follow-Up Information

+ + + + + + + + + + + + {inspectorContacted && ( + <> + + + + + + + + cm?.inspectorOnly)} + disabled={!isEditMode} + validate={[required]} + /> + + + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + }; + + const updateIncidentStatus = (childProps, isNewIncident) => { + const isClosed = childProps.incident?.status_code === "CLD"; + const selectedStatusCode = childProps.formValues.status_code; + const responsibleInspector = childProps.incident?.responsible_inspector_party; + return !isNewIncident ? ( + + + +

+ {alertText( + childProps.incident?.update_user, + childProps.incident?.update_timestamp, + responsibleInspector, + selectedStatusCode + )} +

- - )} - - - - - - - - + {!isClosed && childProps.isEditMode && ( + + + + )} + {!childProps.pristine && !isClosed && ( +
+ +
+ )} + + + } + type={!isClosed ? "warning" : "info"} + showIcon + style={{ + backgroundColor: isClosed ? "#FFFFFF" : "", + border: isClosed ? "1.5px solid #5e46a1" : "", + }} + className={isClosed ? "ant-alert-info ant-alert-info-custom-core-color-icon" : null} + /> + + ) : null; + }; + + const renderEditSaveControls = (childProps, isEditMode, isNewIncident) => ( +
+ {isEditMode && ( + + )} +
+ ); + + const renderInternalDocumentsComments = (childProps, isEditMode, handlers, parentHandlers) => { + const incidentCreated = Boolean(childProps.formValues?.mine_incident_guid); + const internalMinistryDocuments = childProps.documents.filter( + (doc) => doc.mine_incident_document_type_code === "INM" + ); + const dispatch = useDispatch(); + + const handleRemoveDocument = async (event, documentGuid: string) => { + await dispatch( + removeDocumentFromMineIncident( + childProps.incident.mine_guid, + childProps.incident?.mine_incident_guid, + documentGuid + ) + ); + parentHandlers.deleteDocument(documentGuid); + }; + + return ( + + + + + Internal Documents and Comments (Ministry Visible Only) + + + {!incidentCreated ? ( +
+ + The internal ministry documentation section will be displayed after this + incident is created. + + } + image={Empty.PRESENTED_IMAGE_SIMPLE} /> - - - - +
+ ) : ( + + + + +

Internal Ministry Documentation

+ + +
+ + These files are for internal staff only and will not be shown to proponents. + Upload internal documents that are created durring the review process. + + + {isEditMode && ( + + + + handlers.onFileLoad( + document_name, + document_manager_guid, + Strings.INCIDENT_DOCUMENT_TYPES.internalMinistry, + INTERNAL_MINISTRY_DOCUMENTS_FORM_FIELD + ) + } + onRemoveFile={handleRemoveDocument} + mineGuid={childProps.match.params?.mineGuid} + component={IncidentFileUpload} + /> + + + )} + + + + +
+ + + + )} + + + ); + }; + + const renderDocumentation = (childProps, isEditMode, handlers, parentHandlers) => { + const dispatch = useDispatch(); + + const initialIncidentDocuments = childProps.documents.filter( + (doc) => doc.mine_incident_document_type_code === "INI" + ); + const finalReportDocuments = childProps.documents.filter( + (doc) => doc.mine_incident_document_type_code === "FIN" + ); + + const handleRemoveDocument = async (event, documentGuid: string) => { + await dispatch( + removeDocumentFromMineIncident( + childProps.incident.mine_guid, + childProps.incident?.mine_incident_guid, + documentGuid + ) + ); + parentHandlers.deleteDocument(documentGuid); + }; + + return ( + + + + Documentation + + + +

Upload Initial Notification Documents

+ + +
+

Incident Documents

+
+ + Please upload any initial notifications that will provide context with this incident + report. + + + {isEditMode && ( + + + handlers.onFileLoad( + document_name, + document_manager_guid, + Strings.INCIDENT_DOCUMENT_TYPES.initial, + INITIAL_INCIDENT_DOCUMENTS_FORM_FIELD + ) + } + onRemoveFile={handleRemoveDocument} + mineGuid={childProps.match.params?.mineGuid} + component={IncidentFileUpload} /> + )} + + +
+ + +

Final Report

+
+ + {isEditMode && ( - + + handlers.onFileLoad( + document_name, + document_manager_guid, + Strings.INCIDENT_DOCUMENT_TYPES.final, + FINAL_REPORT_DOCUMENTS_FORM_FIELD + ) + } + onRemoveFile={handleRemoveDocument} + mineGuid={childProps.match.params?.mineGuid} + component={IncidentFileUpload} /> + )} + + +
+ + {!isEditMode && finalReportDocuments?.length === 0 && ( - - - - - - - - ); -}; - -const renderInternalDocumentsComments = (childProps, isEditMode, handlers, parentHandlers) => { - const incidentCreated = Boolean(childProps.formValues?.mine_incident_guid); - const internalMinistryDocuments = childProps.documents.filter( - (doc) => doc.mine_incident_document_type_code === "INM" - ); - - return ( - - - - - Internal Documents and Comments (Ministry Visible Only) - - - {!incidentCreated ? ( -
- The internal ministry documentation section will be displayed after this incident - is created. - +
+ + This incident requires a final investigation report. + + + Pursuant to section 1.7.2 of the HSRC, an investigation report must be submitted + within 60 days of the reportable incident. Please add the final report + documentation by clicking below. + +
} - image={Empty.PRESENTED_IMAGE_SIMPLE} /> -
- ) : ( - - - - -

Internal Ministry Documentation

- - -
- - These files are for internal staff only and will not be shown to proponents. Upload - internal documents that are created durring the review process. - - - {isEditMode && ( - - - - handlers.onFileLoad( - document_name, - document_manager_guid, - Strings.INCIDENT_DOCUMENT_TYPES.internalMinistry, - INTERNAL_MINISTRY_DOCUMENTS_FORM_FIELD - ) - } - onRemoveFile={parentHandlers.deleteDocument} - mineGuid={childProps.match.params?.mineGuid} - component={IncidentFileUpload} - /> - - - )} - - - - -
- - - + )} - - - ); -}; - -const updateIncidentStatus = (childProps, isNewIncident) => { - const isClosed = childProps.incident?.status_code === "CLD"; - const selectedStatusCode = childProps.formValues.status_code; - const responsibleInspector = childProps.incident?.responsible_inspector_party; - return !isNewIncident ? ( - - - -

- {alertText( - childProps.incident?.update_user, - childProps.incident?.update_timestamp, - responsibleInspector, - selectedStatusCode - )} -

- - - {!isClosed && childProps.isEditMode && ( - - - - )} - {!childProps.pristine && !isClosed && ( -
- -
- )} - - - } - type={!isClosed ? "warning" : "info"} - showIcon - style={{ - backgroundColor: isClosed ? "#FFFFFF" : "", - border: isClosed ? "1.5px solid #5e46a1" : "", - }} - className={isClosed ? "ant-alert-info ant-alert-info-custom-core-color-icon" : null} - /> - - ) : null; -}; - -const renderEditSaveControls = (childProps, isEditMode, isNewIncident) => ( -
- {isEditMode && ( - - )} -
-); - -export const IncidentForm = (props) => { - const [uploadedFiles, setUploadedFiles] = useState([]); - // 2nd parameter in getDropdownIncidentCategoryCodeOptions controls inclusion of historic categories - const incidentCategoryCodeOptions = useSelector((state) => - getDropdownIncidentCategoryCodeOptions(state) - ); + + ); + }; const onFileLoad = (fileName, document_manager_guid, documentTypeCode, documentFormField) => { const updatedUploadedFiles = [ diff --git a/services/core-web/src/components/mine/Incidents/MineIncident.tsx b/services/core-web/src/components/mine/Incidents/MineIncident.tsx index 8a33c78774..0612fd54d5 100644 --- a/services/core-web/src/components/mine/Incidents/MineIncident.tsx +++ b/services/core-web/src/components/mine/Incidents/MineIncident.tsx @@ -145,19 +145,6 @@ export const MineIncident: FunctionComponent = (props) => { return null; }; - const handleDeleteDocument = (mineDocumentGuid: string): Promise | null => { - if (params?.mineGuid && incident.mine_incident_guid && mineDocumentGuid) { - return props - .removeDocumentFromMineIncident( - params?.mineGuid, - incident.mine_incident_guid, - mineDocumentGuid - ) - .then(() => handleFetchData()); - } - return null; - }; - const formatInitialValues = () => { if (!isNewIncident) { return { @@ -181,7 +168,7 @@ export const MineIncident: FunctionComponent = (props) => { isNewIncident: isNewIncident, incident: incident, handlers: { - deleteDocument: handleDeleteDocument, + deleteDocument: handleFetchData, handleSaveData, }, };