Refactor ModEditSubmissionForm.vue to use the broken out sections

[NabbeunNabi]

Problem

Our ModEditSubmissionForm.Vue is really long and very hard to read. It also isn't DRY as we are rewriting the same logic and inputs where the data matches the Healthcare Professional Data and the Facility Data. We now have these sections of the form broken out into two sections that can contain logic to conditionally render inputs and do different logic based on the moderationStore.activeScreen. We need to refactor this form to use the existing sections, while preserving the functionality to update the submission. We also will need to refactor tests and possibly test files between moderationDashboard and the moderationEditSubmissionForm

Success

The ModEditSubmissionForm.vue is refactored using the ModEditFacilitySection.vue and the ModEditHealthcareProfessionalSection.vue. It conditionally renders DOM elements based on the active screen as well as conditionally rendering logic for functionality. The sections should maintain their functionality and the Submission Form itself should maintain functionality. Tests are refactored or written where necessary in order to test the conditional rendering of the DOM elements.

Requirements

• Refactor the ModEditSubmissionForm.vue to use the two sections of ModEditHealthcareProfessionalSection.vue and ModEditFacilitySection.vue
• Maintain the functionality of the Submission Form while maintaining the functionality for editing a Healthcare Professional and a Facility
• Use the section fields within the healthcareProfessionalsStore.ts and facilitiesStore.ts and autofill them with the selected submission data from the moderationsSubmissionStore.ts
• Update the tests in cypress to follow the new structure and existence of DOM elements.
• Manually test that the data is updating correctly with screenshots as proof in the PR

Implementation notes

This can be broken down into multiple PRs

1. For the Healthcare professional section
2. For the facility sections

Relevant files as of now that I can think of are as follows:

1. Stores

• https://github.com/ourjapanlife/findadoc-web/blob/main/stores/healthcareProfessionalsStore.ts
• https://github.com/ourjapanlife/findadoc-web/blob/main/stores/facilitiesStore.ts
• https://github.com/ourjapanlife/findadoc-web/blob/main/stores/moderationSubmissionsStore.ts

2. Vue components

• https://github.com/ourjapanlife/findadoc-web/blob/main/components/ModEditHealthcareProfessionalSection.vue
• https://github.com/ourjapanlife/findadoc-web/blob/main/components/ModEditSubmissionForm.vue
• https://github.com/ourjapanlife/findadoc-web/blob/main/components/ModEditFacilitySection.vue

3. Test files

• https://github.com/ourjapanlife/findadoc-web/blob/main/test/cypress/e2e/moderationDashboard.cy.ts
• https://github.com/ourjapanlife/findadoc-web/blob/main/test/cypress/e2e/moderationDashboard.cy.ts