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.

Sign up for GitHub

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

Jump to bottom

7836 improve address input for r38 #150

Merged
merged 4 commits into from
Dec 6, 2022
Merged

7836 improve address input for r38 #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66daf3d
8322 update help content for R32 - update contract periods
prit-cgi Nov 28, 2022
43e518c
7836: Improve Address input for R38
prit-cgi Dec 5, 2022
5bef9ca
Merge branch 'main' of https://github.com/bcgov/moh-hnweb into 7836-I…
prit-cgi Dec 5, 2022
2c5b26d
Addressed review comments
prit-cgi Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions frontend/src/components/grid/AppRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<template>
<div class="row" >
<div class="row">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'AppRow'
}

export default {
name: 'AppRow',
}
</script>
<style scoped>
.row {
Expand All @@ -17,9 +16,10 @@
padding-bottom: 5px;
width: 100%;
}

.flex-gap {
gap: 40px;
}
.row-center {
justify-content: center;
}

</style>
</style>
7 changes: 7 additions & 0 deletions frontend/src/util/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,3 +71,10 @@ export const RELATIONSHIPS = [
{ text: 'Spouse', value: 'S' },
{ text: 'Dependent', value: 'D' },
]

// COUNTRY OPTIONS
export const COUNTRIES = [
{ text: 'Select', value: '' },
{ text: 'Canada', value: 'CA' },
{ text: 'United States', value: 'US' },
]
10 changes: 9 additions & 1 deletion frontend/src/util/validators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import dayjs from 'dayjs'

import { helpers } from '@vuelidate/validators'

/**
Expand Down Expand Up @@ -189,6 +188,12 @@ export function validateMailingAddress() {
return this.mailingAddress.addressLine2 !== '' || this.mailingAddress.addressLine3 !== '' || this.mailingAddress.addressLine4 !== '' || this.mailingAddress.postalCode !== ''
}

/**
* Used to validate that Mailing Address line 1 must be completed if any other Mailing Address(Line 2, city, province, PostalCode) is complete
*/
export function validateMailingAddressForMSPContracts() {
return this.mailingAddress.addressLine2 !== '' || this.mailingAddress.city !== '' || this.mailingAddress.province !== '' || this.mailingAddress.postalCode !== ''
}
/**
* Used to validate that Mailing Address line 1 must be completed if any other Mailing Address(Line 2, Line 3, PostalCode) is complete
*/
Expand Down Expand Up @@ -297,7 +302,10 @@ export const VALIDATE_ADDRESS_LINE4_MESSAGE = 'Address Line 4 is invalid'
export const VALIDATE_SURNAME_MESSAGE = 'Surname is invalid'
export const VALIDATE_FIRST_NAME_MESSAGE = 'First Name is invalid'
export const VALIDATE_SECOND_NAME_MESSAGE = 'Second Name is invalid'
export const VALIDATE_CITY_REQUIRED_MESSAGE = 'City is required'
export const VALIDATE_CITY_MESSAGE = 'City is invalid'
export const VALIDATE_PROVINCE_REQUIRED_MESSAGE = 'Province is required'
export const VALIDATE_PROVINCE_MESSAGE = 'Province is invalid'
export const VALIDATE_DOB_MESSAGE = 'Date of Birth must not be in the future'
export const VALIDATE_PHN_MESSAGE = 'PHN format is invalid'
export const VALIDATE_CONTRACT_NUMBER_MESSAGE = 'MSP Contract Number is invalid'
Expand Down
165 changes: 95 additions & 70 deletions frontend/src/views/mspcontracts/UpdateContractAddress.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,54 +22,64 @@
<AppInput :e-model="v$.telephone" id="telephone" label="Telephone (Optional)" type="text" v-model.trim="telephone" placeholder="1234567890" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppRow class="flex-gap">
<AppCol class="col5">
<AppInput :e-model="v$.homeAddress.addressLine1" id="addressLine1" label="Home Address Line 1" type="text" v-model="homeAddress.addressLine1" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppInput :e-model="v$.homeAddress.addressLine2" id="addressLine2" label="Line 2 (Optional)" type="text" v-model="homeAddress.addressLine2" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppInput :e-model="v$.homeAddress.addressLine3" id="addressLine3" label="Line 3 (Optional)" type="text" v-model="homeAddress.addressLine3" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppInput :e-model="v$.homeAddress.addressLine4" id="addressLine4" label="Line 4 (Optional)" type="text" v-model="homeAddress.addressLine4" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col3">
<AppInput :e-model="v$.homeAddress.postalCode" id="postalCode" label="Postal Code" type="text" v-model.trim="homeAddress.postalCode" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppCol class="col5">
<AppInput :e-model="v$.mailingAddress.addressLine1" id="mailingAddress1" label="Mailing Address (if different from home address)" v-model="mailingAddress.addressLine1" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppRow class="flex-gap">
<AppCol class="col5">
<AppInput :e-model="v$.homeAddress.addressLine2" id="addressLine2" label="Line 2 (Optional)" type="text" v-model="homeAddress.addressLine2" />
</AppCol>
<AppCol class="col5">
<AppInput :e-model="v$.mailingAddress.addressLine2" id="mailingAddress2" label="Line 2 (Optional)" v-model="mailingAddress.addressLine2" />
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppInput :e-model="v$.mailingAddress.addressLine3" id="mailingAddress3" label="Line 3 (Optional)" v-model="mailingAddress.addressLine3" />
<AppRow class="flex-gap">
<AppCol class="col5">
<AppRow>
<AppCol>
<AppInput :e-model="v$.homeAddress.city" id="city" label="City" type="text" v-model.trim="homeAddress.city" />
</AppCol>
<AppCol>
<AppInput :e-model="v$.homeAddress.province" id="province" label="Province" type="text" v-model.trim="homeAddress.province" />
</AppCol>
</AppRow>
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col6">
<AppInput :e-model="v$.mailingAddress.addressLine4" id="mailingAddress4" label="Line 4 (Optional)" v-model="mailingAddress.addressLine4" />
<AppCol class="col5">
<AppRow>
<AppCol>
<AppInput :e-model="v$.mailingAddress.city" id="mailingCity" label="City" type="text" v-model.trim="mailingAddress.city" />
</AppCol>
<AppCol>
<AppInput :e-model="v$.mailingAddress.province" id="mailingProvince" label="Province" type="text" v-model.trim="mailingAddress.province" />
</AppCol>
</AppRow>
</AppCol>
</AppRow>
<AppRow>
<AppCol class="col3">
<AppInput :e-model="v$.mailingAddress.postalCode" id="mailingPostalCode" label="Postal Code" type="text" v-model.trim="mailingAddress.postalCode" />
<AppRow class="flex-gap">
<AppCol class="col5">
<AppRow>
<AppCol>
<AppInput :e-model="v$.homeAddress.postalCode" id="postalCode" label="Postal Code" type="text" v-model.trim="homeAddress.postalCode" />
</AppCol>
<AppCol>
<AppSelect id="country" label="Country" v-model="homeAddress.country" :options="countryOptions" />
</AppCol>
</AppRow>
</AppCol>
<AppCol class="col5"
><AppRow>
<AppCol>
<AppInput :e-model="v$.mailingAddress.postalCode" id="mailingPostalCode" label="Postal Code" type="text" v-model.trim="mailingAddress.postalCode" />
</AppCol>
<AppCol>
<AppSelect id="mailingCountry" label="Country" v-model="mailingAddress.country" :options="countryOptions" />
</AppCol>
</AppRow>
</AppCol>
</AppRow>
<AppRow>
Expand All @@ -80,32 +90,40 @@
</div>
<br />
<div id="confirmation" v-if="updateOk">
<p>PHN: {{ result?.phn }}</p>
<p><label>Transaction completed for:</label></p>
<ul>
<li><label>Group Number: </label>{{ groupNumber }}</li>
<li><label>PHN: </label>{{ result?.phn }}</li>
</ul>
<br />
<AppButton @click="resetForm" mode="primary" type="button">Update Another Contract Address</AppButton>
</div>
</template>
<script>
import AppHelp from '../../components/ui/AppHelp.vue'
import useVuelidate from '@vuelidate/core'
import { required, requiredIf, helpers, maxLength } from '@vuelidate/validators'
import { COUNTRIES } from '../../util/constants'
import {
validateGroupNumber,
validatePHN,
validatePostalCode,
validateMailingPostalCode,
validateAddress,
validateOptionalAddress,
validateMailingAddress,
validateMailingAddressForMSPContracts,
validateTelephone,
VALIDATE_ADDRESS_LINE1_REQUIRED_MESSAGE,
VALIDATE_ADDRESS_LINE1_MESSAGE,
VALIDATE_ADDRESS_LINE2_MESSAGE,
VALIDATE_ADDRESS_LINE3_MESSAGE,
VALIDATE_ADDRESS_LINE4_MESSAGE,
VALIDATE_GROUP_NUMBER_MESSAGE,
VALIDATE_PHN_MESSAGE,
VALIDATE_POSTAL_CODE_MESSAGE,
VALIDATE_TELEPHONE_MESSAGE,
VALIDATE_CITY_REQUIRED_MESSAGE,
VALIDATE_CITY_MESSAGE,
VALIDATE_PROVINCE_REQUIRED_MESSAGE,
VALIDATE_PROVINCE_MESSAGE,
} from '../../util/validators'
import MspContractsService from '../../services/MspContractsService'
import { useAlertStore } from '../../stores/alert'
Expand All @@ -122,6 +140,9 @@ export default {
v$: useVuelidate(),
}
},
created() {
this.countryOptions = COUNTRIES
},
data() {
return {
submitting: false,
Expand All @@ -134,16 +155,18 @@ export default {
homeAddress: {
addressLine1: '',
addressLine2: '',
addressLine3: '',
addressLine4: '',
postalCode: '',
country: '',
city: '',
province: '',
},
mailingAddress: {
addressLine1: '',
addressLine2: '',
addressLine3: '',
addressLine4: '',
postalCode: '',
country: '',
city: '',
province: '',
},
result: {
phn: '',
Expand Down Expand Up @@ -172,16 +195,14 @@ export default {
phone: this.telephone,
homeAddress: {
addressLine1: this.homeAddress.addressLine1,
addressLine2: this.homeAddress.addressLine2,
addressLine3: this.homeAddress.addressLine3,
addressLine4: this.homeAddress.addressLine4,
addressLine2: this.homeAddress.addressLine2 === '' ? this.homeAddress.city + ' ' + this.homeAddress.province : this.homeAddress.addressLine2,
addressLine3: this.homeAddress.addressLine2 === '' ? '' : this.homeAddress.city + ' ' + this.homeAddress.province,
postalCode: this.homeAddress.postalCode,
},
mailingAddress: {
addressLine1: this.mailingAddress.addressLine1,
addressLine2: this.mailingAddress.addressLine2,
addressLine3: this.mailingAddress.addressLine3,
addressLine4: this.mailingAddress.addressLine4,
addressLine2: this.mailingAddress.addressLine2 === '' ? this.mailingAddress.city + ' ' + this.mailingAddress.province : this.mailingAddress.addressLine2,
addressLine3: this.mailingAddress.addressLine2 === '' ? '' : this.mailingAddress.city + ' ' + this.mailingAddress.province,
postalCode: this.mailingAddress.postalCode,
},
})
Expand Down Expand Up @@ -214,13 +235,13 @@ export default {
this.telephone = ''
this.homeAddress.addressLine1 = ''
this.homeAddress.addressLine2 = ''
this.homeAddress.addressLine3 = ''
this.homeAddress.addressLine4 = ''
this.homeAddress.city = ''
this.homeAddress.province = ''
this.homeAddress.postalCode = ''
this.mailingAddress.addressLine1 = ''
this.mailingAddress.addressLine2 = ''
this.mailingAddress.addressLine3 = ''
this.mailingAddress.addressLine4 = ''
this.mailingAddress.city = ''
this.mailingAddress.province = ''
this.mailingAddress.postalCode = ''
this.result = null
this.v$.$reset()
Expand Down Expand Up @@ -254,39 +275,43 @@ export default {
maxLength: maxLength(25),
validateAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE2_MESSAGE, validateAddress),
},
addressLine3: {
maxLength: maxLength(25),
validateAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE3_MESSAGE, validateAddress),
postalCode: {
required,
validatePostalCode: helpers.withMessage(VALIDATE_POSTAL_CODE_MESSAGE, validatePostalCode),
},
addressLine4: {
city: {
required,
maxLength: maxLength(25),
validateAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE4_MESSAGE, validateAddress),
validateAddress: helpers.withMessage(VALIDATE_CITY_MESSAGE, validateAddress),
},
postalCode: {
province: {
required,
validatePostalCode: helpers.withMessage(VALIDATE_POSTAL_CODE_MESSAGE, validatePostalCode),
maxLength: maxLength(25),
validateAddress: helpers.withMessage(VALIDATE_PROVINCE_MESSAGE, validateAddress),
},
},
mailingAddress: {
addressLine1: {
required: helpers.withMessage(VALIDATE_ADDRESS_LINE1_REQUIRED_MESSAGE, requiredIf(validateMailingAddress)),
required: helpers.withMessage(VALIDATE_ADDRESS_LINE1_REQUIRED_MESSAGE, requiredIf(validateMailingAddressForMSPContracts)),
maxLength: maxLength(25),
validateOptionalAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE1_MESSAGE, validateOptionalAddress),
},
addressLine2: {
maxLength: maxLength(25),
validateOptionalAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE2_MESSAGE, validateOptionalAddress),
},
addressLine3: {
maxLength: maxLength(25),
validateOptionalAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE3_MESSAGE, validateOptionalAddress),
postalCode: {
validateMailingPostalCode: helpers.withMessage(VALIDATE_POSTAL_CODE_MESSAGE, validateMailingPostalCode),
},
addressLine4: {
city: {
required: helpers.withMessage(VALIDATE_CITY_REQUIRED_MESSAGE, requiredIf(validateMailingAddressForMSPContracts)),
maxLength: maxLength(25),
validateOptionalAddress: helpers.withMessage(VALIDATE_ADDRESS_LINE4_MESSAGE, validateOptionalAddress),
validateAddress: helpers.withMessage(VALIDATE_CITY_MESSAGE, validateAddress),
},
postalCode: {
validateMailingPostalCode: helpers.withMessage(VALIDATE_POSTAL_CODE_MESSAGE, validateMailingPostalCode),
province: {
required: helpers.withMessage(VALIDATE_PROVINCE_REQUIRED_MESSAGE, requiredIf(validateMailingAddressForMSPContracts)),
maxLength: maxLength(25),
validateAddress: helpers.withMessage(VALIDATE_PROVINCE_MESSAGE, validateAddress),
},
},
}
Expand Down
8 changes: 4 additions & 4 deletions frontend/tests/e2e/pages/mspcontracts/UpdateContractAddress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ class UpdateContractAddress {

this.address1Input = Selector('#addressLine1')
this.address2Input = Selector('#addressLine2')
this.address3Input = Selector('#addressLine3')
this.address4Input = Selector('#addressLine4')
this.homeAddressCityInput = Selector('#city')
this.homeAddressProvinceInput = Selector('#province')
this.postalCodeInput = Selector('#postalCode')
this.mailingAddress1Input = Selector('#mailingAddress1')
this.mailingAddress2Input = Selector('#mailingAddress2')
this.mailingAddress3Input = Selector('#mailingAddress3')
this.mailingAddress4Input = Selector('#mailingAddress4')
this.mailingAddressCityInput = Selector('#mailingCity')
this.mailingAddressProvinceInput = Selector('#mailingProvince')
this.mailingPostalCodeInput = Selector('#mailingPostalCode')

this.errorText = Selector('div').withAttribute('class', 'error-text')
Expand Down
Loading