From bbb1de993d32c99450a8dfef534a24cdfabc7e08 Mon Sep 17 00:00:00 2001 From: Dmitri Korin Date: Fri, 11 Oct 2024 15:20:16 -0700 Subject: [PATCH 1/2] Address UI issues with modals --- .../details/complaint-details-create.tsx | 2 +- .../details/complaint-details-edit.tsx | 8 +- .../authorization-outcome-form.tsx | 2 +- .../ceeb/ceeb-decision/decision-form.tsx | 22 ++-- .../outcomes/hwcr-complaint-assessment.tsx | 2 +- .../hwcr-equipment/equipment-form.tsx | 2 +- .../complaints/outcomes/hwcr-file-review.tsx | 2 +- .../outcomes/hwcr-outcome-by-animal-v2.tsx | 4 +- .../outcomes/hwcr-prevention-education.tsx | 2 +- .../oucome-by-animal/edit-outcome.tsx | 2 +- .../outcomes/outcome-attachments.tsx | 2 +- .../complaints/outcomes/supplemental-note.tsx | 2 +- .../supplemental-notes-input.tsx | 2 +- .../modal/instances/assign-officer-modal.tsx | 120 +++++++++--------- .../modal/instances/cancel-confirm-modal.tsx | 8 +- .../modal/instances/change-status-modal.tsx | 47 +++---- .../instances/delete-confirm-modal-v2.tsx | 6 +- .../modal/instances/delete-confirm-modal.tsx | 4 +- .../modal/instances/delete-note-modal.tsx | 2 +- .../standalone-cancel-confirm-modal.tsx | 8 +- frontend/src/assets/sass/layout.scss | 96 +++----------- frontend/src/assets/sass/misc.scss | 54 ++++++-- frontend/src/assets/sass/modals.scss | 15 ++- 23 files changed, 186 insertions(+), 228 deletions(-) diff --git a/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx b/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx index f3145c983..735a4a475 100644 --- a/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx +++ b/frontend/src/app/components/containers/complaints/details/complaint-details-create.tsx @@ -544,7 +544,7 @@ export const CreateComplaint: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed, }, diff --git a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx index 75ab31ca4..20d4764c0 100644 --- a/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx +++ b/frontend/src/app/components/containers/complaints/details/complaint-details-edit.tsx @@ -144,9 +144,9 @@ export const ComplaintDetailsEdit: FC = () => { let assignableOfficers: Option[] = officersInAgencyList !== null ? officersInAgencyList.map((officer: Officer) => ({ - value: officer.person_guid.person_guid, - label: `${officer.person_guid.last_name}, ${officer.person_guid.first_name}`, - })) + value: officer.person_guid.person_guid, + label: `${officer.person_guid.last_name}, ${officer.person_guid.first_name}`, + })) : []; assignableOfficers.unshift({ value: "Unassigned", label: "None" }); @@ -281,7 +281,7 @@ export const ComplaintDetailsEdit: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: resetErrorMessages, }, diff --git a/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx b/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx index c8b742216..164e620dc 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx @@ -105,7 +105,7 @@ export const AuthoizationOutcomeForm: FC = ({ id, type, value, leadIdenti modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: () => { //-- reset the form to its original state diff --git a/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx b/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx index 2b9c8a06f..cd7f7b86e 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/ceeb/ceeb-decision/decision-form.tsx @@ -116,10 +116,12 @@ export const DecisionForm: FC = ({ useEffect(() => { if (sector && schedule) { - let options = scheduleSectorType.filter((item) => item.schedule === schedule).map(item => { - const record: Option = { label: item.longDescription, value: item.sector }; - return record - }); + let options = scheduleSectorType + .filter((item) => item.schedule === schedule) + .map((item) => { + const record: Option = { label: item.longDescription, value: item.sector }; + return record; + }); setSectorList(options); } // eslint-disable-next-line react-hooks/exhaustive-deps @@ -196,10 +198,12 @@ export const DecisionForm: FC = ({ }; const handleScheduleChange = (schedule: string) => { - let options = scheduleSectorType.filter((item) => item.schedule === schedule).map(item => { - const record: Option = { label: item.longDescription, value: item.sector }; - return record - }); + let options = scheduleSectorType + .filter((item) => item.schedule === schedule) + .map((item) => { + const record: Option = { label: item.longDescription, value: item.sector }; + return record; + }); const model = { ...data, sector: "", schedule: schedule }; setData(model); setSectorList(options); @@ -218,7 +222,7 @@ export const DecisionForm: FC = ({ modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: () => { //-- reset the form to its original state diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-complaint-assessment.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-complaint-assessment.tsx index 302534980..d2947b7ed 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-complaint-assessment.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-complaint-assessment.tsx @@ -216,7 +216,7 @@ export const HWCRComplaintAssessment: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed, }, diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx index 710173879..3c57c64a4 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-equipment/equipment-form.tsx @@ -294,7 +294,7 @@ export const EquipmentForm: FC = ({ equipment, assignedOffic modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed, }, diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-file-review.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-file-review.tsx index 58afb4ecc..5b85dd86c 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-file-review.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-file-review.tsx @@ -109,7 +109,7 @@ export const HWCRFileReview: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: () => { setReviewRequired(isReviewRequired); diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx index 9dac4f757..7bef0eb9e 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx @@ -71,7 +71,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { data: { caseFileId: id, outcomeId, //-- this is the id of the animal outcome thats being deleted - title: "Delete Animal Outcome", + title: "Delete animal outcome", description: "All the data in this section will be lost.", ok: "Yes, delete animal outcome", cancel: "No, go back", @@ -116,7 +116,7 @@ export const HWCROutcomeByAnimalv2: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: () => { setShowForm(false); diff --git a/frontend/src/app/components/containers/complaints/outcomes/hwcr-prevention-education.tsx b/frontend/src/app/components/containers/complaints/outcomes/hwcr-prevention-education.tsx index 685e05c4f..02e06d64b 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/hwcr-prevention-education.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/hwcr-prevention-education.tsx @@ -164,7 +164,7 @@ export const HWCRComplaintPrevention: FC = () => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed, }, diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx index 2b9d9a0b2..ada3518c4 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx @@ -369,7 +369,7 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of return ( <> = ({ showAddButton = false }) => { modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed, }, diff --git a/frontend/src/app/components/containers/complaints/outcomes/supplemental-note.tsx b/frontend/src/app/components/containers/complaints/outcomes/supplemental-note.tsx index 81dfec26c..f6f673b63 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/supplemental-note.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/supplemental-note.tsx @@ -31,7 +31,7 @@ export const SupplementalNote: FC = () => { modalSize: "md", modalType: DELETE_NOTE, data: { - title: "Delete Supplemental Note", + title: "Delete supplemental note", description: "All the data in this section will be lost.", caseIdentifier: id, ok: "Yes, delete note", diff --git a/frontend/src/app/components/containers/complaints/outcomes/supplemental-notes/supplemental-notes-input.tsx b/frontend/src/app/components/containers/complaints/outcomes/supplemental-notes/supplemental-notes-input.tsx index de8c6080f..ebf592e3d 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/supplemental-notes/supplemental-notes-input.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/supplemental-notes/supplemental-notes-input.tsx @@ -56,7 +56,7 @@ export const SupplementalNotesInput: FC = ({ id, complaintType, notes, cu modalSize: "md", modalType: CANCEL_CONFIRM, data: { - title: "Cancel Changes?", + title: "Cancel changes?", description: "Your changes will be lost.", cancelConfirmed: () => { setCurrentNotes(notes); diff --git a/frontend/src/app/components/modal/instances/assign-officer-modal.tsx b/frontend/src/app/components/modal/instances/assign-officer-modal.tsx index 02722896b..5a7ac13ee 100644 --- a/frontend/src/app/components/modal/instances/assign-officer-modal.tsx +++ b/frontend/src/app/components/modal/instances/assign-officer-modal.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, FC, useState } from "react"; -import { Modal, Button } from "react-bootstrap"; +import { Modal, Button, CloseButton, ListGroup, ListGroupItem, Card } from "react-bootstrap"; import { useAppDispatch, useAppSelector } from "../../../hooks/hooks"; import { profileDisplayName, @@ -121,26 +121,21 @@ export const AssignOfficerModal: FC = ({ close, submit, // don't display the current user in the list since we already have the current user at the top of the modal if (authUserId === undefined || !compareUuidToString(authUserId, idir)) { return ( -
handleAssigneeClick(personId)} > -
-
-
-
-
-
+
+
{displayName}
{showExperimentalFeature &&
Officer
}
-
-
+ ); } else { return <>; @@ -161,66 +156,67 @@ export const AssignOfficerModal: FC = ({ close, submit, return ( <> {title && ( - - {title} + + {title} )} -
-
-
-
-
-
-
-
{displayName}
+ +
+
+ +
{displayName}
{showExperimentalFeature &&
Officer
}
-
+
-
-
- -
{displayName}
+
{displayName}
{showExperimentalFeature &&
Officer
}
diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss index 1ee951199..da034b3e0 100644 --- a/frontend/src/assets/sass/layout.scss +++ b/frontend/src/assets/sass/layout.scss @@ -330,6 +330,7 @@ button.modal-buttons { justify-content: space-between; gap: 8px; padding: 16px; + border: none; } .comp-profile-card-info {