19977 - autoscroll to the top error (#215)

* autoscroll to the top error

* lint fix

btr-web/btr-common-components/components/bcros/section/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="id"
     class="w-full"
     :class="[
       showSectionHasErrors ? 'border-l-[3px] border-red-500' : '',
@@ -73,6 +74,7 @@
 <script setup lang="ts">
 const slots = useSlots()
 const props = defineProps({
+  id: { type: String, required: false, default: undefined },
   showSectionHasErrors: { type: Boolean, required: false, default: false },
   sectionTitle: { type: String, required: false, default: undefined },
   sectionTitleIcon: { type: String, required: false, default: undefined },

btr-web/btr-main-app/components/individual-person/add-new/index.vue

@@ -93,6 +93,7 @@
 
       <!--  section: type of interest or control of shares -->
       <BcrosSection
+        id="control-of-shares"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfShares')"
         :border="editMode"
@@ -107,6 +108,7 @@
 
       <!--  section: type of interest or control of votes -->
       <BcrosSection
+        id="control-of-votes"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfVotes')"
         :border="editMode"
@@ -121,6 +123,7 @@
 
       <!--  section: control of majority of directors  -->
       <BcrosSection
+        id="control-of-directors"
         :show-section-has-errors="false"
         :section-title="$t('sectionTitles.controlOfMajorityOfDirectors')"
         :border="editMode"
@@ -135,6 +138,7 @@
 
       <!--  section: other reasons  -->
       <BcrosSection
+        id="control-other"
         :show-section-has-errors="hasErrors(['otherReasons'])"
         :section-title="$t('sectionTitles.otherReasons')"
         rounded-bot
@@ -166,6 +170,7 @@
 
       <!--  section: effective dates -->
       <BcrosSection
+        id="effective-dates"
         :show-section-has-errors="hasErrors(['effectiveDates'])"
         :section-title="$t('sectionTitles.effectiveDates')"
         rounded-bot
@@ -217,14 +222,14 @@
 
       <!--  section: individual details address, mailing address  -->
       <BcrosSection
+        id="address"
         :show-section-has-errors="hasErrors(['address.'])"
         :section-title="$t('labels.lastKnownAddress')"
         :border="editMode"
         no-top-border
       >
         <div class="flex-col w-full">
           <BcrosInputsAddress
-            id="addNewPersonLastKnownAddress"
             v-model="inputFormSi.address"
             name="address"
             :is-editing="isEditing"
@@ -248,6 +253,7 @@
       </BcrosSection>
       <BcrosSection
         v-if="showMailingAddress"
+        id="mailing-address"
         class="-mt-1 pt-0"
         :show-section-has-errors="hasErrors(['address.'])"
         :section-title="$t('labels.mailingAddress')"
@@ -256,7 +262,6 @@
       >
         <div class="flex-col w-full">
           <BcrosInputsAddress
-            id="addNewPersonLastKnownAddress"
             v-model="inputFormSi.mailingAddress.address"
             name="mailingAddress.address"
             :is-editing="isEditing"
@@ -274,6 +279,7 @@
 
       <!--  section: individual details phoneNumber; phone number  -->
       <BcrosSection
+        id="phone-number"
         :show-section-has-errors="hasErrors(['phoneNumber'])"
         :section-title="$t('sectionTitles.phoneNumber')"
         :border="editMode"
@@ -288,6 +294,7 @@
         />
       </BcrosSection>
       <BcrosSection
+        id="birth-date"
         :show-section-has-errors="hasErrors([InputFieldsE.BIRTH_DATE])"
         :section-title="$t('labels.birthdate')"
         :border="editMode"
@@ -311,6 +318,7 @@
 
       <!--  section: citizenship or PR  -->
       <BcrosSection
+        id="citizenships"
         :show-section-has-errors="hasErrors(['citizenships'])"
         :section-title="$t('sectionTitles.citizenshipOrPR')"
         :border="editMode"
@@ -327,6 +335,7 @@
 
       <!--  section: tax details  -->
       <BcrosSection
+        id="tax-details"
         :show-section-has-errors="hasErrors(['tax.'])"
         :section-title="$t('sectionTitles.taxDetails')"
         :border="editMode"
@@ -351,6 +360,7 @@
         </div>
       </BcrosSection>
       <bcrosSection
+        id="tax-residency"
         :show-section-has-errors="hasErrors(['isTaxResident'])"
         :section-title="$t('labels.taxResidency')"
         :border="editMode"
@@ -388,6 +398,7 @@
 
       <!--  section: unable to obtain or confirm  -->
       <BcrosSection
+        id="missing-info"
         :show-section-has-errors="hasErrors(['missingInfo'])"
         :section-title="$t('sectionTitles.unableToObtainOrConfirmInformation')"
         rounded-top
@@ -479,6 +490,16 @@ const props = defineProps<{
 const t = useNuxtApp().$i18n.t
 const bcrosAccount = useBcrosAccount()
 
+const { scrollToAnchor } = useAnchorScroll({
+  toAnchor: {
+    target: document.documentElement,
+    scrollOptions: {
+      behavior: 'smooth',
+      offsetTop: -20 // Add extra space above the anchor
+    }
+  }
+})
+
 const isEditing = ref(false)
 
 const emailFieldUuid = getRandomUuid()
@@ -748,6 +769,27 @@ function handleDoneButtonClick () {
     errors = res.error.issues.map(issue => ({ message: issue.message, path: issue.path.join('.') }))
     console.error(errors)
     addIndividualForm.value.setErrors(errors)
+
+    // find the top section with error
+    const topErrorSection = errors.reduce((topSection, error) => {
+      const path = error.path.split('.')
+      let section: string = path[0]
+      if (section === 'name') {
+        section += '.' + path[1]
+      }
+      if (!topSection) {
+        return section
+      }
+
+      return errorSectionMap[topSection]?.position < errorSectionMap[section]?.position ? topSection : section
+    }, null as string | null)
+
+    // autoscroll to the top error
+    const topId = errorSectionMap[topErrorSection as string]?.sectionId
+
+    if (topId) {
+      scrollToAnchor(topId)
+    }
   } else if (isEditing.value) {
     emits('update', { index: props.index, updatedSI: inputFormSi })
   } else {

btr-web/btr-main-app/nuxt.config.ts

@@ -1,5 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  modules: [
+    'nuxt-anchorscroll'
+  ],
   extends: [
     '../btr-layouts',
     '../btr-common-components'

btr-web/btr-main-app/package.json

@@ -34,6 +34,7 @@
     "@nuxtjs/i18n": "^8.2.0",
     "@testing-library/vue": "^8.0.2",
     "@vitest/coverage-v8": "^1.3.1",
+    "nuxt-anchorscroll": "^1.0.5",
     "vite": "5.2.0-beta.1",
     "vitest": "1.3.1",
     "vitest-environment-nuxt": "^1.0.0"

btr-web/btr-main-app/utils/error-section-map.ts

@@ -0,0 +1,18 @@
+export const errorSectionMap = {
+  'name.fullName': { sectionId: 'individual-person-full-name', position: 1 },
+  'name.preferredName': { sectionId: 'individual-person-preferred-name', position: 2 },
+  controlOfShares: { sectionId: 'control-of-shares', position: 3 },
+  controlOfVotes: { sectionId: 'control-of-votes', position: 4 },
+  controlOfDirectors: { sectionId: 'control-of-directors', position: 5 },
+  controlOther: { sectionId: 'control-other', position: 6 },
+  effectiveDates: { sectionId: 'effective-dates', position: 7 },
+  email: { sectionId: 'individual-person-email', position: 8 },
+  address: { sectionId: 'address', position: 9 },
+  mailingAddress: { sectionId: 'mailing-address', position: 10 },
+  // reserve position 11 for the phone number section
+  birthDate: { sectionId: 'birth-date', position: 12 },
+  citizenships: { sectionId: 'citizenships', position: 13 },
+  tax: { sectionId: 'tax-details', position: 14 },
+  isTaxResident: { sectionId: 'tax-residency', position: 15 },
+  missingInfoReason: { sectionId: 'missing-info', position: 16 }
+} as Record<string, { sectionId: string, position: number }>