Merge pull request #59 from kwheelan/43-add-buttons

Add ability to add extra rows to tables

src/js/components/form/form.css

@@ -13,10 +13,10 @@ textarea, input {
 
 #new-form label {
     display: block; /* Ensure label is on its own line */
-    margin-bottom: 0.5em; 
+    margin-bottom: 0.25em; 
 }
 
 #new-form select {
-    margin: auto;
-    width: 300px;
+    min-width: 300px;
+    margin-bottom: 1.25em;
 }

src/js/components/form/subcomponents/dropdown.js

@@ -1,11 +1,3 @@
-// async function createDropdownFromJSON(json_path) {
-//     // Fetch JSON data from a file asynchronously
-//     const response = await fetch(json_path);
-//     const dataArray = await response.json();
-//     // create and return element
-//     return createDropdown(dataArray);
-// }
-
 function createDropdown(dataArray) {
 
   // Creating a select element
@@ -25,7 +17,6 @@ function createDropdown(dataArray) {
 
 
 export const Dropdown = {
-    // createFromJSON : function(json_path){ return createDropdownFromJSON(json_path) },
     create : function(dataArray) { return createDropdown(dataArray) },
 }
 

src/js/components/table/subcomponents/columns.js

@@ -50,20 +50,18 @@ function assignClassToColumn(headerName, className) {
 
     // Find the index of the column by its header name
     const thead = table.tHead;
-    if (!thead || thead.rows.length === 0) {
-        console.error('The table header is not found or has no rows.');
-        return;
-    }
-
     let headerCellIndex = -1;
     const headerCells = thead.rows[0].cells; // Assuming the first row contains header cells (<th>)
     for (let i = 0; i < headerCells.length; i++) {
         if (headerCells[i].textContent.trim() === headerName) {
+            // assign the class to the header cell
+            headerCells[i].classList.add(className);
             headerCellIndex = i;
             break;
         }
     }
 
+    // error check
     if (headerCellIndex === -1) {
         console.error(`No header found with name "${headerName}"`);
         return;
@@ -85,7 +83,7 @@ function addCostClass(headerName){
     assignClassToColumn( headerName, 'cost');
 
     // Get all the cells with the specified class name
-    const cells = document.querySelectorAll(`.cost`);
+    const cells = document.querySelectorAll(`td.cost`);
 
     cells.forEach(cell => {
         // Get the current text content of the cell and assign it to 'value' attribute

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,26 +1,36 @@
 import Header from "./headers.js";
 import { formatCurrency } from "../../../utils/common_utils.js";
 
-async function addNewRow(data_dictionary){
+async function addNewRow(data_dictionary, columns = []){
+
     // 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');
     }
 
-    // add row of data
+    // initialize new row of data
     const new_row = document.createElement('tr');
-    const cell_data_array = Object.values(data_dictionary);
 
-    for (const cell_data of cell_data_array) {
+    // go through each header and add the right cell value depending on its class
+    let thElements = header_row.querySelectorAll('th');
+    thElements.forEach( (header_cell) => {
         // Create new cell and add it to the row
         const newCell = document.createElement('td');
-        newCell.textContent = cell_data;
         new_row.appendChild(newCell);
-    }
+        // 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
     let tbody = table.querySelector('tbody');
@@ -53,8 +63,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/components/table/table.css

@@ -1,5 +1,5 @@
 #main-table {
-    font-size: calc(0.6vw + 0.5em);
+    font-size: calc(0.5vw + 0.5em);
     margin: auto;
     /* width: 100%; */
 }
@@ -8,6 +8,9 @@
     text-align: left;
     background-color: var(--darkGray);
     color: white;
+    position: -webkit-sticky; /* For Safari */
+    position: sticky;
+    top: 0;
 }
 
 th {

src/js/components/table/table.js

@@ -7,6 +7,7 @@ import Header from './subcomponents/headers.js'
 import Rows from './subcomponents/rows.js'
 import Data from './subcomponents/data.js'
 import { saveTableData } from '../../utils/data_utils/local_storage_handlers.js'
+import Tooltip from '../tooltip/tooltip.js';
 
 function adjustTableWidth(width_pct){
     const table = document.getElementById('main-table');
@@ -44,7 +45,13 @@ const Table = {
     clear : clearTable,
     hide : hideTable,
     show : showTable,
-    save : saveTableData
+    save : async function() {
+        // remove the detail text
+        Tooltip.unlink();
+        saveTableData();
+        // relink, depending on page
+        Tooltip.linkAll();
+    }
 }
 
 export default Table;