103 lines
3.4 KiB
Svelte
103 lines
3.4 KiB
Svelte
<script module lang="ts">
|
|
import { index as postsIndex, create as postsCreate } from '@/routes/posts';
|
|
|
|
export const layout = {
|
|
breadcrumbs: [
|
|
{ title: 'Posts', href: postsIndex() },
|
|
{ title: 'Create Post', href: postsCreate() },
|
|
],
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { useForm } from '@inertiajs/svelte';
|
|
import { store } 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';
|
|
|
|
const form = useForm({
|
|
title: '',
|
|
slug: '',
|
|
content: '',
|
|
status: 'draft',
|
|
});
|
|
|
|
let slugManuallyEdited = false;
|
|
|
|
function handleTitleInput(e: Event) {
|
|
const target = e.target as HTMLInputElement;
|
|
form.title = target.value;
|
|
if (!slugManuallyEdited) {
|
|
form.slug = target.value
|
|
.toLowerCase()
|
|
.replace(/[\s_]+/g, '-')
|
|
.replace(/[^\w-]+/g, '');
|
|
}
|
|
}
|
|
|
|
function submit(e: Event) {
|
|
e.preventDefault();
|
|
form.post(store.url());
|
|
}
|
|
</script>
|
|
|
|
<AppHead title="Create Post" />
|
|
|
|
<div class="w-full space-y-6 p-4">
|
|
<h1 class="text-2xl font-bold tracking-tight">Create 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}
|
|
oninput={handleTitleInput}
|
|
required
|
|
/>
|
|
<InputError message={form.errors.title} />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="slug">Slug</Label>
|
|
<Input
|
|
id="slug"
|
|
value={form.slug}
|
|
oninput={() => (slugManuallyEdited = true)}
|
|
required
|
|
/>
|
|
<InputError message={form.errors.slug} />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="content">Content</Label>
|
|
<textarea
|
|
id="content"
|
|
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}>Create Post</Button>
|
|
</form>
|
|
</div>
|