...
The ‘Done’ screen in the “Create Check-In, Check-Out Tool” notifies the user that the setup process is complete. The user is shown a success message indicating that the tool is ready to use, along with options for entering or printing data.
Figma
https://www.figma.com/design/6tpmUIqjsH6mk6mQ7ifeEG/Checkin-Checkout?node-id=6131192-310325863&t=gJPaYfTKwQee8kBYVAOkjK77OOKaZY8k-1
Feature
Feature 224933: Create/Edit | Check In Check Out
...
Page Heading: "Create Check-In, Check-Out Tool"
Status Chip: Display Status of the tool as a Status Chip next to the page heading
Active
Archived
Mastered
Goal(s) and Student Summary:
Display container divided into two sections: Goal(s), Student
Goal(s): Display ‘Goal(s)’ header and the goal(s) added to the Check-In/Check-Out tool, the list separated by commas when more than one goal is added
Student: Display student’s first and last name to ensure the user knows which student they are configuring the tool for.
Success Message: ‘Success! You are ready to start tracking Check-In, Check-Out.'
Description body text:
Line 1: If you have data to enter now, you can ‘Record Data’.
‘Record Data’ is a link that navigates the user to the Data Express CICO page to record data for the CICO tool.
Line 2: If you need a physical sheet for your student, you can Print a Data Sheet.
‘Print a Data Sheet’ is a link that opens the ‘Create Data Sheet’ modal for the user to print a data sheet – a blank template or pre-filled template from the created CICO tool.
‘Create Data Sheet’ modal defaults to open with ‘Select’ radio button selected and the specific CICO tool selected in the list of CICO tools
Navigation Buttons:
Back Button: Navigates back to the Goals & Mastery page.
Close Button: Navigates the user to the EDU Platform screen they were viewing. The new Check-In/Check-Out tool will be added to the tables for Check-In/Check-Out across the platform for the student.
Close ( X ) Button:
Saves the Check-In/Check-Out Tool in the current status and closes the create modal screens, returning the user to the main screen they are viewing on the EDU Platform.
Close Hover State: Display ‘Save & Close’ badge upon hover over the close modal button.
Discussion Panel:
Discussion Icon:
Default: Discussion icon is deselected and discussion panel is closed (collapsed)
Discussion Icon Enabled State: Display icon as primary blue with light blue circle background
The modal width responsively expands and the discussion panel displays to the right side of the modal, allowing users to type messages and communicate with added team members.
The discussion panel should include a text area input field that expands as the user types and a 'Send' button for messaging.
Team members added to the discussion will receive a ‘Discussion’ inbox notification.
User will be able to add team members or admin to the discussion and send discussion messages. (Utilize Existing Discussion Panel functionality)
...
Record Data Link: The ‘Record Data’ link in the description body text should be clickable and must navigate the user to Data Express > CICO tab with the specific CICO tool selected and displayed on the screen.
Print Data Sheet Link https://rethinkautism.atlassian.net/l/cp/0nJ01cSJ : The ‘Print Data Sheet’ link in the description body text should open the Print Data Sheet modal when selected, allowing the user to print either a blank template or pre-filled template for the CICO data sheet.
Verify that the default selection is ‘Select’ with the specific Check-In/Check-Out tool pre-selected when the user selects ‘Print Data Sheet’ button link.
Navigation Buttons:
The "Back" button takes the user to the previous screen. If the user has not yet recorded data for the ‘Active’ CICO Tool, they should be able to make changes/edits to the input fields.
The "Close" button will exit to the screen the user is viewing.
Modal Closure:
The user can close the modal using the 'X' icon in the top right corner.
The Check-In/Check-Out tool will be saved in the current status and all progress will be saved. Upon opening the Check-In/Check-Out tool again, the user will view all details they had previously input.
Verify that the Close Hover State displays ‘Save & Close’ badge upon hover over the close modal button.
Discussion Panel:
Verify that the Discussion Icon and Discussion Panel display on the Setting, Goals & Mastery, Done modal screens for Check-In/Check-Out tool statuses of Draft, Active, Archived, and Mastered.
Default: Discussion icon is deselected and discussion panel is closed (collapsed)
Discussion Icon Enabled State: Display icon as primary blue with light blue circle background
Verify that upon selecting the Discussion Icon, the modal width responsively expands and the discussion panel displays to the right side of the modal.
Verify that deselecting the discussion icon, closes (hides) the discussion panel.
Discussion Panel Layout:
Header: 'Discussion'
Default: Display 'Me' for the team member who is viewing the Check-In/Check-Out tool
User selects 'Add' button to:
Search for a team member by first or last name to add to the discussion
Select team members from the dropdown menu of team member names to add to the discussion
Verify that when a user selects a team member to add to the discussion, the team member first and last name displays to the right of 'Me'.
Verify that an 'X' icon displays next to an added team member name so that the user can remove them from the discussion.
Verify that the discussion panel includes a text area input field that expands as the user types
Verify that upon selecting 'Send' button, the team members added to the discussion receive a 'Discussion' inbox notification.
...