Updated instant_search_with_htmx sample with use of blocks layout of …

…templatepro 0.7.0
danieleteti · Sep 22, 2024 · c2ed034 · c2ed034
1 parent 34238a4
commit c2ed034
Show file tree

Hide file tree

Showing 5 changed files with 1,109 additions and 654 deletions.
diff --git a/samples/instant_search_with_htmx/Controllers.BooksU.pas b/samples/instant_search_with_htmx/Controllers.BooksU.pas
@@ -9,9 +9,13 @@ interface
   [MVCPath]
   TBooksController = class(TMVCController)
   public
+    [MVCPath]
+    [MVCPath]
+    function Index([MVCFromQueryString('query','')] SearchQueryText: String): String;
+
     [MVCPath]
     [MVCPath('/search')]
-    function Search([MVCFromQueryString('query','')] SearchQueryText: String): String;
+    function Search([MVCFromQueryString('q','')] SearchQueryText: String): String;
   end;
 
 implementation
@@ -26,6 +30,11 @@ implementation
 
 { TBooksController }
 
+function TBooksController.Index(SearchQueryText: String): String;
+begin
+  Result := Page(['index']);
+end;
+
 function TBooksController.Search(SearchQueryText: String): String;
 var
   lDS: TDataSet;
@@ -58,6 +67,10 @@ function TBooksController.Search(SearchQueryText: String): String;
   finally
     lDS.Free;
   end;
+  if not SearchQueryText.IsEmpty then
+    Context.Response.HXSetPushUrl('?q=' + SearchQueryText)
+  else
+    Context.Response.HXSetPushUrl('/');
 end;
 
 end.
diff --git a/samples/instant_search_with_htmx/bin/templates/baselayout.html b/samples/instant_search_with_htmx/bin/templates/baselayout.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Books Search</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/htmx.org/dist/htmx.min.js"></script>
+  {{block "headers"}}{{endblock}}
+</head>
+<body hx-indicator="#spinner">
+  <section class="section" >
+    {{block "body"}}{{endblock}}    
+  </section>
+
+    <div class="content has-text-centered">
+      <p>
+      <strong><a href="https://github.com/danieleteti/templatepro">TemplatePRO</a> {{""|version}}</strong> by <a href="https://www.danieleteti.it">Daniele Teti</a>.
+
+      The source code is licensed <a href="https://github.com/danieleteti/templatepro?tab=Apache-2.0-1-ov-file#readme">Apache 2.0</a>.             
+      </p>      
+    </div>
+</body>
+</html>
diff --git a/samples/instant_search_with_htmx/bin/templates/index.html b/samples/instant_search_with_htmx/bin/templates/index.html
@@ -1,25 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Books Search</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
-  <script src="https://cdn.jsdelivr.net/npm/htmx.org/dist/htmx.min.js"></script>
-</head>
-<body hx-indicator="#spinner">
-  <section class="section" >
-    <div class="columns">
-      <div class="column is-one-third is-offset-one-third">
-        <input type="text" class="input" placeholder="Search" name="query" hx-get="/search"          
-          hx-trigger="keyup changed delay:500ms" hx-target="#results" hx-push-url="true" />
-      </div>
-      <div class="column is-one-third">
-        <p class="subtitle is-6">⭐ DMVCFramework + HTMX :: Instant Search Demo ⭐</p>
-      </div>
-    </div>
-    <progress id="spinner" class="htmx-indicator progress is-large is-info" max="100">ciao</progress>    
-    <div id="results">{{include "search_results.html"}}</div>
-  </section>
-</body>
-</html>
+{{extends "baselayout.html"}}
+{{block "body"}}
+<div class="columns">
+  <div class="column is-one-third is-offset-one-third">
+    <input type="text" class="input" placeholder="Search" name="q" hx-get="/search"
+      value="{{""|query,"q"}}"
+      hx-trigger="load, keyup changed delay:500ms" hx-target="#results"/>
+  </div>
+  <div class="column is-one-third">
+    <p class="subtitle is-6">⭐ DMVCFramework + HTMX :: Instant Search Demo ⭐</p>
+  </div>
+</div>
+<progress id="spinner" class="htmx-indicator progress is-large is-info" max="100">ciao</progress>
+<div id="results"></div>
+{{endblock}}
diff --git a/sources/MVCFramework.View.Renderers.TemplatePro.pas b/sources/MVCFramework.View.Renderers.TemplatePro.pas
@@ -60,6 +60,11 @@ function GetDataSetOrObjectListCount(const aValue: TValue; const aParameters: TA
     Result := False;
   end;
 
+  if Length(aParameters) <> 0 then
+  begin
+    Result := '(Error: Expected 0 params, got ' + Length(aParameters).ToString + ')';
+  end;
+
   if aValue.AsObject is TDataSet then
   begin
     Result := TDataSet(aValue.AsObject).RecordCount;
@@ -171,6 +176,18 @@ procedure TMVCTemplateProViewEngine.Execute(const ViewName: string; const Builde
     end;
     lCompiledTemplate.AddFilter('json', DumpAsJSONString);
     lCompiledTemplate.AddFilter('count', GetDataSetOrObjectListCount);
+    lCompiledTemplate.AddFilter('query',
+      function (const aValue: TValue; const aParameters: TArray<string>): TValue
+      begin
+        if Length(aParameters) = 1 then
+        begin
+          Result := Self.WebContext.Request.QueryStringParam(aParameters[0]);
+        end
+        else
+        begin
+          Result := '(Error: Expected 1 param, got ' + Length(aParameters).ToString + ')';
+        end;
+      end);
     Builder.Append(lCompiledTemplate.Render);
   except
     on E: ETProException do