From ff6bfd2ed242fa4fd6d27f3ccf20138b0f22d6af Mon Sep 17 00:00:00 2001
From: Scott Gruenewald <56880046+scottgruenewald@users.noreply.github.com>
Date: Fri, 3 Nov 2023 13:21:03 -0400
Subject: [PATCH] Update table.js

Made keys in mobile cards bold. noDataMessage was not rendering due to an oversight when configuring mobile view. That has been configured. Title was also not rendering when window size was changed. This has been fixed as well.
---
 table.js | 84 +++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 53 insertions(+), 31 deletions(-)

diff --git a/table.js b/table.js
index 5317827..393403e 100644
--- a/table.js
+++ b/table.js
@@ -27,18 +27,16 @@ injectStyles() {
         /* Your styles for mobile container */
       }
       .mobile-table-card {
-        /* Your styles for each card */
         margin-bottom: 10px;
         border: 1px solid #ddd;
         padding: 10px;
         border-radius: 4px;
       }
       .mobile-table-date {
-        /* Your styles for the date section of the card */
         font-weight: bold;
       }
       .mobile-table-details {
-        /* Your styles for the details section of the card */
+
       }
       .table {
         display: none; /* Hide the table on mobile */
@@ -57,27 +55,48 @@ setupResizeListener() {
 updateView(data, columns) {
   // Clear the current content
   this.mainElement.innerHTML = '';
-  console.log(columns)
 
-  // Decide which view to render based on the window size
-  if (this.isMobileDevice()) {
-    const mobileContainer = this.renderMobile(data, columns);
-    this.mainElement.appendChild(mobileContainer);
+  // Check for data length to decide if we need to display noDataMessage
+  if (!data || data.length === 0) {
+    this.renderNoDataMessage();
   } else {
-    const tableContainer = document.createElement('div');
-    tableContainer.className = 'text-center mt-3';
+    // Update or set the title if it exists
+    if (this.title) {
+      const titleElement = document.createElement('h2');
+      titleElement.innerText = this.title;
+      this.mainElement.appendChild(titleElement);
+    }
 
-    const thead = this.createTableHeader(columns);
-    const tbody = this.createTableBody(data, columns);
+    // Decide which view to render based on the window size
+    if (this.isMobileDevice()) {
+      const mobileContainer = this.renderMobile(data, columns);
+      this.mainElement.appendChild(mobileContainer);
+    } else {
+      // Initialize the table
+      this.table.innerHTML = ''; // Ensure table is cleared before adding new content
+      const tableContainer = document.createElement('div');
+      tableContainer.className = 'text-center mt-3';
 
-    this.table.appendChild(thead);
-    this.table.appendChild(tbody);
-    tableContainer.appendChild(this.table);
-    this.mainElement.appendChild(tableContainer);
+      // Create table header and body
+      const thead = this.createTableHeader(columns);
+      const tbody = this.createTableBody(data, columns);
+
+      // Append thead and tbody to the table
+      this.table.appendChild(thead);
+      this.table.appendChild(tbody);
+
+      // Append the table to the table container and then to the main element
+      tableContainer.appendChild(this.table);
+      this.mainElement.appendChild(tableContainer);
+    }
   }
 }
 
-
+renderNoDataMessage() {
+  const messageElement = document.createElement('h2');
+  messageElement.innerText = this.noDataMessage;
+  this.mainElement.appendChild(messageElement);
+}
 
 debounce(func, wait, immediate) {
   let timeout;
@@ -95,24 +114,29 @@ debounce(func, wait, immediate) {
 }
 
 
-
 fetchAndRender() {
   fetch(this.url)
     .then(response => response.text())
     .then(csvString => this.parseCSV(csvString))
     .then(data => {
-      this.currentData = data;
-      this.currentColumns = Object.keys(data[0]);
-      this.renderTable(data);
+      if (data.length > 0) {
+        this.currentData = data;
+        this.currentColumns = Object.keys(data[0]);
+        this.renderTable(data);
+      } else {
+        // If there's no data, call renderTable with an empty array
+        // to ensure the noDataMessage is rendered.
+        this.renderTable([]);
+      }
     })
-    .catch(err => console.error(err));
-
-
-  this.setupResizeListener()
-
+    .catch(err => {
+      console.error(err);
+      // If there's an error (such as a failed fetch), also ensure the noDataMessage is rendered.
+      this.renderTable([]);
+    });
 
+  this.setupResizeListener();
 }
-
 parseCSV(csvString) {
   return Papa.parse(csvString, {
     header: true,
@@ -201,7 +225,7 @@ renderMobile(data, columns) {
     columns.forEach(col => {
       const detail = document.createElement('p');
       const keySpan = document.createElement('span');
-      keySpan.className = 'key-col';
+      keySpan.className = 'key-col fw-bold';
       keySpan.textContent = `${col}: `;
       const valueSpan = document.createElement('span');
       valueSpan.className = 'val-col';
@@ -220,9 +244,7 @@ renderMobile(data, columns) {
 
 renderTable(data) {
   if (data.length === 0) {
-    const messageElement = document.createElement('h2');
-    messageElement.innerText = this.noDataMessage;
-    this.mainElement.appendChild(messageElement);
+    this.renderNoDataMessage()
     return;
   }