infinite_scroll ok

librasteve · Aug 31, 2024 · 978e442 · 978e442
1 parent 3d035ef
commit 978e442
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 2 deletions.
diff --git a/META6.json b/META6.json
@@ -19,8 +19,9 @@
     "Routes::Examples::Click-To-Load": "lib/Routes/Examples/Click-To-Load.rakumod",
     "Routes::Examples::Delete-Row": "lib/Routes/Examples/Delete-Row.rakumod",
     "Routes::Examples::Edit-Row": "lib/Routes/Examples/Edit-Row.rakumod",
-    "Routes::Examples::Lazy-Loading": "lib/Routes/Examples/Lazy-Loading.rakumod",
-    "Routes::Examples::Inline-Validation": "lib/Routes/Examples/Inline-Validation.rakumod"
+    "Routes::Examples::Inline-Validation": "lib/Routes/Examples/Inline-Validation.rakumod",
+    "Routes::Examples::Infinite-Scroll": "lib/Routes/Examples/Infinite-Scroll.rakumod",
+    "Routes::Examples::Lazy-Loading": "lib/Routes/Examples/Lazy-Loading.rakumod"
   },
   "resources": [
   ],

diff --git a/lib/Routes.rakumod b/lib/Routes.rakumod
@@ -33,5 +33,8 @@ sub routes() is export {
 
         use Routes::Examples::Inline-Validation;
         include inline_validation => inline_validation-routes;
+
+        use Routes::Examples::Infinite-Scroll;
+        include infinite_scroll => infinite_scroll-routes;
     }
 }
diff --git a/lib/Routes/Examples/Infinite-Scroll.rakumod b/lib/Routes/Examples/Infinite-Scroll.rakumod
@@ -0,0 +1,31 @@
+use Cro::HTTP::Router;
+use Cro::WebApp::Template;
+
+sub infinite_scroll-routes() is export {
+
+    sub gen-id($size) { ('A'..'Z',^10).flat.roll($size).join }
+
+    sub gen-contact($i, $page, $size) {
+        {name=>"Agent Smith", email=>"void{$page*$size+$i}@null.org", id=>gen-id($size), last=>False}
+    }
+
+    sub gen-contacts($page=0, $size=20) {
+        sleep(0.4);       #<= delay to make spinner visible
+        my @result = [.&gen-contact($page, $size) for ^$size];
+        @result[*-1]<last> = True;
+        @result;
+    }
+
+    route {
+        template-location 'templates/infinite_scroll';
+
+        get -> {
+            template 'index.crotmp', {contacts=>gen-contacts, next=>2};
+        }
+
+        get -> 'contacts', :$page! {
+            sleep 1;
+            template 'partial.crotmp', {contacts=>gen-contacts($page), next=>($page+1)};
+        }
+    }
+}
diff --git a/templates/infinite_scroll/index.crotmp b/templates/infinite_scroll/index.crotmp
@@ -0,0 +1,24 @@
+<table hx-indicator="#ind">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>ID</th>
+        </tr>
+    </thead>
+    <tbody id="tbody">
+        <@contacts : $c>
+        <?$c.last>
+        <tr hx-get="/infinite_scroll/contacts?page=<.next>" hx-trigger="revealed" hx-swap="afterend" hx-target="this">
+        </?>
+        <!>
+        <tr class="">
+        </!>
+            <td><$c.name></td>
+            <td><$c.email></td>
+            <td><$c.id></td>
+        </tr>
+        </@>
+    </tbody>
+</table>
+<img id="ind" src="/img/bars.svg" width="150" class="htmx-indicator" />
diff --git a/templates/inline_validation/index.crotmp b/templates/inline_validation/index.crotmp
@@ -0,0 +1,33 @@
+<div hx-swap-oob="beforeend:head">
+    <style>
+      .error input {
+          box-shadow: 0 0 3px #CC0000;
+       }
+      .valid input {
+          box-shadow: 0 0 3px #36cc00;
+       }
+    </style>
+</div>
+
+<div id="wrapper">
+    <h3>Signup Form</h3>
+    <p>
+        Enter an email into the input below and on tab out it will be validated. Only "test@test.com" will pass.
+    </p>
+    <form hx-post="/inline_validation/contact" hx-target="#wrapper" hx-swap="outerHTML">
+        <div hx-target="this" hx-swap="outerHTML">
+            <label>Email Address</label>
+            <input name="email" hx-post="/inline_validation/contact/email" hx-indicator="#ind">
+            <img id="ind" src="/static/img/bars.svg" class="htmx-indicator" />
+        </div>
+        <div class="form-group">
+            <label>First Name</label>
+            <input type="text" class="form-control" name="firstName">
+        </div>
+        <div class="form-group">
+            <label>Last Name</label>
+            <input type="text" class="form-control" name="lastName">
+        </div>
+        <button class="btn btn-default" disabled>Submit</button>
+    </form>
+</div>