fixed main frontend
This commit is contained in:
Mark Gregory
@@ -1,120 +1,399 @@
|
||||
<x-layouts.app :title="$document->exists ? $document->title : __('Create content document')">
|
||||
<div class="mx-auto max-w-6xl space-y-6">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-sm text-zinc-500">
|
||||
<a href="{{ route('content.index') }}" class="hover:text-zinc-900 dark:hover:text-white">Content documents</a>
|
||||
<span>/</span>
|
||||
<span>{{ $document->exists ? 'Edit' : 'Create' }}</span>
|
||||
<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>
|
||||
<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">Structured, reusable content that can be placed into one or more page regions.</p>
|
||||
|
||||
@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($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 document? This is only allowed when it is not used by any page.')">
|
||||
@csrf @method('DELETE')
|
||||
<flux:button type="submit" size="sm" variant="danger">Delete</flux:button>
|
||||
</form>
|
||||
|
||||
@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>
|
||||
|
||||
@if(session('status'))
|
||||
<div class="rounded-xl border border-green-300 bg-green-50 p-4 text-sm text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200">{{ 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 dark:border-red-800 dark:bg-red-950 dark:text-red-200">
|
||||
<strong>The document could not be saved.</strong>
|
||||
<ul class="mt-2 list-disc pl-5">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
|
||||
</div>
|
||||
@endif
|
||||
<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');
|
||||
|
||||
@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 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
|
||||
<strong>Shared document.</strong> This document is used in {{ $document->placements->count() }} page placements. Changes will appear everywhere it is published. Use “Create independent copy” for page-specific content.
|
||||
</div>
|
||||
@endif
|
||||
let data = parseObject(dataField.value);
|
||||
|
||||
<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)_20rem]">
|
||||
@csrf
|
||||
@if($document->exists) @method('PUT') @endif
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
|
||||
<div class="space-y-6">
|
||||
<flux:card class="space-y-5">
|
||||
<h2 class="text-lg font-semibold">Document</h2>
|
||||
<flux:input name="title" label="Title" value="{{ old('title', $document->title) }}" required />
|
||||
<flux:input name="slug" label="Slug" value="{{ old('slug', $document->slug) }}" description="Leave empty to generate it from the title." />
|
||||
<flux:select name="content_type_id" label="Content type" 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>
|
||||
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);
|
||||
}
|
||||
|
||||
<flux:card class="space-y-4">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Structured data</h2>
|
||||
<p class="text-sm text-zinc-500">This phase retains JSON editing while adding validation, copies, placement controls and preview. Schema-generated field controls follow in the next checkpoint.</p>
|
||||
</div>
|
||||
<button type="button" id="format-json" class="rounded-lg border border-zinc-300 px-3 py-2 text-sm hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">Format JSON</button>
|
||||
</div>
|
||||
<textarea id="data-json" class="min-h-[32rem] w-full rounded-xl border border-zinc-300 bg-white p-4 font-mono text-sm text-zinc-900 shadow-sm focus:border-zinc-500 focus:outline-none dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" name="data_json" spellcheck="false">{{ old('data_json', json_encode($document->data ?: [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)) }}</textarea>
|
||||
<p id="json-message" class="hidden text-sm"></p>
|
||||
</flux:card>
|
||||
</div>
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>"']/g, character => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||||
})[character]);
|
||||
}
|
||||
|
||||
<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">{{ $document->exists ? 'Save document' : 'Create document' }}</flux:button>
|
||||
</flux:card>
|
||||
function get(path) {
|
||||
return path.split('.').reduce((value, key) => value?.[key], data);
|
||||
}
|
||||
|
||||
@if($document->exists)
|
||||
<flux:card>
|
||||
<h2 class="text-lg font-semibold">Usage</h2>
|
||||
<p class="mt-1 text-sm text-zinc-500">{{ $document->placements->count() }} placement{{ $document->placements->count() === 1 ? '' : 's' }}</p>
|
||||
<div class="mt-4 space-y-2">
|
||||
@forelse($document->placements as $placement)
|
||||
<a class="block rounded-lg border border-zinc-200 p-3 text-sm hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800" href="{{ route('content.pages.edit', $placement->page_key) }}">
|
||||
<strong>{{ ucfirst($placement->page_key ?: 'Page') }}</strong>
|
||||
<span class="block text-xs uppercase text-zinc-500">{{ $placement->region }}</span>
|
||||
</a>
|
||||
@empty
|
||||
<p class="text-sm text-zinc-500">Not currently assigned to a page.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</flux:card>
|
||||
@endif
|
||||
</aside>
|
||||
</form>
|
||||
</div>
|
||||
function set(path, value) {
|
||||
const parts = path.split('.');
|
||||
let target = data;
|
||||
parts.slice(0, -1).forEach(key => {
|
||||
if (target[key] === undefined || target[key] === null) {
|
||||
target[key] = /^\d+$/.test(parts[parts.indexOf(key) + 1] ?? '') ? [] : {};
|
||||
}
|
||||
target = target[key];
|
||||
});
|
||||
target[parts.at(-1)] = value;
|
||||
sync();
|
||||
}
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.getElementById('format-json')?.addEventListener('click', () => {
|
||||
const field = document.getElementById('data-json');
|
||||
const message = document.getElementById('json-message');
|
||||
try {
|
||||
field.value = JSON.stringify(JSON.parse(field.value), null, 2);
|
||||
message.textContent = 'Valid JSON.';
|
||||
message.className = 'text-sm text-green-700 dark:text-green-300';
|
||||
} catch (error) {
|
||||
message.textContent = error.message;
|
||||
message.className = 'text-sm text-red-700 dark:text-red-300';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
function sync() {
|
||||
dataField.value = JSON.stringify(data, null, 2);
|
||||
}
|
||||
|
||||
function defaultValue(field) {
|
||||
if (Object.prototype.hasOwnProperty.call(field, 'default')) return field.default;
|
||||
if (field.type === 'boolean') return false;
|
||||
if (field.type === 'repeater') return [];
|
||||
return '';
|
||||
}
|
||||
|
||||
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 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>
|
||||
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
||||
<input class="peer sr-only" data-path="${escapeHtml(path)}" type="checkbox" ${value === true ? 'checked' : ''}>
|
||||
<span class="absolute inset-0 rounded-full bg-zinc-300 transition peer-checked:bg-blue-600"></span>
|
||||
<span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
|
||||
</span>
|
||||
</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-300 bg-white p-3 dark:border-zinc-700 dark:bg-zinc-950">${escapeHtml(value)}</textarea>
|
||||
</label>${help}`;
|
||||
}
|
||||
|
||||
if (field.type === 'repeater') {
|
||||
return repeaterMarkup(field, Array.isArray(value) ? value : [], path) + help;
|
||||
}
|
||||
|
||||
const type = field.type === 'number' ? 'number' : field.type === 'email' ? 'email' : 'text';
|
||||
return `
|
||||
<label class="block text-sm font-medium">
|
||||
${escapeHtml(field.label)}
|
||||
<input
|
||||
data-path="${escapeHtml(path)}"
|
||||
type="${type}"
|
||||
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-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-950"
|
||||
>
|
||||
</label>${help}`;
|
||||
}
|
||||
|
||||
function repeaterMarkup(field, items, path) {
|
||||
return `
|
||||
<section class="rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="font-semibold">${escapeHtml(field.label)}</h3>
|
||||
<p class="text-xs text-zinc-500">Items can be reordered, hidden, or removed.</p>
|
||||
</div>
|
||||
<button type="button" data-add="${escapeHtml(path)}" class="rounded-lg border px-3 py-1.5 text-sm">Add item</button>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
${items.length ? items.map((item, index) => `
|
||||
<article class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="mb-3 flex items-center justify-between gap-3">
|
||||
<strong class="text-sm">Item ${index + 1}</strong>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" data-up="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move up">↑</button>
|
||||
<button type="button" data-down="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move down">↓</button>
|
||||
<button type="button" data-remove="${escapeHtml(path)}.${index}" class="rounded border border-red-300 px-2 py-1 text-red-700">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
${(field.fields || []).map(child => `
|
||||
<div class="${child.type === 'textarea' || child.type === 'richtext' ? '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 p-6 text-center text-sm text-zinc-500">No items. Select “Add item” to create one.</p>'}
|
||||
</div>
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
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 to refresh schemas without replacing content.
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
host.innerHTML = schema.map(field => fieldMarkup(
|
||||
field,
|
||||
Object.prototype.hasOwnProperty.call(data, field.key) ? data[field.key] : defaultValue(field),
|
||||
field.key
|
||||
)).join('');
|
||||
|
||||
bind();
|
||||
}
|
||||
|
||||
function bind() {
|
||||
host.querySelectorAll('[data-path]').forEach(element => {
|
||||
const eventName = element.type === 'checkbox' ? 'change' : 'input';
|
||||
element.addEventListener(eventName, () => {
|
||||
let value = element.type === 'checkbox' ? element.checked : element.value;
|
||||
if (element.type === 'number') value = element.value === '' ? null : Number(element.value);
|
||||
set(element.dataset.path, value);
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('[data-add]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
const field = schema.find(candidate => candidate.key === button.dataset.add);
|
||||
const items = Array.isArray(get(button.dataset.add)) ? get(button.dataset.add) : [];
|
||||
const newItem = {};
|
||||
(field?.fields || []).forEach(child => newItem[child.key] = defaultValue(child));
|
||||
items.push(newItem);
|
||||
set(button.dataset.add, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('[data-remove]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
if (!confirm('Remove this item?')) return;
|
||||
const parts = button.dataset.remove.split('.');
|
||||
const index = Number(parts.pop());
|
||||
const path = parts.join('.');
|
||||
const items = Array.isArray(get(path)) ? get(path) : [];
|
||||
items.splice(index, 1);
|
||||
set(path, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
host.querySelectorAll('[data-up], [data-down]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const raw = button.dataset.up ?? button.dataset.down;
|
||||
const parts = raw.split('.');
|
||||
const index = Number(parts.pop());
|
||||
const path = parts.join('.');
|
||||
const items = Array.isArray(get(path)) ? get(path) : [];
|
||||
const destination = button.dataset.up !== undefined ? index - 1 : index + 1;
|
||||
if (destination < 0 || destination >= items.length) return;
|
||||
[items[index], items[destination]] = [items[destination], items[index]];
|
||||
set(path, items);
|
||||
render();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
typeSelect.addEventListener('change', () => {
|
||||
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
|
||||
const nextData = {};
|
||||
schema.forEach(field => nextData[field.key] = defaultValue(field));
|
||||
data = nextData;
|
||||
sync();
|
||||
render();
|
||||
});
|
||||
|
||||
dataField.addEventListener('change', () => {
|
||||
try {
|
||||
data = parseObject(dataField.value);
|
||||
render();
|
||||
} catch (error) {
|
||||
alert(`Invalid JSON: ${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('submit', sync);
|
||||
render();
|
||||
});
|
||||
</script>
|
||||
</x-layouts.app>
|
||||
|
||||
Reference in New Issue
Block a user