feat: role-based ACL + admin management UI
Backend: - Add acl.ts with requireAuth/requireRole/requireOwnerOrAdmin helpers - Gate premium videos from unauthenticated users in videos query/resolver - Fix updateVideoPlay to verify ownership before updating - Add admin mutations: adminListUsers, adminUpdateUser, adminDeleteUser - Add admin mutations: createVideo, updateVideo, deleteVideo, setVideoModels, adminListVideos - Add admin mutations: createArticle, updateArticle, deleteArticle, adminListArticles - Add deleteComment mutation (owner or admin only) - Add AdminUserListType to GraphQL types - Fix featured filter on articles query Frontend: - Install marked for markdown rendering - Add /admin/* section with sidebar layout and admin-only guard - Admin users page: paginated table with search, role filter, inline role change, delete - Admin videos pages: list, create form, edit form with file upload and model assignment - Admin articles pages: list, create form, edit form with split-pane markdown editor - Add admin nav link in header (desktop + mobile) for admin users - Render article content through marked in magazine detail page - Add all admin GraphQL service functions to services.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
137
packages/frontend/src/routes/admin/articles/+page.svelte
Normal file
137
packages/frontend/src/routes/admin/articles/+page.svelte
Normal file
@@ -0,0 +1,137 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from "$app/navigation";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { deleteArticle } from "$lib/services";
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import type { Article } from "$lib/types";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
|
||||
const { data } = $props();
|
||||
|
||||
const timeAgo = new TimeAgo("en");
|
||||
|
||||
let deleteTarget: Article | null = $state(null);
|
||||
let deleteOpen = $state(false);
|
||||
let deleting = $state(false);
|
||||
|
||||
function confirmDelete(article: Article) {
|
||||
deleteTarget = article;
|
||||
deleteOpen = true;
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!deleteTarget) return;
|
||||
deleting = true;
|
||||
try {
|
||||
await deleteArticle(deleteTarget.id);
|
||||
toast.success("Article deleted");
|
||||
deleteOpen = false;
|
||||
deleteTarget = null;
|
||||
await invalidateAll();
|
||||
} catch {
|
||||
toast.error("Failed to delete article");
|
||||
} finally {
|
||||
deleting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold">Articles</h1>
|
||||
<Button href="/admin/articles/new">
|
||||
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>New article
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-border/40 overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/30">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Article</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Category</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">Published</th>
|
||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/30">
|
||||
{#each data.articles as article (article.id)}
|
||||
<tr class="hover:bg-muted/10 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
{#if article.image}
|
||||
<img
|
||||
src={getAssetUrl(article.image, "mini")}
|
||||
alt=""
|
||||
class="h-10 w-16 rounded object-cover"
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
|
||||
>
|
||||
<span class="icon-[ri--article-line] h-5 w-5"></span>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<p class="font-medium">{article.title}</p>
|
||||
{#if article.featured}
|
||||
<span
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-primary/10 text-primary font-medium"
|
||||
>Featured</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-muted-foreground capitalize">{article.category ?? "—"}</td>
|
||||
<td class="px-4 py-3 text-muted-foreground">
|
||||
{timeAgo.format(new Date(article.publish_date))}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<Button size="sm" variant="ghost" href="/admin/articles/{article.id}">
|
||||
<span class="icon-[ri--edit-line] h-4 w-4"></span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onclick={() => confirmDelete(article)}
|
||||
>
|
||||
<span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
{#if data.articles.length === 0}
|
||||
<tr>
|
||||
<td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
|
||||
No articles yet
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog.Root bind:open={deleteOpen}>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Delete article</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Permanently delete <strong>{deleteTarget?.title}</strong>? This cannot be undone.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
<Dialog.Footer>
|
||||
<Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
|
||||
<Button variant="destructive" disabled={deleting} onclick={handleDelete}>
|
||||
{deleting ? "Deleting…" : "Delete"}
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
Reference in New Issue
Block a user