-
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.
Contact management - frontend changes: new - contactProfileView, cont…
…actSearchParams type, contactService, updated - HeaderMenu, en-CA, application enums, router, authzStore
- Loading branch information
1 parent
f1ecaed
commit 82849d4
Showing
10 changed files
with
246 additions
and
1 deletion.
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
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
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,25 @@ | ||
| import { appAxios } from './interceptors'; | ||
|
|
||
| import type { AxiosResponse } from 'axios'; | ||
| import type { ContactSearchParameters } from '@/types'; | ||
|
|
||
| const PATH = 'contact'; | ||
|
|
||
| export default { | ||
| /** | ||
| * @function searchContacts | ||
| * Returns a list of users based on the provided filtering parameters | ||
| * @param {SearchUsersOptions} params SearchUsersOptions object containing the data to filter against | ||
| * @returns {Promise<AxiosResponse>} An axios response or empty array | ||
| */ | ||
| searchContacts(params: ContactSearchParameters): Promise<AxiosResponse> { | ||
| return appAxios().get(`${PATH}`, { params: params }); | ||
| }, | ||
| /** | ||
| * @function updateEnquiry | ||
| * @returns {Promise} An axios response | ||
| */ | ||
| updateContact(contactId: string, data?: any) { | ||
| return appAxios().put(`${PATH}/${contactId}`, data); | ||
| } | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| export type ContactSearchParameters = { | ||
| contactApplicantRelationship?: string; | ||
| contactPreference?: string; | ||
| contactId?: string[]; | ||
| email?: string; | ||
| firstName?: string; | ||
| lastName?: string; | ||
| phoneNumber?: string; | ||
| userId?: string[]; | ||
| }; |
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
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,175 @@ | ||
| <script setup lang="ts"> | ||
| import { Form } from 'vee-validate'; | ||
| import { onMounted, ref } from 'vue'; | ||
| import { useI18n } from 'vue-i18n'; | ||
| import { useRouter } from 'vue-router'; | ||
| import { object, string, number } from 'yup'; | ||
| import { FormNavigationGuard, InputText, Dropdown } from '@/components/form'; | ||
| import { Button, Card, useToast } from '@/lib/primevue'; | ||
| import contactService from '@/services/contactService'; | ||
| import { CONTACT_PREFERENCE_LIST, PROJECT_RELATIONSHIP_LIST } from '@/utils/constants/housing'; | ||
| import { RouteName } from '@/utils/enums/application'; | ||
| import { setEmptyStringsToNull } from '@/utils/utils'; | ||
| import type { Contact } from '@/types'; | ||
| import type { Ref } from 'vue'; | ||
| // State | ||
| const initialFormValues: Ref<any | undefined> = ref(undefined); | ||
| const editable: Ref<boolean> = ref(false); | ||
| // Form validation schema | ||
| const contactSchema = object({ | ||
| phoneNumber: number().required().label('Phone'), | ||
| contactApplicantRelationship: string().required().label('Relationship to project'), | ||
| contactPreference: string().required().label('Preferred contact method') | ||
| }); | ||
| // Actions | ||
| const { t } = useI18n(); | ||
| const toast = useToast(); | ||
| const router = useRouter(); | ||
| const toHousing = (): void => { | ||
| router.push({ name: RouteName.HOUSING }); | ||
| }; | ||
| const onSubmit = async (values: any) => { | ||
| try { | ||
| const submitData: Contact = setEmptyStringsToNull(values); | ||
| const result = await contactService.updateContact(values.contactId, submitData); | ||
| if (result.status === 200) { | ||
| toast.success('Form saved'); | ||
| editable.value = false; | ||
| } else toast.error('Failed to save enquiry'); | ||
| } catch (e: any) { | ||
| toast.error('Failed to save enquiry', e); | ||
| } | ||
| }; | ||
| onMounted(async () => { | ||
| try { | ||
| const contact = (await contactService.searchContacts({}))?.data[0]; | ||
| initialFormValues.value = { | ||
| ...contact | ||
| }; | ||
| } catch (e: any) { | ||
| toast.error('Failed to load contact', e); | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex justify-content-center"> | ||
| <h2>{{ t('contact.profile.fillOutProfile') }}</h2> | ||
| </div> | ||
|
|
||
| <div class="flex justify-content-center"> | ||
| <Card style="width: 35rem"> | ||
| <template #title> | ||
| <div class="flex justify-content-between"> | ||
| <div style="display: inline"> | ||
| <font-awesome-icon | ||
| icon="fa-solid fa-user" | ||
| class="mr-3 app-primary-color" | ||
| /> | ||
| <h3 style="display: inline">{{ t('contact.profile.contactProfile') }}</h3> | ||
| </div> | ||
| <Button | ||
| class="p-button-outlined" | ||
| :aria-label="t('contact.profile.edit')" | ||
| @click="editable = true" | ||
| > | ||
| <font-awesome-icon | ||
| class="pr-2" | ||
| icon="fa-solid fa-edit" | ||
| /> | ||
| {{ t('contact.profile.edit') }} | ||
| </Button> | ||
| </div> | ||
| </template> | ||
| <template #content> | ||
| <Form | ||
| v-if="initialFormValues" | ||
| :validation-schema="contactSchema" | ||
| :initial-values="initialFormValues" | ||
| @submit="onSubmit" | ||
| > | ||
| <FormNavigationGuard v-if="editable" /> | ||
| <InputText | ||
| name="firstName" | ||
| :label="t('contact.profile.firstName')" | ||
| :disabled="true" | ||
| /> | ||
|
|
||
| <InputText | ||
| name="lastName" | ||
| :label="t('contact.profile.lastName')" | ||
| :disabled="true" | ||
| /> | ||
| <InputText | ||
| name="phoneNumber" | ||
| :label="t('contact.profile.phone')" | ||
| :disabled="!editable" | ||
| /> | ||
| <InputText | ||
| name="email" | ||
| :label="t('contact.profile.email')" | ||
| :disabled="true" | ||
| /> | ||
| <Dropdown | ||
| name="contactApplicantRelationship" | ||
| :label="t('contact.profile.relationshipToProject')" | ||
| :bold="false" | ||
| :disabled="!editable" | ||
| :options="PROJECT_RELATIONSHIP_LIST" | ||
| /> | ||
| <Dropdown | ||
| name="contactPreference" | ||
| :label="t('contact.profile.preferredContact')" | ||
| :bold="false" | ||
| :disabled="!editable" | ||
| :options="CONTACT_PREFERENCE_LIST" | ||
| /> | ||
|
|
||
| <div | ||
| v-if="editable" | ||
| class="field flex" | ||
| > | ||
| <div class="flex-auto"> | ||
| <Button | ||
| class="mr-2" | ||
| :label="t('contact.profile.save')" | ||
| type="submit" | ||
| icon="pi pi-check" | ||
| /> | ||
| <Button | ||
| class="p-button-outlined mr-2" | ||
| :label="t('contact.profile.cancel')" | ||
| icon="pi pi-times" | ||
| @click="editable = false" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Form> | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| <div | ||
| v-if="!editable" | ||
| class="flex justify-content-center" | ||
| > | ||
| <Button | ||
| class="mt-5" | ||
| :label="t('contact.profile.getStarted')" | ||
| @click="toHousing" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| h3 { | ||
| margin-top: 1em; | ||
| } | ||
| </style> |