fix new init modal and table functions to add header row if table was…

… empty

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

@@ -24,9 +24,9 @@ function fillTable(data) {
         data.forEach(item => {
             const row = document.createElement('tr');
             Object.values(item).forEach(val => {
-            const cell = document.createElement('td');
-            cell.innerHTML = val;
-            row.appendChild(cell);
+                const cell = document.createElement('td');
+                cell.innerHTML = val;
+                row.appendChild(cell);
             });
             tbody.appendChild(row);
         });

src/js/components/table/subcomponents/headers.js

@@ -1,21 +1,21 @@
-function addTableHeaders(header_array){
+function addTableHeaders(cols){
 
     // Get the table element by its ID
     const table = document.getElementById('main-table');
 
     // Create a table header row element
     const headerRow = document.createElement('tr');
-
-    for (const headerText of header_array) {
 
+    cols.forEach(col => {
         // Create a header cell element
         const headerCell = document.createElement('th');
-        headerCell.textContent = headerText;
+        headerCell.textContent = col['title'];
+        headerCell.classList.add(col['className']);
 
         // Append the header cell to the header row
         headerRow.appendChild(headerCell);
-    }
-    
+    });
+
     // Append the header row to the table header
     let thead = table.querySelector('thead');
     thead.appendChild(headerRow);

src/js/components/table/subcomponents/rows.js

@@ -1,14 +1,18 @@
 import Header from "./headers.js";
 import { formatCurrency } from "../../../utils/common_utils.js";
 
-async function addNewRow(data_dictionary){
+async function addNewRow(data_dictionary, columns = []){
+
+    console.log(data_dictionary);
+
     // Get the table element by its ID
     const table = document.getElementById('main-table');
 
     // check if header has already been added
     let header_row = table.querySelector('thead tr');
     if (!header_row) {
-        Header.add(Object.keys(data_dictionary));
+        Header.add(columns);
+        header_row = table.querySelector('thead tr');
     }
 
     // initialize new row of data
@@ -20,13 +24,14 @@ async function addNewRow(data_dictionary){
         // Create new cell and add it to the row
         const newCell = document.createElement('td');
         new_row.appendChild(newCell);
-        // the data has an appropriate class, add the info to the cell. Otherwise, keep empty cell
+        // if the data has an appropriate class, add the info to the cell. 
+        // Otherwise, keep empty cell
         Object.keys(data_dictionary).forEach( (className) => {
             if (header_cell.classList.contains(className) ){
                 newCell.textContent = data_dictionary[className];
                 newCell.classList.add(className);
             }
-        })
+        });
     });
 
     // Append the new row to the table body
@@ -60,8 +65,8 @@ function saveRowEdits(row){
 }
 
 const Rows = {
-    add : function(data_dictionary){
-        addNewRow(data_dictionary)
+    add : function(data_dictionary, cols){
+        addNewRow(data_dictionary, cols)
     },
     saveEdits : function(row){
         saveRowEdits(row)

src/js/utils/data_utils/budget_data_handlers.js

@@ -35,13 +35,28 @@ export const FundLookupTable = {
         this.save(table);
     },
 
+    getAll: function(key) {
+        // function to aggregate all approps or CCs for every fund in one array
+        const funds = this.retrieve();
+        const ret = [];
+        for (const fund in funds) {
+            if (funds.hasOwnProperty(fund)) {
+                for (let i in funds[fund][key]){
+                    ret.push(funds[fund][key][i]);
+                }
+            }
+        }
+        return ret;
+    },
+
     getCostCenters : function() {
         // get current fund
         const fund = CurrentFund.number()
         if (this.retrieve()[fund]){
             return this.retrieve()[fund]['cc'];
         }
-        return [];
+        // if no fund (ie. we're on the new initiative page), return all options
+        return this.getAll('cc');
     },
 
     getApprops : function() {
@@ -50,7 +65,8 @@ export const FundLookupTable = {
         if (this.retrieve()[fund]){
             return this.retrieve()[fund]['approp'];
         }
-        return [];
+        // if no fund (ie. we're on the new initiative page), return all options
+        return this.getAll('approp');
     },
 
     reset : function() {
@@ -63,6 +79,16 @@ export const FundLookupTable = {
     listFunds : function(){
         return Object.keys(this.retrieve());
     },
+    listFundNames : function(){
+        const funds = this.retrieve();
+        // initialize array
+        var ret = [];
+        Object.keys(funds).forEach( (fund_number) => {
+            var fund_name = funds[fund_number]['name'];
+            ret.push(fund_name);
+        });
+        return ret;
+    },
     editFund : function(fund){
         const table = this.retrieve();
         if (table[fund]){
@@ -119,9 +145,9 @@ export const AccountString = {
         return match ? match[0] : null;
     },
 
-    build : function(approp, cc, obj = null) {
+    build : function(approp, cc, obj = null, fund = null) {
         // put together account string fund-approp-costcenter[-obj] (w optional object)
-        const fund = CurrentFund.number();
+        if (!fund) { fund = CurrentFund.number() };
         // hits error here
         approp = this.getNumber(approp);
         cc = this.getNumber(cc);

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

@@ -8,12 +8,37 @@ import NavButtons from '../../components/nav_buttons/nav_buttons.js'
 import { nextPage } from '../view_logic.js'
 import Subtitle from '../../components/header/header.js'
 import Sidebar from '../../components/sidebar/sidebar.js'
+import { FundLookupTable, AccountString } from '../../utils/data_utils/budget_data_handlers.js'
 
 const explanation = `New initiative submissions will count as supplemental line items and will be the starting 
         point for a conversation with both OB and ODFS, who will help with the details.`
 
 const dropdownOptions = ['N/A', 'One-Time', 'Recurring']
 
+const initiativesCols = [
+    { title: 'Initiative Name', className: 'init-name' },
+    { title: 'Account String', className: 'account-string' },
+    { title: 'Ballpark Total Expenses', className: 'total', isCost: true },
+    { title: 'Revenue', className: 'revenue', isCost: true },
+    { title: 'Personnel Cost', className: 'personnel', isCost: true },
+    { title: 'Non-personnel Cost', className: 'nonpersonnel', isCost: true },
+    { title: 'One-time v. Recurring', className: 'rev-type' },
+    { title: 'Edit', className : 'edit' },
+
+    // hide the explanation columns
+    { title: 'Q1', className: 'q1', hide: true },
+    { title: 'Q2', className: 'q2', hide: true },
+    { title: 'Q3', className: 'q3', hide: true },
+
+    // hide the account string breakdown columns too
+    { title: 'Appropriation Name', className: 'approp-name', hide: true },
+    { title: 'Cost Center Name', className: 'cc-name',  hide: true },
+    { title: 'Appropriation', className: 'approp', hide: true },
+    { title: 'Cost Center', className: 'cc',  hide: true },
+    { title: 'Fund Name', className: 'fund-name',  hide: true },
+    { title: 'Fund', className: 'fund',  hide: true }
+];
+
 export function initializePageView() {
     // Prepare page view
     Body.reset();
@@ -53,24 +78,25 @@ export function setUpForm() {
     Form.new('modal-body');
 
     // general questions
-    Form.NewField.shortText('Initiative Name:', 'Initiative Name', true); 
-    Form.NewField.longText('What is the business case for the Initiative?', 'Q1', true);
+    Form.NewField.shortText('Initiative Name:', 'init-name', true); 
+    Form.NewField.longText('What is the business case for the Initiative?', 'q1', true);
     Form.NewField.longText(`Why is the initiative needed? What is the value-add to residents? 
-        What is the Department’s plan for implementing the Initiative?`, 'Q2', true);
-    Form.NewField.longText(`Why can’t the Initiative be funded with the Department’s baseline budget?`, 'Q3', true);
+        What is the Department’s plan for implementing the Initiative?`, 'q2', true);
+    Form.NewField.longText(`Why can’t the Initiative be funded with the Department’s baseline budget?`, 'q3', true);
 
     // TODO: Edit to drop down
+    Form.NewField.dropdown('Fund:', 'fund-name', FundLookupTable.listFundNames(), true);
     Form.NewField.dropdown('Appropriation (if known):', 'approp-name', FundLookupTable.getApprops(), true);
     Form.NewField.dropdown('Cost Center (if known):', 'cc-name', FundLookupTable.getCostCenters(), true);
 
     // Numbers
     Form.NewField.numericInput('What is your ballpark estimate of TOTAL ADDITONAL expenses associated with this initiative?', 
-        'Ballpark Total Expenses', false);
-    Form.NewField.numericInput('Estimate of ADDITONAL personnel cost?', 'Personnel Cost', false);
-    Form.NewField.numericInput('Estimate of ADDITONAL nonpersonnel cost?', 'Non-personnel Cost', false);
-    Form.NewField.numericInput('Estimate of ADDITONAL revenue (if applicable)?', 'Revenue', false);
+        'total', false);
+    Form.NewField.numericInput('Estimate of ADDITONAL personnel cost?', 'personnel', false);
+    Form.NewField.numericInput('Estimate of ADDITONAL nonpersonnel cost?', 'nonpersonnel', false);
+    Form.NewField.numericInput('Estimate of ADDITONAL revenue (if applicable)?', 'revenue', false);
     Form.NewField.dropdown(`If there will be revenue, is it one-time or recurring?`, 
-        'One-time v. Recurring', dropdownOptions);
+        'rev-type', dropdownOptions);
 
 
     Form.SubmitButton.add();
@@ -79,23 +105,6 @@ export function setUpForm() {
 }
 
 function assignClasses() {
-    // record columns and their classes
-    const initiativesCols = [
-        { title: 'Initiative Name', className: 'init-name' },
-        { title: 'Account String', className: 'account-string' },
-        { title: 'Ballpark Total Expenses', className: 'total', isCost: true },
-        { title: 'Revenue', className: 'revenue', isCost: true },
-        { title: 'Personnel Cost', className: 'personnel', isCost: true },
-        { title: 'Non-personnel Cost', className: 'nonpersonnel', isCost: true },
-        { title: 'One-time v. Recurring', className: 'rev-type' },
-        { title: 'Edit', className : 'edit' },
-
-        // hide the explanation columns
-        { title: 'Q1', className: 'q1', hide: true },
-        { title: 'Q2', className: 'q2', hide: true },
-        { title: 'Q3', className: 'q3', hide: true },
-    ];
-
     // assign cost classes
     Table.Columns.assignClasses(initiativesCols)
 }
@@ -104,7 +113,7 @@ export async function initializeInitTable(){
     Table.clear();
     // load table data from storage
     if(await Table.Data.load()) {
-        //after table is loaded, fill it
+        // after table is loaded, fill it
         Table.Columns.addAtEnd(Table.Buttons.edit_confirm_btns, "Edit");
         assignClasses();
         // enable editing
@@ -127,10 +136,17 @@ function rowOnEdit(){
 function handleNewInitSubmission(event){
     // get answers from form, hide form, show answers in table
     const responses = Form.fetchAllResponses(event);
+
+    // create account string columns
+    responses['approp'] = AccountString.getNumber(responses['approp-name']);
+    responses['cc'] = AccountString.getNumber(responses['cc-name']);
+    responses['fund'] = AccountString.getNumber(responses['fund-name']);
+    responses['account-string'] = AccountString.build(responses['approp-name'], responses['cc-name'], null, responses['fund']);
+
     // make sure it's not an empty response
     if (Object.values(responses)[0] != ''){
         // add data to table
-        Table.Rows.add(responses);
+        Table.Rows.add(responses, initiativesCols);
         // save it
         Table.save();
         // show updated table