637 lines
26 KiB
PHP
637 lines
26 KiB
PHP
<x-layouts.app :title="$document->exists ? $document->title : __('Create content document')">
|
|
<div class="mx-auto max-w-7xl space-y-6" id="content-editor">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<a href="{{ route('content.index') }}" class="text-sm text-zinc-500 hover:underline">
|
|
Content documents
|
|
</a>
|
|
<h1 class="mt-1 text-2xl font-semibold">
|
|
{{ $document->exists ? $document->title : 'Create content document' }}
|
|
</h1>
|
|
<p class="mt-1 text-sm text-zinc-500">
|
|
Edit every frontend field below. JSON is retained only as an emergency advanced tool.
|
|
</p>
|
|
</div>
|
|
|
|
@if ($document->exists)
|
|
<div class="flex flex-wrap gap-2">
|
|
<form method="POST" action="{{ route('content.documents.duplicate', $document) }}">
|
|
@csrf
|
|
<flux:button type="submit" size="sm">Create independent copy</flux:button>
|
|
</form>
|
|
|
|
<form
|
|
method="POST"
|
|
action="{{ route('content.documents.destroy', $document) }}"
|
|
onsubmit="return confirm('Delete this unplaced document permanently?')"
|
|
>
|
|
@csrf
|
|
@method('DELETE')
|
|
<flux:button type="submit" size="sm" variant="danger">Delete</flux:button>
|
|
</form>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if (session('status'))
|
|
<div class="rounded-xl border border-green-300 bg-green-50 p-4 text-sm text-green-800">
|
|
{{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800">
|
|
<ul class="list-disc pl-5">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($document->exists && $document->placements->count() > 1)
|
|
<div class="rounded-xl border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900">
|
|
<strong>Shared document.</strong>
|
|
Changes affect all {{ $document->placements->count() }} placements.
|
|
</div>
|
|
@endif
|
|
|
|
<form
|
|
method="POST"
|
|
action="{{ $document->exists ? route('content.documents.update', $document) : route('content.documents.store') }}"
|
|
class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_21rem]"
|
|
id="document-form"
|
|
>
|
|
@csrf
|
|
@if ($document->exists)
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<div class="space-y-6">
|
|
<flux:card class="space-y-5">
|
|
<h2 class="text-lg font-semibold">Document</h2>
|
|
<flux:input name="title" label="Internal title" value="{{ old('title', $document->title) }}" required />
|
|
<flux:input name="slug" label="Slug" value="{{ old('slug', $document->slug) }}" />
|
|
<flux:select name="content_type_id" label="Content type" id="content-type-select" required>
|
|
@foreach ($types as $type)
|
|
<option
|
|
value="{{ $type->id }}"
|
|
@selected((int) old('content_type_id', $selectedType?->id) === $type->id)
|
|
>
|
|
{{ $type->name }}
|
|
</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</flux:card>
|
|
|
|
<flux:card class="space-y-5">
|
|
<div class="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Frontend content</h2>
|
|
<p class="text-sm text-zinc-500">
|
|
Switches take effect when this document is saved.
|
|
</p>
|
|
</div>
|
|
<span id="schema-status" class="rounded-full bg-zinc-100 px-3 py-1 text-xs text-zinc-600"></span>
|
|
</div>
|
|
|
|
<div id="schema-fields" class="space-y-5"></div>
|
|
|
|
<details class="rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
|
<summary class="cursor-pointer text-sm font-medium">Advanced JSON (emergency use only)</summary>
|
|
<p class="mt-2 text-xs text-zinc-500">
|
|
Normal editing should be performed with the controls above.
|
|
</p>
|
|
<textarea
|
|
id="data-json"
|
|
class="mt-4 min-h-80 w-full rounded-xl border border-zinc-300 bg-white p-4 font-mono text-sm dark:border-zinc-700 dark:bg-zinc-950"
|
|
name="data_json"
|
|
spellcheck="false"
|
|
>{{ old('data_json', json_encode($document->data ?: [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)) }}</textarea>
|
|
</details>
|
|
</flux:card>
|
|
</div>
|
|
|
|
<aside class="space-y-6">
|
|
<flux:card class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Publishing</h2>
|
|
<flux:select name="status" label="Status">
|
|
<option value="draft" @selected(old('status', $document->status ?: 'draft') === 'draft')>Draft</option>
|
|
<option value="published" @selected(old('status', $document->status) === 'published')>Published</option>
|
|
</flux:select>
|
|
<flux:input
|
|
type="datetime-local"
|
|
name="published_at"
|
|
label="Publish at"
|
|
value="{{ old('published_at', $document->published_at?->format('Y-m-d\TH:i')) }}"
|
|
/>
|
|
<flux:input
|
|
type="datetime-local"
|
|
name="expires_at"
|
|
label="Expire at"
|
|
value="{{ old('expires_at', $document->expires_at?->format('Y-m-d\TH:i')) }}"
|
|
/>
|
|
<flux:button type="submit" variant="primary" class="w-full">Save document</flux:button>
|
|
</flux:card>
|
|
|
|
@if ($document->exists)
|
|
<flux:card>
|
|
<h2 class="text-lg font-semibold">Usage</h2>
|
|
<div class="mt-3 space-y-2">
|
|
@forelse ($document->placements as $placement)
|
|
<a
|
|
class="block rounded-lg border p-3 text-sm"
|
|
href="{{ route('content.pages.edit', $placement->page_key) }}"
|
|
>
|
|
<strong>{{ ucfirst($placement->page_key) }}</strong>
|
|
<span class="block text-xs uppercase text-zinc-500">{{ $placement->region }}</span>
|
|
</a>
|
|
@empty
|
|
<p class="text-sm text-zinc-500">Not placed on a page.</p>
|
|
@endforelse
|
|
</div>
|
|
</flux:card>
|
|
@endif
|
|
</aside>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const rawSchemas = @json($types->mapWithKeys(fn ($type) => [(string) $type->id => $type->schema ?? []]));
|
|
const dataField = document.getElementById('data-json');
|
|
const host = document.getElementById('schema-fields');
|
|
const typeSelect = document.getElementById('content-type-select');
|
|
const status = document.getElementById('schema-status');
|
|
const form = document.getElementById('document-form');
|
|
|
|
let data = parseObject(dataField.value);
|
|
|
|
function parseObject(value) {
|
|
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
|
return value;
|
|
}
|
|
|
|
try {
|
|
const parsed = JSON.parse(value || '{}');
|
|
|
|
return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
|
|
? parsed
|
|
: {};
|
|
} catch (_) {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function normaliseSchema(raw) {
|
|
if (typeof raw === 'string') {
|
|
try {
|
|
raw = JSON.parse(raw);
|
|
} catch (_) {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
if (Array.isArray(raw)) {
|
|
return raw;
|
|
}
|
|
|
|
if (! raw || typeof raw !== 'object') {
|
|
return [];
|
|
}
|
|
|
|
if (Array.isArray(raw.fields)) {
|
|
return raw.fields;
|
|
}
|
|
|
|
if (Array.isArray(raw.schema)) {
|
|
return raw.schema;
|
|
}
|
|
|
|
return Object.values(raw).filter(
|
|
field => field && typeof field === 'object' && field.key
|
|
);
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value ?? '').replace(/[&<>"']/g, character => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": ''',
|
|
})[character]);
|
|
}
|
|
|
|
function pathParts(path) {
|
|
return String(path || '')
|
|
.split('.')
|
|
.filter(part => part !== '');
|
|
}
|
|
|
|
function getAtPath(path) {
|
|
return pathParts(path).reduce((value, part) => {
|
|
if (value === undefined || value === null) {
|
|
return undefined;
|
|
}
|
|
|
|
return value[part];
|
|
}, data);
|
|
}
|
|
|
|
function setAtPath(path, value) {
|
|
const parts = pathParts(path);
|
|
|
|
if (! parts.length) {
|
|
return;
|
|
}
|
|
|
|
let target = data;
|
|
|
|
parts.forEach((part, index) => {
|
|
const isLast = index === parts.length - 1;
|
|
|
|
if (isLast) {
|
|
target[part] = value;
|
|
return;
|
|
}
|
|
|
|
const nextPart = parts[index + 1];
|
|
const shouldBeArray = /^\d+$/.test(nextPart);
|
|
|
|
if (
|
|
target[part] === undefined
|
|
|| target[part] === null
|
|
|| typeof target[part] !== 'object'
|
|
) {
|
|
target[part] = shouldBeArray ? [] : {};
|
|
}
|
|
|
|
target = target[part];
|
|
});
|
|
|
|
syncJson();
|
|
}
|
|
|
|
function fieldForPath(schema, path) {
|
|
const parts = pathParts(path);
|
|
let fields = schema;
|
|
let matched = null;
|
|
|
|
for (const part of parts) {
|
|
if (/^\d+$/.test(part)) {
|
|
continue;
|
|
}
|
|
|
|
matched = (fields || []).find(field => field.key === part) ?? null;
|
|
|
|
if (! matched) {
|
|
return null;
|
|
}
|
|
|
|
fields = matched.fields || [];
|
|
}
|
|
|
|
return matched;
|
|
}
|
|
|
|
function defaultValue(field) {
|
|
if (Object.prototype.hasOwnProperty.call(field, 'default')) {
|
|
return structuredClone(field.default);
|
|
}
|
|
|
|
if (field.type === 'boolean') {
|
|
return false;
|
|
}
|
|
|
|
if (field.type === 'repeater') {
|
|
return [];
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
function newRepeaterItem(field) {
|
|
const item = {};
|
|
|
|
(field.fields || []).forEach(child => {
|
|
item[child.key] = defaultValue(child);
|
|
});
|
|
|
|
return item;
|
|
}
|
|
|
|
function hydrateMissingFields(fields, target) {
|
|
(fields || []).forEach(field => {
|
|
if (! Object.prototype.hasOwnProperty.call(target, field.key)) {
|
|
target[field.key] = defaultValue(field);
|
|
}
|
|
|
|
if (field.type === 'repeater') {
|
|
if (! Array.isArray(target[field.key])) {
|
|
target[field.key] = [];
|
|
}
|
|
|
|
target[field.key].forEach(item => {
|
|
if (item && typeof item === 'object' && ! Array.isArray(item)) {
|
|
hydrateMissingFields(field.fields || [], item);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function syncJson() {
|
|
dataField.value = JSON.stringify(data, null, 2);
|
|
}
|
|
|
|
function fieldMarkup(field, value, path) {
|
|
const help = field.help
|
|
? `<p class="mt-1 text-xs text-zinc-500">${escapeHtml(field.help)}</p>`
|
|
: '';
|
|
|
|
if (field.type === 'boolean') {
|
|
return `
|
|
<label class="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
|
<span>
|
|
<strong class="block text-sm">${escapeHtml(field.label)}</strong>
|
|
${help}
|
|
</span>
|
|
<input
|
|
data-path="${escapeHtml(path)}"
|
|
type="checkbox"
|
|
value="1"
|
|
${value === true || value === 1 || value === '1' ? 'checked' : ''}
|
|
class="h-5 w-5 rounded border-zinc-400 text-orange-600 focus:ring-orange-500"
|
|
>
|
|
</label>`;
|
|
}
|
|
|
|
if (field.type === 'textarea' || field.type === 'richtext') {
|
|
return `
|
|
<label class="block text-sm font-medium">
|
|
${escapeHtml(field.label)}
|
|
<textarea
|
|
data-path="${escapeHtml(path)}"
|
|
class="mt-2 min-h-28 w-full rounded-lg border border-zinc-600 bg-zinc-950 p-3 text-zinc-100"
|
|
>${escapeHtml(value)}</textarea>
|
|
</label>
|
|
${help}`;
|
|
}
|
|
|
|
if (field.type === 'repeater') {
|
|
return repeaterMarkup(
|
|
field,
|
|
Array.isArray(value) ? value : [],
|
|
path
|
|
) + help;
|
|
}
|
|
|
|
let inputType = 'text';
|
|
|
|
if (field.type === 'number') {
|
|
inputType = 'number';
|
|
} else if (field.type === 'email') {
|
|
inputType = 'email';
|
|
} else if (field.type === 'url') {
|
|
// Internal CMS links may be relative paths, anchors, mail links,
|
|
// or complete external URLs. Browser type="url" rejects "/".
|
|
inputType = 'text';
|
|
}
|
|
|
|
const inputMode = field.type === 'url' ? 'url' : '';
|
|
const placeholder = field.type === 'url'
|
|
? '/, /blog, #section or https://example.com'
|
|
: '';
|
|
|
|
return `
|
|
<label class="block text-sm font-medium">
|
|
${escapeHtml(field.label)}
|
|
<input
|
|
data-path="${escapeHtml(path)}"
|
|
type="${inputType}"
|
|
inputmode="${inputMode}"
|
|
placeholder="${escapeHtml(placeholder)}"
|
|
value="${escapeHtml(value)}"
|
|
${field.min !== undefined ? `min="${escapeHtml(field.min)}"` : ''}
|
|
${field.max !== undefined ? `max="${escapeHtml(field.max)}"` : ''}
|
|
class="mt-2 w-full rounded-lg border border-zinc-600 bg-zinc-950 px-3 py-2 text-zinc-100"
|
|
>
|
|
</label>
|
|
${help}`;
|
|
}
|
|
|
|
function repeaterMarkup(field, items, path) {
|
|
return `
|
|
<section class="rounded-xl border border-zinc-600 p-4">
|
|
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h3 class="font-semibold">${escapeHtml(field.label)}</h3>
|
|
<p class="text-xs text-zinc-500">
|
|
Add, edit, reorder, hide or remove items.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
data-action="add"
|
|
data-path="${escapeHtml(path)}"
|
|
class="rounded-lg border border-zinc-500 px-3 py-1.5 text-sm hover:bg-zinc-800"
|
|
>
|
|
Add item
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
${items.length
|
|
? items.map((item, index) => `
|
|
<article class="rounded-lg border border-zinc-700 bg-zinc-900 p-4">
|
|
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
|
|
<strong class="text-sm">Item ${index + 1}</strong>
|
|
|
|
<div class="flex gap-2">
|
|
<button
|
|
type="button"
|
|
data-action="up"
|
|
data-path="${escapeHtml(path)}"
|
|
data-index="${index}"
|
|
class="rounded border border-zinc-600 px-2 py-1"
|
|
aria-label="Move item up"
|
|
>↑</button>
|
|
|
|
<button
|
|
type="button"
|
|
data-action="down"
|
|
data-path="${escapeHtml(path)}"
|
|
data-index="${index}"
|
|
class="rounded border border-zinc-600 px-2 py-1"
|
|
aria-label="Move item down"
|
|
>↓</button>
|
|
|
|
<button
|
|
type="button"
|
|
data-action="remove"
|
|
data-path="${escapeHtml(path)}"
|
|
data-index="${index}"
|
|
class="rounded border border-red-500 px-2 py-1 text-red-300"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
${(field.fields || []).map(child => `
|
|
<div class="${['textarea', 'richtext', 'repeater'].includes(child.type) ? 'md:col-span-2' : ''}">
|
|
${fieldMarkup(
|
|
child,
|
|
item?.[child.key] ?? defaultValue(child),
|
|
`${path}.${index}.${child.key}`
|
|
)}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</article>
|
|
`).join('')
|
|
: `
|
|
<p class="rounded-lg border border-dashed border-zinc-600 p-6 text-center text-sm text-zinc-500">
|
|
No items. Select “Add item” to create one.
|
|
</p>
|
|
`}
|
|
</div>
|
|
</section>`;
|
|
}
|
|
|
|
function currentSchema() {
|
|
return normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
|
}
|
|
|
|
function render() {
|
|
const schema = currentSchema();
|
|
|
|
status.textContent = schema.length
|
|
? `${schema.length} editable field${schema.length === 1 ? '' : 's'}`
|
|
: 'Schema unavailable';
|
|
|
|
if (! schema.length) {
|
|
host.innerHTML = `
|
|
<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800">
|
|
This content type has no usable visual schema.
|
|
Run <code>php artisan content:install-saasland</code> once.
|
|
</div>`;
|
|
|
|
return;
|
|
}
|
|
|
|
hydrateMissingFields(schema, data);
|
|
syncJson();
|
|
|
|
host.innerHTML = schema.map(field => fieldMarkup(
|
|
field,
|
|
data[field.key],
|
|
field.key
|
|
)).join('');
|
|
}
|
|
|
|
host.addEventListener('input', event => {
|
|
const element = event.target.closest('[data-path]');
|
|
|
|
if (! element || element.type === 'checkbox') {
|
|
return;
|
|
}
|
|
|
|
let value = element.value;
|
|
|
|
if (element.type === 'number') {
|
|
value = element.value === '' ? null : Number(element.value);
|
|
}
|
|
|
|
setAtPath(element.dataset.path, value);
|
|
});
|
|
|
|
host.addEventListener('change', event => {
|
|
const element = event.target.closest('[data-path]');
|
|
|
|
if (! element || element.type !== 'checkbox') {
|
|
return;
|
|
}
|
|
|
|
setAtPath(element.dataset.path, element.checked);
|
|
});
|
|
|
|
host.addEventListener('click', event => {
|
|
const button = event.target.closest('button[data-action]');
|
|
|
|
if (! button) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
const schema = currentSchema();
|
|
const action = button.dataset.action;
|
|
const path = button.dataset.path;
|
|
const field = fieldForPath(schema, path);
|
|
const items = Array.isArray(getAtPath(path))
|
|
? [...getAtPath(path)]
|
|
: [];
|
|
|
|
if (action === 'add') {
|
|
if (! field || field.type !== 'repeater') {
|
|
return;
|
|
}
|
|
|
|
items.push(newRepeaterItem(field));
|
|
setAtPath(path, items);
|
|
render();
|
|
|
|
return;
|
|
}
|
|
|
|
const index = Number(button.dataset.index);
|
|
|
|
if (! Number.isInteger(index) || index < 0 || index >= items.length) {
|
|
return;
|
|
}
|
|
|
|
if (action === 'remove') {
|
|
if (! window.confirm('Remove this item?')) {
|
|
return;
|
|
}
|
|
|
|
items.splice(index, 1);
|
|
}
|
|
|
|
if (action === 'up' && index > 0) {
|
|
[items[index - 1], items[index]] = [items[index], items[index - 1]];
|
|
}
|
|
|
|
if (action === 'down' && index < items.length - 1) {
|
|
[items[index], items[index + 1]] = [items[index + 1], items[index]];
|
|
}
|
|
|
|
setAtPath(path, items);
|
|
render();
|
|
});
|
|
|
|
typeSelect.addEventListener('change', () => {
|
|
data = {};
|
|
hydrateMissingFields(currentSchema(), data);
|
|
syncJson();
|
|
render();
|
|
});
|
|
|
|
dataField.addEventListener('change', () => {
|
|
data = parseObject(dataField.value);
|
|
render();
|
|
});
|
|
|
|
form.addEventListener('submit', () => {
|
|
syncJson();
|
|
});
|
|
|
|
render();
|
|
});
|
|
</script>
|
|
</x-layouts.app>
|