Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor: Convert template event handlers to Alpine.js

Browse Source 
Converted all inline onclick/onsubmit handlers to Alpine.js @click/@submit directives and added x-data attributes to template body tags.

Templates updated:
- admin.templ: Added x-data="admin", converted scan/hide buttons
- analytics.templ: Added x-data, converted loadAnalytics button
- api_explorer.templ: Added x-data for API explorer page
- bookshelf.templ: Added x-data, converted library/pagination handlers
- collection_modal.templ: Added x-data for modal components
- collection_rules.templ: Added x-data, converted all rule handlers
- collections.templ: Added x-data, converted navigation/book handlers
- conflicts.templ: Added x-data, converted resolve/dismiss handlers
- header.templ: Converted theme dropdown and user menu handlers
- index.templ: Added x-data for theme/auth
- login.templ: Added x-data for theme switching
- profile.templ: Added x-data, converted delete account
- profile_form.templ: Converted modal close handler
- profile_modal.templ: Added x-data for modal
- progress.templ: Removed script (uses header.logout)
- queue.templ: Added x-data, converted queue handlers
- register.templ: Added x-data for theme
- restore_system_collection_modal.templ: Added x-data
- toast.templ: Converted to x-init with Alpine
- unlinked_books.templ: Added x-data for bulk operations

Dynamic content in devices.templ uses event delegation via data attributes.
This commit is contained in:
john-okeefe
2026-03-08 21:36:02 -04:00
parent b78aacd320
commit 08d45617a7
20 changed files with 1523 additions and 2511 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/collections.templ
+10 -10
View File
@@ -13,7 +13,7 @@ templ Collection(user User, collections []CollectionData, errorMessage string) {
<script src="/static/toast.js"></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }">
<body x-data="collections" class="theme-{ user.Theme }">
@Header(user, "/collections")
<!-- Modal Container -->
<div id="modal-container"></div>
@@ -60,7 +60,7 @@ templ Collection(user User, collections []CollectionData, errorMessage string) {
</div>
}
for _, col := range collections {
<div onclick="navigateToCollection(this)" data-href={ "/collections/" + col.ID } class="block">
<div @click="navigateToCollection($el)" data-href={ "/collections/" + col.ID } class="block">
<div
class="card p-6 rounded-lg border-l-4 cursor-pointer hover:shadow-lg transition-shadow"
style="background-color: var(--bg-secondary);"
@@ -112,11 +112,11 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
<script src="/static/toast.js"></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
<body class="theme-{ user.Theme }">
<body x-data="collections" class="theme-{ user.Theme }">
@Header(user, "/collections")
<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
<div class="mb-6">
<button onclick="backToCollections()" class="btn-secondary px-4 py-2 rounded-lg mb-4">
<button @click="backToCollections()" class="btn-secondary px-4 py-2 rounded-lg mb-4">
← Back to Collections
</button>
<div class="flex items-center gap-4">
@@ -147,13 +147,13 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
</div>
<button
id="bulk-remove-btn"
onclick="removebooksToAdd()"
@click="removebooksToAdd()"
disabled
class="btn-danger px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
>
🗑️ Remove Selected
</button>
<button onclick="showAddBooksModal()" class="btn-primary px-4 py-2 rounded-lg">
<button @click="showAddBooksModal()" class="btn-primary px-4 py-2 rounded-lg">
➕ Add Books
</button>
</div>
@@ -213,7 +213,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
<!-- Remove Button -->
<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
<button
onclick="removeBook('{ book.MediaItemID }')"
@click=\"removeBook('{ book.MediaItemID }')\"
class="px-3 py-1 text-sm border rounded hover:opacity-80"
style="border-color: var(--border); color: var(--text-secondary);"
>
@@ -228,7 +228,7 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
<div class="card rounded-lg p-6 w-full max-w-2xl mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Add Books to Collection</h2>
<button onclick="hideAddBooksModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
<button @click="hideAddBooksModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
</div>
<p class="mb-4" style="color: var(--text-secondary)">Search and select books to add to this collection.</p>
<!-- Library filter toggle - hidden by default, shown by JS when library_id present -->
@@ -249,10 +249,10 @@ templ CollectionDetail(user User, collection CollectionData, books []handlers.Bo
</div>
<div id="book-results" class="max-h-64 overflow-y-auto mb-4"></div>
<div class="flex justify-end space-x-3">
<button type="button" onclick="hideAddBooksModal()" class="btn-secondary px-4 py-2 rounded-lg">
<button type="button" @click="hideAddBooksModal()" class="btn-secondary px-4 py-2 rounded-lg">
Cancel
</button>
<button type="button" onclick="addSelectedBooks()" class="btn-primary px-4 py-2 rounded-lg">
<button type="button" @click="addSelectedBooks()" class="btn-primary px-4 py-2 rounded-lg">
Add Selected Books
</button>
</div>