mirror of
https://github.com/danieleteti/delphimvcframework.git
synced 2024-11-15 15:55:54 +01:00
HTMX sample
This commit is contained in:
parent
a0cb8928ec
commit
b5261f60c2
@ -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.
|
||||||
|
@ -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>
|
@ -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}}
|
||||||
|
@ -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>
|
14
samples/htmx_mustache/bin/templates/modal.mustache
Normal file
14
samples/htmx_mustache/bin/templates/modal.mustache
Normal 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>
|
@ -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>
|
@ -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>
|
@ -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}}
|
@ -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}}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user