377 lines
24 KiB
JavaScript
377 lines
24 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { router, useForm, usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
|
|
function SearchResultList({ items, onSelect, emptyLabel = 'No matches yet.' }) {
|
|
if (!Array.isArray(items) || items.length === 0) {
|
|
return <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-3 text-xs text-slate-500">{emptyLabel}</div>
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-2">
|
|
{items.map((item) => (
|
|
<button
|
|
key={`${item.entity_type}-${item.id}`}
|
|
type="button"
|
|
onClick={() => onSelect(item)}
|
|
className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-3 py-3 text-left transition hover:border-white/20"
|
|
>
|
|
{item.avatar ? <img src={item.avatar} alt={item.title} className="h-10 w-10 rounded-2xl border border-white/10 object-cover" /> : null}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-semibold text-white">{item.title}</div>
|
|
{item.subtitle ? <div className="text-xs uppercase tracking-[0.14em] text-slate-500">{item.subtitle}</div> : null}
|
|
{item.description ? <div className="mt-1 text-xs text-slate-400 line-clamp-2">{item.description}</div> : null}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RelationCard({ relation, index, onChange, onRemove, onSearch, results, relationTypeOptions }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)_auto] lg:items-end">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Type</span>
|
|
<select value={relation.entity_type} onChange={(event) => onChange(index, { ...relation, entity_type: event.target.value, entity_id: '', preview: null, query: '' })} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
{relationTypeOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Search entity</span>
|
|
<div className="flex gap-2">
|
|
<input value={relation.query || ''} onChange={(event) => onChange(index, { ...relation, query: event.target.value })} placeholder="Search by name, slug, or title" className="min-w-0 flex-1 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<button type="button" onClick={() => onSearch(index)} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white">Search</button>
|
|
</div>
|
|
</label>
|
|
<button type="button" onClick={() => onRemove(index)} className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100">Remove</button>
|
|
</div>
|
|
|
|
{relation.preview ? (
|
|
<div className="mt-4 rounded-2xl border border-emerald-300/20 bg-emerald-400/10 p-4 text-sm text-emerald-50">
|
|
<div className="font-semibold">Linked: {relation.preview.title}</div>
|
|
{relation.preview.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.14em] text-emerald-100/70">{relation.preview.subtitle}</div> : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-4">
|
|
<SearchResultList items={results} onSelect={(item) => onChange(index, { ...relation, entity_id: item.id, preview: item, query: item.title })} emptyLabel="Search to attach a related entity." />
|
|
</div>
|
|
|
|
<label className="mt-4 grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Context label</span>
|
|
<input value={relation.context_label || ''} onChange={(event) => onChange(index, { ...relation, context_label: event.target.value })} placeholder="Featured release, Meet the creator, Join this challenge…" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function StudioNewsEditor() {
|
|
const { props } = usePage()
|
|
const article = props.article || {}
|
|
const [authorResults, setAuthorResults] = useState([])
|
|
const [authorQuery, setAuthorQuery] = useState(article.author?.title || article.author?.subtitle?.replace(/^@/, '') || '')
|
|
const [selectedAuthor, setSelectedAuthor] = useState(article.author || props.defaultAuthor || null)
|
|
const [relationResults, setRelationResults] = useState({})
|
|
|
|
const form = useForm({
|
|
title: article.title || '',
|
|
slug: article.slug || '',
|
|
excerpt: article.excerpt || '',
|
|
content: article.content || '',
|
|
cover_image: article.cover_image || '',
|
|
type: article.type || (props.typeOptions?.[0]?.value || 'announcement'),
|
|
category_id: article.category_id || '',
|
|
author_id: article.author_id || props.defaultAuthor?.id || '',
|
|
editorial_status: article.editorial_status || 'draft',
|
|
published_at: article.published_at ? String(article.published_at).slice(0, 16) : '',
|
|
is_featured: Boolean(article.is_featured),
|
|
is_pinned: Boolean(article.is_pinned),
|
|
tag_ids: Array.isArray(article.tag_ids) ? article.tag_ids : [],
|
|
meta_title: article.meta_title || '',
|
|
meta_description: article.meta_description || '',
|
|
meta_keywords: article.meta_keywords || '',
|
|
canonical_url: article.canonical_url || '',
|
|
og_title: article.og_title || '',
|
|
og_description: article.og_description || '',
|
|
og_image: article.og_image || '',
|
|
relations: Array.isArray(article.relations) ? article.relations.map((relation) => ({
|
|
entity_type: relation.entity_type || 'group',
|
|
entity_id: relation.entity_id || '',
|
|
context_label: relation.context_label || '',
|
|
preview: relation.preview || null,
|
|
query: relation.preview?.title || '',
|
|
})) : [],
|
|
})
|
|
|
|
const submit = (event) => {
|
|
event.preventDefault()
|
|
|
|
if (props.updateUrl) {
|
|
form.patch(props.updateUrl)
|
|
return
|
|
}
|
|
|
|
form.post(props.storeUrl)
|
|
}
|
|
|
|
const searchEntities = async (type, query) => {
|
|
const url = new URL(props.entitySearchUrl, window.location.origin)
|
|
url.searchParams.set('type', type)
|
|
url.searchParams.set('q', query)
|
|
|
|
const response = await fetch(url.toString(), {
|
|
headers: {
|
|
Accept: 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
})
|
|
|
|
if (!response.ok) {
|
|
return []
|
|
}
|
|
|
|
const payload = await response.json()
|
|
return Array.isArray(payload.items) ? payload.items : []
|
|
}
|
|
|
|
const runAuthorSearch = async () => {
|
|
const items = await searchEntities('user', authorQuery)
|
|
setAuthorResults(items)
|
|
}
|
|
|
|
const addRelation = () => {
|
|
form.setData('relations', [
|
|
...form.data.relations,
|
|
{
|
|
entity_type: props.relationTypeOptions?.[0]?.value || 'group',
|
|
entity_id: '',
|
|
context_label: '',
|
|
preview: null,
|
|
query: '',
|
|
},
|
|
])
|
|
}
|
|
|
|
const updateRelation = (index, nextRelation) => {
|
|
form.setData('relations', form.data.relations.map((relation, relationIndex) => (relationIndex === index ? nextRelation : relation)))
|
|
}
|
|
|
|
const removeRelation = (index) => {
|
|
form.setData('relations', form.data.relations.filter((_, relationIndex) => relationIndex !== index))
|
|
setRelationResults((current) => {
|
|
const next = { ...current }
|
|
delete next[index]
|
|
return next
|
|
})
|
|
}
|
|
|
|
const runRelationSearch = async (index) => {
|
|
const relation = form.data.relations[index]
|
|
if (!relation) return
|
|
const items = await searchEntities(relation.entity_type, relation.query || '')
|
|
setRelationResults((current) => ({ ...current, [index]: items }))
|
|
}
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<form onSubmit={submit} className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(360px,0.92fr)]">
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="grid gap-4">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Title</span>
|
|
<input value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Slug</span>
|
|
<input value={form.data.slug} onChange={(event) => form.setData('slug', event.target.value)} placeholder="optional-manual-slug" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Cover image URL or path</span>
|
|
<input value={form.data.cover_image} onChange={(event) => form.setData('cover_image', event.target.value)} placeholder="https://... or storage path" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
</div>
|
|
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Excerpt</span>
|
|
<textarea value={form.data.excerpt} onChange={(event) => form.setData('excerpt', event.target.value)} rows={4} className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Body</span>
|
|
<textarea value={form.data.content} onChange={(event) => form.setData('content', event.target.value)} rows={18} placeholder="Write in Markdown. Existing legacy HTML is still supported on render." className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 font-mono text-sm text-white outline-none" />
|
|
</label>
|
|
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">Related entities</h2>
|
|
<p className="mt-1 text-sm text-slate-400">Attach Groups, artworks, collections, releases, projects, challenges, events, and profiles.</p>
|
|
</div>
|
|
<button type="button" onClick={addRelation} className="rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100">Add relation</button>
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-4">
|
|
{form.data.relations.length > 0 ? form.data.relations.map((relation, index) => (
|
|
<RelationCard
|
|
key={`${relation.entity_type}-${index}`}
|
|
relation={relation}
|
|
index={index}
|
|
onChange={updateRelation}
|
|
onRemove={removeRelation}
|
|
onSearch={runRelationSearch}
|
|
results={relationResults[index] || []}
|
|
relationTypeOptions={Array.isArray(props.relationTypeOptions) ? props.relationTypeOptions : []}
|
|
/>
|
|
)) : <div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] p-4 text-sm text-slate-400">No related entities attached yet.</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6">
|
|
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<h2 className="text-xl font-semibold text-white">Publishing</h2>
|
|
<div className="mt-5 grid gap-4">
|
|
{props.previewUrl ? <a href={props.previewUrl} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center gap-2 rounded-2xl border border-indigo-300/20 bg-indigo-400/10 px-4 py-3 text-sm font-semibold text-indigo-100 transition hover:bg-indigo-400/15"><i className="fa-regular fa-eye" />Preview article</a> : null}
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Type</span>
|
|
<select value={form.data.type} onChange={(event) => form.setData('type', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
{(Array.isArray(props.typeOptions) ? props.typeOptions : []).map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Category</span>
|
|
<select value={form.data.category_id || ''} onChange={(event) => form.setData('category_id', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
<option value="">No category</option>
|
|
{(Array.isArray(props.categoryOptions) ? props.categoryOptions : []).map((option) => <option key={option.id} value={option.id}>{option.name}</option>)}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Workflow status</span>
|
|
<select value={form.data.editorial_status} onChange={(event) => form.setData('editorial_status', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
{(Array.isArray(props.statusOptions) ? props.statusOptions : []).map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Publish at</span>
|
|
<input type="datetime-local" value={form.data.published_at || ''} onChange={(event) => form.setData('published_at', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
</div>
|
|
|
|
<div className="grid gap-3 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Author</div>
|
|
<div className="flex gap-2">
|
|
<input value={authorQuery} onChange={(event) => setAuthorQuery(event.target.value)} placeholder="Search for an author" className="min-w-0 flex-1 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
<button type="button" onClick={runAuthorSearch} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white">Search</button>
|
|
</div>
|
|
{selectedAuthor ? (
|
|
<div className="rounded-2xl border border-emerald-300/20 bg-emerald-400/10 p-4 text-sm text-emerald-50">
|
|
<div className="font-semibold">Selected author: {selectedAuthor.title}</div>
|
|
{selectedAuthor.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.14em] text-emerald-100/70">{selectedAuthor.subtitle}</div> : null}
|
|
</div>
|
|
) : null}
|
|
<SearchResultList items={authorResults} onSelect={(item) => {
|
|
setSelectedAuthor(item)
|
|
setAuthorQuery(item.title)
|
|
form.setData('author_id', item.id)
|
|
}} emptyLabel="Search to choose an author profile." />
|
|
</div>
|
|
|
|
<div className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Tags</span>
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{(Array.isArray(props.tagOptions) ? props.tagOptions : []).map((tag) => {
|
|
const checked = form.data.tag_ids.includes(tag.id)
|
|
|
|
return (
|
|
<label key={tag.id} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(event) => {
|
|
if (event.target.checked) {
|
|
form.setData('tag_ids', [...form.data.tag_ids, tag.id])
|
|
return
|
|
}
|
|
|
|
form.setData('tag_ids', form.data.tag_ids.filter((tagId) => tagId !== tag.id))
|
|
}}
|
|
/>
|
|
<span>{tag.name}</span>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.data.is_featured} onChange={(event) => form.setData('is_featured', event.target.checked)} />
|
|
Feature on newsroom surfaces
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white">
|
|
<input type="checkbox" checked={form.data.is_pinned} onChange={(event) => form.setData('is_pinned', event.target.checked)} />
|
|
Pin to the top of the newsroom
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<h2 className="text-xl font-semibold text-white">SEO & social</h2>
|
|
<div className="mt-5 grid gap-4">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Meta title</span>
|
|
<input value={form.data.meta_title} onChange={(event) => form.setData('meta_title', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Meta description</span>
|
|
<textarea value={form.data.meta_description} onChange={(event) => form.setData('meta_description', event.target.value)} rows={3} className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Meta keywords</span>
|
|
<input value={form.data.meta_keywords} onChange={(event) => form.setData('meta_keywords', event.target.value)} placeholder="creator-story, release, tutorial" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Canonical URL</span>
|
|
<input value={form.data.canonical_url} onChange={(event) => form.setData('canonical_url', event.target.value)} placeholder="https://..." className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">OG title</span>
|
|
<input value={form.data.og_title} onChange={(event) => form.setData('og_title', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">OG image</span>
|
|
<input value={form.data.og_image} onChange={(event) => form.setData('og_image', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
</div>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">OG description</span>
|
|
<textarea value={form.data.og_description} onChange={(event) => form.setData('og_description', event.target.value)} rows={3} className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="grid gap-3">
|
|
<button type="submit" disabled={form.processing} className="w-full rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 disabled:opacity-60">Save article</button>
|
|
{props.publishUrl ? <button type="button" onClick={() => router.post(props.publishUrl)} className="w-full rounded-full border border-emerald-300/20 bg-emerald-400/10 px-4 py-3 text-sm font-semibold text-emerald-100">Publish now</button> : null}
|
|
{props.featureUrl ? <button type="button" onClick={() => router.post(props.featureUrl)} className="w-full rounded-full border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white">Toggle featured</button> : null}
|
|
{props.pinUrl ? <button type="button" onClick={() => router.post(props.pinUrl)} className="w-full rounded-full border border-amber-300/20 bg-amber-400/10 px-4 py-3 text-sm font-semibold text-amber-100">Toggle pinned</button> : null}
|
|
{props.archiveUrl ? <button type="button" onClick={() => router.post(props.archiveUrl)} className="w-full rounded-full border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100">Archive article</button> : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</StudioLayout>
|
|
)
|
|
} |