#38 edit tooltip appearance to be triggered by (detail) instead of in…

…fo circle
CityOfDetroit · Jul 23, 2024 · f151ba4 · f151ba4
1 parent 7c47d5f
commit f151ba4
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 21 deletions.
diff --git a/src/js/components/table/subcomponents/cells.js b/src/js/components/table/subcomponents/cells.js
@@ -15,7 +15,7 @@ function getCellText(row, className) {
     if (cell) {
         return cell.textContent;
     } else {
-        console.log(`Error retrieving cell text for class ${className}`);
+        //console.log(`Error retrieving cell text for class ${className}`);
         return '';
     }
 }

diff --git a/src/js/components/tooltip/tooltip.css b/src/js/components/tooltip/tooltip.css
@@ -8,6 +8,9 @@
     white-space: nowrap;
     font-size: 14px;
     z-index: 1000;
+    max-width: 300px;
+    word-wrap: break-word;
+    white-space: normal;
 }
 
 .tooltip-cell {
@@ -24,4 +27,11 @@
 
 .tooltip-cell:hover {
     background-color: #f0f0f0; /* Change background on hover */
+}
+
+.detail {
+    color: blue;
+    color: var(--spiritgreen);
+    text-decoration: underline;
+    margin-left: 5px;
 }
diff --git a/src/js/components/tooltip/tooltip.js b/src/js/components/tooltip/tooltip.js
@@ -14,19 +14,20 @@ function showTooltip() {
 function editTooltipText(newText){
     // edit text to display inside tooltip
     const tooltip = document.getElementById('tooltip');
-    tooltip.innerText = newText;
+    tooltip.innerHTML = newText;
 }
 
-function showAccountString(event){
-    const row = event.target.parentElement;
+function showAccountString(row){
     const approp = Cell.getText(row, 'approp-name');
     const cc =  Cell.getText(row, 'cc-name');
-    editTooltipText(`Appropriation: ${approp}
-                    Cost Center: ${cc}`)
+    const obj =  Cell.getText(row, 'object-name');
+    var message = `<strong>Appropriation</strong>: ${approp}<br>
+                    <strong>Cost Center</strong>: ${cc}`;
+    if (obj) { message += `<br><strong>Object</strong>: ${obj}`}
+    editTooltipText(message);
 }
 
-function showSalaryProjection(event){
-    const row = event.target.parentElement;
+function showSalaryProjection(row){
     const general_increase = Cell.getText(row, 'general-increase-rate');
     const merit_increase =  Cell.getText(row, 'merit-increase-rate');
     const current_salary = Cell.getValue(row, 'current-salary');
@@ -48,8 +49,7 @@ function showSalaryProjection(event){
     editTooltipText(message);
 }
 
-function showFinalPersonnelCost(event){
-    const row = event.target.parentElement;
+function showFinalPersonnelCost(row){
     const proj_salary = Cell.getValue(row, 'avg-salary');
     const ftes = Cell.getText(row, 'baseline-ftes');
     const fringe = parseFloat(Cell.getText(row, 'fringe'));
@@ -61,15 +61,33 @@ function showFinalPersonnelCost(event){
     editTooltipText(message);
 }
 
-function showFICA(event){
-    const row = event.target.parentElement;
+function showFICA(row){
     const fica = parseFloat(Cell.getText(row, 'fica'));
     const ficaPercentage = (fica * 100).toFixed(2);
     const message = `This total is overtime wages plus overtime salary plus FICA, 
                      which is ${ficaPercentage}% for this cost center.`
     editTooltipText(message);
 }
 
+function showCPA(row){
+    const cpa = parseFloat(Cell.getText(row, 'cpa'));
+    const description = Cell.getText(row, 'cpa-description');
+    const vendor = Cell.getText(row, 'vendor');
+    const contract_end = Cell.getText(row, 'contract-end');
+    const remaining = Cell.getValue(row, 'remaining');
+    if (cpa) {
+        var message = `<strong>CPA #${cpa}</strong>`;
+    } else {
+        var message = `No CPA`;
+    }
+    if (vendor) {message += `<br><strong>Vendor</strong>: ${vendor}`};
+    if (description) {message += `<br><strong>Description</strong>: ${description}`};
+    if (contract_end) {message += `<br><strong>Contract End Date</strong>: ${contract_end}`}
+    if (remaining) {message += `<br><strong>Amount Remaining on Contract</strong>: ${formatCurrency(remaining)}`}
+
+    editTooltipText(message);
+}
+
 export const Tooltip = {
 
     hide : hideTooltip,
@@ -81,13 +99,20 @@ export const Tooltip = {
         element.classList.add('tooltip-cell');
 
         // Create and append the Font Awesome info icon
-        const infoIcon = document.createElement('i');
-        infoIcon.classList.add('fas', 'fa-info-circle', 'info-icon');
-        element.appendChild(infoIcon);
+        // const infoIcon = document.createElement('i');
+        // infoIcon.classList.add('fas', 'fa-info-circle', 'info-icon');
+        // element.appendChild(infoIcon);
+
+        // Create and append (detail)
+        const detail = document.createElement('span');
+        detail.classList.add('detail');
+        detail.textContent = '(detail)';
+        element.appendChild(detail);
 
         // add event listener to show tooltip on mouseover
         element.addEventListener('click', function (event) {
-            displayFn(event);
+            const row = event.target.closest('tr');
+            displayFn(row);
             showTooltip();
         });
         // and hide when mouse moves off
@@ -123,13 +148,20 @@ export const Tooltip = {
         })
     },
 
-    linkTotalNPCol : function() {
+    linkTotalOTCol : function() {
         // get all relevant cells
         document.querySelectorAll('.total').forEach( (cell) => {
             this.link(cell, showFICA);
         })
     },
 
+    linkCPACol : function() {
+        // get all relevant cells
+        document.querySelectorAll('.cpa').forEach( (cell) => {
+            this.link(cell, showCPA);
+        })
+    },
+
     linkAllPersonnel : function() {
         this.linkAccountStringCol();
         this.linkSalaryCol();
@@ -138,7 +170,12 @@ export const Tooltip = {
 
     linkAllOvertime : function() {
         // this.linkAccountStringCol();
-        this.linkTotalNPCol();
+        this.linkTotalOTCol();
+    },
+
+    linkAllNP : function() {
+        this.linkAccountStringCol();
+        this.linkCPACol();
     }
 }
 

diff --git a/src/js/views/06_nonpersonnel/helpers.js b/src/js/views/06_nonpersonnel/helpers.js
@@ -4,6 +4,7 @@ import Table from "../../components/table/table.js";
 import Body from "../../components/body/body.js";
 import NavButtons from "../../components/nav_buttons/nav_buttons.js";
 import Subtitle from "../../components/header/header.js";
+import Tooltip from "../../components/tooltip/tooltip.js";
 
 const nonPersonnelColumns = [
     { title: 'FY26 Request', className: 'request', isCost: true },
@@ -13,13 +14,16 @@ const nonPersonnelColumns = [
     { title: 'Recurring or One-Time', className: 'recurring'},
 
     { title : 'CPA #', className : 'cpa'},
-    { title : 'Contract End Date', className : 'contract-end', hide:true},
-    { title: 'Amount Remaining on Contract', className: 'remaining', isCost: true , hide: true},
 
     // hidden columns used for calcs and info boxes
+    { title: 'Appropriation Name', className: 'approp-name', hide: true },
+    { title: 'Cost Center Name', className: 'cc-name',  hide: true },
+    { title : 'Contract End Date', className : 'contract-end', hide:true},
+    { title: 'Amount Remaining on Contract', className: 'remaining', isCost: true , hide: true},
     { title: 'Object Name', className: 'object-name', hide: true},
     { title: 'Vendor Name', className: 'vendor', hide: true},
-    { title: 'Object Category', className: 'object-category', hide: true}  
+    { title: 'Object Category', className: 'object-category', hide: true},
+    { title: 'BPA/CPA Description', className: 'cpa-description', hide: true}  
 ];
 
 export function preparePageView(){
@@ -44,6 +48,8 @@ export async function initializeNonpersonnelTable(){
         Table.Columns.assignClasses(nonPersonnelColumns);
         // enable editing
         Table.Buttons.Edit.init(nonPersonnelRowOnEdit, Table.save);
+        // show info boxes on click
+        Tooltip.linkAllNP();
     } else {
         Prompt.Text.update('No non-personnel expenditures for this fund.')
     }