mirror of
https://github.com/danieleteti/delphimvcframework.git
synced 2024-11-15 07:45:54 +01:00
Improved HTMX sample after ITDevCon2023
This commit is contained in:
Daniele Teti
parent
2afda2f61f
commit
ca28352cfb
@ -100,7 +100,7 @@ begin
|
||||
Movies := GetMovieService.ListAll;
|
||||
try
|
||||
ViewData['Movies'] := Movies;
|
||||
if Context.Request.HXIsHTMX then
|
||||
if Context.Request.IsHTMX then
|
||||
begin
|
||||
PageData.S['Explanation'] := 'Loaded via a seamless ajax call';
|
||||
// rendering with htmx, pudsh the URL into the browser bar so a page refresh will not go back to the index page
|
||||
|
||||
@ -64,7 +64,7 @@ begin
|
||||
if WebRequestHandler <> nil then
|
||||
WebRequestHandler.WebModuleClass := WebModuleClass;
|
||||
WebRequestHandlerProc.MaxConnections := 1024;
|
||||
RunServer(8037);
|
||||
RunServer(8080);
|
||||
except
|
||||
on E: Exception do
|
||||
Writeln(E.ClassName, ': ', E.Message);
|
||||
|
||||
@ -96,7 +96,7 @@ begin
|
||||
end;
|
||||
|
||||
begin
|
||||
if WebContext.Request.HXIsHTMX then
|
||||
if WebContext.Request.IsHTMX then
|
||||
begin
|
||||
if SelectedController <> nil then
|
||||
begin
|
||||
|
||||
@ -11,6 +11,7 @@ type
|
||||
TWebSiteController = class(TMVCController)
|
||||
protected
|
||||
function GeneratePeopleListAsCSV: String;
|
||||
procedure OnBeforeAction(AContext: TWebContext; const AActionName: string; var AHandled: Boolean); override;
|
||||
public
|
||||
[MVCPath]
|
||||
[MVCHTTPMethods([httpGET])]
|
||||
@ -181,6 +182,14 @@ begin
|
||||
end;
|
||||
end;
|
||||
|
||||
procedure TWebSiteController.OnBeforeAction(AContext: TWebContext;
|
||||
const AActionName: string; var AHandled: Boolean);
|
||||
begin
|
||||
inherited;
|
||||
SetPagesCommonHeaders(['header']);
|
||||
SetPagesCommonFooters(['footer']);
|
||||
end;
|
||||
|
||||
function TWebSiteController.PeopleList: String;
|
||||
var
|
||||
LDAL: IPeopleDAL;
|
||||
@ -190,7 +199,7 @@ begin
|
||||
lPeople := LDAL.GetPeople;
|
||||
try
|
||||
ViewData['people'] := lPeople;
|
||||
Result := GetRenderedView(['header', 'people_list_search', 'people_list', 'people_list_bottom', 'footer']);
|
||||
Result := Page(['people_list_search', 'people_list', 'people_list_bottom']);
|
||||
finally
|
||||
lPeople.Free;
|
||||
end;
|
||||
@ -207,9 +216,9 @@ begin
|
||||
lPeople := LDAL.GetPeople(SearchText);
|
||||
try
|
||||
ViewData['people'] := lPeople;
|
||||
if Context.Request.HXIsHTMX then
|
||||
if Context.Request.IsHTMX then
|
||||
begin
|
||||
Result := GetRenderedView(['people_list']);
|
||||
Result := PageFragment(['people_list']);
|
||||
if SearchText.IsEmpty then
|
||||
Context.Response.HXSetPushUrl('/people/search')
|
||||
else
|
||||
@ -220,7 +229,7 @@ begin
|
||||
var lJSON := TJSONObject.Create;
|
||||
try
|
||||
lJSON.S['q'] := SearchText;
|
||||
Result := GetRenderedView(['header', 'people_list_search', 'people_list', 'people_list_bottom', 'footer'], lJSON);
|
||||
Result := Page(['people_list_search', 'people_list', 'people_list_bottom'], lJSON);
|
||||
finally
|
||||
lJSON.Free;
|
||||
end;
|
||||
|
||||
@ -1 +1 @@
|
||||
[{"first_name":"Bruce","last_name":"Banner","age":56,"items":"smartphone,dumbphone","guid":"2290EE213DFB4855894A3FC91FE52C17"},{"first_name":"Reed","last_name":"Richards","age":45,"items":"laptop,smartphone","guid":"298CE047B4C24D67B29710BF4ABE290C"},{"first_name":"Scott","last_name":"Summers","age":54,"items":"desktop","guid":"3DACB879E83749EDA68389EBA2286A13"},{"first_name":"Daniele","last_name":"Teti","age":40,"items":"dumbphone,laptop","guid":"C2C002A595694C7CBD3CA1F3123F0EEB"},{"first_name":"Bruce","last_name":"Banner","age":56,"items":"smartphone,dumbphone","guid":"060B7ADFD00949FFA7001ADB85B6724C"},{"first_name":"Daniele","last_name":"Teti","age":40,"items":"smartphone","guid":"92A2145A235F414897C2B90789B28A13"},{"first_name":"Bruce","last_name":"Banner","age":56,"items":"desktop","guid":"97D40FD94580407FA60B9A09EAE2DA8E"},{"first_name":"Bruce","last_name":"Banner","age":66,"items":"smartphone,dumbphone","guid":"77104246D86C4FD298231D481895C212"}]
|
||||
[{"first_name":"Bruce","last_name":"Banner","age":56,"items":"smartphone,dumbphone","guid":"2290EE213DFB4855894A3FC91FE52C17"},{"first_name":"Reed","last_name":"Richards","age":45,"items":"laptop,smartphone","guid":"298CE047B4C24D67B29710BF4ABE290C"},{"first_name":"Scott","last_name":"Summers","age":54,"items":"desktop","guid":"3DACB879E83749EDA68389EBA2286A13"},{"first_name":"Daniele","last_name":"Teti","age":40,"items":"dumbphone,laptop","guid":"C2C002A595694C7CBD3CA1F3123F0EEB"},{"first_name":"Bruce","last_name":"Banner","age":56,"items":"desktop","guid":"97D40FD94580407FA60B9A09EAE2DA8E"}]
|
||||
@ -1,9 +1,8 @@
|
||||
<!--<a hx-delete="/people/delete/{{guid}}" hx-confirm="Are you sure to delete {{first_name}} {{last_name}} ?" href="" hx-swap="delete" hx-target="closest tr">Delete</a>-->
|
||||
|
||||
<button
|
||||
<a
|
||||
hx-get="/people/modal/fordelete/{{guid}}"
|
||||
href=""
|
||||
hx-target="#modals-here"
|
||||
hx-trigger="click"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modals-here"
|
||||
class="btn btn-primary">Delete</button>
|
||||
>Delete</a>
|
||||
@ -1,14 +1,4 @@
|
||||
<script>
|
||||
function doDelete(id) {
|
||||
if (confirm('Are you sure?')) {
|
||||
let form = document.getElementById("myForm");
|
||||
form.action = "/deleteperson";
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="form form-horizontal" id="myForm" name="myForm" hx-post="/people">
|
||||
<form class="form form-horizontal" id="myForm" name="myForm" hx-post="/people">
|
||||
<input type="hidden" value="{{person.guid}}" name="guid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -55,12 +45,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="row" style="padding-top:2rem">
|
||||
<div class="col">
|
||||
<button type="button" class="btn btn-default btn-block" onclick="history.back()">Return to the list</button>
|
||||
<button type="button" class="btn btn-secondary btn-block w-100" onclick="history.back()">Return to the list</button>
|
||||
</div>
|
||||
<div class="offset-5">
|
||||
<div class="col offset-4">
|
||||
</div>
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary btn-block w-100">Save</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{#person}}
|
||||
@ -68,14 +61,12 @@
|
||||
type="button"
|
||||
hx-confirm="Are you sure you wish to delete user?"
|
||||
hx-delete="/people/delete/{{#person}}{{guid}}{{/person}}"
|
||||
class="btn btn-warning btn-block">
|
||||
class="btn btn-danger btn-block w-100">
|
||||
Delete
|
||||
</button>
|
||||
{{/person}}
|
||||
</div>
|
||||
<div class="col">
|
||||
<button type="submit" class="btn btn-primary btn-block">Save</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
</style>
|
||||
</header>
|
||||
|
||||
<body class="text-capitalize">
|
||||
<body hx-boost="true" class="text-capitalize">
|
||||
<div id="main" class="container">
|
||||
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">
|
||||
<h1>✅<a href="https://htmx.org/" target="_blank">HTMX</a> Sample <small><a href="https://github.com/danieleteti/delphimvcframework" target="_blank">DMVCFramework</a></small></h1>
|
||||
<h1>✅<a href="https://htmx.org/" target="_blank">HTMX</a> Sample</h1>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user