HTMX sample

This commit is contained in:
Daniele Teti 2023-09-26 19:29:03 +02:00
parent a0cb8928ec
commit b5261f60c2
9 changed files with 86 additions and 18 deletions

View File

@ -38,6 +38,12 @@ type
[MVCProduces(TMVCMediaType.TEXT_HTML)] [MVCProduces(TMVCMediaType.TEXT_HTML)]
procedure NewPerson; procedure NewPerson;
[MVCPath('/modal/fordelete/($guid)')]
[MVCHTTPMethods([httpGET])]
[MVCProduces(TMVCMediaType.TEXT_HTML)]
function ShowModalForDelete(guid: string): String;
[MVCPath('/edit/($guid)')] [MVCPath('/edit/($guid)')]
[MVCHTTPMethods([httpGET])] [MVCHTTPMethods([httpGET])]
[MVCProduces(TMVCMediaType.TEXT_HTML)] [MVCProduces(TMVCMediaType.TEXT_HTML)]
@ -48,6 +54,11 @@ type
[MVCProduces(TMVCMediaType.TEXT_HTML)] [MVCProduces(TMVCMediaType.TEXT_HTML)]
procedure Index; procedure Index;
[MVCPath('/modal')]
[MVCHTTPMethods([httpGET])]
[MVCProduces(TMVCMediaType.TEXT_HTML)]
function ShowModal: String;
[MVCPath('/mustacheshowcase')] [MVCPath('/mustacheshowcase')]
[MVCHTTPMethods([httpGET])] [MVCHTTPMethods([httpGET])]
[MVCProduces(TMVCMediaType.TEXT_HTML)] [MVCProduces(TMVCMediaType.TEXT_HTML)]
@ -66,6 +77,7 @@ var
begin begin
LDAL := TServicesFactory.GetPeopleDAL; LDAL := TServicesFactory.GetPeopleDAL;
LDAL.DeleteByGUID(GUID); LDAL.DeleteByGUID(GUID);
Context.Response.SetPageRefresh(true);
RenderStatusMessage(HTTP_STATUS.OK); RenderStatusMessage(HTTP_STATUS.OK);
end; end;
@ -242,4 +254,27 @@ begin
Context.Response.SetRedirect('/people'); Context.Response.SetRedirect('/people');
end; end;
function TWebSiteController.ShowModal: String;
begin
var lJSON := StrToJSONObject('{"message":"Do you really want to delete row?", "title":"Bootstrap Modal Dialog"}');
try
Result := GetRenderedView(['modal'], lJSON);
finally
lJSON.Free;
end;
end;
function TWebSiteController.ShowModalForDelete(guid: string): String;
begin
var lJSON := TJsonObject.Create;
try
lJSON.S['title'] := 'Bootstrap Modal Dialog';
lJSON.S['message'] := 'Do you really want to delete row?';
lJSON.S['guid'] := guid;
Result := GetRenderedView(['modal'], lJSON);
finally
lJSON.Free;
end;
end;
end. end.

View File

@ -1 +1,9 @@
<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> <!--<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
hx-get="/people/modal/fordelete/{{guid}}"
hx-target="#modals-here"
hx-trigger="click"
data-bs-toggle="modal"
data-bs-target="#modals-here"
class="btn btn-primary">Delete</button>

View File

@ -24,7 +24,7 @@
<div class="col"> <div class="col">
<div class="form-group"> <div class="form-group">
<label for="first_name" class="control-label">First name</label> <label for="first_name" class="control-label">First name</label>
<input type="text" value="{{person.first_name}}" class="form-control" id="first_name" placeholder="First name" name="first_name"> <input type="text" value="{{person.first_name}}" class="form-control" id="first_name" placeholder="First name" name="first_name" autocomplete="first_name" >
</div> </div>
</div> </div>
<div class="col"> <div class="col">
@ -46,7 +46,7 @@
<div class="col"> <div class="col">
<div class="form-group"> <div class="form-group">
<label for="items" class="col-sm-10 control-label">Devices</label> <label for="items" class="col-sm-10 control-label">Devices</label>
<select name="items" multiple class="form-control"> <select id="items" name="items" multiple class="form-control">
{{#deviceslist}} {{#deviceslist}}
<option value="{{devicename}}" {{#selected}}selected{{/selected}}>{{devicename}}</option> <option value="{{devicename}}" {{#selected}}selected{{/selected}}>{{devicename}}</option>
{{/deviceslist}} {{/deviceslist}}

View File

@ -1,17 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<header> <header>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
<style> <style>
body { h1 a:hover {
padding: 20px 50px 20px 50px; text-decoration: none;
} }
</style> </style>
</header> </header>
<body> <body class="text-capitalize">
<div id="main" class="container"> <div id="main" class="container">
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded"> <div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">
<h1>HTMX Sample <small>DMVCFramework</small></h1> <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>
</div> </div>

View File

@ -0,0 +1,14 @@
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{title}}</h5>
</div>
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" hx-delete="/people/delete/{{guid}}">Yes, delete it!</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
</div>
</div>
</div>

View File

@ -0,0 +1,9 @@
<div id="modals-here"
class="modal modal-blur fade"
style="display: none"
aria-hidden="false"
tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content"></div>
</div>
</div>

View File

@ -1,5 +1,5 @@
<div class="row_fluid" id="people_list"> <div class="row" id="people_list">
<div class="col-sm-12"> <div class="col">
{{>people_table}} {{>people_table}}
</div> </div>
</div> </div>

View File

@ -1,8 +1,10 @@
<div class="row"> <div class="row padding mx-auto">
<div class="offset-7 col-2"> <div class="col-2 text-left">
<a href="/people/exports/csv" download="people.csv" target="_blank">Export as CSV</a> <a href="/people/exports/csv" class="btn btn-dark" download="people.csv" target="_blank">Export as CSV</a>
</div> </div>
<div class="col-2"> <div class="offset-8 col-2 text-right">
<a hx-boost="true" href="/people/new">Add New Person</a> <button class="btn btn-primary" hx-on:click="window.location.href = '/people/new'">Add New Person</button>
</div> </div>
</div> </div>
{{>partials/modal_placeholder}}

View File

@ -5,4 +5,3 @@
{{#customers2}} {{#customers2}}
{{CUST_NO}}|{{CUSTOMER}}|{{CONTACT_FIRST}}|{{CONTACT_LAST}}|{{PHONE_NO}}|{{ADDRESS_LINE1}}|{{CITY}}|{{COUNTRY}}|{{POSTAL_CODE}} {{CUST_NO}}|{{CUSTOMER}}|{{CONTACT_FIRST}}|{{CONTACT_LAST}}|{{PHONE_NO}}|{{ADDRESS_LINE1}}|{{CITY}}|{{COUNTRY}}|{{POSTAL_CODE}}
{{/customers2}} {{/customers2}}