Justin Edmund
9c746d51c0
- use Leaflet types (L.Map, L.Marker, L.LeafletEvent) for map components - use Post and Project types from Prisma for form components - use JSONContent type for editor instances - use Snippet type for Svelte 5 render functions - use EditorView type for TipTap/ProseMirror views - use proper type guards for error handling - add editor interface types for save/clear methods
99 lines
1.8 KiB
Svelte
99 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
|
|
import type { Post } from '@prisma/client'
|
|
|
|
type Props = {
|
|
post: Post
|
|
postType: 'post' | 'essay'
|
|
slug: string
|
|
tags: string[]
|
|
tagInput: string
|
|
triggerElement: HTMLElement
|
|
onAddTag: () => void
|
|
onRemoveTag: (tag: string) => void
|
|
onDelete: () => void
|
|
onClose?: () => void
|
|
onFieldUpdate?: (key: string, value: unknown) => void
|
|
}
|
|
|
|
let {
|
|
post,
|
|
postType,
|
|
slug = $bindable(),
|
|
tags = $bindable(),
|
|
tagInput = $bindable(),
|
|
triggerElement,
|
|
onAddTag,
|
|
onRemoveTag,
|
|
onDelete,
|
|
onClose = () => {},
|
|
onFieldUpdate
|
|
}: Props = $props()
|
|
|
|
function handleFieldUpdate(key: string, value: unknown) {
|
|
if (key === 'slug' && typeof value === 'string') {
|
|
slug = value
|
|
onFieldUpdate?.(key, value)
|
|
} else if (key === 'tagInput' && typeof value === 'string') {
|
|
tagInput = value
|
|
}
|
|
}
|
|
|
|
const config: MetadataConfig = {
|
|
title: 'Post Settings',
|
|
fields: [
|
|
{
|
|
type: 'input',
|
|
key: 'slug',
|
|
label: 'Slug',
|
|
placeholder: 'post-slug'
|
|
},
|
|
{
|
|
type: 'tags',
|
|
key: 'tags',
|
|
label: 'Tags',
|
|
placeholder: 'Add tags...'
|
|
},
|
|
{
|
|
type: 'metadata',
|
|
key: 'metadata'
|
|
}
|
|
],
|
|
deleteButton: {
|
|
label: 'Delete Post',
|
|
action: onDelete
|
|
}
|
|
}
|
|
|
|
// Create a reactive data object
|
|
let popoverData = $state({
|
|
slug,
|
|
tags,
|
|
tagInput,
|
|
createdAt: post.createdAt,
|
|
updatedAt: post.updatedAt,
|
|
publishedAt: post.publishedAt
|
|
})
|
|
|
|
// Sync changes back
|
|
$effect(() => {
|
|
popoverData = {
|
|
slug,
|
|
tags,
|
|
tagInput,
|
|
createdAt: post.createdAt,
|
|
updatedAt: post.updatedAt,
|
|
publishedAt: post.publishedAt
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<GenericMetadataPopover
|
|
{config}
|
|
bind:data={popoverData}
|
|
{triggerElement}
|
|
onUpdate={handleFieldUpdate}
|
|
{onAddTag}
|
|
{onRemoveTag}
|
|
{onClose}
|
|
/>
|