display msg when no deliverables in calendar (#157)

hlxsites · Aug 15, 2024 · 60bae09 · 60bae09
1 parent 84bbd45
commit 60bae09
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css
@@ -189,6 +189,12 @@ body {
 }
 .tab.calendar {
     margin-top:10px;
+    & > .no-data-msg {
+        height: 100px;
+        margin-top: 15px;
+        display: flex;
+        align-items: center;
+    }
     & > .control-wrapper {
         height: 32px;
         padding-top: 1px;

diff --git a/scripts/program-calendar.js b/scripts/program-calendar.js
@@ -28,6 +28,14 @@ export async function buildCalendar(dataObj, block, type, mappingArray, period)
     const currentDate = new Date();
     const currentYear = currentDate.getFullYear();
 
+    // if there are no deliverables, display msg to user and end construction.
+    if (deliverables.length === 0) {
+        const calendarTab = document.querySelector('.calendar.tab');
+        calendarTab.innerHTML = `
+            <div class="no-data-msg">Required Data is Unavailable.</div>
+        `;
+        return;
+    }
 
     // get start of the view
     viewStart = getTimeBounds(deliverables, "start", startDateProp);