chore: Remove obsolete collections HTMX planning document
This file was a planning document that has been superseded by the implementation and is no longer needed.
This commit is contained in:
@@ -1,207 +0,0 @@
|
|||||||
# Collections Page HTMX SSR - COMPLETED
|
|
||||||
|
|
||||||
This document tracks the completed HTMX Server-Side Rendering implementation for the Collections page.
|
|
||||||
|
|
||||||
## Summary
|
|
||||||
|
|
||||||
**Status:** ✅ COMPLETED
|
|
||||||
**Date:** 2025-03-01
|
|
||||||
**Goal:** Replace broken JavaScript with HTMX SSR for all collection CRUD operations
|
|
||||||
|
|
||||||
## What Was Done
|
|
||||||
|
|
||||||
### ✅ 1. Created Modal Templates
|
|
||||||
|
|
||||||
**`templates/collection_modal.templ`** (129 lines)
|
|
||||||
- Single modal template for both create and edit
|
|
||||||
- Uses conditional `if collection.ID != ""` to switch modes
|
|
||||||
- HTMX forms: `hx-post` for create, `hx-put` for edit
|
|
||||||
- Tailwind color buttons (no hex colors)
|
|
||||||
- CSS variables for theming
|
|
||||||
|
|
||||||
**`templates/restore_system_collection_modal.templ`** (32 lines)
|
|
||||||
- Restore system collections modal
|
|
||||||
- HTMX form with `hx-post` to `/api/dashboard/restore-system-collection`
|
|
||||||
- Dropdown with 4 system collections
|
|
||||||
|
|
||||||
### ✅ 2. Added Backend Routes
|
|
||||||
|
|
||||||
**File:** `internal/router/frontend.go`
|
|
||||||
|
|
||||||
Three new routes added (lines 241-294):
|
|
||||||
- `GET /collections/create-modal` - Returns empty modal for create
|
|
||||||
- `GET /collections/:id/edit-modal` - Returns modal with collection data for edit
|
|
||||||
- `GET /collections/restore-modal` - Returns restore system collection modal
|
|
||||||
|
|
||||||
**Important:** Routes placed BEFORE `/collections/:id` to avoid path conflicts.
|
|
||||||
|
|
||||||
### ✅ 3. Updated Collections Page Template
|
|
||||||
|
|
||||||
**File:** `templates/collections.templ`
|
|
||||||
|
|
||||||
**Removed:**
|
|
||||||
- Old delete confirmation modal (lines 21-37)
|
|
||||||
- Old restore system collection modal (lines 38-66)
|
|
||||||
- Old create modal with inline JavaScript (lines 148-198)
|
|
||||||
|
|
||||||
**Already in place:**
|
|
||||||
- Modal container `<div id="modal-container"></div>`
|
|
||||||
- HTMX buttons for create/edit/restore
|
|
||||||
- `hx-confirm` for delete
|
|
||||||
- `hx-redirect` for page reload after operations
|
|
||||||
- Script tag: `<script src="/static/collections.js"></script>`
|
|
||||||
|
|
||||||
### ✅ 4. Created TypeScript Helper
|
|
||||||
|
|
||||||
**File:** `web/src/collections.ts`
|
|
||||||
|
|
||||||
Functions:
|
|
||||||
- `selectColor(color: string)` - Color selection with visual feedback
|
|
||||||
- `closeCollectionModal()` - Closes modal and resets form
|
|
||||||
- `initColorSelection()` - Initializes color selection on page load
|
|
||||||
|
|
||||||
**Compiled to:** `web/static/collections.js`
|
|
||||||
|
|
||||||
### ✅ 5. Generated Templates
|
|
||||||
|
|
||||||
Ran `templ generate` to create:
|
|
||||||
- `templates/collection_modal_templ.go`
|
|
||||||
- `templates/restore_system_collection_modal_templ.go`
|
|
||||||
|
|
||||||
### ✅ 6. Followed Project Guidelines
|
|
||||||
|
|
||||||
- ✅ TailwindCSS classes only (bg-blue-500, etc.)
|
|
||||||
- ✅ CSS variables for theming (var(--text-primary), etc.)
|
|
||||||
- ✅ TypeScript only (no JavaScript)
|
|
||||||
- ✅ No OOP (functional style)
|
|
||||||
- ✅ Full SSR with HTMX
|
|
||||||
- ✅ Progressive enhancement (forms work without JS)
|
|
||||||
|
|
||||||
## How It Works
|
|
||||||
|
|
||||||
### Create Collection
|
|
||||||
1. User clicks "➕ New Collection" button
|
|
||||||
2. HTMX sends GET to `/collections/create-modal`
|
|
||||||
3. Server renders modal (empty form)
|
|
||||||
4. HTMX swaps modal into `#modal-container`
|
|
||||||
5. User fills form and clicks "Create Collection"
|
|
||||||
6. HTMX form submits with `hx-post="/api/collections"`
|
|
||||||
7. On success, `hx-redirect` reloads `/collections` page
|
|
||||||
|
|
||||||
### Edit Collection
|
|
||||||
1. User clicks ✏️ button on collection card
|
|
||||||
2. HTMX sends GET to `/collections/{id}/edit-modal`
|
|
||||||
3. Server fetches collection data and renders modal (pre-filled)
|
|
||||||
4. HTMX swaps modal into `#modal-container`
|
|
||||||
5. User modifies and clicks "Update Collection"
|
|
||||||
6. HTMX form submits with `hx-put="/api/collections/{id}"`
|
|
||||||
7. On success, `hx-redirect` reloads `/collections` page
|
|
||||||
|
|
||||||
### Delete Collection
|
|
||||||
1. User clicks 🗑️ button on collection card
|
|
||||||
2. HTMX `hx-confirm` shows browser's native confirm dialog
|
|
||||||
3. User clicks "Delete"
|
|
||||||
4. HTMX sends DELETE to `/api/collections/{id}`
|
|
||||||
5. On success, `hx-redirect` reloads `/collections` page
|
|
||||||
|
|
||||||
### Restore System Collection
|
|
||||||
1. User clicks "🔄 Restore System" button
|
|
||||||
2. HTMX sends GET to `/collections/restore-modal`
|
|
||||||
3. Server renders restore modal
|
|
||||||
4. HTMX swaps modal into `#modal-container`
|
|
||||||
5. User selects collection and clicks "Restore"
|
|
||||||
6. HTMX form submits with `hx-post="/api/dashboard/restore-system-collection"`
|
|
||||||
7. On success, `hx-redirect` reloads `/collections` page
|
|
||||||
|
|
||||||
## File Changes
|
|
||||||
|
|
||||||
### Created Files
|
|
||||||
- `templates/collection_modal.templ`
|
|
||||||
- `templates/collection_modal_templ.go` (generated)
|
|
||||||
- `templates/restore_system_collection_modal.templ`
|
|
||||||
- `templates/restore_system_collection_modal_templ.go` (generated)
|
|
||||||
|
|
||||||
### Modified Files
|
|
||||||
- `templates/collections.templ` - Removed old JavaScript modals, cleaned up to 147 lines
|
|
||||||
- `web/src/collections.ts` - Color selection functions
|
|
||||||
- `internal/router/frontend.go` - Added 3 modal routes
|
|
||||||
|
|
||||||
### Compiled Files
|
|
||||||
- `web/static/collections.js` - Compiled from TypeScript
|
|
||||||
|
|
||||||
## Verification
|
|
||||||
|
|
||||||
To verify the implementation works:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Build TypeScript
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# Generate templates
|
|
||||||
templ generate
|
|
||||||
|
|
||||||
# Build application
|
|
||||||
go build ./...
|
|
||||||
|
|
||||||
# Start server
|
|
||||||
podman compose up -d
|
|
||||||
|
|
||||||
# Check logs
|
|
||||||
podman compose logs -f server
|
|
||||||
```
|
|
||||||
|
|
||||||
Test at http://localhost:8080/collections:
|
|
||||||
- ✅ Create new collection
|
|
||||||
- ✅ Edit existing collection
|
|
||||||
- ✅ Delete collection (with confirmation)
|
|
||||||
- ✅ Restore system collection
|
|
||||||
- ✅ View collection details
|
|
||||||
|
|
||||||
## Key Discoveries
|
|
||||||
|
|
||||||
### 1. Templ Syntax
|
|
||||||
Cannot use complex conditionals in attribute values:
|
|
||||||
```templ
|
|
||||||
❌ style="border-color: { if collection.ID != "" { collection.Color } else { "blue" } }"
|
|
||||||
✅ style="border-color: { collection.Color }"
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Route Order
|
|
||||||
Modal routes must come before detail routes:
|
|
||||||
```go
|
|
||||||
✅ frontendProtected.GET("/collections/create-modal", ...)
|
|
||||||
✅ frontendProtected.GET("/collections/:id/edit-modal", ...)
|
|
||||||
✅ frontendProtected.GET("/collections/:id", ...) // Must be last
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. HTMX Fragment Inheritance
|
|
||||||
Modal fragments inherit theme from parent page:
|
|
||||||
- No `<html>`, `<head>`, or `<body>` tags in modal templates
|
|
||||||
- Parent page has `<body class="theme-{ user.Theme }">`
|
|
||||||
- CSS variables work correctly in modals
|
|
||||||
|
|
||||||
### 4. Color Handling
|
|
||||||
Backend ensures colors are valid:
|
|
||||||
- Defaults to "blue" if empty
|
|
||||||
- Stored as semantic names: "blue", "red", "yellow", "green", "purple"
|
|
||||||
- Tailwind classes: `bg-blue-500`, `bg-red-500`, etc.
|
|
||||||
|
|
||||||
### 5. Page Reload Cache
|
|
||||||
Browsers cache aggressively. Use `hx-redirect` for clean reload after CRUD operations.
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
Implementation is complete. Optional enhancements:
|
|
||||||
|
|
||||||
1. **Validation:** Add client-side validation for collection name length
|
|
||||||
2. **Bulk operations:** Add bulk delete for multiple collections
|
|
||||||
3. **Sorting:** Add drag-and-drop reordering
|
|
||||||
4. **Search:** Add collection search/filter
|
|
||||||
5. **Export:** Add JSON export/import
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- **Why HTMX?** Follows project guidelines for SSR with minimal JavaScript
|
|
||||||
- **Why single modal template?** Reduces duplication, easier maintenance
|
|
||||||
- **Why modal as fragment?** Inherits theming from parent, no duplicate HTML
|
|
||||||
- **Progressive enhancement:** Forms work without JavaScript (redirect after submit)
|
|
||||||
Reference in New Issue
Block a user