-
Notifications
You must be signed in to change notification settings - Fork 3
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.
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
feat: add CAN detail form #3186
Merged
Merged
Changes from 14 commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
58e813e
feat: add cans detail form
Santi-3rd 9edeeb1
fix: adds null check fixing visiting can details directly
fpigeonjr 33fc1ff
Merge branch 'main' into OPS-310/3098_can_details_form
fpigeonjr 20b6ad9
refactor: better variable names
fpigeonjr b249210
refactor: move logic to hook
fpigeonjr 039cb62
feat: adds modal and alert
fpigeonjr fe4e84a
chore: cleanup
fpigeonjr 66235e2
Merge branch 'main' into OPS-310/3098_can_details_form
fpigeonjr 4450ff7
chore: data for demo
fpigeonjr c54e751
style: ux review
Santi-3rd 92fbfc2
fix: use the filtered budget lines
fpigeonjr 4f5c8b3
test: add can edit form e2e tests (#3198)
maiyerlee add46e2
test: can edit form e2e tests
Santi-3rd a77ef1b
Merge pull request #3200 from HHS/3098/test_round_2
Santi-3rd 9faa156
refactor: fix logic for agreement types count, add component tests
fpigeonjr e6279a2
Merge pull request #3206 from HHS/3098/mob_party_3
fpigeonjr 2d22f15
Merge branch 'main' into OPS-310/3098_can_details_form
fpigeonjr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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_nick_name" | ||
fpigeonjr marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| label="CAN Nickname" | ||
| onChange={(name, value) => { | ||
| runValidate("can_nick_name", value); | ||
| setNickName(value); | ||
| }} | ||
| value={nickName} | ||
| isRequired | ||
| messages={res.getErrors("can_nick_name")} | ||
| className={cn("can_nick_name")} | ||
| /> | ||
| <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; | ||
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 @@ | ||
| export {default} from "./CANDetailForm" |
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,11 @@ | ||
| import { create, test, enforce, only } from "vest"; | ||
|
|
||
| const suite = create((data = {}, fieldName) => { | ||
| only(fieldName); | ||
|
|
||
| test("can_nick_name", "This is required information", () => { | ||
| enforce(data.can_nick_name).isNotBlank(); | ||
| }); | ||
| }); | ||
|
|
||
| export default suite; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm assuming cn stands for className or classNames? If it's not too much effort, could we potentially try to not have super short variable names in favor of readability?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great idea! This naming convention is used in other FE components for form validation. Would it be okay to track it in a new tech debt ticket?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created this story to track the rename: #3210