Data Entry Component
The Data Entry Component allows users to enter data for a variety of purposes within the Carrier TMS.
The component is a drawer that slides out from the right side of the screen.
When the component slides out, the background becomes darkened, but remains semi transparent.
The drawer goes OVER the contents of the screen. It does not PUSH the contents to the side.
The only way to close the drawer is by clicking on an "X" button at the top, or on one of the action buttons on the bottom.
Clicking away from the drawer does not close it.
The Data Entry component height is 100% of the page. It remains fixed, and is scrollable, independent of any contents outside of the drawer.
Data Entry Component Rules
All required fields should be highlighted with a yellow fill:
Closing the component
The Data Entry Component only closes IF:
All required fields are completed, and the user clicks the appropriate action button (save, etc.)
The action button is disabled until all required fields are completed; OR
The user clicks the cancel button; OR
The user clicks the "X" button
Canceling to Close
IF a user wants to close the Data Entry Component by:
Clicking the cancel button; OR
Clicking the "X" button,
There should be a modal with a message letting the user know that their changes will not be saved.
The language might need to be altered depending on the data that is being input
e.g., for "Load Order" creation, the title of the modal would be "Discard Load Order?""
This and body language should be adjusted to fit with the respective section.
Feedback to the User
When the user successfully completes a task in the Data Entry Component, there should be a snackbar at the bottom left that indicates the task was completed successfully.
This is an angular material component