andy/corporate_portal_westerindo
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases Wiki Activity

add loading search dan pagination

Browse Source
This commit is contained in:
Hanan Askarim
2024-05-27 09:58:55 +07:00
parent f6ac4944e8
commit 5b2c63a4d4
3 changed files with 131 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
handlers/dev/md.natunit.handlers.go
View File

@@ -105,16 +105,18 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
)
//filter user group component
natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
"search",
"Cari Kode/Nama",
"text",
"/dev/md/natunit/filter",
"input changed delay:500ms, search",
"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID")
"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID",
dev_mdnatunitview.BeforeRequestContent(),
dev_mdnatunitview.AfterRequestContent())
//Pagination
natUnitPaginationComponent := pagination.PaginationV2(
natUnitPaginationComponent := pagination.PaginationV3(
totalPage,
1,
"/dev/md/natunit/changepage",
@@ -122,6 +124,8 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
"#tableID, #searchID, #"+searchID+", #paginationID",
"#"+paginationID,
"outerHTML", "", "",
dev_mdnatunitview.BeforeRequestContent(),
dev_mdnatunitview.AfterRequestContent(),
)
// content, css, js
@@ -169,7 +173,7 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
}
tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
tableID)
natUnitPaginationComponent := pagination.PaginationV2(
natUnitPaginationComponent := pagination.PaginationV3(
totalpage,
1,
"/dev/md/natunit/changepage",
@@ -177,6 +181,8 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
"#tableID, #searchID, #"+searchID+", #paginationID",
"#"+paginationID,
"outerHTML", "", "",
dev_mdnatunitview.BeforeRequestContent(),
dev_mdnatunitview.AfterRequestContent(),
)
retval = append(retval, tableComponent)
retval = append(retval, natUnitPaginationComponent)
@@ -213,7 +219,7 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
}
tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
tableID)
natUnitPaginationComponent := pagination.PaginationV2(
natUnitPaginationComponent := pagination.PaginationV3(
totalpage,
page,
"/dev/md/natunit/changepage",
@@ -221,6 +227,8 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
"#tableID, #searchID, #"+searchID+", #paginationID",
"#"+paginationID,
"outerHTML", "", "",
dev_mdnatunitview.BeforeRequestContent(),
dev_mdnatunitview.AfterRequestContent(),
)
retval = append(retval, tableComponent)
retval = append(retval, natUnitPaginationComponent)

77
views/dev/mdnatunit/mdnatunit.templ
View File

@@ -50,8 +50,17 @@ templ MdNatUnitScreen(
</div>
</div>
@filterComponent
@tablecontent
@paginationComponent
<div id="loading-parent" class=" rounded">
@tablecontent
@paginationComponent
<div id="loading-child" class=" rounded bg-transparent">
// <div class="spinner spinner-lg spinner-primary"></div>
<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div id="loadingcontent"></div>
</div>
}
@@ -89,6 +98,70 @@ templ CssMdNatUnit() {
}
templ JsMdNatUnit() {
<script>
function onLoadingStart() {
// const loadingParent = document.getElementById("loading-parent");
// const loadingChild = document.getElementById("loading-child");
// const loadingSpinner = document.getElementById("loading-spinner");
// loadingParent.classList.add("overlay");
// loadingParent.classList.add("overlay-block");
// loadingChild.classList.add("overlay-layer");
// loadingSpinner.classList.remove("d-none");
// Additional logic when loading starts
}
function onLoadingEnd() {
console.log('Loading ended');
// const loadingParent = document.getElementById("loading-parent");
// const loadingChild = document.getElementById("loading-child");
// const loadingSpinner = document.getElementById("loading-spinner");
// loadingParent.classList.remove("overlay");
// loadingParent.classList.remove("overlay-block");
// loadingChild.classList.remove("overlay-layer");
// loadingSpinner.classList.add("d-none");
}
document.addEventListener('htmx:beforeRequest', function(event) {
var indicator = document.querySelector('#loadingcontent');
console.log(event.detail.xhr)
console.log(event.detail.elt)
if (indicator) {
onLoadingStart();
}
});
document.addEventListener('htmx:afterRequest', function(event) {
var indicator = document.querySelector('#loadingcontent');
if (indicator) {
onLoadingEnd();
}
});
</script>
}
script BeforeRequestContent() {
const loadingParent = document.getElementById("loading-parent");
const loadingChild = document.getElementById("loading-child");
const loadingSpinner = document.getElementById("loading-spinner");
loadingParent.classList.add("overlay");
loadingParent.classList.add("overlay-block");
loadingChild.classList.add("overlay-layer");
loadingSpinner.classList.remove("d-none");
}
script AfterRequestContent() {
const loadingParent = document.getElementById("loading-parent");
const loadingChild = document.getElementById("loading-child");
const loadingSpinner = document.getElementById("loading-spinner");
loadingParent.classList.remove("overlay");
loadingParent.classList.remove("overlay-block");
loadingChild.classList.remove("overlay-layer");
loadingSpinner.classList.add("d-none");
}
templ ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,

44
views/dev/mdnatunit/mdnatunit_templ.go
View File

@@ -77,6 +77,10 @@ func MdNatUnitScreen(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@@ -85,7 +89,7 @@ func MdNatUnitScreen(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -133,6 +137,10 @@ func JsMdNatUnit() templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n function onLoadingStart() {\r\n // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n // Additional logic when loading starts\r\n }\r\n\r\n function onLoadingEnd() {\r\n console.log('Loading ended');\r\n // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n }\r\n\r\n document.addEventListener('htmx:beforeRequest', function(event) {\r\n var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n if (indicator) {\r\n onLoadingStart();\r\n }\r\n });\r\n\r\n document.addEventListener('htmx:afterRequest', function(event) {\r\n var indicator = document.querySelector('#loadingcontent');\r\n if (indicator) {\r\n onLoadingEnd();\r\n }\r\n });\r\n </script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
@@ -140,6 +148,40 @@ func JsMdNatUnit() templ.Component {
})
}
func BeforeRequestContent() templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_BeforeRequestContent_911f`,
Function: `function __templ_BeforeRequestContent_911f(){const loadingParent = document.getElementById("loading-parent");
const loadingChild = document.getElementById("loading-child");
const loadingSpinner = document.getElementById("loading-spinner");
loadingParent.classList.add("overlay");
loadingParent.classList.add("overlay-block");
loadingChild.classList.add("overlay-layer");
loadingSpinner.classList.remove("d-none");
}`,
Call: templ.SafeScript(`__templ_BeforeRequestContent_911f`),
CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_911f`),
}
}
func AfterRequestContent() templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_AfterRequestContent_6cc0`,
Function: `function __templ_AfterRequestContent_6cc0(){const loadingParent = document.getElementById("loading-parent");
const loadingChild = document.getElementById("loading-child");
const loadingSpinner = document.getElementById("loading-spinner");
loadingParent.classList.remove("overlay");
loadingParent.classList.remove("overlay-block");
loadingChild.classList.remove("overlay-layer");
loadingSpinner.classList.add("d-none");
}`,
Call: templ.SafeScript(`__templ_AfterRequestContent_6cc0`),
CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_6cc0`),
}
}
func ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
navbarmenu templ.Component,
navbaruser templ.Component,