139 lines
5.5 KiB
Svelte
139 lines
5.5 KiB
Svelte
<script lang="ts">
|
|
import { invalidateAll } from "$app/navigation";
|
|
import { toast } from "svelte-sonner";
|
|
import { _ } from "svelte-i18n";
|
|
import { deleteVideo } from "$lib/services";
|
|
import { getAssetUrl } from "$lib/api";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { Badge } from "$lib/components/ui/badge";
|
|
import * as Dialog from "$lib/components/ui/dialog";
|
|
import type { Video } from "$lib/types";
|
|
|
|
const { data } = $props();
|
|
|
|
let deleteTarget: Video | null = $state(null);
|
|
let deleteOpen = $state(false);
|
|
let deleting = $state(false);
|
|
|
|
function confirmDelete(video: Video) {
|
|
deleteTarget = video;
|
|
deleteOpen = true;
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (!deleteTarget) return;
|
|
deleting = true;
|
|
try {
|
|
await deleteVideo(deleteTarget.id);
|
|
toast.success($_("admin.videos.delete_success"));
|
|
deleteOpen = false;
|
|
deleteTarget = null;
|
|
await invalidateAll();
|
|
} catch {
|
|
toast.error($_("admin.videos.delete_error"));
|
|
} finally {
|
|
deleting = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="py-3 sm:py-6 sm:pl-6">
|
|
<div class="flex items-center justify-between mb-6 px-3 sm:px-0">
|
|
<h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
|
|
<Button href="/admin/videos/new" class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
|
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.videos.new_video")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
|
|
<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">{$_("admin.videos.col_video")}</th>
|
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.videos.col_badges")}</th>
|
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_plays")}</th>
|
|
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_likes")}</th>
|
|
<th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-border/30">
|
|
{#each data.videos as video (video.id)}
|
|
<tr class="hover:bg-muted/10 transition-colors">
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
{#if video.image}
|
|
<img
|
|
src={getAssetUrl(video.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--film-line] h-5 w-5"></span>
|
|
</div>
|
|
{/if}
|
|
<div>
|
|
<p class="font-medium">{video.title}</p>
|
|
<p class="text-xs text-muted-foreground">{video.slug}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 hidden sm:table-cell">
|
|
<div class="flex gap-1">
|
|
{#if video.premium}
|
|
<Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10">{$_("admin.common.premium")}</Badge>
|
|
{/if}
|
|
{#if video.featured}
|
|
<Badge variant="default">{$_("admin.common.featured")}</Badge>
|
|
{/if}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.plays_count ?? 0}</td>
|
|
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.likes_count ?? 0}</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/videos/{video.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(video)}
|
|
>
|
|
<span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
|
|
{#if data.videos.length === 0}
|
|
<tr>
|
|
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.videos.no_results")}</td>
|
|
</tr>
|
|
{/if}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog.Root bind:open={deleteOpen}>
|
|
<Dialog.Content>
|
|
<Dialog.Header>
|
|
<Dialog.Title>{$_("admin.videos.delete_title")}</Dialog.Title>
|
|
<Dialog.Description>
|
|
{$_("admin.videos.delete_description", { values: { title: deleteTarget?.title } })}
|
|
</Dialog.Description>
|
|
</Dialog.Header>
|
|
<Dialog.Footer>
|
|
<Button variant="outline" onclick={() => (deleteOpen = false)}>{$_("common.cancel")}</Button>
|
|
<Button variant="destructive" disabled={deleting} onclick={handleDelete}>
|
|
{deleting ? $_("admin.common.deleting") : $_("common.delete")}
|
|
</Button>
|
|
</Dialog.Footer>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|