feat: move extra errors to the error component

bcgov · Sep 13, 2023 · 6754aad · 6754aad
1 parent 48c1646
commit 6754aad
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 40 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -89,6 +89,9 @@ cds-actionable-notification::part(div), cds-actionable-notification, .cds--actio
 
 .top-notification {
   margin-top: 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
 * {

diff --git a/frontend/src/components/grouping/ErrorNotificationGroupingComponent.vue b/frontend/src/components/grouping/ErrorNotificationGroupingComponent.vue
@@ -1,12 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 // Carbon
 import '@carbon/web-components/es/components/notification/index';
 // Composables
 import { useEventBus } from "@vueuse/core";
 // Types
 import type { ValidationMessageType, ProgressNotification } from '@/dto/CommonTypesDto'
 
+const props = defineProps<{
+  extraErrors: Record<string, ValidationMessageType>
+}>()
+
+const aggregatedExtraErrors = computed<Record<string, string | string[]>>(() => {
+  console.log('extra', props.extraErrors)
+  const value = Object.keys(props.extraErrors).reduce<Record<string, string | string[]>>((aggregated, fieldId) => {
+    const genericKey = fieldId.replace(/\[\d+\]/, '.*')
+    const error = props.extraErrors[fieldId]
+    if(error.errorMsg){
+      if (genericKey !== fieldId) {
+        if (!aggregated[genericKey]) {
+          aggregated[genericKey] = []
+        }
+        (aggregated[genericKey] as string[]).push(error.originalValue as string)
+      } else {
+        aggregated[genericKey] = error.originalValue as string
+      }
+    }
+    return aggregated
+  }, {})
+  console.log(value)
+  return value
+})
+
 // Define the bus to receive the global error messages and one to send the progress indicator messages
 const notificationBus = useEventBus<ValidationMessageType|undefined>("error-notification");
 const progressIndicatorBus = useEventBus<ProgressNotification>('progress-indicator-bus')
@@ -60,7 +85,7 @@ const goToStep = (step: number) => {
 
 </script>
 <template>
-  <div class="top-notification" v-if="globalErrorMessage?.fieldId">
+  <div class="top-notification" v-if="globalErrorMessage?.fieldId || Object.values(aggregatedExtraErrors).length > 0">
 
     <cds-inline-notification
         v-if="globalErrorMessage?.fieldId === 'missing.info'"
@@ -115,15 +140,18 @@ const goToStep = (step: number) => {
   </cds-actionable-notification>
 
   <cds-inline-notification
-    v-if="globalErrorMessage?.fieldId === 'missing.address.assigned'"
+    v-for="item in aggregatedExtraErrors['location.addresses.*.locationName']"
+    :key="item"
     v-shadow="true"
     low-contrast="true"
     hide-close-button="true"
     open="true"
     kind="error"
-    title="Address without a contact:"
-  >    
-    <div>Looks like "{{ globalErrorMessage.errorMsg }}" doesn’t have a contact. You must associate it with an existing contact or add a new contact before submitting the application again.</div>    
+  >
+    <p class="body-compact-01">
+      <span class="heading-compact-01 heading-compact-01-dark">Assigned contact required:</span>
+      You must associate <span class="heading-compact-01 heading-compact-01-dark">“{{ item }}”</span> address with an existing contact or <a href="#">add a new contact</a> before submitting the application again.
+    </p>
   </cds-inline-notification>
   </div>
 </template>
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -71,26 +71,7 @@ let formData = reactive<FormDataDto>({
   },
 });
 
-const addressFieldStart = 'location.addresses['
-const addressFieldEnd = '].locationName'
-
-const ADDRESS_LOCATION_NAME_KEY = addressFieldStart + addressFieldEnd
-
 const rawExtraErrors = reactive<Record<string, ValidationMessageType>>({})
-const extraErrors = reactive<Record<string, any>>({
-  [ADDRESS_LOCATION_NAME_KEY]: []
-})
-
-watch(rawExtraErrors, () => {
-  const addressNameErrors: ValidationMessageType[] = []
-  for (const fieldId in rawExtraErrors) {
-    const message = rawExtraErrors[fieldId].errorMsg;
-    if(message && fieldId.startsWith(addressFieldStart) && fieldId.endsWith(addressFieldEnd)){
-      addressNameErrors.push(rawExtraErrors[fieldId])
-    }
-  }
-  extraErrors[ADDRESS_LOCATION_NAME_KEY] = addressNameErrors
-})
 
 const locations = computed(() =>
   formData.location.addresses.map((address: any) => address.locationName)
@@ -337,21 +318,9 @@ const reEval = () => (revalidateBus.emit())
           <span class="cds--progress-label">{{ item.title }}</span>
         </cds-progress-step>
       </cds-progress-indicator>      
-    <error-notification-grouping-component />
-    <cds-inline-notification
-      v-for="item in (extraErrors[ADDRESS_LOCATION_NAME_KEY] as ValidationMessageType[])"
-      :key="item"
-      v-shadow="true"
-      low-contrast="true"
-      hide-close-button="true"
-      open="true"
-      kind="error"
-    >
-      <p class="body-compact-01">
-        <span class="heading-compact-01 heading-compact-01-dark">Assigned contact required:</span>
-        You must associate <span class="heading-compact-01 heading-compact-01-dark">“{{ item.originalValue }}”</span> address with an existing contact or <a href="#">add a new contact</a> before submitting the application again.
-      </p>
-    </cds-inline-notification>
+      <error-notification-grouping-component
+        :extra-errors="rawExtraErrors"
+      />
   </div>
 
   <div class="form-steps">