From f151ba403bec337c4cfde44f3028c2baa5a651c9 Mon Sep 17 00:00:00 2001 From: Katrina Wheelan Date: Tue, 23 Jul 2024 15:08:05 -0400 Subject: [PATCH] #38 edit tooltip appearance to be triggered by (detail) instead of info circle --- .../components/table/subcomponents/cells.js | 2 +- src/js/components/tooltip/tooltip.css | 10 +++ src/js/components/tooltip/tooltip.js | 71 ++++++++++++++----- src/js/views/06_nonpersonnel/helpers.js | 12 +++- 4 files changed, 74 insertions(+), 21 deletions(-) diff --git a/src/js/components/table/subcomponents/cells.js b/src/js/components/table/subcomponents/cells.js index fd388c1..50697b1 100644 --- 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 index 9bfa3cb..78a4ad8 100644 --- 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; } \ No newline at end of file diff --git a/src/js/components/tooltip/tooltip.js b/src/js/components/tooltip/tooltip.js index 25cc457..8901107 100644 --- 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 = `Appropriation: ${approp}
+ Cost Center: ${cc}`; + if (obj) { message += `
Object: ${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,8 +61,7 @@ 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, @@ -70,6 +69,25 @@ function showFICA(event){ 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 = `CPA #${cpa}`; + } else { + var message = `No CPA`; + } + if (vendor) {message += `
Vendor: ${vendor}`}; + if (description) {message += `
Description: ${description}`}; + if (contract_end) {message += `
Contract End Date: ${contract_end}`} + if (remaining) {message += `
Amount Remaining on Contract: ${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 index cf2da78..e021b60 100644 --- 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.') }