diff --git a/src/index.html b/src/index.html index ab3c598..a661c2d 100644 --- a/src/index.html +++ b/src/index.html @@ -50,24 +50,10 @@

-
- -
@@ -86,19 +72,36 @@

+ +
+
+ +
+
+

Baseline - +

Suplemental - +

@@ -107,20 +110,6 @@

- -
-
- -
-
- @@ -131,6 +120,9 @@


+
Baseline
diff --git a/src/js/components/accordion/accordion.css b/src/js/components/accordion/accordion.css index 55c8e99..95b4ae4 100644 --- a/src/js/components/accordion/accordion.css +++ b/src/js/components/accordion/accordion.css @@ -1,10 +1,10 @@ .summary-accordion { - width: 60%; + width: 70%; margin: auto; } .accordion-title { - margin-left: 20%; + margin-left: 15%; font-weight: bold; /* font-size: 20px; */ padding-bottom: 10px; @@ -79,5 +79,5 @@ span.top-line-amount { font-weight: bold; position: absolute; right: 0; - margin-right: calc(20vw + 20px); + margin-right: calc(15vw + 20px); } \ No newline at end of file diff --git a/src/js/components/accordion/accordion.js b/src/js/components/accordion/accordion.js index f54b5bc..c36fd14 100644 --- a/src/js/components/accordion/accordion.js +++ b/src/js/components/accordion/accordion.js @@ -5,8 +5,10 @@ import {Baseline, CurrentFund, Fund, Supplemental, FundLookupTable} from '../../ import { formatCurrency, cleanString } from "../../utils/common_utils.js"; import Table from "../table/table.js"; import { visitPage } from '../../views/view_logic.js'; +import { Appropriation, CostCenter } from '../../models/fund.js'; function redirectForEdit(){ + // action taken when user clicks on any of the edit buttons in the accordion const row = document.querySelector(`.active-editing`); const table = row.parentElement; const section = table.closest('.summary-container'); @@ -17,10 +19,16 @@ function redirectForEdit(){ else { // Split the string into parts using '-' as the delimiter; retain fund as 1st numeric segment const fund = table.id.split('-')[1] - + // record the fund CurrentFund.update(fund); - const lineItem = row.querySelector('.line-item').textContent; + // record the appropriation and cost center + let approp = new Appropriation(fund, table.id.split('-')[2]); + let cc = new CostCenter(fund, table.id.split('-')[2], table.id.split('-')[3]); + localStorage.setItem('filter-approp-name', approp.name()); + localStorage.setItem('filter-cc-name', cc.getName()); + // visit the correct page for editing + const lineItem = row.querySelector('.line-item').textContent; switch(lineItem){ case 'Personnel Expenditures': visitPage('personnel'); @@ -66,8 +74,8 @@ const ExpenseTable = { this.createNewCell(formatCurrency(number), new_row, 'cost'); // create Edit button var button = ''; - if (row_name != 'Net Expenditures (Revenues)'){ - button = Table.Buttons.Edit.html; + if (row_name != 'Total Expenditures'){ + button = Table.Buttons.Edit.html(`Edit in table`); } this.createNewCell(button, new_row); }, @@ -108,7 +116,7 @@ const ExpenseTable = { this.addRow(ccObj.accountString(), 'Overtime Expenditures', ccObj.getOvertimeCost()); this.addRow(ccObj.accountString(), 'Non-Personnel Expenditures', ccObj.getNonPersonnelCost()); this.addRow(ccObj.accountString(), 'Revenues', ccObj.getRevenue()); - this.addRow(ccObj.accountString(), 'Net Expenditures (Revenues)', ccObj.getTotal()); + this.addRow(ccObj.accountString(), 'Total Expenditures', ccObj.getTotal()); }, fillFromInit(program) { // Fill out info for each supplemental init @@ -204,25 +212,12 @@ export const Accordion = { Item.updateHeader(program.name, program.id(), program.total()); }); }, - updateTopLines() { - // adjuse baseline - // const baseline = new Baseline; - const baseline = new Baseline; - const baselineAmount = document.querySelector('#baseline-title .top-line-amount') - baselineAmount.textContent = formatCurrency(baseline.total()); - // adjust supplementals - const supp = new Supplemental; - const suppAmount = document.querySelector('#supp-title .top-line-amount') - suppAmount.textContent = formatCurrency(supp.total()); - - }, build() { this.createBaseline(); this.createSupp(); // initialize edit buttons Table.Buttons.Edit.init(redirectForEdit); this.AddInitButton.init(); - this.updateTopLines(); } } diff --git a/src/js/components/body/body.js b/src/js/components/body/body.js index baea720..ba0f520 100644 --- a/src/js/components/body/body.js +++ b/src/js/components/body/body.js @@ -16,6 +16,7 @@ function resetPage() { Modal.clear(); Modal.hide(); NavButtons.hide(); + NavButtons.ReturnToSummary.hide(); Prompt.hide(); Table.hide(); Sidebar.hide(); diff --git a/src/js/components/modal/modal.css b/src/js/components/modal/modal.css index e69de29..b3b34c1 100644 --- a/src/js/components/modal/modal.css +++ b/src/js/components/modal/modal.css @@ -0,0 +1,6 @@ +#job-name { + margin-left: 5%; + width: 95%; + border: 0px; + font-weight: bold; +} \ No newline at end of file diff --git a/src/js/components/nav_buttons/nav_buttons.css b/src/js/components/nav_buttons/nav_buttons.css index 43e7771..84450d0 100644 --- a/src/js/components/nav_buttons/nav_buttons.css +++ b/src/js/components/nav_buttons/nav_buttons.css @@ -7,11 +7,11 @@ /* top: 100px; Distance from the top of the viewport or the closest positioned ancestor */ } -#btn-next, #btn-last { +#btn-next, #btn-last, #return-to-summary { background-color: var(--darkGray); } -#btn-next:hover, #btn-last:hover { +#btn-next:hover, #btn-last:hover, #return-to-summary:hover { background-color: var(--yellow); color: var(--darkGray); } diff --git a/src/js/components/nav_buttons/nav_buttons.js b/src/js/components/nav_buttons/nav_buttons.js index 0d38c75..b3d657c 100644 --- a/src/js/components/nav_buttons/nav_buttons.js +++ b/src/js/components/nav_buttons/nav_buttons.js @@ -1,6 +1,6 @@ // nav_buttons.js import './nav_buttons.css'; -import { nextPage, lastPage } from '../../views/view_logic.js'; +import { nextPage, lastPage, visitPage, lastPageLabel, nextPageLabel } from '../../views/view_logic.js'; function initializeNavButtons() { // initialize last button @@ -32,23 +32,57 @@ const Next = { removeAction: function(fn) { document.querySelector(`#btn-next`).removeEventListener('click', fn); }, + hide() { + document.querySelector(`#btn-next`).style.display = 'none'; + }, + show() { + const btn = document.querySelector(`#btn-next`); + btn.textContent = `Continue to ${nextPageLabel()} >>`; + btn.style.display = ''; + } }; const Last = { disable: function() { disable('btn-last'); }, enable: function() { enable('btn-last'); }, + hide() { + document.querySelector(`#btn-last`).style.display = 'none'; + }, + show() { + const btn = document.querySelector(`#btn-last`); + btn.textContent = `<< Return to ${lastPageLabel()}`; + btn.style.display = ''; + } +}; + +function visitSummaryPage() { visitPage('summary') } + +const ReturnToSummary = { + show: function() { + const btn = document.getElementById('return-to-summary') + btn.style.display = ''; + btn.addEventListener('click', visitSummaryPage); + }, + hide: function() { + const btn = document.getElementById('return-to-summary') + btn.style.display = 'none'; + btn.removeEventListener('click', visitSummaryPage); + } }; export const NavButtons = { hide: function() { - document.getElementById('nav-btns').style.display = 'none'; + Next.hide(); + Last.hide(); }, show: function() { - document.getElementById('nav-btns').style.display = 'block'; + Next.show(); + Last.show();; initializeNavButtons(); }, Next: Next, Last: Last, + ReturnToSummary: ReturnToSummary }; export default NavButtons; \ No newline at end of file diff --git a/src/js/components/sidebar/sidebar.css b/src/js/components/sidebar/sidebar.css index a839895..fbea4a9 100644 --- a/src/js/components/sidebar/sidebar.css +++ b/src/js/components/sidebar/sidebar.css @@ -62,6 +62,8 @@ h6 { justify-content: space-between; /* Distribute space between children */ padding: 2px; border-bottom: 1px solid #ddd; + /* Ensures fade when indicating a change */ + transition: background-color 0.5s ease; } .edit-icon, .edit-supp { @@ -85,4 +87,43 @@ h6 { .sidebar-stat-line.fund-total .stat { margin-right: 05px; /* 25px lines up with lines above (with edit symbol) */ +} + +#summary-btn-sidebar{ + margin-bottom: 10px; + text-align: center; + margin-left: 10%; + width: 80%; + background-color: var(--mediumGray); + color: black; + /* border: 1px black; */ + border-radius: 5px; + border-width: 1px; + border-color: black; +} + +#summary-btn-sidebar:hover{ + background-color: var(--darkGray); + color: white; +} + +.arrow { + position: absolute; + width: 10px; + height: 10px; + background: var(--spiritgreen); /* Or any color you want */ + left: 5px; /* Adjust for desired position */ + margin-top: -5px; + transition: top 0.3s ease; /* Smooth transition */ +} + +/* Optional: Add arrow tip styling */ +.arrow::after { + content: ''; + position: absolute; + top: 0; + right: -10px; /* Adjust as needed */ + border-width: 5px; + border-style: solid; + border-color: transparent transparent transparent var(--spiritgreen); } \ No newline at end of file diff --git a/src/js/components/sidebar/sidebar.js b/src/js/components/sidebar/sidebar.js index 7cbfa9f..977d9e3 100644 --- a/src/js/components/sidebar/sidebar.js +++ b/src/js/components/sidebar/sidebar.js @@ -1,5 +1,7 @@ +import { visitPage } from '../../views/view_logic'; import './sidebar.css' import { BaselineSection } from './subcomponents/baseline_section'; +import { Arrow } from './subcomponents/arrow'; import SuppSection from './subcomponents/supp_section' @@ -11,6 +13,12 @@ function hideSidebar() { document.getElementById('sidebar-panel').style.display = 'none'; document.getElementById('main-panel').style.width = '100%'; document.querySelector('header').style.width = '100%' + + // remove event listeners + const btn = document.getElementById('summary-btn-sidebar'); + btn.removeEventListener('click', visitSummary); + // add event listener to resize content if window is adjusted + window.removeEventListener('resize', showSidebar); } function showSidebar() { @@ -27,6 +35,9 @@ function showSidebar() { mainPanel.style.width = `${contentWidth - parseInt(sideBarWidth, 10)}px`; header.style.width = `${contentWidth - parseInt(sideBarWidth, 10)}px`; + // enable summary button + const btn = document.getElementById('summary-btn-sidebar'); + btn.addEventListener('click', visitSummary); // add event listener to resize content if window is adjusted window.addEventListener('resize', showSidebar); } @@ -36,8 +47,20 @@ function updateSidebarTitle(new_title){ } function updateTotals(){ + // get current value + let value; + if (Arrow.currentLine()) { + value = Arrow.currentLine().querySelector(`.stat`).textContent; + }; + // update values in sidebar SuppSection.update(); BaselineSection.update(); + // mark current page with green arrow + Arrow.mark(); + //if value changed, highlight it + if (value != Arrow.currentLine().querySelector(`.stat`).textContent){ + indicateChange(); + } } function resetAll(){ @@ -46,14 +69,34 @@ function resetAll(){ updateTotals(); } +function visitSummary() { visitPage('summary') } + +function indicateChange() { + // get the right color from the root() defined in common.css + const rootStyle = getComputedStyle(document.documentElement); + const palegreen = rootStyle.getPropertyValue('--palegreen').trim(); + // identify changed rows = current page and total + let changedRow = Arrow.currentLine(); + let totalRow = Arrow.currentLine().parentElement.querySelector('.fund-total'); + // make any edited rows green + changedRow.style.backgroundColor = palegreen; + if(totalRow) { totalRow.style.backgroundColor = palegreen }; + // Fade back to default after 0.75 seconds + setTimeout(() => { + changedRow.style.backgroundColor = ''; + if(totalRow) { totalRow.style.backgroundColor = '' }; + }, 750); +} + const Sidebar = { SuppSection : SuppSection, BaselineSection : BaselineSection, + Arrow : Arrow, hide: hideSidebar, show: showSidebar, updateTitle: updateSidebarTitle, updateTotals: updateTotals, - reset: resetAll + reset: resetAll, }; export default Sidebar; \ No newline at end of file diff --git a/src/js/components/sidebar/subcomponents/arrow.js b/src/js/components/sidebar/subcomponents/arrow.js new file mode 100644 index 0000000..53ad04f --- /dev/null +++ b/src/js/components/sidebar/subcomponents/arrow.js @@ -0,0 +1,22 @@ +import { CurrentFund, CurrentPage } from "../../../models" + +export const Arrow = { + html : ``, + currentLine() { + let page = CurrentPage.load(); + let line; + if (page == 'new-inits'){ + line = document.querySelector('#supp-expenses'); + } else { + let fund = CurrentFund.number(); + line = document.querySelector(`#fund_${fund} .sidebar-stat-line.${page}`); + }; + return line; + }, + mark() { + let line = this.currentLine(); + const arrow = document.createElement('div'); + arrow.innerHTML = this.html; + line.appendChild(arrow); + } +} \ No newline at end of file diff --git a/src/js/components/sidebar/subcomponents/baseline_section.js b/src/js/components/sidebar/subcomponents/baseline_section.js index 8e54181..b4875b7 100644 --- a/src/js/components/sidebar/subcomponents/baseline_section.js +++ b/src/js/components/sidebar/subcomponents/baseline_section.js @@ -45,22 +45,22 @@ export const BaselineSection = {
Projected revenues: ${formatCurrency(fund.getRevenue())} - +
Personnel cost: ${formatCurrency(fund.getPersonnelCost())} - +
Overtime cost: ${formatCurrency(fund.getOvertimeCost())} - +
Non-personnel cost: ${formatCurrency(fund.getNonPersonnelCost())} - +
Total expenditures: diff --git a/src/js/components/sidebar/subcomponents/supp_section.js b/src/js/components/sidebar/subcomponents/supp_section.js index 8f7c6b5..1e8c2eb 100644 --- a/src/js/components/sidebar/subcomponents/supp_section.js +++ b/src/js/components/sidebar/subcomponents/supp_section.js @@ -6,30 +6,10 @@ export const SuppSection = { html() { var supp = new Supplemental; return ` - - - - ` }, diff --git a/src/js/components/table/subcomponents/buttons.js b/src/js/components/table/subcomponents/buttons.js index 3102f2f..22fd2b4 100644 --- a/src/js/components/table/subcomponents/buttons.js +++ b/src/js/components/table/subcomponents/buttons.js @@ -48,9 +48,14 @@ function initializeConfirmButton(updateCallback){ // get element and add listener for click var rowToEdit = document.querySelector('.active-editing'); const confirm_btn = rowToEdit.querySelector(".btn-confirm"); + + // Remove existing click event listener to prevent multiple-event additions + confirm_btn.replaceWith(confirm_btn.cloneNode(true)); + const new_confirm_btn = rowToEdit.querySelector(".btn-confirm"); + // show the row's confirm button - confirm_btn.style.display = 'block'; - confirm_btn.addEventListener('click', function(){; + new_confirm_btn.style.display = 'block'; + new_confirm_btn.addEventListener('click', function(){; // save row edits Rows.saveEdits(rowToEdit); // update values in sidebar @@ -64,7 +69,7 @@ function initializeConfirmButton(updateCallback){ } const Edit = { - html: '', + html(text = 'Edit row'){ return ``}, hide: hideButton('btn-edit'), show: showButton('btn-edit'), init : function(actionOnClick, updateCallback){ @@ -72,14 +77,8 @@ const Edit = { } }; -const Delete = { - html: '', - hide: hideButton('btn-delete'), - show: showButton('btn-delete') -}; - const Confirm = { - html: '', + html() {return ``}, hide: hideButton('btn-confirm'), show: showButton('btn-confirm') }; @@ -93,12 +92,10 @@ const AddRow = { }; export const Buttons = { - Delete: Delete, Edit : Edit, Confirm : Confirm, AddRow : AddRow, - edit_confirm_btns : Edit.html + Confirm.html , - all_btns : Delete.html + Edit.html + Confirm.html + edit_confirm_btns : Edit.html() + Confirm.html() , } export default Buttons; \ No newline at end of file diff --git a/src/js/components/table/subcomponents/filters.js b/src/js/components/table/subcomponents/filters.js index 4252feb..1302903 100644 --- a/src/js/components/table/subcomponents/filters.js +++ b/src/js/components/table/subcomponents/filters.js @@ -1,13 +1,5 @@ // Helper functions & constants -// object to hold all current filter statuses -const filterSettings = { - 'approp-name': '', - 'cc-name': '', - 'object-name': '', - 'object-category': '' -}; - // helper function to filter data based on all filters function filterData() { // Get all rows in the table @@ -17,16 +9,17 @@ function filterData() { rows.forEach(row => { let isVisible = true; - // Check each filter setting against the row's cells - for (const [filterId, filterValue] of Object.entries(filterSettings)) { - const cell = row.querySelector(`.${filterId}`); - + const filters = document.querySelectorAll('.filter-dropdown'); + filters.forEach(filter => { + // Check each filter setting against the row's cells + let filterID = filter.id.replace('filter-', ''); + const cell = row.querySelector(`.${filterID}`); + // only show row if values pass through all filters - if (filterValue && cell && (cell.textContent.trim() !== filterValue)) { + if (filter.value && cell && (cell.textContent.trim() !== filter.value)) { isVisible = false; - break; - } - } + } + }); // Show or hide the row based on visibility row.classList.toggle('hidden', !isVisible); @@ -61,8 +54,8 @@ const Filter = { this.addAllOptions(filterClass); // Bind change event to the select element filterDiv.querySelector('.filter-dropdown').addEventListener('change', event => { - // Update filter settings - filterSettings[filterClass] = event.target.value; + // save filter value + this.saveFilterValues(); // Apply all filters filterData(); }); @@ -98,6 +91,57 @@ const Filter = { // Add new options this.addAllOptions(filterClass); } + // update selection to match saved values + this.setFiltersFromStorage(); + }, + + resetFilter(filterClass) { + const filterObj = document.querySelector(`#filter-${filterClass}`); + if (filterObj) { + // Set filter to 'All' option + filterObj.value = "All"; + } + }, + + resetAllFilters() { + const filters = document.querySelectorAll('.filter-dropdown'); + filters.forEach((filter) => { + filter.value = ''; + localStorage.setItem(filter.id, ''); + }); + }, + + resetAfterNewRow(responses) { + const filters = document.querySelectorAll('.filter-dropdown'); + filters.forEach((filter) => { + // Get the filter class to tell us what's in the filter + let filterID = filter.id.replace('filter-', ''); + // If the value from the new poistion doesn't match the filter value, + // reset it so that the new position will show up + if (filter.value != responses[filterID]){ + this.resetFilter(filterID); + } + }); + }, + + saveFilterValues(){ + const filters = document.querySelectorAll('.filter-dropdown'); + filters.forEach((filter) => { + localStorage.setItem(filter.id, filter.value); + }); + }, + + setFiltersFromStorage(){ + const filters = document.querySelectorAll('.filter-dropdown'); + filters.forEach((filter) => { + // get the stored value for the filter and apply it + let storedValue = localStorage.getItem(filter.id); + // if the filter has never been used, default to "All" + if (!storedValue) { storedValue = '' }; + filter.value = storedValue; + }); + // actually filter data based on selections + filterData(); } } diff --git a/src/js/components/table/subcomponents/rows.js b/src/js/components/table/subcomponents/rows.js index d89031a..d92cbdd 100644 --- a/src/js/components/table/subcomponents/rows.js +++ b/src/js/components/table/subcomponents/rows.js @@ -1,10 +1,17 @@ import Header from "./headers.js"; import { formatCurrency } from "../../../utils/common_utils.js"; +import Table from "../table.js"; async function addNewRow(data_dictionary, columns = []){ // Get the table element by its ID - const table = document.getElementById('main-table'); + let table = document.getElementById('main-table'); + + // create table if it's not there + if (!table){ + await Table.show(); + table = document.getElementById('main-table'); + } // check if header has already been added let header_row = table.querySelector('thead tr'); @@ -32,9 +39,13 @@ async function addNewRow(data_dictionary, columns = []){ }); }); - // Append the new row to the table body + // Append the new row to the top of the table body let tbody = table.querySelector('tbody'); - tbody.appendChild(new_row); + if (tbody.firstChild) { + tbody.insertBefore(new_row, tbody.firstChild); + } else { + tbody.appendChild(new_row); + } } function saveRowEdits(row){ @@ -66,13 +77,28 @@ function saveRowEdits(row){ }) } +function markNewRow(){ + // Get the table element by its ID and fetch first row + let first_row = document.querySelector('#main-table tbody').firstChild; + // get the right color from the root() defined in common.css + const rootStyle = getComputedStyle(document.documentElement); + const palegreen = rootStyle.getPropertyValue('--palegreen').trim(); + // make first row (with new row) green + first_row.style.backgroundColor = palegreen; + // Fade back to default after 0.75 seconds + setTimeout(() => { + first_row.style.backgroundColor = ''; + }, 750); +} + const Rows = { - add : function(data_dictionary, cols){ - addNewRow(data_dictionary, cols) + add : async function(data_dictionary, cols){ + addNewRow(data_dictionary, cols); }, saveEdits : function(row){ - saveRowEdits(row) - } + saveRowEdits(row); + }, + markNewRow : markNewRow } export default Rows; \ No newline at end of file diff --git a/src/js/components/table/table.css b/src/js/components/table/table.css index 1096bde..fd651ec 100644 --- a/src/js/components/table/table.css +++ b/src/js/components/table/table.css @@ -24,8 +24,11 @@ th { tr { border-width: 2px; background-color: white; + /* Ensures fade when indicating a new row */ + transition: background-color 0.5s ease; } + tr td { border-bottom: 1px solid black; } diff --git a/src/js/components/table/table.js b/src/js/components/table/table.js index 9ae870b..ed056e7 100644 --- a/src/js/components/table/table.js +++ b/src/js/components/table/table.js @@ -19,7 +19,7 @@ function adjustTableWidth(width_pct){ table.style.width = width_pct; } -function showTable(){ +async function showTable(){ const tableContainer = document.querySelector('.table-container'); tableContainer.innerHTML = Table.html; const table = document.getElementById('main-table'); diff --git a/src/js/constants/budget_constants.js b/src/js/constants/budget_constants.js index 26659d9..ec19547 100644 --- a/src/js/constants/budget_constants.js +++ b/src/js/constants/budget_constants.js @@ -34,4 +34,18 @@ export const OT_OBJECTS = [ '601305 - Salaries-Overtime-Police Unif', '601310 - Salaries-Overtime-Fire Unif', '602300 - Wages-Overtime-Gen City' -] \ No newline at end of file +] + +// Nice names for the pages +export const PAGE_LABELS = { + 'welcome': 'Welcome Page', + 'upload': 'Excel Upload', + 'baseline-landing': 'Fund Selection', + 'revenue': 'Revenue', + 'personnel': 'Personnel', + 'overtime': 'Overtime', + 'nonpersonnel': 'Non-Personnel', + 'new-inits': 'New Initiatives (Supplementals)', + 'summary': 'Summary Page', + 'finish' : 'Download & Finish' +}; \ No newline at end of file diff --git a/src/js/constants/excel_constants.js b/src/js/constants/excel_constants.js index 9d2321f..0285e4c 100644 --- a/src/js/constants/excel_constants.js +++ b/src/js/constants/excel_constants.js @@ -16,7 +16,7 @@ export const TOTAL_COLUMNS = { 'personnel': 'Total Sal/Wag & Ben Request', 'overtime':`FY${FISCAL_YEAR} Total OT/SP/Hol + FICA Request`, 'nonpersonnel': `FY${FISCAL_YEAR} Departmental Request Total`, - 'revenue': `FY${FISCAL_YEAR} Departmental Estimate`, + 'revenue': `FY${FISCAL_YEAR} Departmental Estimate Total`, 'new-inits': `Total Initiative Request` }; diff --git a/src/js/models/fund.js b/src/js/models/fund.js index 54bf1d8..4a43855 100644 --- a/src/js/models/fund.js +++ b/src/js/models/fund.js @@ -94,7 +94,7 @@ export class CostCenter{ for (let table of tables) { if (table.length > 0 && table[0]['Cost Center Name']) { - return 'Cost Center ' + table[0]['Cost Center Name']; + return table[0]['Cost Center Name']; } } @@ -145,8 +145,8 @@ export class Appropriation { const tables = [this.nonpersonnel.table, this.personnel.table, this.overtime.table, this.revenue.table]; for (let table of tables) { - if (table.length > 0 && table[0]['Appropriation Name']) { - return 'Appropriation ' + table[0]['Appropriation Name']; + if (table && table[0] && table[0]['Appropriation Name']) { + return table[0]['Appropriation Name']; } } diff --git a/src/js/utils/XLSX_handlers.js b/src/js/utils/XLSX_handlers.js index 326630d..16f33b6 100644 --- a/src/js/utils/XLSX_handlers.js +++ b/src/js/utils/XLSX_handlers.js @@ -88,8 +88,8 @@ function processSheet(sheetName, sheet) { // Save fund number and name as we go along FundLookupTable.update(fundData); - console.log('updating fund lookup table'); + // save data by fund Object.keys(fundData).forEach(fund => { const key = `${SHEETS[sheetName]}_${fund}`; localStorage.setItem(key, JSON.stringify(fundData[fund])); @@ -183,6 +183,7 @@ export function processWorkbook(arrayBuffer) { if (sheetName == Object.keys(SHEETS)[4]) { const sheet = workbook.Sheets[sheetName]; processNewInitsSheet(sheet); + // convert personnel, nonpersonnel, revenue, overtime } else if (Object.keys(SHEETS).includes(sheetName)) { const sheet = workbook.Sheets[sheetName]; processSheet(sheetName, sheet); @@ -259,7 +260,6 @@ export function downloadXLSX() { function writeJSONtoNewTab(storage_key, tab_name, workbook){ const data = JSON.parse(localStorage.getItem(storage_key)); - console.log(data); const worksheet = XLSX.utils.aoa_to_sheet(data); XLSX.utils.book_append_sheet(workbook, worksheet, tab_name); } diff --git a/src/js/utils/common_utils.js b/src/js/utils/common_utils.js index 78c908e..6dd70cb 100644 --- a/src/js/utils/common_utils.js +++ b/src/js/utils/common_utils.js @@ -72,3 +72,8 @@ export function getUniqueValues(data, key) { const values = data.map(obj => obj[key]); return Array.from(new Set(values)); } + +// Define a function to introduce a delay +export function delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} \ No newline at end of file diff --git a/src/js/views/01_upload.js b/src/js/views/01_upload.js index 42fd9eb..82189a2 100644 --- a/src/js/views/01_upload.js +++ b/src/js/views/01_upload.js @@ -1,6 +1,7 @@ import { View } from './view_class.js' import FileUpload from "../components/file_upload/file_upload.js"; +import NavButtons from '../components/nav_buttons/nav_buttons.js'; export class UploadView extends View { diff --git a/src/js/views/02_baseline_landing.js b/src/js/views/02_baseline_landing.js index c611273..b2f21c4 100644 --- a/src/js/views/02_baseline_landing.js +++ b/src/js/views/02_baseline_landing.js @@ -21,7 +21,11 @@ export class FundView extends View { // remove fund selection localStorage.setItem("fund", ''); super.visit(); + + // hide back button to avoid confusion + NavButtons.Last.hide(); } + } class FundTable extends ViewTable { diff --git a/src/js/views/03_revenue.js b/src/js/views/03_revenue.js index 6f47414..c483db5 100644 --- a/src/js/views/03_revenue.js +++ b/src/js/views/03_revenue.js @@ -7,9 +7,11 @@ export class RevenueView extends View { constructor(fiscal_year) { super(); this.page_state = 'revenue'; - this.prompt = `Review and edit revenue line items. If you change the estimate or - notice an error in an account string, please note it in the notes column. Click edit - to change values in a row.`; + this.prompt = `Review revenue line items. Revenue estimates are from the + September Revenue Estimating Conference and cannot be edited here. If you + notice an error in an account string or estimate, + please note it in the notes column by clicking edit + in the relevant row.`; this.subtitle = 'Revenues'; this.table = new RevenueTable(fiscal_year); } diff --git a/src/js/views/04_personnel.js b/src/js/views/04_personnel.js index 15b6906..e71d1bc 100644 --- a/src/js/views/04_personnel.js +++ b/src/js/views/04_personnel.js @@ -106,12 +106,14 @@ class PersonnelTable extends ViewTable { jobDescription.addEventListener('blur', function() { nameValidationText.textContent = ''; }); + // hide this box until job code entered + jobDescription.style.display = 'none'; // confirm that entered job code is in the gold book const jobCodeInput = document.getElementById('job-code'); jobCodeInput.addEventListener('blur', function () { // get entered job code - const jobCode = jobCodeInput.value; + const jobCode = jobCodeInput.value.toString(); // get validation text element const validationText = document.getElementById('job-code-validation'); if (!GoldBook.codeExists(jobCode)){ @@ -124,12 +126,15 @@ class PersonnelTable extends ViewTable { jobDescription.value = GoldBook.getTitle(jobCode); // and clear any error messages validationText.textContent = ''; + // and show the job title + jobDescription.style.display = ''; } }); } editColumns(responses){ + // Edit responses to fit into table responses = super.editColumns(responses); // edit inputs from modal responses['avg-salary'] = unformatCurrency(responses['avg-salary']); diff --git a/src/js/views/05_overtime.js b/src/js/views/05_overtime.js index 6f502e4..a3da3e1 100644 --- a/src/js/views/05_overtime.js +++ b/src/js/views/05_overtime.js @@ -47,7 +47,7 @@ class OvertimeTable extends ViewTable { Table.Cell.createServiceDropdown(Services.list()); Table.Cell.createDropdown('recurring', ['One-Time', 'Recurring']); Table.Cell.createDropdown('object-name', OT_OBJECTS); - Table.Cell.createTextbox('notes'); + Table.Cell.createTextbox('notes', false, 'textarea'); } updateTable(){ diff --git a/src/js/views/06_nonpersonnel.js b/src/js/views/06_nonpersonnel.js index 1a9beac..c5d3340 100644 --- a/src/js/views/06_nonpersonnel.js +++ b/src/js/views/06_nonpersonnel.js @@ -49,7 +49,7 @@ class NonPersonnelTable extends ViewTable { Table.Cell.createTextbox('request', true); Table.Cell.createServiceDropdown(); Table.Cell.createDropdown('recurring', ['One-Time', 'Recurring']); - Table.Cell.createTextbox('notes'); + Table.Cell.createTextbox('notes', false, 'textarea'); } addCustomQuestions(){ diff --git a/src/js/views/07_new_initiatives.js b/src/js/views/07_new_initiatives.js index 9927159..f5b20fd 100644 --- a/src/js/views/07_new_initiatives.js +++ b/src/js/views/07_new_initiatives.js @@ -5,6 +5,7 @@ import Form from "../components/form/form.js"; import FundLookupTable from '../models/fund_lookup_table.js'; import { FISCAL_YEAR } from '../constants/'; import AccountString from '../models/account_string.js'; +import NavButtons from '../components/nav_buttons/nav_buttons.js'; const dropdownOptions = ['N/A', 'One-Time', 'Recurring'] @@ -27,6 +28,9 @@ export class InitiativesView extends View { // remove fund selection localStorage.setItem("fund", ''); super.visit(); + + // hide back button to avoid confusion + NavButtons.Last.hide(); } } @@ -45,14 +49,13 @@ class InitiativesTable extends ViewTable { { title: 'Personnel Salary & Benefits', className: 'personnel', isCost: true }, { title: 'Non-Personnel Operating', className: 'nonpersonnel', isCost: true }, { title: 'Non-Personnel Capital', className: 'nonpersonnel-capital', isCost: true }, - // { title: 'Revenue', className: 'revenue', isCost: true }, - // { title: 'Revenue Type', className: 'rev-type' }, { title: 'Description & Justification', className: 'notes' }, { title: 'Recurring or One-Time', className: 'rev-type'}, { title: 'Edit', className: 'edit' } ]; this.addButtonText = 'Add new initiative' ; + } addCustomQuestions(){ @@ -71,12 +74,11 @@ class InitiativesTable extends ViewTable { Form.NewField.dropdown('Fund:', 'fund-name', FundLookupTable.listFundNames('Add new'), true); // Numbers - Form.NewField.numericInput('What is your ballpark estimate of TOTAL ADDITONAL expenses associated with this initiative?', - 'total', false); + Form.NewField.numericInput('What is your ballpark estimate of TOTAL ADDITONAL expenditures associated with this initiative?', + 'total', true); Form.NewField.numericInput('Estimate of ADDITONAL personnel cost?', 'personnel', false); Form.NewField.numericInput('Estimate of ADDITONAL nonpersonnel operating cost?', 'nonpersonnel', false); Form.NewField.numericInput('Estimate of ADDITONAL nonpersonnel capital costs?', 'nonpersonnel-capital', false); - Form.NewField.numericInput('Estimate of ADDITONAL revenue (if applicable)?', 'revenue', false); } editColumns(responses) { @@ -98,7 +100,7 @@ class InitiativesTable extends ViewTable { Table.Cell.createTextbox('nonpersonnel-capital', true); Table.Cell.createTextbox('init-name'); Table.Cell.createDropdown('rev-type', dropdownOptions); - Table.Cell.createTextbox('notes'); + Table.Cell.createTextbox('notes', false, 'textarea'); } } diff --git a/src/js/views/08_summary.js b/src/js/views/08_summary.js index 9e8dc1c..0b1a730 100644 --- a/src/js/views/08_summary.js +++ b/src/js/views/08_summary.js @@ -5,28 +5,22 @@ import { formatCurrency } from '../utils/common_utils.js'; import { View } from "./view_class.js"; import Prompt from "../components/prompt/prompt.js"; import { downloadXLSX } from "../utils/XLSX_handlers.js"; -import WelcomeView from './00_welcome.js'; +import NavButtons from '../components/nav_buttons/nav_buttons.js'; +import { delay } from '../utils/common_utils.js'; export function compareToTarget(){ const baseline = new Baseline; if (baseline.genFundTotal() <= Baseline.target()){ - Prompt.Text.update(`Congrats! Your General Fund budget is below your target! - Edit any line items below or download your completed Excel.`); + Prompt.Text.update(`Your General Fund budget is below your target! + Edit any line items below or continue to the final page.`); } else { Prompt.Text.update(`Your General Fund budget is above your GF target of ${formatCurrency(Baseline.target())}. Please expand the summary table below and edit line items until you meet your target. - When you meet the target, you will be able to download the Excel sheet.`); - Prompt.Buttons.Right.disable(); + When you meet the target, you will be able to continue to the final page.`); + NavButtons.Next.disable(); } - Prompt.show(); } -function returnToWelcome() { - const welcome = new WelcomeView(); - const left = document.getElementById('option1'); - welcome.visit(); -}; - export class SummaryView extends View { constructor() { @@ -46,22 +40,19 @@ export class SummaryView extends View { Accordion.build(); Accordion.show(); - // add prompt buttons - Prompt.Buttons.Right.updateText('Download Excel'); - Prompt.Buttons.Left.updateText('Start over with new Excel upload'); - // add button links - Prompt.Buttons.Left.addAction(returnToWelcome); - Prompt.Buttons.Right.addAction(downloadXLSX); - // update prompt text depending on target matching compareToTarget(); + + // force Excel download on next button + NavButtons.Next.addAction(downloadXLSX); + } - cleanup() { + async cleanup() { // delete event listeners - Prompt.Buttons.Left.removeAction(returnToWelcome); - Prompt.Buttons.Right.removeAction(downloadXLSX); - Prompt.Buttons.Right.enable(); + // delay to make sure download happens before event listener is removed + await delay(100) + NavButtons.Next.removeAction(downloadXLSX); } } diff --git a/src/js/views/09_finish.js b/src/js/views/09_finish.js new file mode 100644 index 0000000..9abbfcb --- /dev/null +++ b/src/js/views/09_finish.js @@ -0,0 +1,54 @@ +import CurrentFund from '../models/current_fund.js'; +import { View } from "./view_class.js"; +import Prompt from "../components/prompt/prompt.js"; +import { downloadXLSX } from "../utils/XLSX_handlers.js"; +import WelcomeView from './00_welcome.js'; +import NavButtons from '../components/nav_buttons/nav_buttons.js'; + +function returnToWelcome() { + const welcome = new WelcomeView(); + welcome.visit(); +}; + +export class FinishView extends View { + + constructor() { + super(); + this.page_state = 'finish'; + this.subtitle = 'Finish'; + this.sidebar = false; + // todo toggle to false + this.navButtons = true; + this.prompt = `Congratulations! A copy of your completed Excel file has been downloaded. + Download another copy below, or start over with a new Excel upload. Please email the Excel download + along with the rest of you budget submission.`; + } + + visit() { + super.visit(); + + // reset fund + CurrentFund.reset(); + + // add prompt buttons + Prompt.Buttons.Right.updateText('Download completed Excel'); + Prompt.Buttons.Left.updateText('Start over with new Excel file'); + // add button links + Prompt.Buttons.Left.addAction(returnToWelcome); + Prompt.Buttons.Right.addAction(downloadXLSX); + Prompt.show(); + + // hide next button + NavButtons.Next.hide(); + + } + + cleanup() { + // delete event listeners + Prompt.Buttons.Left.removeAction(returnToWelcome); + Prompt.Buttons.Right.removeAction(downloadXLSX); + Prompt.Buttons.Right.enable(); + } +} + +export default FinishView; \ No newline at end of file diff --git a/src/js/views/view_class.js b/src/js/views/view_class.js index edaa2ea..9312290 100644 --- a/src/js/views/view_class.js +++ b/src/js/views/view_class.js @@ -6,8 +6,8 @@ import { Subtitle, Title } from "../components/header/header.js"; import Table from "../components/table/table.js"; import Form from "../components/form/form.js"; import Modal from "../components/modal/modal.js"; - -import { CurrentPage, AccountString } from '../models/' +import Filter from "../components/table/subcomponents/filters.js"; +import { CurrentPage, AccountString, FundLookupTable } from '../models/' export class View { @@ -41,7 +41,16 @@ export class View { Title.default(); // default to showing navbuttons - if (this.navButtons) { NavButtons.show(); }; + if (this.navButtons) { + // if all the funds are filled out, assume you came from the summary page + // and then only show return button and not nav buttons + const returnPages = ['revenue', 'nonpersonnel', 'overtime', 'personnel']; + if (!FundLookupTable.fundsLeft() && returnPages.includes(CurrentPage.load())) { + NavButtons.ReturnToSummary.show(); + } else{ + NavButtons.show(); + } + }; // default to showing sidebar if (this.sidebar) { Sidebar.show() }; @@ -56,7 +65,9 @@ export class View { if (this.subtitle) { Subtitle.update(this.subtitle) }; } - cleanup() { return; } + cleanup() { + Filter.resetAllFilters(); + } } @@ -155,10 +166,10 @@ export class ViewTable { updateFilters() { // update filters with any new values if (this.columns.some(column => column.className === 'approp-name')){ - Table.Filter.updateOptions('Appropriation', 'approp-name'); + Table.Filter.updateOptions('approp-name'); } if (this.columns.some(column => column.className === 'cc-name')){ - Table.Filter.updateOptions('Cost Center', 'cc-name'); + Table.Filter.updateOptions('cc-name'); } if (this.columns.some(column => column.className === 'object-name')){ Table.Filter.updateOptions('object-name'); @@ -222,6 +233,7 @@ export class ViewTable { addModalValidation() { this.addValidationListener('approp-name', 'Appropriation', 'approp-validation', 5); this.addValidationListener('cc-name', 'Cost Center', 'cc-validation', 6); + //this.addValidationListener('object-name', 'Object', 'obj-validation', 7); } setUpForm() { @@ -249,6 +261,8 @@ export class ViewTable { } editColumns(responses) { + // reset filters if relevant to ensure that new job shows up + Table.Filter.resetAfterNewRow(responses); // if a new appropriation was entered, fix it if (responses['approp']){ responses['approp-name'] = `${responses['approp']} - New`; @@ -279,7 +293,7 @@ export class ViewTable { return responses; } - submitNewRow(event) { + async submitNewRow(event) { // get answers from form, hide form, show answers in table var responses = Form.fetchAllResponses(event); @@ -293,11 +307,14 @@ export class ViewTable { Modal.hide(); // add data to table - Table.Rows.add(responses, this.columns); + await Table.Rows.add(responses, this.columns); Table.save(); // rebuild table - this.refreshData(); + await this.refreshData(); + + // mark new row + Table.Rows.markNewRow(); } } diff --git a/src/js/views/view_logic.js b/src/js/views/view_logic.js index f8b2eec..f22cef8 100644 --- a/src/js/views/view_logic.js +++ b/src/js/views/view_logic.js @@ -7,9 +7,10 @@ import OvertimeView from './05_overtime.js'; import NonPersonnelView from './06_nonpersonnel.js'; import InitiativesView from './07_new_initiatives.js'; import SummaryView from './08_summary.js'; +import FinishView from './09_finish.js'; import { FundLookupTable, CurrentFund, CurrentPage } from '../models/'; -import { FISCAL_YEAR } from '../constants/'; +import { FISCAL_YEAR, PAGE_LABELS } from '../constants/'; // Initialize pages globally once const PAGES = { @@ -21,7 +22,8 @@ const PAGES = { 'overtime': new OvertimeView(FISCAL_YEAR), 'nonpersonnel': new NonPersonnelView(FISCAL_YEAR), 'new-inits': new InitiativesView(), - 'summary': new SummaryView() + 'summary': new SummaryView(), + 'finish': new FinishView() }; export function visitPage(new_page_key) { @@ -39,43 +41,46 @@ export function visitPage(new_page_key) { } } -export function nextPage() { +function nextPageValue() { var page_state = CurrentPage.load(); const keys = Object.keys(PAGES); const currentIndex = keys.indexOf(page_state); - const returnPages = ['revenue', 'nonpersonnel', 'new-inits', 'overtime', 'personnel']; - if (!FundLookupTable.fundsLeft() && returnPages.includes(CurrentPage.load())) { - visitPage('summary'); - return; - } - if (CurrentPage.load() == 'nonpersonnel') { FundLookupTable.editFund(CurrentFund.number()); if (FundLookupTable.fundsLeft()) { - visitPage('baseline-landing'); - return; + return 'baseline-landing'; } } if (currentIndex >= 0 && currentIndex < keys.length - 1) { const nextKey = keys[currentIndex + 1]; - visitPage(nextKey); + return nextKey; } } -export function lastPage() { +export function nextPage() { + visitPage(nextPageValue()); +} + +export function nextPageLabel() { + return PAGE_LABELS[nextPageValue()]; +} + +function lastPageValue() { var page_state = CurrentPage.load(); const keys = Object.keys(PAGES); const currentIndex = keys.indexOf(page_state); - - if (CurrentPage.load() == 'new-inits') { - visitPage('baseline-landing'); - return; - } if (currentIndex >= 1) { - const lastKey = keys[currentIndex - 1]; - visitPage(lastKey); + return keys[currentIndex - 1]; } +} + +export function lastPage() { + visitPage(lastPageValue()); +} + +export function lastPageLabel() { + return PAGE_LABELS[lastPageValue()]; } \ No newline at end of file