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

autocomplete

Browse Source
This commit is contained in:
sindhu
2024-05-08 13:36:37 +07:00
parent 48b4de265f
commit fb91440c81
7 changed files with 777 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
views/component/customtextfieldautocomplete/customtextfieldautocomplete.templ Normal file
View File

@@ -0,0 +1,126 @@
package customtextfieldautocomplete;
import (
"github.com/emarifer/go-templ-project-structure/views/layout"
"github.com/emarifer/go-templ-project-structure/services"
)
templ MainCustomAutoComplete(value string) {
<div id="initial" class="form-group">
<input
class="form-control bg-field"
type="text"
autocomplete="off"
placeholder="Search Data..."
id="searchAutocomplete"
name="searchAutocomplete"
hx-get="/client/autocomplete"
hx-trigger="input changed delay:500ms, search"
hx-target="#hasilAutoComplete"
hx-indicator="#indicator"
value={ value }
/>
<div id="hasilAutoComplete">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
}
templ ListCustomAutoCompleteHide() {
<div id="hasilAutoComplete"></div>
}
templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) {
<div id="contentList" class="bootstrap-autocomplete dropdown-menu-custom bg-white show">
if len(data) == 0 {
<a class="dropdown-item" href="#" style="overflow: hidden; text-overflow: ellipsis;">Data Tidak Ditemukan</a>
} else {
for _, d := range data {
<a
hx-trigger="click"
hx-get={ "/client/autoCompleteSetValue/" + d.Name }
hx-swap="outerHTML"
hx-target="#initial"
class="dropdown-item"
style="overflow: hidden; text-overflow: ellipsis;"
>{ d.Name }</a>
}
}
<div class="container px-4">
<div class="row mb-4">
<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<p style="font-style: italic; margin: 0; text-align: left;">{ textFound }</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
if foundCount == totalDataInt {
<a href="#" class="btn btn-link-primary text-primary mr-2 disabled">Show More</a>
} else {
<a
href="#"
hx-get={ "/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit }
hx-trigger="click"
hx-target="#contentList"
hx-swap="outerHTML"
hx-select="#contentList"
hx-indicator="#indicator"
class="text-dark-75 text-hover-primary mr-2"
>Show More</a>
}
</div>
</div>
</div>
</div>
}
templ JsCustomAutoComplete() {
}
templ CssCustomAutoComplete() {
<style>
.htmx-indicator{
display:none;
}
.htmx-request .htmx-indicator{
display:inline;
opacity:1;
}
.htmx-request.htmx-indicator{
display:inline;
opacity:1;
}
.dropdown-menu-custom {
/* position: absolute; */
/* top: 100%; */
/* left: 0; */
/* z-index: 1000; */
/* display: none; */
width: 100%;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
/* color: #212529; */
text-align: left;
list-style: none;
/* background-color: #fff; */
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
</style>
}
templ ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) {
@layout.PlaygroundLayout(title, css, js) {
@cmp
}
}

268
views/component/customtextfieldautocomplete/customtextfieldautocomplete_templ.go Normal file
View File

@@ -0,0 +1,268 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.2.663
package customtextfieldautocomplete
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import "context"
import "io"
import "bytes"
import (
"github.com/emarifer/go-templ-project-structure/services"
"github.com/emarifer/go-templ-project-structure/views/layout"
)
func MainCustomAutoComplete(value string) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"initial\" class=\"form-group\"><input class=\"form-control bg-field\" type=\"text\" autocomplete=\"off\" placeholder=\"Search Data...\" id=\"searchAutocomplete\" name=\"searchAutocomplete\" hx-get=\"/client/autocomplete\" hx-trigger=\"input changed delay:500ms, search\" hx-target=\"#hasilAutoComplete\" hx-indicator=\"#indicator\" value=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(value)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 21, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div id=\"hasilAutoComplete\"><div id=\"indicator\" class=\"position-absolute d-flex justify-content-center spinner-border htmx-indicator\" style=\"z-index: 99;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func ListCustomAutoCompleteHide() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var3 := templ.GetChildren(ctx)
if templ_7745c5c3_Var3 == nil {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"hasilAutoComplete\"></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []services.AutoComplete) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var4 := templ.GetChildren(ctx)
if templ_7745c5c3_Var4 == nil {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"contentList\" class=\"bootstrap-autocomplete dropdown-menu-custom bg-white show\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if len(data) == 0 {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a class=\"dropdown-item\" href=\"#\" style=\"overflow: hidden; text-overflow: ellipsis;\">Data Tidak Ditemukan</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
for _, d := range data {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a hx-trigger=\"click\" hx-get=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/client/autoCompleteSetValue/" + d.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 43, Col: 54}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-swap=\"outerHTML\" hx-target=\"#initial\" class=\"dropdown-item\" style=\"overflow: hidden; text-overflow: ellipsis;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(d.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 48, Col: 13}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container px-4\"><div class=\"row mb-4\"><div id=\"indicator\" class=\"position-absolute d-flex justify-content-center spinner-border htmx-indicator\" style=\"z-index: 99;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div><div class=\"row align-items-center\"><div class=\"col-md-6\"><p style=\"font-style: italic; margin: 0; text-align: left;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(textFound)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 59, Col: 76}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"col-md-6 d-flex justify-content-end\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if foundCount == totalDataInt {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-link-primary text-primary mr-2 disabled\">Show More</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} else {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" hx-get=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs("/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\customtextfieldautocomplete\customtextfieldautocomplete.templ`, Line: 67, Col: 84}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-trigger=\"click\" hx-target=\"#contentList\" hx-swap=\"outerHTML\" hx-select=\"#contentList\" hx-indicator=\"#indicator\" class=\"text-dark-75 text-hover-primary mr-2\">Show More</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func JsCustomAutoComplete() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var9 := templ.GetChildren(ctx)
if templ_7745c5c3_Var9 == nil {
templ_7745c5c3_Var9 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func CssCustomAutoComplete() templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var10 := templ.GetChildren(ctx)
if templ_7745c5c3_Var10 == nil {
templ_7745c5c3_Var10 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<style>\r\n\t.htmx-indicator{\r\n\t\tdisplay:none;\r\n\t}\r\n\t.htmx-request .htmx-indicator{\r\n\t\tdisplay:inline;\r\n\t\topacity:1;\r\n\t}\r\n\t.htmx-request.htmx-indicator{\r\n\t\tdisplay:inline;\r\n\t\topacity:1;\r\n\t}\r\n\r\n .dropdown-menu-custom {\r\n /* position: absolute; */\r\n /* top: 100%; */\r\n /* left: 0; */\r\n /* z-index: 1000; */\r\n /* display: none; */\r\n width: 100%;\r\n float: left;\r\n min-width: 10rem;\r\n padding: 0.5rem 0;\r\n margin: 0.125rem 0 0;\r\n font-size: 1rem;\r\n /* color: #212529; */\r\n text-align: left;\r\n list-style: none;\r\n /* background-color: #fff; */\r\n background-clip: padding-box;\r\n border: 1px solid rgba(0, 0, 0, 0.15);\r\n border-radius: 0.25rem;\r\n }\r\n </style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
if templ_7745c5c3_Var11 == nil {
templ_7745c5c3_Var11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Var12 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
}
return templ_7745c5c3_Err
})
templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}

4
views/mastermenuusergroup/mastermenuusergroup.templ
View File

@@ -5,9 +5,9 @@ import (
"github.com/emarifer/go-templ-project-structure/services"
"github.com/emarifer/go-templ-project-structure/views/component/sidebarmaster"
"github.com/emarifer/go-templ-project-structure/views/component/breadcrumbadmin"
"github.com/emarifer/go-templ-project-structure/views/component/customtextfieldautocomplete"
)
templ MainNavbar(datamenu []services.MasterMenu) {
<div class="aside-menu-wrapper flex-column-fluid" id="kt_aside_menu_wrapper">
<!--begin::Menu Container-->
@@ -190,6 +190,8 @@ templ MainMasterMenuUserGroup(datamenu []services.MasterMenu) {
<div class=" container">
<div class="row">
@breadcrumadmin.MainBreadcrumbAdmin()
// inputan autocomplete
@customtextfieldautocomplete.ShowCustomAutoComplete("", customtextfieldautocomplete.MainCustomAutoComplete(""), customtextfieldautocomplete.CssCustomAutoComplete(), customtextfieldautocomplete.JsCustomAutoComplete())
</div>
</div>
<!--end::Content-->

5
views/mastermenuusergroup/mastermenuusergroup_templ.go
View File

File diff suppressed because one or more lines are too long