Updated instant_search_with_htmx sample with use of blocks layout of templatepro 0.7.0

This commit is contained in:
Daniele Teti 2024-09-22 17:05:07 +02:00
parent 34238a48ee
commit c2ed0343cc
5 changed files with 1125 additions and 670 deletions

View File

@ -9,9 +9,13 @@ type
[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 @@ uses
{ 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 @@ begin
finally
lDS.Free;
end;
if not SearchQueryText.IsEmpty then
Context.Response.HXSetPushUrl('?q=' + SearchQueryText)
else
Context.Response.HXSetPushUrl('/');
end;
end.

View File

@ -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/bulma@0.9.4/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>

View File

@ -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/bulma@0.9.4/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}}

View File

@ -60,6 +60,11 @@ begin
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 @@ begin
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

File diff suppressed because it is too large Load Diff