-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #382 from bcgov/stories/ECER-1575
ECER-1575: Add previous name page
- Loading branch information
Showing
6 changed files
with
214 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 147 additions & 1 deletion
148
...egistryPortal/ecer.clients.registryportal.client/src/components/pages/AddPreviousName.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,153 @@ | ||
| <template><div>ADD PREVIOUS NAME</div></template> | ||
| <template> | ||
| <PageContainer> | ||
| <Breadcrumb :items="items" /> | ||
| <v-row> | ||
| <v-col> | ||
| <Alert v-model="duplicatePreviousName" type="error" prominent> | ||
| <p>This previous name is already in your account. You cannot add the same name again.</p> | ||
| </Alert> | ||
| </v-col> | ||
| </v-row> | ||
| <v-row> | ||
| <v-col class="ml-1" cols="12"> | ||
| <h1>Add previous name</h1> | ||
| </v-col> | ||
| </v-row> | ||
| <div class="d-flex flex-column ga-3 my-6"> | ||
| <p> | ||
| This is only needed when you’re applying for certification and a transcript or other document has a different name then your current legal name. For | ||
| example, if your transcript has a different name than the name in your account. | ||
| </p> | ||
| <p>There are 3 steps:</p> | ||
| <ol class="ml-10"> | ||
| <li>Enter your previous name below</li> | ||
| <li>Provide government-issued ID</li> | ||
| <li>We’ll review your ID and add this name to your account</li> | ||
| </ol> | ||
| <p>Before you continue, make sure you have one of the accepted goverment-issued IDs:</p> | ||
| <ul class="ml-10"> | ||
| <li>Government-issued marriage certificate</li> | ||
| <li>Divorce certificate or papers</li> | ||
| <li>Government-issued change of name document</li> | ||
| </ul> | ||
| </div> | ||
| <v-row class="mt-10"> | ||
| <v-col> | ||
| <EceForm ref="addPreviousNameForm" :form="previousNameForm" :form-data="formStore.formData" @updated-form-data="formStore.setFormData" /> | ||
| </v-col> | ||
| </v-row> | ||
| <v-row class="mt-6"> | ||
| <v-col class="d-flex flex-row ga-3 flex-wrap"> | ||
| <v-btn size="large" color="primary" :loading="loadingStore.isLoading('profile_put')" @click="handleSubmitPreviousName">Save and continue</v-btn> | ||
| <v-btn size="large" variant="outlined" color="primary" @click="router.back()">Cancel</v-btn> | ||
| </v-col> | ||
| </v-row> | ||
| </PageContainer> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { useRouter } from "vue-router"; | ||
| import { getProfile, putProfile } from "@/api/profile"; | ||
| import Alert from "@/components/Alert.vue"; | ||
| import Breadcrumb from "@/components/Breadcrumb.vue"; | ||
| import EceForm from "@/components/Form.vue"; | ||
| import PageContainer from "@/components/PageContainer.vue"; | ||
| import previousNameForm from "@/config/previous-name-form"; | ||
| import { useAlertStore } from "@/store/alert"; | ||
| import { useFormStore } from "@/store/form"; | ||
| import { useLoadingStore } from "@/store/loading"; | ||
| import { useUserStore } from "@/store/user"; | ||
| import type { Components } from "@/types/openapi"; | ||
| export default { | ||
| name: "AddPreviousName", | ||
| components: { PageContainer, EceForm, Alert, Breadcrumb }, | ||
| setup() { | ||
| const formStore = useFormStore(); | ||
| const loadingStore = useLoadingStore(); | ||
| const userStore = useUserStore(); | ||
| const alertStore = useAlertStore(); | ||
| const router = useRouter(); | ||
| formStore.initializeForm({}); | ||
| return { formStore, loadingStore, alertStore, userStore, previousNameForm, router }; | ||
| }, | ||
| data: () => ({ | ||
| items: [ | ||
| { | ||
| title: "Home", | ||
| disabled: false, | ||
| href: "/", | ||
| }, | ||
| { | ||
| title: "Profile", | ||
| disabled: false, | ||
| href: "/profile", | ||
| }, | ||
| { | ||
| title: "Add previous name", | ||
| disabled: true, | ||
| href: "/profile/add-previous-name", | ||
| }, | ||
| ], | ||
| }), | ||
| computed: { | ||
| newPreviousName(): Components.Schemas.PreviousName { | ||
| return { | ||
| firstName: this.formStore.formData[previousNameForm.inputs.firstName.id], | ||
| middleName: this.formStore.formData[previousNameForm.inputs.middleName.id] ?? null, | ||
| lastName: this.formStore.formData[previousNameForm.inputs.lastName.id], | ||
| }; | ||
| }, | ||
| duplicatePreviousName() { | ||
| // Check if any existing previous name matches the new previous name | ||
| return this.userStore.userProfile?.previousNames?.some( | ||
| (previousName) => | ||
| previousName.firstName === this.newPreviousName.firstName && | ||
| previousName.middleName === this.newPreviousName.middleName && | ||
| previousName.lastName === this.newPreviousName.lastName, | ||
| ); | ||
| }, | ||
| }, | ||
| methods: { | ||
| async handleSubmitPreviousName() { | ||
| // Validate the form | ||
| const { valid } = await (this.$refs.addPreviousNameForm as typeof EceForm).$refs[previousNameForm.id].validate(); | ||
| if (valid) { | ||
| //check for duplicate previous name | ||
| if (!this.duplicatePreviousName) { | ||
| const { error } = await putProfile({ | ||
| ...this.userStore.userProfile, | ||
| previousNames: [this.newPreviousName], | ||
| }); | ||
| if (error) { | ||
| this.alertStore.setFailureAlert("Sorry, something went wrong and your changes could not be saved. Try again later."); | ||
| } else { | ||
| // Refetch user profile to get the new previous name Id | ||
| const userProfile = await getProfile(); | ||
| if (userProfile !== null) { | ||
| this.userStore.setUserProfile(userProfile); | ||
| const latestPreviousName = userProfile.previousNames?.find( | ||
| (previousName) => | ||
| previousName.firstName === this.newPreviousName.firstName && | ||
| previousName.middleName === this.newPreviousName.middleName && | ||
| previousName.lastName === this.newPreviousName.lastName, | ||
| ); | ||
| if (latestPreviousName) { | ||
| this.router.push({ name: "verify-previous-name", params: { previousNameId: latestPreviousName.id } }); | ||
| } | ||
| } | ||
| } | ||
| } else { | ||
| window.scrollTo(0, 0); | ||
| } | ||
| } else { | ||
| this.alertStore.setFailureAlert("You must enter all required fields in the valid format to continue."); | ||
| } | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
...lients.RegistryPortal/ecer.clients.registryportal.client/src/config/previous-name-form.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import EceTextField from "@/components/inputs/EceTextField.vue"; | ||
| import type { Form } from "@/types/form"; | ||
| import * as Rules from "@/utils/formRules"; | ||
|
|
||
| const previousNameForm: Form = { | ||
| id: "previousNameForm", | ||
| title: "Previous Name", | ||
| inputs: { | ||
| firstName: { | ||
| id: "firstName", | ||
| component: EceTextField, | ||
| props: { | ||
| label: "First name", | ||
| rules: [Rules.required("Enter your legal name"), Rules.noSpecialCharactersContactName()], | ||
| maxLength: 100, | ||
| }, | ||
| cols: { | ||
| md: 8, | ||
| lg: 6, | ||
| xl: 4, | ||
| }, | ||
| }, | ||
| middleName: { | ||
| id: "middleName", | ||
| component: EceTextField, | ||
| props: { | ||
| label: "Middle names (optional)", | ||
| rules: [Rules.noSpecialCharactersContactName()], | ||
| maxLength: 100, | ||
| }, | ||
| cols: { | ||
| md: 8, | ||
| lg: 6, | ||
| xl: 4, | ||
| }, | ||
| }, | ||
| lastName: { | ||
| id: "lastName", | ||
| component: EceTextField, | ||
| props: { | ||
| label: "Last name", | ||
| rules: [Rules.required("Enter your legal name"), Rules.noSpecialCharactersContactName()], | ||
| maxLength: 100, | ||
| }, | ||
| cols: { | ||
| md: 8, | ||
| lg: 6, | ||
| xl: 4, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default previousNameForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters