From b130bb631331ff0dca2d09569db2dcb2268f1246 Mon Sep 17 00:00:00 2001
From: Menno <129762469+rcmenno@users.noreply.github.com>
Date: Fri, 10 May 2024 13:43:03 +0200
Subject: [PATCH] Make sure there's an empty state when listing distributions

---
 PWA/public/RouteEvents.js                       |  1 +
 PWA/public/Services/CacheFilePathService.js     |  1 +
 .../ListDistributionRequestHandler.js           | 13 +++++++++----
 PWA/public/no_distrib.html                      |  9 +++++++++
 PWA/src/RouteEvents.ts                          |  1 +
 PWA/src/Services/CacheFilePathService.ts        |  1 +
 .../ListDistributionRequestHandler.ts           | 17 ++++++++++++-----
 7 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 PWA/public/no_distrib.html

diff --git a/PWA/public/RouteEvents.js b/PWA/public/RouteEvents.js
index fc6e02d..7c5b9c5 100644
--- a/PWA/public/RouteEvents.js
+++ b/PWA/public/RouteEvents.js
@@ -4,6 +4,7 @@ RouteEvents.home = "/index.html";
 RouteEvents.distributionsHome = "/distrib.html";
 RouteEvents.nameDistribution = "/name_distrib.html";
 RouteEvents.listDistributions = "/list_distrib.html";
+RouteEvents.listDistributionsEmptyState = "no_distrib.html";
 RouteEvents.deleteDistribution = "/list_distrib_delete.html";
 RouteEvents.uploadData = "/upload_data.html";
 RouteEvents.viewData = "/view_data.html";
diff --git a/PWA/public/Services/CacheFilePathService.js b/PWA/public/Services/CacheFilePathService.js
index 38ed759..6963347 100644
--- a/PWA/public/Services/CacheFilePathService.js
+++ b/PWA/public/Services/CacheFilePathService.js
@@ -46,6 +46,7 @@ export class CacheFilePathService {
             RouteEvents.distributionsHome,
             RouteEvents.nameDistribution,
             RouteEvents.listDistributions,
+            RouteEvents.listDistributionsEmptyState,
             RouteEvents.deleteDistribution,
             RouteEvents.uploadData,
             RouteEvents.uploadDataError,
diff --git a/PWA/public/Services/FetchEventHandlers/ListDistributionRequestHandler.js b/PWA/public/Services/FetchEventHandlers/ListDistributionRequestHandler.js
index d368981..8fd6717 100644
--- a/PWA/public/Services/FetchEventHandlers/ListDistributionRequestHandler.js
+++ b/PWA/public/Services/FetchEventHandlers/ListDistributionRequestHandler.js
@@ -11,10 +11,15 @@ export class ListDistributionRequestHandler extends ActiveSessionContainer {
         try {
             const distributions = await this.activeSession.database.readDistributions();
             console.log(distributions);
-            return ResponseTools.replaceTemplateKeysWithValues(await fetch(RouteEvents.listDistributions), {
-                columns: Distribution.colums,
-                rows: distributions
-            });
+            if (distributions.length > 0) {
+                return ResponseTools.replaceTemplateKeysWithValues(await fetch(RouteEvents.listDistributions), {
+                    columns: Distribution.colums,
+                    rows: distributions
+                });
+            }
+            else {
+                return ResponseTools.wrapInHtmlTemplate(RouteEvents.listDistributionsEmptyState);
+            }
         }
         catch {
             console.log("something went wrong");
diff --git a/PWA/public/no_distrib.html b/PWA/public/no_distrib.html
new file mode 100644
index 0000000..7a50d56
--- /dev/null
+++ b/PWA/public/no_distrib.html
@@ -0,0 +1,9 @@
+<div class="column is-4 is-offset-4">
+  <div class="box">
+    <label class="label is-medium">No distributions found!</label>
+    <br>
+    <form action="/name_distrib" method="GET">
+      <button class="button is-block is-info is-medium is-fullwidth">Create new distribution</button>
+    </form>
+  </div>
+</div>
\ No newline at end of file
diff --git a/PWA/src/RouteEvents.ts b/PWA/src/RouteEvents.ts
index 7d81f36..fab8c6b 100644
--- a/PWA/src/RouteEvents.ts
+++ b/PWA/src/RouteEvents.ts
@@ -3,6 +3,7 @@ export class RouteEvents {
     static distributionsHome = "/distrib.html"
     static nameDistribution = "/name_distrib.html"
     static listDistributions = "/list_distrib.html"
+    static listDistributionsEmptyState = "no_distrib.html"
     static deleteDistribution = "/list_distrib_delete.html"
     static uploadData = "/upload_data.html"
     static viewData = "/view_data.html"
diff --git a/PWA/src/Services/CacheFilePathService.ts b/PWA/src/Services/CacheFilePathService.ts
index a760913..8caf8a2 100644
--- a/PWA/src/Services/CacheFilePathService.ts
+++ b/PWA/src/Services/CacheFilePathService.ts
@@ -48,6 +48,7 @@ export class CacheFilePathService {
       RouteEvents.distributionsHome,
       RouteEvents.nameDistribution,
       RouteEvents.listDistributions,
+      RouteEvents.listDistributionsEmptyState,
       RouteEvents.deleteDistribution,
       RouteEvents.uploadData,
       RouteEvents.uploadDataError,
diff --git a/PWA/src/Services/FetchEventHandlers/ListDistributionRequestHandler.ts b/PWA/src/Services/FetchEventHandlers/ListDistributionRequestHandler.ts
index 88344ea..9467b05 100644
--- a/PWA/src/Services/FetchEventHandlers/ListDistributionRequestHandler.ts
+++ b/PWA/src/Services/FetchEventHandlers/ListDistributionRequestHandler.ts
@@ -16,11 +16,18 @@ export class ListDistributionRequestHandler extends ActiveSessionContainer imple
     try {
       const distributions: Distribution[] = await this.activeSession.database.readDistributions()
       console.log(distributions)
-      return ResponseTools.replaceTemplateKeysWithValues(
-        await fetch(RouteEvents.listDistributions), { 
-        columns: Distribution.colums,
-        rows: distributions
-      })
+
+      if(distributions.length > 0) {
+        return ResponseTools.replaceTemplateKeysWithValues(
+          await fetch(RouteEvents.listDistributions), { 
+          columns: Distribution.colums,
+          rows: distributions
+        })
+      } else {
+        return ResponseTools.wrapInHtmlTemplate(
+          RouteEvents.listDistributionsEmptyState
+        )
+      }      
     } catch {
       console.log("something went wrong")
     }