Merge pull request #1395 from bcgov/feature/EDX-2215

SCH - Add Hover Tooltip to Warning Icons Step 3
bcgov · Feb 26, 2024 · f160623 · f160623
2 parents 12c5dc8 + e1b571f
commit f160623
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/frontend/src/components/common/CustomTable.vue b/frontend/src/components/common/CustomTable.vue
@@ -25,12 +25,12 @@
             :key="column.key"
           >
             <div v-if="column.title === 'select'">
-                <v-checkbox
-                  v-model="masterCheckbox"
-                  :indeterminate="selected.length > 0 && !isAllSelected()"
-                  hide-details="true"
-                  @change="toggle()"
-                />
+              <v-checkbox
+                v-model="masterCheckbox"
+                :indeterminate="selected.length > 0 && !isAllSelected()"
+                hide-details="true"
+                @change="toggle()"
+              />
             </div>
             <div v-else>
               <div class="header-text">
@@ -62,13 +62,21 @@
               hide-details="true"
               @click.prevent.stop="onClick(props)"
             />
-            <v-icon
+            <v-tooltip
               v-else-if="column.key === 'sdcSchoolCollectionStudentStatusCode'"
-              size="25"
-              :color="getSdcStudentStatusIconColor(props.item.raw['sdcSchoolCollectionStudentStatusCode'])"
+              :style="{ display: getSdcStudentStatusHoverText(props.item.raw['sdcSchoolCollectionStudentStatusCode']) ? '' : 'none' }"
             >
-              {{ getSdcStudentIssueIcon(props.item.raw['sdcSchoolCollectionStudentStatusCode']) }}
-            </v-icon>
+              <template #activator="{ props: tooltipProps }">
+                <v-icon
+                  v-bind="tooltipProps"
+                  size="25"
+                  :color="getSdcStudentStatusIconColor(props.item.raw['sdcSchoolCollectionStudentStatusCode'])"
+                >
+                  {{ getSdcStudentIssueIcon(props.item.raw['sdcSchoolCollectionStudentStatusCode']) }}
+                </v-icon>
+              </template>
+              {{ getSdcStudentStatusHoverText(props.item.raw['sdcSchoolCollectionStudentStatusCode']) }}
+            </v-tooltip>
             <div v-else>
               <span v-if="column.key === 'legalName'">
                 {{ displayName(props.item.raw['legalFirstName'], props.item.raw['legalMiddleNames'], props.item.raw['legalLastName']) }}
@@ -235,6 +243,13 @@ export default {
         return 'mdi-alert-circle-outline';
       }
     },
+    getSdcStudentStatusHoverText(status) {
+      if (status === 'FUNDWARN') {
+        return 'Funding Warning';
+      } else if (status === 'INFOWARN') {
+        return 'Info Warning';
+      }
+    },
     displayName(first, middle, last) {
       let name = '';
       if (last) {

diff --git a/frontend/src/components/sdcCollection/stepThreeVerifyData/DetailComponent.vue b/frontend/src/components/sdcCollection/stepThreeVerifyData/DetailComponent.vue
@@ -24,7 +24,6 @@
               class="d-flex justify-start filter-col"
               cols="6"
             >
-
               <span v-if="filterSearchParams.moreFilters.length > 0">
                 <v-chip-group>
                   <span