fix: filters persist after reloading

Author: Diyor Khaydarov

Diff for: components/scaffold/filters/filters.go

@@ -1,8 +1,9 @@
 package filters
 
 import (
-	"fmt"
-	"time"
+	"context"
+
+	"github.com/iota-uz/iota-sdk/pkg/composables"
 )
 
 type Option func(t *TableFilter)
@@ -37,12 +38,39 @@ type OptionItem struct {
 	Label string
 }
 
-// DateFormatter is a simple formatter for date values
-func DateFormatter(value any) string {
-	if ts, ok := value.(time.Time); ok {
-		return fmt.Sprintf(`<div x-data="relativeformat"><span x-text="format('%s')">%s</span></div>`,
-			ts.Format(time.RFC3339),
-			ts.Format("2006-01-02 15:04:05"))
+type TableFilter struct {
+	Name        string
+	formatter   func(o OptionItem) string
+	placeholder string
+	options     []OptionItem
+	multiple    bool
+}
+
+func NewFilter(name string, opts ...Option) *TableFilter {
+	f := &TableFilter{
+		Name: name,
+	}
+	for _, opt := range opts {
+		opt(f)
+	}
+	return f
+}
+
+func (t *TableFilter) Add(opts ...OptionItem) *TableFilter {
+	t.options = append(t.options, opts...)
+	return t
+}
+
+func isOptionChecked(ctx context.Context, name string, opt OptionItem) bool {
+	pgCtx := composables.UsePageCtx(ctx)
+	query := pgCtx.URL.Query()
+	if v := query.Get(name); v == "" {
+		return false
+	}
+	for _, val := range query[name] {
+		if val == opt.Value {
+			return true
+		}
 	}
-	return fmt.Sprintf("%v", value)
+	return false
 }

Diff for: components/scaffold/filters/filters.templ

@@ -1,53 +1,20 @@
 package filters
 
 import (
+	"github.com/Oudwins/tailwind-merge-go"
 	icons "github.com/iota-uz/icons/phosphor"
 	"github.com/iota-uz/iota-sdk/components/base"
 	"github.com/iota-uz/iota-sdk/components/base/input"
 )
 
-type TableFilter struct {
-	Name        string
-	formatter   func(o OptionItem) string
-	placeholder string
-	options     []OptionItem
-	multiple    bool
-}
-
-func NewFilter(name string, opts ...Option) *TableFilter {
-	f := &TableFilter{
-		Name: name,
-	}
-	for _, opt := range opts {
-		opt(f)
-	}
-	return f
-}
-
-func (t *TableFilter) Add(opts ...OptionItem) *TableFilter {
-	t.options = append(t.options, opts...)
-	return t
-}
-
 type DropdownProps struct {
 	Label string
 	Name  string
 }
 
 templ Dropdown(props DropdownProps) {
 	<div
-		x-data="{
-				open: false,
-				selected: [],
-				toggleValue(val) {
-					const index = this.selected.indexOf(val);
-					if (index === -1) {
-						this.selected.push(val);
-					} else {
-						this.selected.splice(index, 1);
-					}
-				}
-			}"
+		x-data="filtersDropdown"
 		class="relative w-32"
 	>
 		<!-- Trigger -->
@@ -102,21 +69,25 @@ templ Dropdown(props DropdownProps) {
 }
 
 type DropdownItemProps struct {
-	Class templ.CSSClasses
-	Label string
-	Value string
-	Name  string
+	Class   templ.CSSClasses
+	Label   string
+	Value   string
+	Name    string
+	Checked bool
 }
 
 templ DropdownItem(props DropdownItemProps) {
 	<li
 		class={
-			"hover:bg-gray-100 p-2",
-			props.Class.String(),
+			twmerge.Merge(
+				"hover:bg-gray-100 p-2",
+				props.Class.String(),
+			),
 		}
 	>
 		@input.Checkbox(&input.CheckboxProps{
-			Label: props.Label,
+			Label:   props.Label,
+			Checked: props.Checked,
 			Attrs: templ.Attributes{
 				"value":    props.Value,
 				"name":     props.Name,
@@ -135,9 +106,10 @@ templ (t *TableFilter) Component() {
 		}) {
 			for _, opt := range t.options {
 				@DropdownItem(DropdownItemProps{
-					Label: opt.Label,
-					Value: opt.Value,
-					Name:  t.Name,
+					Label:   opt.Label,
+					Value:   opt.Value,
+					Name:    t.Name,
+					Checked: isOptionChecked(ctx, t.Name, opt),
 				})
 			}
 		}

Diff for: components/scaffold/filters/filters_templ.go

@@ -78,6 +78,7 @@ templ TableContent(config *TableConfig) {
 		<form
 			class="p-4 flex items-center gap-3"
 			hx-get={ config.DataURL }
+			hx-push-url="true"
 			hx-trigger="keyup changed delay:300ms from:(form input), change changed from:(form select), change from:(form input[type='checkbox'])"
 			hx-target="#table-body"
 			hx-swap="innerHTML"

Diff for: components/scaffold/scaffold.templ

@@ -298,6 +298,23 @@ let combobox = (searchable = false) => ({
   },
 });
 
+let filtersDropdown = () => ({
+  open: false,
+  selected: [],
+  init() {
+    this.selected = Array.from(this.$el.querySelectorAll('input[type=checkbox]:checked'))
+      .map(el => el.value);
+  },
+  toggleValue(val) {
+    const index = this.selected.indexOf(val);
+    if (index === -1) {
+      this.selected.push(val);
+    } else {
+      this.selected.splice(index, 1);
+    }
+  }
+});
+
 let checkboxes = () => ({
   children: [],
   onParentChange(e) {
@@ -440,6 +457,7 @@ document.addEventListener("alpine:init", () => {
   Alpine.data("passwordVisibility", passwordVisibility);
   Alpine.data("dialog", dialog);
   Alpine.data("combobox", combobox);
+  Alpine.data("filtersDropdown", filtersDropdown);
   Alpine.data("checkboxes", checkboxes);
   Alpine.data("spotlight", spotlight);
   Alpine.data("dateFns", dateFns);