Skip to content

Commit 5623ded

Browse files
author
Diyor Khaydarov
committed
fix: side filter
1 parent a018b9c commit 5623ded

File tree

9 files changed

+293
-160
lines changed

9 files changed

+293
-160
lines changed

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

+32-22
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import (
66
"github.com/iota-uz/iota-sdk/components/base"
77
"github.com/iota-uz/iota-sdk/components/base/input"
88
"github.com/iota-uz/iota-sdk/pkg/composables"
9+
"github.com/iota-uz/utils/random"
910
)
1011

1112
type DropdownProps struct {
@@ -138,32 +139,41 @@ templ (t *TableFilter) Component() {
138139
}
139140

140141
templ (t *TableFilter) AsSideFilter() {
141-
{{ pageCtx := composables.UsePageCtx(ctx) }}
142-
<div class="space-y-3">
143-
<div>
144-
@input.Checkbox(&input.CheckboxProps{
145-
Label: pageCtx.T("Scaffold.Filters.SelectAll"),
146-
ID: "all-users-checkbox",
147-
Attrs: templ.Attributes{
148-
"class": "parent",
149-
"x-ref": "parent",
150-
"@change": "onParentChange",
151-
},
152-
})
153-
</div>
154-
<hr class="my-3 border-t border-surface-400"/>
155-
<div class="space-y-3">
156-
for _, opt := range t.options {
142+
{{
143+
pageCtx := composables.UsePageCtx(ctx)
144+
id := random.String(12, random.LowerCharSet)
145+
}}
146+
<div class="bg-surface-600 border border-primary rounded-lg p-4 mb-4">
147+
<div
148+
class="space-y-3"
149+
x-data="checkboxes"
150+
x-init="init"
151+
>
152+
<div>
157153
@input.Checkbox(&input.CheckboxProps{
158-
Label: opt.Label,
159-
Checked: isOptionChecked(ctx, t.Name, opt),
154+
Label: pageCtx.T("Scaffold.Filters.SelectAll"),
155+
ID: id,
160156
Attrs: templ.Attributes{
161-
"name": t.Name,
162-
"value": opt.Value,
163-
"@change": "onChange",
157+
"class": "parent",
158+
"x-ref": "parent",
159+
"@change": "onParentChange",
164160
},
165161
})
166-
}
162+
</div>
163+
<hr class="my-3 border-t border-surface-400"/>
164+
<div class="space-y-3">
165+
for _, opt := range t.options {
166+
@input.Checkbox(&input.CheckboxProps{
167+
Label: opt.Label,
168+
Checked: isOptionChecked(ctx, t.Name, opt),
169+
Attrs: templ.Attributes{
170+
"name": t.Name,
171+
"value": opt.Value,
172+
"@change": "onChange",
173+
},
174+
})
175+
}
176+
</div>
167177
</div>
168178
</div>
169179
}

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

+9-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎components/scaffold/scaffold.templ

+57-44
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,36 @@ templ DateTime(ts time.Time) {
2929

3030
// Rows renders the table rows for a scaffold table
3131
templ Rows(config *TableConfig) {
32+
{{ pageCtx := composables.UsePageCtx(ctx) }}
3233
<tr class="hidden">
3334
<td colspan={ fmt.Sprintf("%d", len(config.Columns)) }>
3435
@loaders.Spinner(loaders.SpinnerProps{
3536
ContainerClass: templ.Classes("flex justify-center items-center py-4"),
3637
})
3738
</td>
3839
</tr>
39-
for _, item := range config.Rows {
40+
if len(config.Rows) == 0 {
4041
@base.TableRow(base.TableRowProps{
4142
Attrs: templ.Attributes{"class": "hide-on-load"},
4243
}) {
43-
for _, cell := range item.Cells() {
44-
@base.TableCell(base.TableCellProps{}) {
45-
@cell
44+
@base.TableCell(base.TableCellProps{
45+
Classes: templ.Classes("text-center"),
46+
Attrs: templ.Attributes{
47+
"colspan": fmt.Sprintf("%d", len(config.Columns)),
48+
},
49+
}) {
50+
{ pageCtx.T("Scaffold.Table.NothingFound") }
51+
}
52+
}
53+
} else {
54+
for _, item := range config.Rows {
55+
@base.TableRow(base.TableRowProps{
56+
Attrs: templ.Attributes{"class": "hide-on-load"},
57+
}) {
58+
for _, cell := range item.Cells() {
59+
@base.TableCell(base.TableCellProps{}) {
60+
@cell
61+
}
4662
}
4763
}
4864
}
@@ -75,61 +91,58 @@ templ TableSection(config *TableConfig) {
7591
<form
7692
hx-get={ config.DataURL }
7793
hx-push-url="true"
78-
hx-trigger="keyup changed delay:300ms from:(form input), change from:(form select), change from:(form input[type='checkbox'])"
94+
hx-trigger="keyup changed delay:300ms from:input, change from:select, change from:input[type='checkbox']"
7995
hx-target="#table-body"
8096
hx-swap="innerHTML"
8197
hx-indicator="#table-body"
82-
class="flex gap-5"
83-
x-data="checkboxes"
84-
x-init="init"
8598
>
86-
<!-- Left sidebar with filters -->
87-
if config.SideFilter != nil {
88-
<div class="hidden md:block w-64 flex-shrink-0">
89-
<div class="bg-surface-600 border border-primary rounded-lg p-4 mb-4">
99+
<div class="flex gap-5">
100+
<!-- Left sidebar with filters -->
101+
if config.SideFilter != nil {
102+
<div class="hidden md:block w-64 flex-shrink-0">
90103
@config.SideFilter
91104
</div>
92-
</div>
93-
}
94-
<!-- Main content area with search, filters, and table -->
95-
<div class="flex-1">
96-
<div class="bg-surface-600 border border-primary rounded-lg">
97-
<div class="p-4 flex flex-row md:items-center gap-3">
98-
<div class="flex-1">
99-
@input.Text(&input.Props{
100-
AddonLeft: &input.Addon{
101-
Component: icons.MagnifyingGlass(icons.Props{Size: "20"}),
102-
},
103-
Placeholder: pageCtx.T("Search"),
104-
Attrs: templ.Attributes{
105-
"name": "search",
106-
"value": "",
107-
},
108-
})
109-
</div>
110-
<div class="hidden md:flex gap-3 h-full">
111-
for _, filter := range config.Filters {
112-
@filter
113-
}
105+
}
106+
<!-- Main content area with search, filters, and table -->
107+
<div class="flex-1">
108+
<div class="bg-surface-600 border border-primary rounded-lg">
109+
<div class="p-4 flex flex-row md:items-center gap-3">
110+
<div class="flex-1">
111+
@input.Text(&input.Props{
112+
AddonLeft: &input.Addon{
113+
Component: icons.MagnifyingGlass(icons.Props{Size: "20"}),
114+
},
115+
Placeholder: pageCtx.T("Search"),
116+
Attrs: templ.Attributes{
117+
"name": "Search",
118+
"value": "",
119+
},
120+
})
121+
</div>
122+
<div class="hidden md:flex gap-3 h-full">
123+
for _, filter := range config.Filters {
124+
@filter
125+
}
126+
</div>
114127
</div>
128+
@Table(config)
115129
</div>
116-
@Table(config)
117130
</div>
118131
</div>
132+
@filters.Drawer(filters.DrawerProps{
133+
Heading: pageCtx.T("Scaffold.Filters.Title"),
134+
Action: "open-filters",
135+
}) {
136+
@config.SideFilter
137+
for _, filter := range config.Filters {
138+
@filter
139+
}
140+
}
119141
</form>
120142
}
121143

122144
// Content renders the complete scaffold page content with filters and table
123145
templ Content(config *TableConfig) {
124-
{{ pageCtx := composables.UsePageCtx(ctx) }}
125-
@filters.Drawer(filters.DrawerProps{
126-
Heading: pageCtx.T("Scaffold.Filters.Title"),
127-
Action: "open-filters",
128-
}) {
129-
for _, filter := range config.Filters {
130-
@filter
131-
}
132-
}
133146
<div class="m-6">
134147
<div class="flex justify-between md:justify-start">
135148
<h1 class="text-2xl font-medium">

0 commit comments

Comments
 (0)