Merge pull request #37 from kwheelan/22-fund-logic

Alters order of views

src/css/common.css

@@ -53,6 +53,14 @@ body, button, input, textarea, select, .sidebar, table {
     margin: 0;
 }
 
-div.row {
+/* Font awesome */
+
+i.fas.fa-check { 
+    font-size: 1.5em;
+    color: var(--spiritgreen);
+    margin-right: 10px;
+}
+
+/* div.row {
     margin: 0px;
-}
+} */

src/index.html

@@ -9,6 +9,8 @@
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <!-- Google fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+<!-- Font Awesome CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
@@ -94,7 +96,7 @@ <h3 id="supp-title" class="accordion-title">
             <div class="accordion summary-accordion"></div>
         </div>
         <div class="add-init-btn-div">
-            <button class="btn btn-add-init">Add another initiative</button>
+            <button class="btn btn-add-init">Add new initiative</button>
         </div>        
     </div>
 

src/js/components/accordion/accordion.css

@@ -18,7 +18,7 @@
 
 .accordion-table { 
     width: 100%;
-    font-size: 1.25em;
+    font-size: 1.2em;
     /* border-collapse: separate; This is required for rounded corners */
 }
 
@@ -49,7 +49,7 @@ span.amount {
 }
 
 .accordion-header button {
-    font-size: 0.8em;
+    font-size: 0.6em;
 }
 
 .btn-add-init {

src/js/components/nav_buttons/nav_buttons.js

@@ -31,7 +31,13 @@ function enable(button_id) {
 
 const Next = {
     disable : function() { disable('btn-next') },
-    enable : function() { enable('btn-next') }
+    enable : function() { enable('btn-next') },
+    addAction : function(fn) {
+        document.querySelector(`#btn-next`).addEventListener('click', fn);
+    },
+    removeAction : function(fn) {
+        document.querySelector(`#btn-next`).removeEventListener('click', fn);
+    },
 }
 
 const Last = {

src/js/components/table/subcomponents/data.js

@@ -25,7 +25,7 @@ function fillTable(data) {
             const row = document.createElement('tr');
             Object.values(item).forEach(val => {
             const cell = document.createElement('td');
-            cell.textContent = val;
+            cell.innerHTML = val;
             row.appendChild(cell);
             });
             tbody.appendChild(row);
@@ -58,15 +58,22 @@ function loadFunds(){
     // get list of funds from storage
     const fundDict = FundLookupTable.retrieve();
     // build out data in correct format
-    const resultArray = [];
-    for (const key in fundDict) {
-        if (fundDict.hasOwnProperty(key)) {
-            resultArray.push({
-                Fund: fundDict[key]     // Use the value directly
-            });
+    const ret = [];
+    Object.keys(fundDict).forEach(key => {
+        // determine if the fund has already been edited
+        if (fundDict[key]['viewed']){
+            // todo: add a checkmark here
+            ret.push({'Fund' :  `<span class = 'viewed-fund'> 
+                                    <i class="fas fa-check"></i>
+                                    ${fundDict[key]['name']}
+                                </span>`});
+        } else {
+            ret.push({'Fund' : `<span class = 'unviewed-fund'> 
+                                    ${fundDict[key]['name']}
+                                </span>`});   
         }
-    }
-    fillTable(resultArray);
+    });
+    fillTable(ret);
 }
 
 

src/js/components/table/table.css

@@ -96,4 +96,9 @@ div.table-container {
 .hover-effect:hover {
     cursor: pointer;
     background-color: var(--verypalegreen); 
-}
+}
+
+/* Fund table */
+.fund-name > .viewed-fund {
+    color: gray;
+}

src/js/utils/common_utils.js

@@ -32,14 +32,6 @@ export function displayWithCommas(value) {
     return formatCurrency(value).replace('$', '');
 }
 
-function delay(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export async function pauseExecution(seconds) {
-    await delay(seconds * 1000); // convert to milliseconds
-}
-
 export function cleanString(str){
     return str.toLowerCase().replaceAll(' ', '-');
 }

src/js/utils/data_utils/budget_data_handlers.js

@@ -8,13 +8,14 @@ export const FundLookupTable = {
     update : function(fundData){
         const table = this.retrieve();
         for (let fund of Object.keys(fundData)){
-            // fund = toString(fund);
             // add to lookup table if not in there already
             if (!table[fund]){
                 // get fund name
                 const fundName = fundData[fund][0]['Fund Name'];
                 // add fund to dictionary
-                table[fund] = fundName;
+                table[fund] = {};
+                table[fund]['name'] = fundName;
+                table[fund]['viewed'] = false;
             }
         }
         // save any updates
@@ -24,10 +25,34 @@ export const FundLookupTable = {
         this.save({});
     },
     getName : function(number){
-        return this.retrieve()[number];
+        if(number == '') { return '' };
+        return this.retrieve()[number]['name'];
     },
     listFunds : function(){
         return Object.keys(this.retrieve());
+    },
+    editFund : function(fund){
+        const table = this.retrieve();
+        if (table[fund]){
+            table[fund]['viewed'] = true;
+            this.save(table);
+        } else {
+            console.error('No fund selected.');
+        }
+
+    },
+    listUneditedFunds : function(){
+        const table = this.retrieve();
+        const ret = [];
+        this.listFunds().forEach(key => {
+            if (!table[key]['viewed']){
+                ret.push(key);
+            }
+        });
+        return ret;
+    },
+    fundsLeft : function(){
+        return (this.listUneditedFunds().length > 0);
     }
 }
 

src/js/views/02_baseline_landing_page/helpers.js

@@ -41,8 +41,8 @@ function allowRowSelection(){
     });
 }
 
-export async function initializeFundTable(){
-    await Table.Data.loadFunds();
+export function initializeFundTable(){
+    Table.Data.loadFunds();
     Table.adjustWidth('30%');
     Table.show();
     Table.Columns.assignClasses(fundCols);

src/js/views/03_revenue/helpers.js

@@ -3,7 +3,7 @@ import { formatCurrency } from '../../utils/common_utils.js'
 import { REVENUE } from '../../init.js'
 import Body from '../../components/body/body.js'
 import NavButtons from '../../components/nav_buttons/nav_buttons.js'
-import { pauseAndContinue } from '../view_logic.js'
+import { nextPage } from '../view_logic.js'
 import Subtitle from '../../components/header/header.js'
 import Modal from '../../components/modal/modal.js'
 import Form from '../../components/form/form.js'
@@ -23,15 +23,15 @@ export function preparePageView(){
 
 export function setUpNavButtons(){
     // clicking 'confirm' will also take us to the next page
-    Prompt.Buttons.Left.addAction(pauseAndContinue);
+    Prompt.Buttons.Left.addAction(nextPage);
     // TODO: allow user to edit revenue here
     Modal.Link.add('option2');
     handleErrorComment();
 }
 
 export function removeButtonEvents(){
     // remove event listeners on prompt buttons
-    Prompt.Buttons.Left.removeAction(pauseAndContinue);
+    Prompt.Buttons.Left.removeAction(nextPage);
     Modal.Link.remove('option2');
 }
 

src/js/views/06_nonpersonnel/helpers.js

@@ -4,6 +4,8 @@ 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 { FundLookupTable } from "../../utils/data_utils/budget_data_handlers.js";
+import { CurrentFund } from "../../utils/data_utils/local_storage_handlers.js";
 
 const nonPersonnelColumns = [
     { title: 'FY26 Request', className: 'request', isCost: true },
@@ -26,9 +28,6 @@ export function preparePageView(){
     // update page text
     Subtitle.update('Non-Personnel');
     Prompt.Text.update('Select an action item for each non-personnel line item from last year.');
-
-    // just enable next for now
-    // TODO: only enable when all info is entered
     NavButtons.Next.enable();
 }
 

src/js/views/07_new_initiatives/helpers.js

@@ -5,7 +5,7 @@ import Form from '../../components/form/form.js'
 import Table from '../../components/table/table.js'
 import Body from '../../components/body/body.js'
 import NavButtons from '../../components/nav_buttons/nav_buttons.js'
-import { pauseAndContinue } from '../view_logic.js'
+import { nextPage } from '../view_logic.js'
 import Subtitle from '../../components/header/header.js'
 import Sidebar from '../../components/sidebar/sidebar.js'
 
@@ -28,7 +28,7 @@ export function initializePageView() {
     Prompt.Buttons.Left.updateText('Yes');
     Prompt.Buttons.Right.updateText('No');
     // clicking 'no new initialitives' will also take us to the next page
-    Prompt.Buttons.Right.addAction(pauseAndContinue);
+    Prompt.Buttons.Right.addAction(nextPage);
     Prompt.Buttons.Left.addAction(NavButtons.Next.enable);
 }
 
@@ -114,7 +114,7 @@ export function removeModalLinks(){
 }
 
 export function removePromptButtonListeners(){
-    Prompt.Buttons.Right.removeAction(pauseAndContinue);
+    Prompt.Buttons.Right.removeAction(nextPage);
     Prompt.Buttons.Left.removeAction(NavButtons.Next.enable);
     Modal.clear();
 }

src/js/views/08_summary/helpers.js

@@ -5,18 +5,23 @@ import Subtitle from "../../components/header/header.js";
 import { visitPage } from "../view_logic.js";
 import { Accordion } from "../../components/accordion/accordion.js";
 import { downloadXLSX } from "../../utils/data_utils/XLSX_handlers.js";
-import { Baseline } from '../../utils/data_utils/local_storage_handlers.js';
+import { Baseline, CurrentFund } from '../../utils/data_utils/local_storage_handlers.js';
 import { TARGET } from '../../init.js';
 import { formatCurrency } from '../../utils/common_utils.js';
 
 export function summaryView(){
+
+    // show/hide elements
     Body.reset();
     Accordion.build();
     Accordion.show();
 
+    // set fund to none
+    CurrentFund.reset();
+
     // prompt buttons
     Prompt.Buttons.Right.updateText('Download Excel');
-    Prompt.Buttons.Left.updateText('Go back to home');
+    Prompt.Buttons.Left.updateText('Start over');
     // add button links
     Prompt.Buttons.Left.addAction(returnToWelcome);
     Prompt.Buttons.Right.addAction(downloadXLSX);
@@ -47,4 +52,5 @@ const returnToWelcome = () => {visitPage('welcome')}
 export function disablePromptButtons(){
     Prompt.Buttons.Left.removeAction(returnToWelcome);
     Prompt.Buttons.Right.removeAction(downloadXLSX);
+    Prompt.Buttons.Right.enable();
 }

src/js/views/view_logic.js

@@ -7,9 +7,8 @@ import { loadNonpersonnelPage } from './06_nonpersonnel/main.js';
 import { loadBaselineLandingPage } from './02_baseline_landing_page/main.js';
 import { cleanUpSummaryPage, loadSummaryPage } from './08_summary/main.js';
 import { loadUploadPage } from './01_upload/main.js';
-import { pauseExecution } from '../utils/common_utils.js';
-
-import { CurrentPage } from '../utils/data_utils/local_storage_handlers.js';
+import { CurrentPage, CurrentFund } from '../utils/data_utils/local_storage_handlers.js';
+import { FundLookupTable } from '../utils/data_utils/budget_data_handlers.js';
 
 export let PAGES = {
     'welcome' : initializeWelcomePage,
@@ -50,10 +49,27 @@ export function nextPage(){
 
     // clean up current page
     if (CLEANUP[page_state]) { CLEANUP[page_state]() };
-
-    // Check if there is a next key
+
+    // if on non-personnel, circle back to fund selection unless all funds are edited
+    if (CurrentPage.load() == 'nonpersonnel'){
+        // mark fund as viewed/edited
+        FundLookupTable.editFund(CurrentFund.number());
+        // if any funds left to edit, go back to that page
+        if ( FundLookupTable.fundsLeft() ){
+            visitPage('baseline-landing');
+            return;
+        }
+    }
+
+    // unless on personnel (which will go to overtime), return to summary if all funds are viewed
+    const returnPages = ['revenue', 'nonpersonnel', 'new-inits', 'overtime'];
+    if (!FundLookupTable.fundsLeft() && returnPages.includes(CurrentPage.load())) {
+        visitPage('summary');
+        return;
+    }
+
     if (currentIndex >= 0 && currentIndex < keys.length - 1) {
-        // Get the next key
+        // Check if there is a next key, and get it
         const nextKey = keys[currentIndex + 1];
         // go to that page
         visitPage(nextKey);
@@ -78,9 +94,4 @@ export function lastPage(){
         // go to that page
         visitPage(lastKey);
     } 
-}
-
-export async function pauseAndContinue(){
-    await pauseExecution(0.1);
-    nextPage();
 }