diff options
| author |   Arthur Zamarin <arthurzam@gentoo.org> | 2024-03-20 22:13:39 +0200 |
|---|---|---|
| committer | Arthur Zamarin <arthurzam@gentoo.org> | 2024-03-20 22:27:06 +0200 |
| commit | cb00bb7463ae3731b329f2ad2ffca38e5e31244a (patch) | |
| tree | 6089f1d72c7ed7220d6519845007fbbe84052cd5 | |
| parent | app/category: optimize and simplify the show (diff) | |
| download | soko-cb00bb7463ae3731b329f2ad2ffca38e5e31244a.tar.gz soko-cb00bb7463ae3731b329f2ad2ffca38e5e31244a.tar.bz2 soko-cb00bb7463ae3731b329f2ad2ffca38e5e31244a.zip | |
app/category: add search for packages list
Signed-off-by: Arthur Zamarin <arthurzam@gentoo.org>
| -rw-r--r-- | pkg/app/handler/categories/show.templ | 17 |
1 files changed, 13 insertions, 4 deletions
diff --git a/pkg/app/handler/categories/show.templ b/pkg/app/handler/categories/show.templ index 92812cc..0cfade3 100644 --- a/pkg/app/handler/categories/show.templ +++ b/pkg/app/handler/categories/show.templ @@ -10,16 +10,24 @@ func packageLetter(name string) string { return strings.ToLower(strings.TrimLeft(name, "_")[:1]) } +script filter() { + const value = document.querySelector("#filter").value.toLowerCase(); + const rows = document.querySelectorAll("#table tr"); + for (let i = 0; i < rows.length; i++) { + rows[i].style.display = rows[i].cells[0].innerText.toLowerCase().includes(value) ? "" : "none"; + } +} + templ showPackages(categoryName string, packages []packageInfo) { <div class="row"> <div class="col-12"> <div class="row"> <div class="col-md-9"> - // <p> - // <input type="text" class="form-control form-control-xl" placeholder="Search packages in <%= @category.name %>"> - // </p> + <p> + <input onKeyup={ filter() } id="filter" type="text" class="form-control form-control-xl" placeholder={ "Search packages in " + categoryName }/> + </p> <div class="card border-top-0 rounded"> - <table class="table mb-0 rounded"> + <table class="table mb-0 rounded" id="table"> for i, pkg := range packages { <tr if i == 0 || packageLetter(pkg.Package) != packageLetter(packages[i-1].Package) { @@ -32,6 +40,7 @@ templ showPackages(categoryName string, packages []packageInfo) { } </table> </div> + @filter() </div> <div class="col-md-3"> <h4>Statistics</h4> |