mirror of
https://github.com/danieleteti/delphimvcframework.git
synced 2024-11-15 07:45:54 +01:00
HTMX sample
This commit is contained in:
Daniele Teti
parent
a0cb8928ec
commit
b5261f60c2
@ -38,6 +38,12 @@ type
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
procedure NewPerson;
|
||||
|
||||
[MVCPath('/modal/fordelete/($guid)')]
|
||||
[MVCHTTPMethods([httpGET])]
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
function ShowModalForDelete(guid: string): String;
|
||||
|
||||
|
||||
[MVCPath('/edit/($guid)')]
|
||||
[MVCHTTPMethods([httpGET])]
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
@ -48,6 +54,11 @@ type
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
procedure Index;
|
||||
|
||||
[MVCPath('/modal')]
|
||||
[MVCHTTPMethods([httpGET])]
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
function ShowModal: String;
|
||||
|
||||
[MVCPath('/mustacheshowcase')]
|
||||
[MVCHTTPMethods([httpGET])]
|
||||
[MVCProduces(TMVCMediaType.TEXT_HTML)]
|
||||
@ -66,6 +77,7 @@ var
|
||||
begin
|
||||
LDAL := TServicesFactory.GetPeopleDAL;
|
||||
LDAL.DeleteByGUID(GUID);
|
||||
Context.Response.SetPageRefresh(true);
|
||||
RenderStatusMessage(HTTP_STATUS.OK);
|
||||
end;
|
||||
|
||||
@ -242,4 +254,27 @@ begin
|
||||
Context.Response.SetRedirect('/people');
|
||||
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.
|
||||
|
||||
@ -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="form-group">
|
||||
<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 class="col">
|
||||
@ -46,7 +46,7 @@
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<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}}
|
||||
<option value="{{devicename}}" {{#selected}}selected{{/selected}}>{{devicename}}</option>
|
||||
{{/deviceslist}}
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>
|
||||
<style>
|
||||
body {
|
||||
padding: 20px 50px 20px 50px;
|
||||
h1 a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<body class="text-capitalize">
|
||||
<div id="main" class="container">
|
||||
<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>
|
||||
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="col-sm-12">
|
||||
<div class="row" id="people_list">
|
||||
<div class="col">
|
||||
{{>people_table}}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,8 +1,10 @@
|
||||
<div class="row">
|
||||
<div class="offset-7 col-2">
|
||||
<a href="/people/exports/csv" download="people.csv" target="_blank">Export as CSV</a>
|
||||
<div class="row padding mx-auto">
|
||||
<div class="col-2 text-left">
|
||||
<a href="/people/exports/csv" class="btn btn-dark" download="people.csv" target="_blank">Export as CSV</a>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<a hx-boost="true" href="/people/new">Add New Person</a>
|
||||
<div class="offset-8 col-2 text-right">
|
||||
<button class="btn btn-primary" hx-on:click="window.location.href = '/people/new'">Add New Person</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{>partials/modal_placeholder}}
|
||||
@ -4,5 +4,4 @@
|
||||
---
|
||||
{{#customers2}}
|
||||
{{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