@bygghammar/cms-platform 0.6.0 → 0.8.0

package/src/backoffice/forms/FieldEditor.tsx

@@ -0,0 +1,611 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Copy, GripVertical, Plus, RotateCcw, Trash2 } from "lucide-react";
+import {
+  AUTOCOMPLETE_OPTIONS,
+  fieldTypes,
+  tripFieldOptions,
+  tripYears,
+  makeFieldKey,
+  type TripSource,
+  type FormFieldDef,
+  type FormFieldType,
+} from "../../forms/field-sets";
+import { FIELD_FORMATS } from "../../forms/conditions";
+import { LocalizedField, TextField } from "../inspectors/fields";
+import { ConditionBuilder, RuleSummary } from "./ConditionBuilder";
+import { getTripTerminology } from "../../trips";
+
+const TRIP_TERMINOLOGY = getTripTerminology();
+
+/** Labels depend on registered site terminology, so resolve after startup. */
+const FIELD_TYPES = fieldTypes();
+
+/** Trip fields use the shared trips source and the site's terminology. */
+function TripOptions({
+  field,
+  trips,
+  onChange,
+}: {
+  field: FormFieldDef;
+  trips: TripSource[];
+  onChange: (patch: Partial<FormFieldDef>) => void;
+}) {
+  const years = tripYears(trips);
+  const options = tripFieldOptions(trips, field.tripYear ?? field.courseYear);
+  return (
+    <div className="space-y-2">
+      <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+        {TRIP_TERMINOLOGY.plural}
+      </div>
+      <label className="block">
+        <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+          Year filter
+        </span>
+        <select
+          value={field.tripYear ?? field.courseYear ?? ""}
+          onChange={(e) => onChange({ tripYear: e.target.value || undefined })}
+          className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+        >
+          <option value="">All years</option>
+          {years.map((y) => (
+            <option key={y} value={y}>
+              {y}
+            </option>
+          ))}
+        </select>
+      </label>
+      <p className="text-xs text-ink/50">
+        Choices are generated from the {TRIP_TERMINOLOGY.plural} section, so they stay in sync
+        automatically.
+      </p>
+      {options.length === 0 ? (
+        <p className="text-xs text-ink/45">
+          No {TRIP_TERMINOLOGY.plural.toLowerCase()} match this filter yet.
+        </p>
+      ) : (
+        <ul className="space-y-1 border border-ink/10 bg-white px-3 py-2 text-xs text-ink/70">
+          {options.map((o) => (
+            <li key={o.value}>
+              {o.label.sv || o.label.en}
+              <span className="text-ink/35"> · saved as “{o.value}”</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-xs text-ink/70">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="size-4 accent-sea"
+      />
+      {label}
+    </label>
+  );
+}
+
+function OptionsEditor({
+  field,
+  onChange,
+}: {
+  field: FormFieldDef;
+  onChange: (patch: Partial<FormFieldDef>) => void;
+}) {
+  const options = field.options ?? [];
+  const patchOption = (i: number, patch: Partial<(typeof options)[number]>) =>
+    onChange({ options: options.map((o, idx) => (idx === i ? { ...o, ...patch } : o)) });
+
+  return (
+    <div className="space-y-2">
+      <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Choices</div>
+      {options.length === 0 ? <p className="text-xs text-ink/45">No choices yet.</p> : null}
+      {options.map((o, i) => (
+        <div key={i} className="flex flex-wrap items-center gap-2">
+          <input
+            value={o.value}
+            onChange={(e) => patchOption(i, { value: e.target.value })}
+            placeholder="value"
+            className="w-32 border border-ink/15 px-2 py-1 text-xs"
+          />
+          <input
+            value={o.label?.sv ?? ""}
+            onChange={(e) => patchOption(i, { label: { ...o.label, sv: e.target.value } })}
+            placeholder="Swedish label"
+            className="flex-1 min-w-[140px] border border-ink/15 px-2 py-1 text-xs"
+          />
+          <input
+            value={o.label?.en ?? ""}
+            onChange={(e) => patchOption(i, { label: { ...o.label, en: e.target.value } })}
+            placeholder="English label"
+            className="flex-1 min-w-[140px] border border-ink/15 px-2 py-1 text-xs"
+          />
+          <button
+            type="button"
+            onClick={() => onChange({ options: options.filter((_, idx) => idx !== i) })}
+            className="text-ink/35 hover:text-red-500"
+            title="Remove choice"
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        onClick={() =>
+          onChange({ options: [...options, { value: `option_${options.length + 1}`, label: {} }] })
+        }
+        className="inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+      >
+        <Plus className="size-3.5" />
+        Add choice
+      </button>
+    </div>
+  );
+}
+
+export function FieldEditor({
+  fields,
+  usedKeys,
+  onChange,
+  trips: tripRows,
+}: {
+  fields: FormFieldDef[];
+  /** Keys that already have stored answers — locked against deletion. */
+  usedKeys: string[];
+  onChange: (next: FormFieldDef[]) => void;
+  /** Trip/course rows from the host site, used to preview trip field options. */
+  trips?: TripSource[];
+}) {
+  const [open, setOpen] = useState<string | null>(null);
+  const [showRemoved, setShowRemoved] = useState(false);
+  const [newLabel, setNewLabel] = useState("");
+  const [newType, setNewType] = useState<FormFieldType>("text");
+  const used = new Set(usedKeys);
+  const trips = (tripRows ?? []) as TripSource[];
+
+  const patch = (key: string, p: Partial<FormFieldDef>) =>
+    onChange(fields.map((f) => (f.key === key ? { ...f, ...p } : f)));
+
+  /** Reorder within the visible fields, then write the order back in full. */
+  const move = (key: string, dir: -1 | 1) => {
+    const visible = fields.filter((f) => !f.removed);
+    const i = visible.findIndex((f) => f.key === key);
+    const j = i + dir;
+    if (i < 0 || j < 0 || j >= visible.length) return;
+    const reordered = [...visible];
+    [reordered[i], reordered[j]] = [reordered[j], reordered[i]];
+    onChange([...reordered, ...fields.filter((f) => f.removed)]);
+  };
+
+  const addField = () => {
+    const label = newLabel.trim();
+    if (!label) return;
+    const key = makeFieldKey(
+      label,
+      fields.map((f) => f.key),
+    );
+    onChange([
+      ...fields,
+      {
+        key,
+        type: newType,
+        label: { sv: label, en: label },
+        enabled: true,
+        required: false,
+        custom: true,
+        options: newType === "select" ? [{ value: "option_1", label: {} }] : undefined,
+      },
+    ]);
+    setNewLabel("");
+    setOpen(key);
+  };
+
+  const duplicate = (f: FormFieldDef) => {
+    const key = makeFieldKey(
+      `${f.key}_copy`,
+      fields.map((x) => x.key),
+    );
+    onChange([...fields, { ...f, key, custom: true }]);
+    setOpen(key);
+  };
+
+  /**
+   * Custom fields are dropped outright. Built-in fields keep a tombstone so
+   * the canonical set does not rebuild them on the next load, and so old
+   * answers still resolve their label.
+   */
+  const removeField = (f: FormFieldDef) => {
+    if (used.has(f.key)) return;
+    if (
+      !window.confirm(
+        f.custom
+          ? `Remove the field "${f.label.sv || f.label.en || f.key}"? It has no answers, so nothing is lost.`
+          : `Remove the built-in field "${f.label.sv || f.label.en || f.key}"? You can restore it again from "Removed built-in fields" below.`,
+      )
+    )
+      return;
+    if (f.custom) {
+      onChange(fields.filter((x) => x.key !== f.key));
+    } else {
+      onChange(fields.map((x) => (x.key === f.key ? { ...x, removed: true, enabled: false } : x)));
+    }
+    setOpen(null);
+  };
+
+  const restoreField = (key: string) =>
+    onChange(fields.map((x) => (x.key === key ? { ...x, removed: false, enabled: true } : x)));
+
+  const visibleFields = fields.filter((f) => !f.removed);
+  const removedFields = fields.filter((f) => f.removed);
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-ink/50">
+        Reorder, rename, add your own fields. A field key never changes.{" "}
+        <strong className="font-normal text-ink/70">Off</strong> keeps the field and its history but
+        hides it from the site; <strong className="font-normal text-ink/70">Delete</strong> takes it
+        out of the form entirely. A field that already has answers can only be switched off, so
+        historic submissions stay readable.
+      </p>
+
+      <div className="space-y-2">
+        {visibleFields.map((f) => {
+          const locked = used.has(f.key);
+          const isOpen = open === f.key;
+          return (
+            <div
+              key={f.key}
+              className={
+                f.enabled
+                  ? "border border-ink/10"
+                  : "border border-dashed border-ink/15 bg-ink/[0.02]"
+              }
+            >
+              <div className="flex flex-wrap items-center gap-3 px-3 py-2">
+                <GripVertical className="size-4 shrink-0 text-ink/25" />
+                <div className="flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => setOpen(isOpen ? null : f.key)}
+                    className="text-left text-sm text-ink hover:text-sea"
+                  >
+                    {f.label.sv || f.label.en || f.key}
+                  </button>
+                  <span className="text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                    {f.key} · {f.type}
+                    {f.custom ? " · custom" : ""}
+                    {used.has(f.key) ? " · has answers" : ""}
+                  </span>
+                  {!f.enabled ? (
+                    <span className="mt-1 w-fit border border-ink/15 px-1.5 py-0.5 text-[0.55rem] uppercase tracking-[0.18em] text-ink/45">
+                      Off — not shown on the site
+                    </span>
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <RuleSummary rule={f.showWhen} fields={fields} prefix="Shown when" />
+                  <RuleSummary rule={f.requireWhen} fields={fields} prefix="Required when" />
+                </div>
+
+                <div className="ml-auto flex items-center gap-3">
+                  <Toggle
+                    label="On"
+                    checked={f.enabled}
+                    onChange={(v) => patch(f.key, { enabled: v })}
+                  />
+                  <Toggle
+                    label="Required"
+                    checked={f.required}
+                    onChange={(v) => patch(f.key, { required: v })}
+                  />
+                  <Toggle
+                    label="Full width"
+                    checked={f.wide === true}
+                    onChange={(v) => patch(f.key, { wide: v })}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => move(f.key, -1)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Move up"
+                  >
+                    <ChevronUp className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => move(f.key, 1)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Move down"
+                  >
+                    <ChevronDown className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => duplicate(f)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Duplicate field"
+                  >
+                    <Copy className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={locked}
+                    onClick={() => removeField(f)}
+                    className="text-ink/35 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-30"
+                    title={
+                      locked
+                        ? "This field already has answers — switch it off instead"
+                        : "Remove field"
+                    }
+                  >
+                    <Trash2 className="size-4" />
+                  </button>
+                </div>
+              </div>
+
+              {isOpen ? (
+                <div className="space-y-4 border-t border-ink/10 bg-ink/[0.015] px-4 py-4">
+                  {f.custom ? (
+                    <label className="block">
+                      <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Type
+                      </span>
+                      <select
+                        value={f.type}
+                        onChange={(e) => patch(f.key, { type: e.target.value as FormFieldType })}
+                        className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                      >
+                        {FIELD_TYPES.map((t) => (
+                          <option key={t.value} value={t.value}>
+                            {t.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+
+                  <LocalizedField
+                    label="Label"
+                    value={f.label}
+                    onChange={(v) => patch(f.key, { label: v })}
+                  />
+                  <LocalizedField
+                    label="Placeholder"
+                    value={f.placeholder}
+                    onChange={(v) => patch(f.key, { placeholder: v })}
+                  />
+                  <LocalizedField
+                    label="Help text"
+                    value={f.help}
+                    onChange={(v) => patch(f.key, { help: v })}
+                  />
+
+                  {f.type === "select" ? (
+                    <OptionsEditor field={f} onChange={(p) => patch(f.key, p)} />
+                  ) : null}
+                  {f.type === "trip" || f.type === "course" ? (
+                    <TripOptions field={f} trips={trips} onChange={(p) => patch(f.key, p)} />
+                  ) : null}
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <label className="block">
+                      <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Autofill
+                      </span>
+                      <select
+                        value={f.autocomplete ?? ""}
+                        onChange={(e) =>
+                          patch(f.key, { autocomplete: e.target.value || undefined })
+                        }
+                        className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                      >
+                        <option value="">Automatic</option>
+                        {AUTOCOMPLETE_OPTIONS.map((o) => (
+                          <option key={o.value} value={o.value}>
+                            {o.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="block">
+                      <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Format
+                      </span>
+                      <select
+                        value={f.format ?? ""}
+                        onChange={(e) =>
+                          patch(f.key, {
+                            format: (e.target.value || undefined) as FormFieldDef["format"],
+                          })
+                        }
+                        className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                      >
+                        <option value="">No extra format check</option>
+                        {FIELD_FORMATS.map((o) => (
+                          <option key={o.value} value={o.value}>
+                            {o.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <TextField
+                      label="Min length"
+                      value={f.minLength ? String(f.minLength) : ""}
+                      onChange={(v) => patch(f.key, { minLength: Number(v) || undefined })}
+                    />
+                    <TextField
+                      label="Max length"
+                      value={f.maxLength ? String(f.maxLength) : ""}
+                      onChange={(v) => patch(f.key, { maxLength: Number(v) || undefined })}
+                    />
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <TextField
+                      label="Pattern (regex)"
+                      value={f.pattern ?? ""}
+                      onChange={(v) => patch(f.key, { pattern: v || undefined })}
+                    />
+                    {f.type === "date" ? (
+                      <>
+                        <TextField
+                          label="Earliest date (YYYY-MM-DD)"
+                          value={f.minDate ?? ""}
+                          onChange={(v) => patch(f.key, { minDate: v || undefined })}
+                        />
+                        <TextField
+                          label="Latest date (YYYY-MM-DD)"
+                          value={f.maxDate ?? ""}
+                          onChange={(v) => patch(f.key, { maxDate: v || undefined })}
+                        />
+                      </>
+                    ) : (
+                      <>
+                        <TextField
+                          label="Min value"
+                          value={f.min === undefined ? "" : String(f.min)}
+                          onChange={(v) => patch(f.key, { min: v === "" ? undefined : Number(v) })}
+                        />
+                        <TextField
+                          label="Max value"
+                          value={f.max === undefined ? "" : String(f.max)}
+                          onChange={(v) => patch(f.key, { max: v === "" ? undefined : Number(v) })}
+                        />
+                      </>
+                    )}
+                  </div>
+
+                  <LocalizedField
+                    label="Custom error message"
+                    value={f.errorMessage}
+                    onChange={(v) => patch(f.key, { errorMessage: v })}
+                  />
+
+                  <div className="grid gap-3 lg:grid-cols-2">
+                    <ConditionBuilder
+                      title="Show this field when"
+                      description="Leave empty to always show it."
+                      rule={f.showWhen}
+                      selfKey={f.key}
+                      fields={fields}
+                      onChange={(r) => patch(f.key, { showWhen: r })}
+                    />
+                    <ConditionBuilder
+                      title="Make it required when"
+                      description="Required only while these conditions match."
+                      rule={f.requireWhen}
+                      selfKey={f.key}
+                      fields={fields}
+                      onChange={(r) => patch(f.key, { requireWhen: r })}
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {removedFields.length ? (
+        <div className="border border-dashed border-ink/20 p-4">
+          <button
+            type="button"
+            onClick={() => setShowRemoved((v) => !v)}
+            className="flex w-full items-center justify-between gap-3 text-left"
+          >
+            <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/45">
+              Removed built-in fields ({removedFields.length})
+            </span>
+            {showRemoved ? (
+              <ChevronUp className="size-4 text-ink/35" />
+            ) : (
+              <ChevronDown className="size-4 text-ink/35" />
+            )}
+          </button>
+          {showRemoved ? (
+            <>
+              <p className="mt-1 text-xs text-ink/45">
+                These are not part of the form any more. Restore one to bring it back with its
+                original key.
+              </p>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {removedFields.map((f) => (
+                  <button
+                    key={f.key}
+                    type="button"
+                    onClick={() => restoreField(f.key)}
+                    className="inline-flex items-center gap-2 border border-ink/15 bg-white px-3 py-2 text-xs text-ink/70 hover:border-sea hover:text-ink"
+                  >
+                    <RotateCcw className="size-3.5" />
+                    {f.label.sv || f.label.en || f.key}
+                    <span className="text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                      {f.key}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap items-end gap-3 border border-dashed border-ink/20 p-4">
+        <label className="flex-1 min-w-[180px]">
+          <span className="text-xs text-ink/55">New field label</span>
+          <input
+            value={newLabel}
+            onChange={(e) => setNewLabel(e.target.value)}
+            placeholder="Company"
+            className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+          />
+        </label>
+        <label className="min-w-[160px]">
+          <span className="text-xs text-ink/55">Type</span>
+          <select
+            value={newType}
+            onChange={(e) => setNewType(e.target.value as FormFieldType)}
+            className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            {FIELD_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="button"
+          onClick={addField}
+          disabled={!newLabel.trim()}
+          className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-sea disabled:opacity-40"
+        >
+          <Plus className="size-4" />
+          Add field
+        </button>
+        {newLabel.trim() ? (
+          <span className="text-xs text-ink/45">
+            Key:{" "}
+            {makeFieldKey(
+              newLabel,
+              fields.map((f) => f.key),
+            )}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}