15538 Fixed restoration type layout and validation issues (#735)

* - app version = 5.11.20 - imported latest shared Approval Type component - fixed approval type layout - refactored approval type validation - refactored restoration type validation - fixed restoration business name layout * - fixed lint warning --------- Co-authored-by: Severin Beauvais <[email protected]>
bcgov · Sep 25, 2024 · 1b9dfdf · 1b9dfdf
1 parent e6a7c8b
commit 1b9dfdf
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 61 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": "5.11.19",
+  "version": "5.11.20",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/compat-data": "^7.21.5",
-    "@bcrs-shared-components/approval-type": "1.0.19",
+    "@bcrs-shared-components/approval-type": "1.1.2",
     "@bcrs-shared-components/base-address": "2.0.3",
     "@bcrs-shared-components/breadcrumb": "2.1.15",
     "@bcrs-shared-components/business-lookup": "1.3.4",

diff --git a/src/components/Restoration/ApprovalType.vue b/src/components/Restoration/ApprovalType.vue
@@ -1,26 +1,24 @@
 <template>
   <div id="approval-type">
-    <div
-      class="section-container"
-    >
-      <ApprovalTypeShared
-        :courtOrderNumber="getRestoration.courtOrder.fileNumber"
-        :approvedByRegistrar="approvedByRegistrar"
-        :noticeDate="getRestoration.noticeDate"
-        :applicationDate="getRestoration.applicationDate"
-        :invalidSection="invalidSection"
-        @radioButtonChange="setRestorationApprovalType($event)"
-        @courtNumberChange="setRestorationCourtOrder({ fileNumber: $event })"
-        @update:noticeDate="setRestorationNoticeDate($event)"
-        @update:applicationDate="setRestorationApplicationDate($event)"
-        @valid="setRestorationApprovalTypeValid($event)"
-      />
-    </div>
+    <ApprovalTypeShared
+      class="pa-8"
+      :courtOrderNumber="getRestoration.courtOrder.fileNumber"
+      :approvedByRegistrar="approvedByRegistrar"
+      :noticeDate="getRestoration.noticeDate"
+      :applicationDate="getRestoration.applicationDate"
+      :invalidSection="invalidSection"
+      :validate="getShowErrors"
+      @radioButtonChange="setRestorationApprovalType($event)"
+      @courtNumberChange="setRestorationCourtOrder({ fileNumber: $event })"
+      @update:noticeDate="setRestorationNoticeDate($event)"
+      @update:applicationDate="setRestorationApplicationDate($event)"
+      @valid="setRestorationApprovalTypeValid($event)"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'pinia-class'
 import { useStore } from '@/store/store'
 import { ApprovalTypes } from '@/enums'
@@ -33,6 +31,9 @@ import { ApprovalType as ApprovalTypeShared } from '@bcrs-shared-components/appr
   }
 })
 export default class ApprovalType extends Vue {
+  /** Whether this section is invalid. */
+  @Prop({ default: false }) readonly invalidSection!: boolean
+
   @Getter(useStore) getApprovalTypeValid!: boolean
   @Getter(useStore) getRestoration!: RestorationStateIF
   @Getter(useStore) getShowErrors!: boolean
@@ -43,11 +44,6 @@ export default class ApprovalType extends Vue {
   @Action(useStore) setRestorationCourtOrder!: (x: CourtOrderIF) => void
   @Action(useStore) setRestorationNoticeDate!: (x: string) => void
 
-  /** This section's validity state (when prompted by app). */
-  get invalidSection (): boolean {
-    return (this.getShowErrors && !this.getApprovalTypeValid)
-  }
-
   get approvedByRegistrar (): boolean {
     return (!!this.getRestoration.noticeDate && !!this.getRestoration.applicationDate)
   }

diff --git a/src/components/Restoration/RestorationType.vue b/src/components/Restoration/RestorationType.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="restoration-type">
+  <div
+    id="restoration-type"
+    :class="{ 'invalid-section': invalidSection }"
+  >
     <div class="section-container">
       <v-row no-gutters>
         <v-col
@@ -90,7 +93,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { DateMixin, CommonMixin } from '@/mixins'
 import { Getter, Action } from 'pinia-class'
 import { useStore } from '@/store/store'
@@ -106,6 +109,9 @@ import { LimitedRestorationPanel } from '@bcrs-shared-components/limited-restora
   }
 })
 export default class RestorationType extends Mixins(DateMixin, CommonMixin) {
+  /** Whether this section is invalid. */
+  @Prop({ default: false }) readonly invalidSection!: boolean
+
   @Getter(useStore) getCurrentDate!: string
   @Getter(useStore) getRestoration!: RestorationStateIF
   @Getter(useStore) getRestorationTypeValid!: boolean
@@ -124,11 +130,6 @@ export default class RestorationType extends Mixins(DateMixin, CommonMixin) {
   // Enum for template
   readonly RestorationTypes = RestorationTypes
 
-  /** This section's validity state (when prompted by app). */
-  get invalidSection (): boolean {
-    return (this.getShowErrors && !this.getRestorationTypeValid)
-  }
-
   /** The expiry months from the limited restoration draft. */
   get expiryMonths (): number {
     const expiryDate = this.getRestoration.expiry

diff --git a/src/views/Restoration/RestorationBusinessName.vue b/src/views/Restoration/RestorationBusinessName.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="restoration-business-name">
-    <!-- Business Name and Name Translations -->
+    <!-- Name section -->
     <section
       id="name-section"
       class="mt-10"
     >
       <header>
         <h2>Name</h2>
-        <p>
+        <p class="pt-2">
           Add a Name Request that is reserved for this restoration application or restore
           as a numbered company.
         </p>
@@ -25,35 +25,36 @@
       </v-card>
     </section>
 
-    <!-- Restoration Type and Approval Type -->
+    <!-- Restoration Type section -->
     <section
       id="restoration-type-section"
       class="mt-10"
     >
       <header>
         <h2>Restoration Type</h2>
-        <p>Determine the restoration and approval type.</p>
+        <p class="pt-2">
+          Determine the restoration and approval type.
+          </p>
       </header>
       <v-card
         flat
         class="mt-5"
       >
         <RestorationType
           id="restoration-type"
-          :class="{ 'approval-restoration-invalid-section': invalidSectionRestoration }"
+          :invalidSection="invalidSectionRestoration"
         />
 
-        <!-- Divider b/w Restoration and Approval type -->
         <div
-          class="px-5"
           :class="{ 'invalid-divider': invalidSectionRestoration && invalidSectionApproval }"
+          class="px-5"
         >
           <v-divider />
         </div>
 
         <ApprovalType
           id="approval-type"
-          :class="{ 'approval-restoration-invalid-section': invalidSectionApproval }"
+          :invalidSection="invalidSectionApproval"
         />
       </v-card>
     </section>
@@ -157,19 +158,9 @@ h2::before {
   content: counter(header-counter) '. ';
 }
 
-header p {
-  padding-top: 0.5rem;
-}
-
-/* Invalid Section border for Approval and Restoration Type */
-.approval-restoration-invalid-section{
-  box-shadow: inset 3px 0 0 $app-red;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-#restoration-type-section .v-card .invalid-divider {
+.invalid-divider {
   border-left: 3px solid $BCgovInputError !important;
+  // adjust left padding (was originally px-5)
   padding-left: calc(20px - 3px) !important;
 }
 </style>