Make sure there's an empty state when listing distributions

rodekruis · May 10, 2024 · b130bb6 · b130bb6
1 parent d594836
commit b130bb6
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git 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
@@ -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
@@ -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")
     }