- display person email/IN/BN in reg only (#368)

- enabled component rules only after user clicks Done - updated P&R list icon colors - updated unit tests - app version = 3.5.9
bcgov · Apr 1, 2022 · 9458d5d · 9458d5d
1 parent 7e62f3c
commit 9458d5d
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/Registration/RegAddEditOrgPerson.vue b/src/components/Registration/RegAddEditOrgPerson.vue
@@ -64,7 +64,7 @@
                   label="First Name"
                   id="person__first-name"
                   v-model.trim="orgPerson.officer.firstName"
-                  :rules="Rules.FirstNameRules"
+                  :rules="enableRules ? Rules.FirstNameRules : []"
                   :readonly="isCompletingParty && !isRoleStaff"
                 />
                 <v-text-field
@@ -73,7 +73,7 @@
                   label="Middle Name"
                   id="person__middle-name"
                   v-model.trim="orgPerson.officer.middleName"
-                  :rules="Rules.MiddleNameRules"
+                  :rules="enableRules ? Rules.MiddleNameRules : []"
                   :readonly="isCompletingParty && !isRoleStaff"
                 />
                 <v-text-field
@@ -82,7 +82,7 @@
                   label="Last Name"
                   id="person__last-name"
                   v-model.trim="orgPerson.officer.lastName"
-                  :rules="Rules.LastNameRules"
+                  :rules="enableRules ? Rules.LastNameRules : []"
                   :readonly="isCompletingParty && !isRoleStaff"
                 />
               </div>
@@ -108,7 +108,7 @@
                 class="confirm-checkbox mt-8"
                 hide-details
                 v-model="orgPerson.confirmBusiness"
-                :rules="[(v) => !!v]"
+                :rules="enableRules ? [(v) => !!v] : []"
               >
                 <template slot="label">
                   I confirm that the business proprietor being added is not legally required to
@@ -123,7 +123,7 @@
                 label="Business or Corporation Name"
                 id="firm-name"
                 v-model.trim="orgPerson.officer.organizationName"
-                :rules="OrgNameRules"
+                :rules="enableRules ? OrgNameRules : []"
               />
 
               <!-- Business Number -->
@@ -135,7 +135,7 @@
                 id="person__business-number"
                 hint="First 9 digits of the CRA Business Number"
                 v-model.trim="orgPerson.officer.businessNumber"
-                :rules="BusinessNumberRules"
+                :rules="enableRules ? BusinessNumberRules : []"
               />
 
               <v-divider class="mt-8" />
@@ -199,7 +199,7 @@
                 id="person__business-number"
                 hint="First 9 digits of the CRA Business Number"
                 v-model.trim="orgPerson.officer.businessNumber"
-                :rules="BusinessNumberRules"
+                :rules="enableRules ? BusinessNumberRules : []"
               />
             </article>
 
@@ -215,7 +215,7 @@
                 label="Email Address"
                 id="person__email-address"
                 v-model.trim="orgPerson.officer.email"
-                :rules="Rules.EmailRules"
+                :rules="enableRules ? Rules.EmailRules : []"
                 :readonly="isCompletingParty && !isRoleStaff"
               />
             </article>
@@ -227,13 +227,16 @@
                 ref="mailingAddressNew"
                 class="mt-4 mb-n6"
                 :editing="true"
-                :schema="PersonAddressSchema"
+                :schema="enableRules ? PersonAddressSchema : {}"
                 :address="inProgressMailingAddress"
                 @update:address="updateMailingAddress($event)"
                 @valid="updateMailingAddressValidity($event)"
               />
               <!-- dummy component to make form invalid if mailing address is invalid -->
-              <v-input class="d-none" :rules="[() => mailingAddressValid]" />
+              <v-input
+                class="d-none"
+                :rules="enableRules ? [() => mailingAddressValid] : []"
+              />
             </article>
 
             <!-- Delivery Address (for all roles) -->
@@ -251,14 +254,17 @@
                   ref="deliveryAddressNew"
                   class="mt-4 mb-n6"
                   :editing="true"
-                  :schema="PersonAddressSchema"
+                  :schema="enableRules ? PersonAddressSchema : {}"
                   :address="inProgressDeliveryAddress"
                   :noPoBox="true"
                   @update:address="updateDeliveryAddress($event)"
                   @valid="updateDeliveryAddressValidity($event)"
                 />
                 <!-- dummy component to make form invalid if delivery address is invalid -->
-                <v-input class="d-none" :rules="[() => inheritMailingAddress || deliveryAddressValid]" />
+                <v-input
+                  class="d-none"
+                  :rules="enableRules ? [() => inheritMailingAddress || deliveryAddressValid] : []"
+                />
               </article>
             </div>
 

diff --git a/src/components/Registration/RegPeopleAndRoles.vue b/src/components/Registration/RegPeopleAndRoles.vue
@@ -107,6 +107,7 @@
     <!-- Add/Edit Bus/Corp -->
     <v-expand-transition>
       <v-card flat v-if="showOrgPersonForm" class="mt-8">
+        <!-- FUTURE: move this component into a slot in ListPeopleAndRoles ??? -->
         <RegAddEditOrgPerson
           :initialValue="currentOrgPerson"
           :activeIndex="activeIndex"

diff --git a/src/components/common/AddEditOrgPerson.vue b/src/components/common/AddEditOrgPerson.vue
@@ -74,7 +74,7 @@
                   label="First Name"
                   id="person__first-name"
                   v-model.trim="orgPerson.officer.firstName"
-                  :rules="Rules.FirstNameRules"
+                  :rules="enableRules ? Rules.FirstNameRules : []"
                   :readonly="isCompletingParty && !isRoleStaff && isTypeCoop"
                 />
                 <v-text-field
@@ -83,7 +83,7 @@
                   label="Middle Name"
                   id="person__middle-name"
                   v-model.trim="orgPerson.officer.middleName"
-                  :rules="Rules.MiddleNameRules"
+                  :rules="enableRules ? Rules.MiddleNameRules: []"
                   :readonly="isCompletingParty && !isRoleStaff && isTypeCoop"
                 />
                 <v-text-field
@@ -92,7 +92,7 @@
                   label="Last Name"
                   id="person__last-name"
                   v-model.trim="orgPerson.officer.lastName"
-                  :rules="Rules.LastNameRules"
+                  :rules="enableRules ? Rules.LastNameRules : []"
                   :readonly="isCompletingParty && !isRoleStaff && isTypeCoop"
                 />
               </div>
@@ -108,7 +108,7 @@
                   label="Full Legal Corporation or Firm Name"
                   id="firm-name"
                   v-model.trim="orgPerson.officer.organizationName"
-                  :rules="Rules.OrgNameRules"
+                  :rules="enableRules ? Rules.OrgNameRules : []"
                 />
               </div>
             </article>
@@ -138,7 +138,7 @@
                       :value="RoleTypes.INCORPORATOR"
                       :label="RoleTypes.INCORPORATOR"
                       :disabled="disableIncorporatorRole"
-                      :rules="roleRules"
+                      :rules="enableRules ? roleRules: []"
                     />
                   </v-col>
 
@@ -150,7 +150,7 @@
                       :value="RoleTypes.DIRECTOR"
                       :label="RoleTypes.DIRECTOR"
                       :disabled="disableDirectorRole"
-                      :rules="roleRules"
+                      :rules="enableRules ? roleRules : []"
                       @click="updateSameAsMailingChkBox()"
                     />
                   </v-col>
@@ -165,13 +165,16 @@
                 ref="mailingAddressNew"
                 class="mt-6"
                 :editing="true"
-                :schema="PersonAddressSchema"
+                :schema="enableRules ? PersonAddressSchema : {}"
                 :address="inProgressMailingAddress"
                 @update:address="updateMailingAddress($event)"
                 @valid="updateMailingAddressValidity($event)"
               />
               <!-- dummy component to make form invalid if mailing address is invalid -->
-              <v-input class="d-none" :rules="[() => mailingAddressValid]" />
+              <v-input
+                class="d-none"
+                :rules="enableRules ? [() => mailingAddressValid] : []"
+              />
             </article>
 
             <!-- Delivery Address (for directors only) -->
@@ -189,14 +192,17 @@
                   ref="deliveryAddressNew"
                   class="mt-6"
                   :editing="true"
-                  :schema="PersonAddressSchema"
+                  :schema="enableRules ? PersonAddressSchema : {}"
                   :address="inProgressDeliveryAddress"
                   :noPoBox="true"
                   @update:address="updateDeliveryAddress($event)"
                   @valid="updateDeliveryAddressValidity($event)"
                 />
                 <!-- dummy component to make form invalid if delivery address is invalid -->
-                <v-input class="d-none" :rules="[() => inheritMailingAddress || deliveryAddressValid]" />
+                <v-input
+                  class="d-none"
+                  :rules="enableRules ? [() => inheritMailingAddress || deliveryAddressValid] : []"
+                />
               </article>
             </div>
 

diff --git a/src/components/common/ListPeopleAndRoles.vue b/src/components/common/ListPeopleAndRoles.vue
@@ -36,26 +36,28 @@
         >
           <v-col class="name-column d-flex text-break">
             <div class="pr-2">
-              <v-icon color="primary" v-if="isPerson(orgPerson)">mdi-account</v-icon>
-              <v-icon color="primary" v-if="isOrg(orgPerson)">mdi-domain</v-icon>
+              <v-icon color="gray9" v-if="isPerson(orgPerson)">mdi-account</v-icon>
+              <v-icon color="gray9" v-if="isOrg(orgPerson)">mdi-domain</v-icon>
             </div>
             <div>
               <span class="name" :class="{'text-uppercase':isOrg(orgPerson)}"
                 >{{ formatName(orgPerson) }}</span>
 
-              <div v-if="officerEmail(orgPerson)">
-                <p>{{ officerEmail(orgPerson) }}</p>
-              </div>
-
-              <div v-if="officerIncorpNumber(orgPerson)" class="mt-2">
-                <p>Incorporation Number:</p>
-                <p>{{ officerIncorpNumber(orgPerson) }}</p>
-              </div>
-
-              <div v-if="officerBusinessNumber(orgPerson)" class="mt-2">
-                <p>Business Number:</p>
-                <p>{{ officerBusinessNumber(orgPerson) }}</p>
-              </div>
+              <template v-if="isRegistrationFiling">
+                <div v-if="officerEmail(orgPerson)">
+                  <p>{{ officerEmail(orgPerson) }}</p>
+                </div>
+
+                <div v-if="officerIncorpNumber(orgPerson)" class="mt-2">
+                  <p>Incorporation Number:</p>
+                  <p>{{ officerIncorpNumber(orgPerson) }}</p>
+                </div>
+
+                <div v-if="officerBusinessNumber(orgPerson)" class="mt-2">
+                  <p>Business Number:</p>
+                  <p>{{ officerBusinessNumber(orgPerson) }}</p>
+                </div>
+              </template>
             </div>
           </v-col>
 

diff --git a/src/components/common/PeopleAndRoles.vue b/src/components/common/PeopleAndRoles.vue
@@ -123,6 +123,7 @@
     <!-- Add/Edit Person/Org -->
     <v-expand-transition>
       <v-card flat v-if="showOrgPersonForm" class="mt-8">
+        <!-- FUTURE: move this component into a slot in ListPeopleAndRoles ??? -->
         <AddEditOrgPerson
           :initialValue="currentOrgPerson"
           :activeIndex="activeIndex"

diff --git a/src/mixins/add-edit-org-person-mixin.ts b/src/mixins/add-edit-org-person-mixin.ts
@@ -40,6 +40,7 @@ export default class AddEditOrgPersonMixin extends Vue {
   // Local properties
   private orgPerson: OrgPersonIF = null
   private addPersonOrgFormValid = true
+  private enableRules = false
 
   // Address related properties
   private inProgressMailingAddress: AddressIF
@@ -282,7 +283,11 @@ export default class AddEditOrgPersonMixin extends Vue {
     }
   }
 
-  protected validateAddPersonOrgForm (): void {
+  protected async validateAddPersonOrgForm (): Promise<void> {
+    // enable component rules and wait to let them update
+    this.enableRules = true
+    await Vue.nextTick()
+
     // first validate the address form(s)
     this.$refs.mailingAddressNew.$refs.addressForm.validate()
     if (this.$refs.deliveryAddressNew) {

diff --git a/tests/unit/AddEditOrgPerson.spec.ts b/tests/unit/AddEditOrgPerson.spec.ts
@@ -149,6 +149,7 @@ function createComponent (
   document.body.setAttribute('data-app', 'true')
   return mount(AddEditOrgPerson, {
     localVue,
+    data() { return { enableRules: true }},
     propsData: {
       initialValue,
       activeIndex,

diff --git a/tests/unit/RegAddEditOrgPerson.spec.ts b/tests/unit/RegAddEditOrgPerson.spec.ts
@@ -149,6 +149,7 @@ function createComponent (
   document.body.setAttribute('data-app', 'true')
   return mount(AddEditOrgPerson, {
     localVue,
+    data() { return { enableRules: true }},
     propsData: {
       initialValue,
       activeIndex,