Skip to content

Commit 016d6a0

Browse files
goatonabicyclegoatonabicycle
committed
Okay. Better admin handling UI. Not yet working.
1 parent c11fe9f commit 016d6a0

File tree

5 files changed

+108
-23
lines changed

5 files changed

+108
-23
lines changed

‎internal/admin/handlers.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ func (h *Handler) AlbumListHandler(c echo.Context) error {
238238
if err != nil {
239239
return c.HTML(500, "Failed to load albums")
240240
}
241-
return h.templates.Render(c.Response().Writer, "admin/components/album-list", map[string]interface{}{
241+
return h.templates.Render(c.Response().Writer, "admin/pages/albums", map[string]interface{}{
242242
"Albums": albums,
243243
}, c)
244244
}
@@ -371,7 +371,7 @@ func (h *Handler) AlbumEditFormHandler(c echo.Context) error {
371371
if err != nil {
372372
return c.HTML(404, "Album not found")
373373
}
374-
return h.templates.Render(c.Response().Writer, "admin/components/album-edit-form", map[string]interface{}{
374+
return h.templates.Render(c.Response().Writer, "admin/pages/album-edit", map[string]interface{}{
375375
"Album": album,
376376
}, c)
377377
}

‎templates/admin/components/album-edit-form.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{{ define "admin/components/album-edit-form" }}
2+
<div id="edit-form-container">
23
<form
34
hx-post="/admin/content/album-edit/{{ .Album.ID }}"
4-
hx-target="#album-edit-modal-content"
5-
hx-swap="innerHTML"
5+
hx-target="#edit-form-container"
6+
hx-swap="outerHTML"
67
class="space-y-4">
78
<div>
89
<label class="block text-sm font-medium mb-1">Artist Name</label>
@@ -12,10 +13,10 @@
1213
<label class="block text-sm font-medium mb-1">Album Name</label>
1314
<input type="text" name="album_name" value="{{ .Album.AlbumName }}" class="w-full p-2 rounded bg-gray-800 text-gray-200 border border-gray-600 focus:border-blue-500" required />
1415
</div>
15-
<!-- Add more fields as needed -->
1616
<div class="flex justify-end gap-2">
17-
<button type="button" class="px-4 py-2 bg-gray-700 text-gray-300 rounded hover:bg-gray-600" onclick="document.getElementById('album-edit-modal').classList.add('hidden')">Cancel</button>
17+
<a href="/admin/content/albums" class="px-4 py-2 bg-gray-700 text-gray-300 rounded hover:bg-gray-600">Cancel</a>
1818
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save</button>
1919
</div>
2020
</form>
21+
</div>
2122
{{ end }}

‎templates/admin/components/album-list.html‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,14 @@
1414
<td class="px-4 py-2">{{ .ArtistName }}</td>
1515
<td class="px-4 py-2">{{ .AlbumName }}</td>
1616
<td class="px-4 py-2 text-right">
17-
<button
17+
<a
1818
class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
19-
hx-get="/admin/content/album-edit/{{ .ID }}"
20-
hx-target="#album-edit-modal-content"
21-
hx-trigger="click"
22-
hx-swap="innerHTML"
23-
_="on htmx:afterSwap add .block to #album-edit-modal remove .hidden from #album-edit-modal"
24-
>Edit</button>
19+
href="/admin/content/album-edit/{{ .ID }}"
20+
>Edit</a>
2521
</td>
2622
</tr>
2723
{{ end }}
2824
</tbody>
2925
</table>
3026
</div>
31-
32-
<!-- Modal for editing -->
33-
<div id="album-edit-modal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 hidden">
34-
<div class="bg-gray-900 rounded-lg shadow-lg p-6 w-full max-w-lg relative">
35-
<button class="absolute top-2 right-2 text-gray-400 hover:text-white" onclick="document.getElementById('album-edit-modal').classList.add('hidden')">&times;</button>
36-
<div id="album-edit-modal-content">
37-
<!-- Edit form will be loaded here via HTMX -->
38-
</div>
39-
</div>
40-
</div>
4127
{{ end }}

‎templates/admin/pages/album-edit.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{{ define "admin/pages/album-edit" }}
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
{{ template "header" . }}
5+
<body class="bg-gray-900 text-gray-200 min-h-screen">
6+
<div class="container mx-auto py-8 max-w-4xl">
7+
<div class="mb-6 flex items-center gap-4">
8+
<a href="/admin/content/albums" class="inline-flex items-center px-3 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 text-sm">
9+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
10+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
11+
</svg>
12+
Back to Albums
13+
</a>
14+
<h1 class="text-2xl font-bold">Edit Album</h1>
15+
</div>
16+
<form
17+
method="POST"
18+
action="/admin/content/album-edit/{{ .Album.ID }}"
19+
class="space-y-6 bg-gray-800 p-6 rounded-lg shadow-lg"
20+
>
21+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
22+
<div>
23+
<label class="block text-sm font-medium mb-1">Artist Name</label>
24+
<input type="text" name="artist_name" value="{{ .Album.ArtistName }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" required />
25+
</div>
26+
<div>
27+
<label class="block text-sm font-medium mb-1">Album Name</label>
28+
<input type="text" name="album_name" value="{{ .Album.AlbumName }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" required />
29+
</div>
30+
<div>
31+
<label class="block text-sm font-medium mb-1">Release Date</label>
32+
<input type="text" name="release_date" value="{{ .Album.ReleaseDate }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" />
33+
</div>
34+
<div>
35+
<label class="block text-sm font-medium mb-1">Genre</label>
36+
<input type="text" name="genre" value="{{ .Album.Genre }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" />
37+
</div>
38+
<div>
39+
<label class="block text-sm font-medium mb-1">Country</label>
40+
<input type="text" name="country" value="{{ .Album.Country }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" />
41+
</div>
42+
<div>
43+
<label class="block text-sm font-medium mb-1">Label</label>
44+
<input type="text" name="label" value="{{ .Album.Label }}" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500" />
45+
</div>
46+
</div>
47+
<div>
48+
<label class="block text-sm font-medium mb-1">Notes</label>
49+
<textarea name="notes" rows="2" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500">{{ .Album.Notes }}</textarea>
50+
</div>
51+
<div class="flex justify-end gap-2">
52+
<a href="/admin/content/albums" class="px-4 py-2 bg-gray-700 text-gray-300 rounded hover:bg-gray-600">Cancel</a>
53+
<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Save Album</button>
54+
</div>
55+
</form>
56+
<div class="mt-10">
57+
<h2 class="text-xl font-semibold mb-4">Tracks</h2>
58+
<div class="space-y-6">
59+
{{ range .Album.Tracks }}
60+
<div class="bg-gray-800 rounded-lg p-4 shadow">
61+
<div class="flex flex-col md:flex-row md:items-center md:gap-6 mb-2">
62+
<div class="flex-1">
63+
<div class="font-semibold text-lg">{{ .TrackNumber }}. {{ .Name }}</div>
64+
<div class="text-gray-400 text-sm">Length: {{ .FormattedLength }}</div>
65+
</div>
66+
</div>
67+
<div>
68+
<label class="block text-sm font-medium mb-1">Lyrics</label>
69+
<textarea name="lyrics_{{ .TrackNumber }}" rows="3" class="w-full p-2 rounded bg-gray-900 text-gray-200 border border-gray-600 focus:border-blue-500">{{ .Lyrics }}</textarea>
70+
</div>
71+
</div>
72+
{{ end }}
73+
</div>
74+
</div>
75+
</div>
76+
</body>
77+
</html>
78+
{{ end }}

‎templates/admin/pages/albums.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{{ define "admin/pages/albums" }}
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
{{ template "header" . }}
5+
<body class="bg-gray-900 text-gray-200 min-h-screen">
6+
<div class="container mx-auto py-8 max-w-4xl">
7+
<div class="mb-6 flex items-center gap-4">
8+
<a href="/admin" class="inline-flex items-center px-3 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 text-sm">
9+
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
10+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
11+
</svg>
12+
Back to Admin Home
13+
</a>
14+
<h1 class="text-2xl font-bold">Albums</h1>
15+
</div>
16+
{{ template "admin/components/album-list" . }}
17+
</div>
18+
</body>
19+
</html>
20+
{{ end }}

0 commit comments

Comments
 (0)