feat: drawers support in scaffolded tables

Author: Diyor Khaydarov

components/scaffold/drawers.templ

@@ -0,0 +1,45 @@
+package scaffold
+
+import (
+	"fmt"
+	icons "github.com/iota-uz/icons/phosphor"
+	"github.com/iota-uz/iota-sdk/components/base/dialog"
+)
+
+type DefaultDrawerProps struct {
+	Title       string
+	CallbackURL string
+}
+
+templ DefaultDrawer(props DefaultDrawerProps) {
+	@dialog.Drawer(dialog.DrawerProps{
+		Direction: dialog.RTL,
+		Action:    "open-default-drawer",
+		Open:      true,
+		Classes:   templ.Classes("flex items-stretch"),
+		Attrs: templ.Attributes{
+			"@closing": fmt.Sprintf("window.history.pushState({}, '', '%s')", props.CallbackURL),
+			"@closed":  "document.getElementById('view-drawer').innerHTML = ''",
+		},
+	}) {
+		<div class="bg-white w-full md:w-[450px] ml-auto">
+			<div class="flex flex-col h-full">
+				<form method="dialog">
+					<div class="flex justify-between px-4 py-3 border-b border-primary">
+						<h3 class="text-lg font-medium">
+							{ props.Title }
+						</h3>
+						<div>
+							<button class="cursor-pointer">
+								@icons.XCircle(icons.Props{Size: "20"})
+							</button>
+						</div>
+					</div>
+				</form>
+				<div class="flex-1 min-h-0">
+					{ children... }
+				</div>
+			</div>
+		</div>
+	}
+}

components/scaffold/drawers_templ.go

@@ -6,6 +6,9 @@ import (
 
 // --- Interfaces ---
 
+type RowOpt func(r *tableRowImpl)
+type ColumnOpt func(c *tableColumnImpl)
+
 type TableColumn interface {
 	Key() string
 	Label() string
@@ -15,6 +18,8 @@ type TableColumn interface {
 
 type TableRow interface {
 	Cells() []templ.Component
+	Atrrs() templ.Attributes
+	ApplyOpts(opts ...RowOpt) TableRow
 }
 
 // --- Private Implementations ---
@@ -33,15 +38,36 @@ func (c *tableColumnImpl) Width() string { return c.width }
 
 type tableRowImpl struct {
 	cells []templ.Component
+	attrs templ.Attributes
 }
 
 func (r *tableRowImpl) Cells() []templ.Component {
 	return r.cells
 }
 
-// --- Column Option Type ---
+func (r *tableRowImpl) Atrrs() templ.Attributes {
+	return r.attrs
+}
 
-type ColumnOpt func(c *tableColumnImpl)
+func (r *tableRowImpl) ApplyOpts(opts ...RowOpt) TableRow {
+	for _, opt := range opts {
+		opt(r)
+	}
+	return r
+}
+
+// --- Row Options ---
+
+func WithDrawer(fetchURL string) RowOpt {
+	return func(r *tableRowImpl) {
+		r.attrs["class"] = r.attrs["class"].(string) + " cursor-pointer"
+		r.attrs["hx-get"] = fetchURL
+		r.attrs["hx-target"] = "#view-drawer"
+		r.attrs["hx-swap"] = "innerHTML"
+	}
+}
+
+// --- Column Options ---
 
 func WithClass(classes string) ColumnOpt {
 	return func(c *tableColumnImpl) {
@@ -51,6 +77,8 @@ func WithClass(classes string) ColumnOpt {
 
 // --- Table Configuration ---
 
+type TableConfigOpt func(c *TableConfig)
+
 type TableConfig struct {
 	Title      string
 	DataURL    string
@@ -60,14 +88,18 @@ type TableConfig struct {
 	SideFilter templ.Component
 }
 
-func NewTableConfig(title, dataURL string) *TableConfig {
-	return &TableConfig{
+func NewTableConfig(title, dataURL string, opts ...TableConfigOpt) *TableConfig {
+	t := &TableConfig{
 		Title:   title,
 		DataURL: dataURL,
 		Columns: []TableColumn{},
 		Filters: []templ.Component{},
 		Rows:    []TableRow{},
 	}
+	for _, o := range opts {
+		o(t)
+	}
+	return t
 }
 
 func Column(key, label string, opts ...ColumnOpt) TableColumn {
@@ -82,7 +114,12 @@ func Column(key, label string, opts ...ColumnOpt) TableColumn {
 }
 
 func Row(cells ...templ.Component) TableRow {
-	return &tableRowImpl{cells: cells}
+	return &tableRowImpl{
+		cells: cells,
+		attrs: templ.Attributes{
+			"class": "hide-on-load",
+		},
+	}
 }
 
 func (c *TableConfig) AddCols(cols ...TableColumn) *TableConfig {

components/scaffold/helpers.go

@@ -28,34 +28,36 @@ templ DateTime(ts time.Time) {
 }
 
 // Rows renders the table rows for a scaffold table
-templ Rows(config *TableConfig) {
+templ Rows(cfg *TableConfig) {
 	{{ pageCtx := composables.UsePageCtx(ctx) }}
 	<tr class="hidden">
-		<td colspan={ fmt.Sprintf("%d", len(config.Columns)) }>
+		<td colspan={ fmt.Sprintf("%d", len(cfg.Columns)) }>
 			@loaders.Spinner(loaders.SpinnerProps{
 				ContainerClass: templ.Classes("flex justify-center items-center py-4"),
 			})
 		</td>
 	</tr>
-	if len(config.Rows) == 0 {
+	if len(cfg.Rows) == 0 {
 		@base.TableRow(base.TableRowProps{
-			Attrs: templ.Attributes{"class": "hide-on-load"},
+			Attrs: templ.Attributes{
+				"class": "hide-on-load",
+			},
 		}) {
 			@base.TableCell(base.TableCellProps{
 				Classes: templ.Classes("text-center"),
 				Attrs: templ.Attributes{
-					"colspan": fmt.Sprintf("%d", len(config.Columns)),
+					"colspan": fmt.Sprintf("%d", len(cfg.Columns)),
 				},
 			}) {
 				{ pageCtx.T("Scaffold.Table.NothingFound") }
 			}
 		}
 	} else {
-		for _, item := range config.Rows {
+		for _, row := range cfg.Rows {
 			@base.TableRow(base.TableRowProps{
-				Attrs: templ.Attributes{"class": "hide-on-load"},
+				Attrs: row.Atrrs(),
 			}) {
-				for _, cell := range item.Cells() {
+				for _, cell := range row.Cells() {
 					@base.TableCell(base.TableCellProps{}) {
 						@cell
 					}
@@ -165,6 +167,8 @@ templ Content(config *TableConfig) {
 		<div class="mt-5">
 			@TableSection(config)
 		</div>
+		<!-- Placeholder for the view drawer -->
+		<div id="view-drawer"></div>
 	</div>
 }