Repository: bcgov/business-filings-ui
Pull request #741: Fix 27097 - Fix the Invalid Section Logic
Author: login: ArwenQin
Created: 2025-04-14T21:06:43Z | Merged: 2025-04-14T21:50:22Z

*Issue #:* /bcgov/entity#27097

*Description of changes:*
- Before: the logic in determing whether 1.Court Order section is valid is problematic
  Its validity solely depends on the Court Order Number section

- After update: the  validity depends Court Order Number section + File upload + input Text

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the business-filings-ui license (Apache 2.0).



Diff:
diff --git a/package-lock.json b/package-lock.json
index a6e9bfe72..7381e68b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-filings-ui",
-  "version": "7.4.32",
+  "version": "7.4.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-filings-ui",
-      "version": "7.4.32",
+      "version": "7.4.33",
       "dependencies": {
         "@babel/compat-data": "^7.21.5",
         "@bcrs-shared-components/base-address": "2.0.45",
diff --git a/package.json b/package.json
index 9ce64c473..25807d05b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "7.4.32",
+  "version": "7.4.33",
   "private": true,
   "appName": "Business Filings UI",
   "sbcName": "SBC Common Components",
diff --git a/src/views/CourtOrder.vue b/src/views/CourtOrder.vue
index b7ba02d13..99d2029a2 100644
--- a/src/views/CourtOrder.vue
+++ b/src/views/CourtOrder.vue
@@ -27,7 +27,7 @@
               </header>
               <div
                 id="court-order-section"
-                :class="{ 'invalid-section': !courtOrderValid && showErrors }"
+                :class="{ 'invalid-section': !courtOrderSectionValid && showErrors }"
               >
                 <v-card
                   flat
@@ -300,6 +300,9 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
   file: File = null // court order file object
   fileKey: string = null // court order file key
   courtOrderValid = true
+  courtOrderSectionValid = false
+  isNotationFormValid = false
+  isFileComponentValid = false
 
   // other variables
   totalFee = 0
@@ -364,7 +367,7 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
 
   get isPageValid (): boolean {
     const filingDataValid = (this.filingData.length > 0)
-    return (filingDataValid && this.courtOrderValid && this.staffPaymentValid)
+    return (filingDataValid && this.courtOrderSectionValid && this.staffPaymentValid)
   }
 
   /**
@@ -402,22 +405,20 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
     })
   }
 
-  @Watch('notation')
-  async onNotationChanged (): Promise<void> {
-    // if this is a court order and notation has changed, re-validate file upload component
-    if (this.isCourtOrder && this.enableValidation) {
-      await this.$nextTick() // wait for variables to update
-      this.$refs.fileUploadRef?.validate()
-    }
+  @Watch('courtOrderValid')
+  updateCourtOrderSectionValid (): void {
+    this.courtOrderSectionValid = this.courtOrderValid && this.isNotationFormValid && this.isFileComponentValid
   }
 
-  // NB: watch "fileKey" because it changes according to file validity (while "file" might not)
+  @Watch('notation')
   @Watch('fileKey')
-  async onFileKeyChanged (): Promise<void> {
-    // if this is a court order and file has changed, re-validate notation form
+  async onNotationFileChanged (): Promise<void> {
+    // if this is a court order and notation/file has changed, re-validate both notation and file upload component
     if (this.isCourtOrder && this.enableValidation) {
       await this.$nextTick() // wait for variables to update
-      this.$refs.notationFormRef?.validate()
+      this.isFileComponentValid = this.$refs.fileUploadRef?.validate()
+      this.isNotationFormValid = this.$refs.notationFormRef.validate()
+      this.updateCourtOrderSectionValid()
     }
   }
 
@@ -436,13 +437,13 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
 
   get validFlags (): object {
     return {
-      courtOrder: this.courtOrderValid,
+      courtOrder: this.courtOrderSectionValid,
       staffPayment: this.staffPaymentValid
     }
   }
 
   @Watch('staffPaymentValid')
-  @Watch('courtOrderValid')
+  @Watch('courtOrderSectionValid')
   onHaveChanges (): void {
     this.haveChanges = true
   }
@@ -522,10 +523,6 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
     this.enableValidation = true
     await this.$nextTick() // wait for form to update
 
-    const isNotationFormValid = (!this.$refs.notationFormRef || this.$refs.notationFormRef.validate())
-    const isFileComponentValid = (!this.$refs.fileUploadRef || this.$refs.fileUploadRef.validate())
-    const isCourtOrderPoaValid = (!this.$refs.courtOrderPoaRef || this.$refs.courtOrderPoaRef.validate())
-
     if (!this.isPageValid) {
       this.showErrors = true
       this.saving = false
@@ -533,13 +530,6 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
       return
     }
 
-    // if any component is invalid, don't save
-    if (!isNotationFormValid || !isFileComponentValid || !isCourtOrderPoaValid) {
-      this.saving = false
-      this.showErrors = true
-      return
-    }
-
     // base filing
     const filing: any = {
       header: {
diff --git a/tests/unit/CourtOrder.spec.ts b/tests/unit/CourtOrder.spec.ts
index cee020a55..f0fd457c3 100644
--- a/tests/unit/CourtOrder.spec.ts
+++ b/tests/unit/CourtOrder.spec.ts
@@ -95,6 +95,7 @@ describe('Court Order View', () => {
     await Vue.nextTick()
 
     // Check for validation error
+    expect(wrapper.vm.showErrors).toBe(true)
     expect(wrapper.vm.isPageValid).toBe(false)
   })
 
@@ -107,7 +108,7 @@ describe('Court Order View', () => {
       data () {
         return {
           filingData: ['0'], // Non-empty array
-          courtOrderValid: true, // courtOrderValid is true
+          courtOrderSectionValid: true, // courtOrderSectionValid is true
           staffPaymentValid: true // staffPaymentValid is true
         }
       } })
@@ -121,12 +122,12 @@ describe('Court Order View', () => {
 
     // verify "validated" - invalid Staff Payment form
     vm.staffPaymentValid = false
-    vm.courtOrderValid = true
+    vm.courtOrderSectionValid = true
     expect(vm.isPageValid).toBe(false)
 
     // verify "validated" - invalid Court Order section
     vm.staffPaymentValid = true
-    vm.courtOrderValid = false
+    vm.courtOrderSectionValid = false
     expect(vm.isPageValid).toBe(false)
 
     wrapper.destroy()
@@ -151,7 +152,7 @@ describe('Court Order View', () => {
 
     // make sure form is validated
     await wrapper.setData({
-      courtOrderValid: true,
+      courtOrderSectionValid: true,
       staffPaymentValid: true,
       staffPaymentData: { option: StaffPaymentOptions.NO_FEE }
     })


Reviews:
user: login: ArwenQin
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T21:15:53Z
user: login: ArwenQin
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T21:16:31Z
user: login: severinbeauvais
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-14T21:27:09Z
user: login: JazzarKarim
body: <img width="907" alt="image" src="https://github.com/user-attachments/assets/1a5dfd0b-ad4d-4eda-b9d8-34de0021b79d" />

Tested, looks good 👍 
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-14T21:28:54Z

Review comments:
diff_hunk: @@ -27,7 +27,7 @@
               </header>
               <div
                 id="court-order-section"
-                :class="{ 'invalid-section': !courtOrderValid && showErrors }"
+                :class="{ 'invalid-section': !courtOrderSectionValid && showErrors }"
               >
path: src/views/CourtOrder.vue
user: login: ArwenQin
body: Previously not properly set, depends only on the court order number input field
created_at: 2025-04-14T21:15:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -522,24 +523,13 @@ export default class CourtOrderView extends Mixins(DateMixin, FilingMixin, Commo
     this.enableValidation = true
     await this.$nextTick() // wait for form to update
 
-    const isNotationFormValid = (!this.$refs.notationFormRef || this.$refs.notationFormRef.validate())
-    const isFileComponentValid = (!this.$refs.fileUploadRef || this.$refs.fileUploadRef.validate())
-    const isCourtOrderPoaValid = (!this.$refs.courtOrderPoaRef || this.$refs.courtOrderPoaRef.validate())
-
     if (!this.isPageValid) {
       this.showErrors = true
       this.saving = false
       await this.validateAndScroll(this.validFlags, this.validComponents)
       return
     }
 
-    // if any component is invalid, don't save
-    if (!isNotationFormValid || !isFileComponentValid || !isCourtOrderPoaValid) {
-      this.saving = false
-      this.showErrors = true
-      return
-    }
-
path: src/views/CourtOrder.vue
user: login: ArwenQin
body: Not needed, as now this.isPageValid looks at all component's validity
created_at: 2025-04-14T21:16:31Z
author_association: CONTRIBUTOR

PR comments:
user: login: bcregistry-sre
created_at: 2025-04-14T21:10:11Z
body: Temporary Url for review: https://business-filings-dev--pr-741-s8tchbtd.web.app

Test:
https://business-filings-dev--pr-741-s8tchbtd.web.app/BC0887823/court-order?accountid=3040&businessid=BC0887823&filingId=0
author_association: COLLABORATOR
user: login: ArwenQin
created_at: 2025-04-14T21:10:38Z
body: Before update:
the validity of section 1 solely depends on the Court Order Number
![image](https://github.com/user-attachments/assets/f68bbbb7-ad11-441f-85f4-f374e5e0eef6)
It shows invalid section when Court Order Number is invalid
![image](https://github.com/user-attachments/assets/789267be-7d80-42bb-aee8-9b292c20c399)

But when the text input and file upload is invalid, it doesn't show the invalid section
![image](https://github.com/user-attachments/assets/69ed1a48-425c-46de-b9b3-433abfaf8ce9)

author_association: CONTRIBUTOR
user: login: ArwenQin
created_at: 2025-04-14T21:12:31Z
body: After update:
![image](https://github.com/user-attachments/assets/5c55974b-4d4c-4d4c-8e70-06dff6ee04b0)

author_association: CONTRIBUTOR
user: login: ArwenQin
created_at: 2025-04-14T21:14:48Z
body: /gcbrun
author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-04-14T21:15:18Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=bcgov_business-filings-ui&pullRequest=741) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=bcgov_business-filings-ui&pullRequest=741&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=bcgov_business-filings-ui&pullRequest=741&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=bcgov_business-filings-ui&pullRequest=741&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=bcgov_business-filings-ui&pullRequest=741&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=bcgov_business-filings-ui&pullRequest=741&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=bcgov_business-filings-ui&pullRequest=741)


author_association: NONE
user: login: bcregistry-sre
created_at: 2025-04-14T21:17:59Z
body: Temporary Url for review: https://business-filings-dev--pr-741-s8tchbtd.web.app
author_association: COLLABORATOR