Added address to the party

ppr-ui/jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  transformIgnorePatterns: []
 }

ppr-ui/package.json

@@ -32,22 +32,25 @@
     "@vue/composition-api": "^0.3.4",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "country-list": "^2.2.0",
     "ip": "^1.1.5",
     "jwt-decode": "^2.2.0",
     "launchdarkly-js-client-sdk": "^2.16.3",
+    "provinces": "^1.11.0",
     "register-service-worker": "^1.6.2",
     "sbc-common-components": "^2.1.14",
     "ua-parser-js": "^0.7.21",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
-    "vue-property-decorator": "^8.4.0",
     "vue-router": "^3.1.5",
+    "vuelidate": "^0.7.4",
     "vuetify": "^2.2.11",
     "vuex": "^3.0.1",
     "vuex-module-decorators": "^0.16.1"
   },
   "devDependencies": {
     "@types/jest": "^24.9.1",
+    "@types/vuelidate": "^0.7.4",
     "@vue/cli": "^4.2.3",
     "@vue/cli-plugin-babel": "^4.2.3",
     "@vue/cli-plugin-e2e-nightwatch": "^4.2.3",
@@ -69,6 +72,8 @@
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
     "typescript": "^3.7.5",
+    "vue-plugin-helper-decorator": "^0.0.11",
+    "vue-property-decorator": "^8.4.0",
     "vue-template-compiler": "^2.6.11"
   }
 }

ppr-ui/src/base-party/BaseParty.vue

@@ -3,7 +3,7 @@
     :class="getFormClass()"
     class="base-party-form"
     data-test-id="BaseParty.form"
-    @input="emitValidity(HEADER, $event)"
+    @input="emitValid(HEADER, $event)"
   >
     <v-container class="flex-center">
       <!-- See #724 re pending styling of these radio buttons -->
@@ -35,29 +35,38 @@
       :editing="editing"
       :value="value.businessName"
       @input="updateBusiness($event)"
-      @valid="emitValidity(BUSINESS_NAME, $event)"
+      @valid="emitValid(BUSINESS_NAME, $event)"
     />
     <person-name
       v-if="showPersonName"
       data-test-id="BaseParty.person"
       :editing="editing"
       :value="value.personName"
       @input="updatePerson($event)"
-      @valid="emitValidity(PERSON_NAME, $event)"
+      @valid="emitValid(PERSON_NAME, $event)"
+    />
+    <base-address
+      :address="value.address"
+      :editing="editing"
+      @input="updateAddress($event)"
+      @valid="emitValid(ADDRESS, $event)"
     />
   </v-form>
 </template>
 
 <script lang="ts">
 import { computed, createComponent, ref } from '@vue/composition-api'
+
+import BaseAddress from '@/components/BaseAddress.vue'
 import BusinessName from '@/components/BusinessName.vue'
 import PersonName from '@/components/PersonName.vue'
 import { BasePartyModel } from '@/base-party/base-party-model'
+import { BaseAddressModel } from '@/components/base-address-model'
 import { BusinessNameModel } from '@/components/business-model'
 import { PersonNameModel } from '@/components/person-name-model'
 
 export default createComponent({
-  components: { BusinessName, PersonName },
+  components: { BaseAddress, BusinessName, PersonName },
 
   props: {
     editing: {
@@ -78,6 +87,7 @@ export default createComponent({
 
     const formIsValid = ref<boolean>(false)
 
+    const ADDRESS = 'address'
     const BUSINESS_NAME = 'businessName'
     const HEADER = 'header'
     const PERSON_NAME = 'personName'
@@ -88,6 +98,7 @@ export default createComponent({
       [index: string]: boolean;
     }
     const validationState: StringKeyedObject = {}
+    validationState[ADDRESS] = false
     validationState[BUSINESS_NAME] = false
     validationState[HEADER] = false
     validationState[PERSON_NAME] = false
@@ -97,9 +108,9 @@ export default createComponent({
     const partyType = ref(type)
 
     // Callback function for emitting form validity on all sections back to the parent.
-    function emitValidity(key: string, validElement: boolean) {
+    function emitValid(key: string, validElement: boolean) {
       validationState[key] = validElement
-      let formValid = validationState[HEADER]
+      let formValid = validationState[ADDRESS] && validationState[HEADER]
       if (partyType.value === BUSINESS_NAME) {
         formValid = formValid && validationState[BUSINESS_NAME]
       }
@@ -113,19 +124,30 @@ export default createComponent({
     const showBusinessName = computed((): boolean => partyType.value === BUSINESS_NAME)
     const showPersonName = computed((): boolean => partyType.value === PERSON_NAME)
 
+    // Callback function for emitting the address model change back to the parent.
+    function updateAddress(newValue: BaseAddressModel): void {
+      emit('input', new BasePartyModel(
+        props.value.businessName,
+        props.value.personName,
+        newValue
+      ))
+    }
+
     // Callback function for emitting the business name model change back to the parent.
     function updateBusiness(newValue: BusinessNameModel): void {
       emit('input', new BasePartyModel(
         newValue,
-        props.value.personName
+        props.value.personName,
+        props.value.address
       ))
     }
 
     // Callback function for emitting the person name model change back to the parent.
     function updatePerson(newValue: PersonNameModel): void {
       emit('input', new BasePartyModel(
         props.value.businessName,
-        newValue
+        newValue,
+        props.value.address
       ))
     }
 
@@ -144,18 +166,20 @@ export default createComponent({
     }
 
     return {
+      ADDRESS,
       BUSINESS_NAME,
       HEADER,
       PERSON_NAME,
       changeType,
+      emitValid,
       formIsValid,
       getFormClass,
       partyType,
       showBusinessName,
       showPersonName,
+      updateAddress,
       updateBusiness,
-      updatePerson,
-      emitValidity
+      updatePerson
     }
   }
 })

ppr-ui/src/base-party/base-party-model.ts

@@ -1,20 +1,22 @@
-
+import { BaseAddressInterface, BaseAddressModel } from '@/components/base-address-model'
 import { BusinessNameInterface, BusinessNameModel } from '@/components/business-model'
 import { PersonNameInterface, PersonNameModel } from '@/components/person-name-model'
 
 /**
- * The interface to a party that may be a person or a business.
+ * The interface to a party that may be a person or a business, with an address.
  */
 export interface BasePartyInterface extends PersonNameInterface, BusinessNameInterface {
+  address?: BaseAddressInterface;
 }
 
 /**
- * The model for a that may be a person or a business, such as for a registering party.
+ * The model for a party that may be a person or a business, such as for a registering party.
  */
 export class BasePartyModel {
 
   private _businessName: BusinessNameModel
   private _personName: PersonNameModel
+  private _address?: BaseAddressModel
 
   /**
    * Provide a publicly accessible property that lists can use to index parties
@@ -26,13 +28,16 @@ export class BasePartyModel {
    *
    * @param businessName the business name of the party.
    * @param personName the person name of the party.
+   * @param address the address of the party.
    */
   public constructor(
     businessName: BusinessNameModel = new BusinessNameModel(),
-    personName: PersonNameModel = new PersonNameModel()
+    personName: PersonNameModel = new PersonNameModel(),
+    address?: BaseAddressModel
   ) {
     this._businessName = businessName
     this._personName = personName
+    this._address = address
   }
 
   /**
@@ -49,19 +54,33 @@ export class BasePartyModel {
     return this._personName
   }
 
+  /**
+   * Gets the address of the party
+   */
+  public get address(): BaseAddressModel | undefined {
+    return this._address
+  }
+
   /**
    * Gets the JSON representation of the BasePartyModel object.
    */
   public toJson(): BasePartyInterface {
-    let rval = {}
+    let rval: BasePartyInterface = {}
+
     if (this.businessName.businessName) {
       let bm = this.businessName.toJson()
       rval = Object.assign(rval, bm)
     }
+
     if (this.personName.first || this.personName.last) {
       let pm = this.personName.toJson()
       rval = Object.assign(rval, pm)
     }
+
+    if (this.address) {
+      rval = Object.assign(rval, { address: this.address.toJson() })
+    }
+
     return rval
   }
 
@@ -77,16 +96,21 @@ export class BasePartyModel {
   public static fromJson(jsonObject: BasePartyInterface | undefined): BasePartyModel {
     let businessName: BusinessNameModel | undefined
     let personName: PersonNameModel | undefined
+    let address: BaseAddressModel | undefined
 
-    if (jsonObject && jsonObject.businessName) {
-      businessName = new BusinessNameModel(jsonObject.businessName)
-    }
+    if (jsonObject) {
+      if (jsonObject.businessName) {
+        businessName = new BusinessNameModel(jsonObject.businessName)
+      }
+
+      if (jsonObject.personName) {
+        const jp = jsonObject.personName
+        personName = new PersonNameModel(jp.first, jp.middle, jp.last)
+      }
 
-    if (jsonObject && jsonObject.personName) {
-      const jp = jsonObject.personName
-      personName = new PersonNameModel(jp.first, jp.middle, jp.last)
+      address = BaseAddressModel.fromJson(jsonObject.address)
     }
 
-    return new BasePartyModel(businessName, personName)
+    return new BasePartyModel(businessName, personName, address)
   }
 }