Ticket #199 and ticket #213 #228

BrettEastman · 2023-10-27T03:36:15Z

#199 - Create view state for Edit view for individual student

Add VIEW_STATES object and conditionally render based on view state.
Add cancel button.
Move Archive button to EDIT view.
Add basic CSS to student_id using MaterialUI - Stack, Box, Container, etc..
Remove Return to Student page button in Student page and rename to Next IEP.
Import student object with intention to populate rows with current student info.
Add display gridTemplateColumns to TableRows.
Create state for each input item in student_id.tsx.
Create types for all props in EditStudentRow.
Create editStudent authenticated procedure.
Refine handleEditStudent with correct types and add page reload in student_id.tsx.
styling of buttons
Refactor Edit Student view state to have each EditStudentRow to be in student_id.tsx in their own Containers with slight gap between each.
Refactor EditStudentRow component MUI CSS - remove underlines and padding.
Add sx CSS to buttons to match design system requirements.
Apply custom styles to input, change TableRow gridInputColumns to match design, and add padding to y axis of each table cell.

#213 - Create "Add Staff" email invitation html.

rewrite the basic template as an html template literal in createPara authenticated procedure in para.ts
Add caseManagerName variable using nullish coalescing operator to createPara authenticated procedure, in para.ts, to enable adding case mananger's name as signature to the email.
Fix(para-email invitation): remove student's name from the email template from designers - discussed at Wednesday night meeting with the team.

codetheweb · 2023-11-01T02:54:01Z

src/backend/routers/para.ts

@@ -66,10 +68,10 @@ export const para = router({
          to: email,
          subject: "Para-professional email confirmation",
          text: "Email confirmation",
-          html: "<h1>Email confirmation</h1><p>Please confirm your email by going to the following link: <a>no link yet</a></p>",
+          html: `<p>Dear ${first_name},</p><p>Welcome to the data collection team for SFUSD.EDU!</p><p>I am writing to invite you to join our data collection efforts for our students. We are using an online platform called <strong>Project Compass</strong> to track and monitor student progress, and your participation is crucial to the success of this initiative.</p><p>To access Project Compass and begin collecting data, please follow these steps:</p><ul><li>Go to the website: (<a href="https://staging.compassiep.com/">https://staging.compassiep.com/</a>)</li> <li>Login using your provided username and password</li><li>Once logged in, navigate to the dashboard where you would see the student goals page</li></ul><p>By clicking on the <strong>data collection</strong> button, you will be directed to the instructions outlining the necessary steps for data collection. Simply follow the provided instructions and enter the required data points accurately.</p><p>If you encounter any difficulties or have any questions, please feel free to reach out to me. I am here to assist you throughout the process and ensure a smooth data collection experience. Your dedication and contribution will make a meaningful impact on our students' educational journeys.</p><p>Thank you,</p><p>${caseManagerName}<br>Case Manager</p>`,


🐧 we can fix this later, but ideally the domain is pulled from the environment

Okay, sounds good. I'll leave it for now, but let me know.

src/backend/routers/case_manager.ts

src/components/editStudentRow/EditStudentRow.tsx

codetheweb · 2023-11-01T03:07:05Z

src/pages/students/[student_id].tsx


 const ViewStudentPage = () => {
  const [createIepModal, setCreateIepModal] = useState(false);
  const [archivePrompt, setArchivePrompt] = useState(false);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
+  const [viewState, setViewState] = useState(0);


if there's only two states, could this be

Suggested change

const [viewState, setViewState] = useState(0);

const [isEditing, setIsEditing] = useState(false);

instead?

I have not implemented this yet. I like the viewState way, but I will change it to boolean if you think it would help performance.

my personal preference is a boolean as it feels a bit clearer to me, but it's fine to leave as-is too :), no performance impact

Okay great. I will leave it for now but may change it later. I am imagining there may be something similar we would have to do for ticket #200 and at that point, I would change both if they are both just using two states, which would be cleaner with a boolean.

src/pages/students/[student_id].tsx

BrettEastman · 2023-11-03T04:45:55Z

Hi Max, thanks for reviewing this PR! I have refactored according to your suggestions or otherwise responded to your comments above. Thanks for your great and helpful suggestions!

…VIEW_STATES object and conditionally render based on view state. Add cancel button. Add temporary "tableBasic" as placeholder for EDIT view. Move Archive button to EDIT view. Add basic CSS using MaterialUI. Put in rough draft example of possible editStudent authenticated procedure in routers/case_manager.

…IEP to match student name container.

…a sx.Remove Return to Student page button in Student page and rename to Next IEP. Add gap to Box and Stack.

…ct to populate rows with current student info. Add StudentType and EditStudentTableProps. Add display gridTemplateColumns to TableRows. Add student prop to student_id.tsx.

…omponent EditStudentRow. Create state for each input item in student_id.tsx. Create types for all props in EditStudentTable and EditStudentRow.

…ror in Table. Wrap Textfield in TableCell and customize attributes.

Co-authored-by: Brandon Cruz-Youll <[email protected]>

…ine handleEditStudent with correct types and add page reload in student_id.tsx. Co-authored-by: Brandon Cruz-Youll <[email protected]>

… student_id.tsx in their own Containers with slight gap between each. Refactor EditStudentRow component MUI CSS - remove underlines and padding. Add sx CSS to buttons to match design system requirements. Co-authored-by: Brandon Cruz-Youll <[email protected]>

…late. Add caseManagerName variable using nullish coalescing operator to createPara authenticated procedure, in para.ts, to enable adding case mananger's name as signature to the email.

… custom styles to input, change TableRow grideInputColumns to match design, and add padding to y axis of each table cell.

…er all Containers. Add Table and TableRow to EditStudentRow. Co-authored-by: Brandon Cruz-Youll <[email protected]>

…it. Delete inline styles to the whole page. Co-authored-by: Brandon Cruz-Youll <[email protected]>

…n of editStudent procedure.

…VIEW_STATES object and conditionally render based on view state. Add cancel button. Add temporary "tableBasic" as placeholder for EDIT view. Move Archive button to EDIT view. Add basic CSS using MaterialUI. Put in rough draft example of possible editStudent authenticated procedure in routers/case_manager.

…IEP to match student name container.

…a sx.Remove Return to Student page button in Student page and rename to Next IEP. Add gap to Box and Stack.

…ct to populate rows with current student info. Add StudentType and EditStudentTableProps. Add display gridTemplateColumns to TableRows. Add student prop to student_id.tsx.

…omponent EditStudentRow. Create state for each input item in student_id.tsx. Create types for all props in EditStudentTable and EditStudentRow.

…ror in Table. Wrap Textfield in TableCell and customize attributes.

Co-authored-by: Brandon Cruz-Youll <[email protected]>

…ine handleEditStudent with correct types and add page reload in student_id.tsx. Co-authored-by: Brandon Cruz-Youll <[email protected]>

… student_id.tsx in their own Containers with slight gap between each. Refactor EditStudentRow component MUI CSS - remove underlines and padding. Add sx CSS to buttons to match design system requirements. Co-authored-by: Brandon Cruz-Youll <[email protected]>

…ast commit. Delete inline styles to the whole page." This reverts commit 2e43c3a.

…on handleEditStudent function.

…EditStudentRows table component. Delete EditStudentRows. Use form with uncontrolled inputs rather than controlled values in state - delete useState for student name, grade, email. Add input style to global styles to remove outlines and borders.

…utton. Edit view form now completed refactored away from table.

…. Add width 100% to Stack for form. Add padding to .studentEditContainer to match design.

Co-authored-by: Brandon Cruz-Youll <[email protected]>

tessathornberry requested review from hieungo89, codetheweb and amantri and removed request for hieungo89 October 27, 2023 17:41

BrettEastman force-pushed the edit-button2 branch from 4e205e0 to 2e43c3a Compare October 31, 2023 20:54

BrettEastman changed the title ~~Start to create view state for Edit view for individual student. Add …~~ Ticket #199 and ticket #213 Oct 31, 2023

BrettEastman marked this pull request as ready for review October 31, 2023 21:20

codetheweb reviewed Nov 1, 2023

View reviewed changes

tessathornberry requested a review from codetheweb November 2, 2023 20:14

codetheweb approved these changes Nov 6, 2023

View reviewed changes

BrettEastman and others added 18 commits November 6, 2023 16:14

Create tableBasic file, layout based on current design. Add Stack to …

9c436ed

…IEP to match student name container.

Change tableBasic to EditStudentTable. Add style to MUI components vi…

c3523c3

…a sx.Remove Return to Student page button in Student page and rename to Next IEP. Add gap to Box and Stack.

Replace TableCell with Input in EditStudentTable. Import student obje…

458e3bb

…ct to populate rows with current student info. Add StudentType and EditStudentTableProps. Add display gridTemplateColumns to TableRows. Add student prop to student_id.tsx.

Refactor EditStudentTable - remove row logic and make into separate c…

73b9d13

…omponent EditStudentRow. Create state for each input item in student_id.tsx. Create types for all props in EditStudentTable and EditStudentRow.

refactor editStudent authenticated procedure

4f0c56a

Change Input to Textfield in EditStudentRow. Remove Box due to div er…

6b7f22a

…ror in Table. Wrap Textfield in TableCell and customize attributes.

Refactor editStudent authenticated procedure.

757e968

Co-authored-by: Brandon Cruz-Youll <[email protected]>

Refactor editStudent authenticated procedure - currently working. Ref…

b2596f0

…ine handleEditStudent with correct types and add page reload in student_id.tsx. Co-authored-by: Brandon Cruz-Youll <[email protected]>

styling of buttons

a676745

Fix(para-email invitation): remove student's name from the email temp…

116b38e

…late. Add caseManagerName variable using nullish coalescing operator to createPara authenticated procedure, in para.ts, to enable adding case mananger's name as signature to the email.

Refactor EditStudentRow to use input tag rather than Textfield. Apply…

ba99cf1

… custom styles to input, change TableRow grideInputColumns to match design, and add padding to y axis of each table cell.

Add flex alignItems center to Stack component on student page to cent…

34cd334

…er all Containers. Add Table and TableRow to EditStudentRow. Co-authored-by: Brandon Cruz-Youll <[email protected]>

Add Stack to display without IEP to correct CSS change from last comm…

ce30da7

…it. Delete inline styles to the whole page. Co-authored-by: Brandon Cruz-Youll <[email protected]>

Remove comment from case_manager.ts above editStudent. Add descriptio…

cfe22eb

…n of editStudent procedure.

Create tableBasic file, layout based on current design. Add Stack to …

75ab939

…IEP to match student name container.

BrettEastman and others added 13 commits November 6, 2023 16:23

Change tableBasic to EditStudentTable. Add style to MUI components vi…

ca1a3b5

…a sx.Remove Return to Student page button in Student page and rename to Next IEP. Add gap to Box and Stack.

Replace TableCell with Input in EditStudentTable. Import student obje…

a6264c5

…ct to populate rows with current student info. Add StudentType and EditStudentTableProps. Add display gridTemplateColumns to TableRows. Add student prop to student_id.tsx.

Refactor EditStudentTable - remove row logic and make into separate c…

eaa8655

…omponent EditStudentRow. Create state for each input item in student_id.tsx. Create types for all props in EditStudentTable and EditStudentRow.

refactor editStudent authenticated procedure

57e79c4

Change Input to Textfield in EditStudentRow. Remove Box due to div er…

6adc8eb

…ror in Table. Wrap Textfield in TableCell and customize attributes.

Refactor editStudent authenticated procedure.

20a1bb1

Co-authored-by: Brandon Cruz-Youll <[email protected]>

Refactor editStudent authenticated procedure - currently working. Ref…

176218b

…ine handleEditStudent with correct types and add page reload in student_id.tsx. Co-authored-by: Brandon Cruz-Youll <[email protected]>

Revert "Add Stack to display without IEP to correct CSS change from l…

535b7bc

…ast commit. Delete inline styles to the whole page." This reverts commit 2e43c3a.

Fix: Add invalidation to editMutation trpc query to refactor refetch …

35f898d

…on handleEditStudent function.

Fix save button in Edit view - add id to form and form attribute to b…

79b8d3c

…utton. Edit view form now completed refactored away from table.

Add .studentEditContainer and .editForm to the StudentPage.module.css…

27ec481

…. Add width 100% to Stack for form. Add padding to .studentEditContainer to match design.

BrettEastman force-pushed the edit-button2 branch from 2fcf17e to 27ec481 Compare November 7, 2023 00:42

Fix: remove duplicate editStudent procedure in case_manager.ts

478497f

BrettEastman merged commit e4abb62 into main Nov 7, 2023
3 checks passed

BrettEastman deleted the edit-button2 branch November 7, 2023 01:28

amantri pushed a commit that referenced this pull request Nov 11, 2023

Ticket #199 and ticket #213 (#228)

27d169d

Co-authored-by: Brandon Cruz-Youll <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ticket #199 and ticket #213 #228

Ticket #199 and ticket #213 #228

BrettEastman commented Oct 27, 2023 •

edited

Loading

codetheweb Nov 1, 2023

BrettEastman Nov 3, 2023

codetheweb Nov 1, 2023

BrettEastman Nov 3, 2023

codetheweb Nov 6, 2023

BrettEastman Nov 7, 2023

BrettEastman commented Nov 3, 2023 •

edited

Loading

	const [viewState, setViewState] = useState(0);
	const [isEditing, setIsEditing] = useState(false);

Ticket #199 and ticket #213 #228

Ticket #199 and ticket #213 #228

Conversation

BrettEastman commented Oct 27, 2023 • edited Loading

codetheweb Nov 1, 2023

Choose a reason for hiding this comment

BrettEastman Nov 3, 2023

Choose a reason for hiding this comment

codetheweb Nov 1, 2023

Choose a reason for hiding this comment

BrettEastman Nov 3, 2023

Choose a reason for hiding this comment

codetheweb Nov 6, 2023

Choose a reason for hiding this comment

BrettEastman Nov 7, 2023

Choose a reason for hiding this comment

BrettEastman commented Nov 3, 2023 • edited Loading

BrettEastman commented Oct 27, 2023 •

edited

Loading

BrettEastman commented Nov 3, 2023 •

edited

Loading