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.')
}