Right-slide panel that renders a resource's edit form. Driven by the URL: ?new=1 opens a fresh form, ?edit=<id> hydrates with the current item. POSTs back to the same URL with _action (save | delete | <action key>); the route handler in step 7 dispatches. - FieldRenderer.astro: dispatches on field.kind, wraps each field with label + helper text + error state. - fields/*.astro: one component per kind — Text, Textarea, Markdown (with Write/Preview toggle), Select, SelectAsync, MultiSelectAsync, MultiText (with add/remove), Date, Datetime, Number, Readonly. - ResourceEditPanel.astro: header (title + close X), scrollable body, sticky footer (save + per-resource secondary actions + destructive delete when ops.delete is defined and item exists). Scrim closes on click, Esc, or the close link. Confirm-before-submit honours action.confirmText. Embedded sub-form sections render a placeholder until step 8 wires the pulse renderer. - admin.css: panel chrome + scrim + slide-in keyframes, full field styling for every kind, mobile full-screen modal collapse. - preview.astro: exercises every field kind so the panel can be eyeballed in a logged-in session. Try /admin/preview?new=1 and /admin/preview?edit=<id>. Autosave deferred to Phase 2 per the approved deltas. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
29 lines
611 B
Text
29 lines
611 B
Text
---
|
|
import type { DateField } from '../../resource-types';
|
|
|
|
interface Props {
|
|
field: DateField;
|
|
value: unknown;
|
|
}
|
|
|
|
const { field, value } = Astro.props;
|
|
|
|
// Coerce ISO datetime → "YYYY-MM-DD" for the <input type="date"> control.
|
|
function toDateInputValue(v: unknown): string {
|
|
if (v == null || v === '') return '';
|
|
const s = String(v);
|
|
const m = s.match(/^(\d{4}-\d{2}-\d{2})/);
|
|
return m ? m[1] : '';
|
|
}
|
|
const v = toDateInputValue(value);
|
|
---
|
|
|
|
<input
|
|
type="date"
|
|
id={`f-${field.key}`}
|
|
name={field.key}
|
|
class="bs-input"
|
|
value={v}
|
|
required={field.required}
|
|
readonly={field.readOnly}
|
|
/>
|