82 lines
2.9 KiB
Svelte
82 lines
2.9 KiB
Svelte
<script module lang="ts">
|
|
import { index as postsIndex } from '@/routes/posts';
|
|
|
|
export const layout = {
|
|
breadcrumbs: [
|
|
{ title: 'Posts', href: postsIndex() },
|
|
{ title: 'Edit Post', href: postsIndex() },
|
|
],
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { useForm } from '@inertiajs/svelte';
|
|
import { update } from '@/actions/App/Http/Controllers/PostController';
|
|
import AppHead from '@/components/AppHead.svelte';
|
|
import InputError from '@/components/InputError.svelte';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
let { post = $bindable() } = $props();
|
|
|
|
const form = useForm({
|
|
title: $state.snapshot(post).title,
|
|
slug: $state.snapshot(post).slug,
|
|
content: $state.snapshot(post).content,
|
|
status: $state.snapshot(post).status,
|
|
});
|
|
|
|
function submit(e: Event) {
|
|
e.preventDefault();
|
|
form.put(update.url(post.slug));
|
|
}
|
|
</script>
|
|
|
|
<AppHead title="Edit Post" />
|
|
|
|
<div class="w-full space-y-6 p-4">
|
|
<h1 class="text-2xl font-bold tracking-tight">Edit Post</h1>
|
|
|
|
<form onsubmit={submit} class="space-y-6">
|
|
<div class="grid gap-2">
|
|
<Label for="title">Title</Label>
|
|
<Input id="title" value={form.title} required />
|
|
<InputError message={form.errors.title} />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="slug">Slug</Label>
|
|
<Input id="slug" value={form.slug} required />
|
|
<InputError message={form.errors.slug} />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="content">Content</Label>
|
|
<textarea
|
|
id="content"
|
|
bind:value={form.content}
|
|
rows="10"
|
|
required
|
|
class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
></textarea>
|
|
<InputError message={form.errors.content} />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="status">Status</Label>
|
|
<select
|
|
id="status"
|
|
bind:value={form.status}
|
|
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<option value="draft">Draft</option>
|
|
<option value="publish">Publish</option>
|
|
</select>
|
|
<InputError message={form.errors.status} />
|
|
</div>
|
|
|
|
<Button type="submit" disabled={form.processing}>Update Post</Button>
|
|
</form>
|
|
</div>
|