Skip to content
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

Integrate Sections tab and navigation buttons #712

Merged
merged 30 commits into from
Jun 24, 2024

Conversation

JpadillaCoding
Copy link
Member

@JpadillaCoding JpadillaCoding commented Jun 6, 2024

Closes #684

What changes did you make?

  • Made the Sections tab sections.tsx \intakeProfile\index.tsx inProgressIcon.tsx lockedIcon.tsx
  • Added styling based on the status of the section task useStatusStyling.tsx
  • Added styling to nav buttons and made them responsive
  • Nav buttons work for moving throughout the form
  • Cleaned up files by removing application Context wrapper along with old sections component \guestApplicationForm GuestApplicationSchema.ts

Rationale behind the changes?

  • Styling for the status is set with the intent of when a user's profile is pulled and compared to fieldGroups, they'll have incorporated data on the status of each task which will then render the type of styling.
  • Since we are now using IntakeProfile to control the profile form, the previous context approach and related files were removed.
  • Basic functionality for the nav buttons to allow navigating the form. Currently, the only option I found is obtaining the index of the current groupID and moving to the next index item on the fieldGroup object. I am open to any other approaches to this, but it is functional as is.

Testing done for these changes

  • Changing the status on the sections tab between the 4 options of complete | incomplete | locked | partial
  • Testing on mobile, desktop, and tablet view to check layout and button responsiveness.
  • Tested the buttons by going back and forth including trying to get out of bounds on the first and last item

What did you learn or can share that is new?(optional)

  • Being able to use breakpoints on MUI. This is an easy way to make an application responsive based on the screen view size.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied Screenshot 2024-06-02 at 3 29 21 PM Screenshot 2024-06-02 at 3 28 51 PM
Visuals after changes are applied Screenshot 2024-06-02 at 3 43 16 PM Screenshot 2024-06-05 at 8 25 25 PM Screenshot 2024-06-05 at 8 27 05 PM

Copy link
Collaborator

@erikguntner erikguntner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @JpadillaCoding the updates are looking great! I have a few suggestions. Let me know what you think.

app/src/components/Icons/LockedIcon.tsx Outdated Show resolved Hide resolved
app/src/components/intake-profile/ProfileSection.tsx Outdated Show resolved Hide resolved
app/src/views/IntakeProfile/index.tsx Outdated Show resolved Hide resolved
@erikguntner erikguntner mentioned this pull request Jun 12, 2024
58 tasks
Copy link
Collaborator

@erikguntner erikguntner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the updates @JpadillaCoding! Merging now.

@erikguntner erikguntner merged commit 37ae4b6 into main Jun 24, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Profile section button
2 participants