-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3186 from HHS/OPS-310/3098_can_details_form
feat: add CAN detail form
- Loading branch information
Showing
13 changed files
with
623 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
frontend/src/components/CANs/CANDetailForm/CANDetailForm.hooks.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import React from "react"; | ||
| import classnames from "vest/classnames"; | ||
| import { useUpdateCanMutation } from "../../../api/opsAPI"; | ||
| import useAlert from "../../../hooks/use-alert.hooks"; | ||
| import suite from "./suite.js"; | ||
|
|
||
| export default function useCanDetailForm(canId, canNumber, canNickname, canDescription, portfolioId, toggleEditMode) { | ||
| const [nickName, setNickName] = React.useState(canNickname); | ||
| const [description, setDescription] = React.useState(canDescription); | ||
| const [showModal, setShowModal] = React.useState(false); | ||
| const [modalProps, setModalProps] = React.useState({ | ||
| heading: "", | ||
| actionButtonText: "", | ||
| secondaryButtonText: "", | ||
| handleConfirm: () => {} | ||
| }); | ||
| const [updateCan] = useUpdateCanMutation(); | ||
| const { setAlert } = useAlert(); | ||
|
|
||
| let res = suite.get(); | ||
|
|
||
| const cn = classnames(suite.get(), { | ||
| invalid: "usa-form-group--error", | ||
| valid: "success", | ||
| warning: "warning" | ||
| }); | ||
|
|
||
| const handleCancel = (e) => { | ||
| e.preventDefault(); | ||
| setShowModal(true); | ||
| setModalProps({ | ||
| heading: "Are you sure you want to cancel editing? Your changes will not be saved.", | ||
| actionButtonText: "Cancel Edits", | ||
| secondaryButtonText: "Continue Editing", | ||
| handleConfirm: () => cleanUp() | ||
| }); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| const payload = { | ||
| number: canNumber, | ||
| portfolio_id: portfolioId, | ||
| nick_name: nickName, | ||
| description: description | ||
| }; | ||
|
|
||
| setAlert({ | ||
| type: "success", | ||
| heading: "CAN Updated", | ||
| message: `The CAN ${canNumber} has been successfully updated.` | ||
| }); | ||
|
|
||
| updateCan({ | ||
| id: canId, | ||
| data: payload | ||
| }); | ||
|
|
||
| cleanUp(); | ||
| }; | ||
|
|
||
| const cleanUp = () => { | ||
| setNickName(""); | ||
| setDescription(""); | ||
| setShowModal(false); | ||
| setModalProps({ | ||
| heading: "", | ||
| actionButtonText: "", | ||
| secondaryButtonText: "", | ||
| handleConfirm: () => {} | ||
| }); | ||
| toggleEditMode(); | ||
| }; | ||
|
|
||
| const runValidate = (name, value) => { | ||
| suite( | ||
| { | ||
| ...{ [name]: value } | ||
| }, | ||
| name | ||
| ); | ||
| }; | ||
| return { | ||
| nickName, | ||
| setNickName, | ||
| description, | ||
| setDescription, | ||
| handleCancel, | ||
| handleSubmit, | ||
| runValidate, | ||
| res, | ||
| cn, | ||
| setShowModal, | ||
| showModal, | ||
| modalProps | ||
| }; | ||
| } |
94 changes: 94 additions & 0 deletions
94
frontend/src/components/CANs/CANDetailForm/CANDetailForm.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import Input from "../../UI/Form/Input"; | ||
| import TextArea from "../../UI/Form/TextArea"; | ||
| import ConfirmationModal from "../../UI/Modals/ConfirmationModal"; | ||
| import useCanDetailForm from "./CANDetailForm.hooks"; | ||
|
|
||
| /** | ||
| * @typedef {Object} CANDetailFormProps | ||
| * @property {number} canId - CAN ID | ||
| * @property {string} canNumber - CAN number | ||
| * @property {string} canNickname - CAN nick name | ||
| * @property {string} canDescription - CAN description | ||
| * @property {number} portfolioId - Portfolio ID | ||
| * @property {Function} toggleEditMode - Function to toggle edit mode | ||
| */ | ||
|
|
||
| /** | ||
| * @component - The CAN Details form | ||
| * @param {CANDetailFormProps} props | ||
| * @returns {JSX.Element} | ||
| */ | ||
| const CANDetailForm = ({ canId, canNumber, canNickname, canDescription, portfolioId, toggleEditMode }) => { | ||
| const { | ||
| nickName, | ||
| setNickName, | ||
| description, | ||
| setDescription, | ||
| handleCancel, | ||
| handleSubmit, | ||
| runValidate, | ||
| res, | ||
| cn, | ||
| showModal, | ||
| setShowModal, | ||
| modalProps | ||
| } = useCanDetailForm(canId, canNumber, canNickname, canDescription, portfolioId, toggleEditMode); | ||
|
|
||
| return ( | ||
| <form | ||
| onSubmit={(e) => { | ||
| handleSubmit(e); | ||
| }} | ||
| > | ||
| {showModal && ( | ||
| <ConfirmationModal | ||
| heading={modalProps.heading} | ||
| setShowModal={setShowModal} | ||
| actionButtonText={modalProps.actionButtonText} | ||
| secondaryButtonText={modalProps.secondaryButtonText} | ||
| handleConfirm={modalProps.handleConfirm} | ||
| /> | ||
| )} | ||
| <Input | ||
| name="can-nickName" | ||
| label="CAN Nickname" | ||
| onChange={(name, value) => { | ||
| runValidate("can-nickName", value); | ||
| setNickName(value); | ||
| }} | ||
| value={nickName} | ||
| isRequired | ||
| messages={res.getErrors("can-nickName")} | ||
| className={cn("can-nickName")} | ||
| /> | ||
| <TextArea | ||
| maxLength={1000} | ||
| name="description" | ||
| label="Description" | ||
| value={description} | ||
| onChange={(name, value) => { | ||
| setDescription(value); | ||
| }} | ||
| /> | ||
| <div className="grid-row flex-justify-end margin-top-8"> | ||
| <button | ||
| className="usa-button usa-button--unstyled margin-right-2" | ||
| data-cy="cancel-button" | ||
| onClick={(e) => handleCancel(e)} | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button | ||
| id="save-changes" | ||
| className="usa-button" | ||
| disabled={nickName.length == 0 || res.hasErrors()} | ||
| data-cy="save-btn" | ||
| > | ||
| Save Changes | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default CANDetailForm; |
Oops, something went wrong.