@omnitend/dashboard-for-laravel 0.46.0 → 0.47.1

package/resources/js/types/index.ts

@@ -274,6 +274,20 @@ export interface FieldDefinition {
      */
     default?: any;
 
+    /**
+     * For a field whose value is a list of rows (a `repeater`, or a span
+     * field that renders its own rows and owns `key.N.*` error keys): the
+     * row's own name, called with the row (`model[key][index]`, or `{}` when
+     * the model has no such row) and its 0-based index. When it returns a
+     * non-empty string, the error summary lists that row's errors under it
+     * alone ("Chaucer Ale (Pint): Enter a price.") instead of
+     * "<sub-field label> (line N)". Returning `undefined`, `null` or `""`
+     * (a row with no name yet), or throwing, keeps the line-number label.
+     * Only labels: which field owns the error, and what a click on the
+     * summary row focuses, are unchanged.
+     */
+    rowLabel?: (row: Record<string, any>, index: number) => string | null | undefined;
+
     /** Label for a repeater's "add row" button (default: "Add"). */
     addLabel?: string;
 
@@ -364,6 +378,10 @@ export interface FieldDefinition {
      * every `editFields` key, so those decorative fields are POSTed alongside
      * the real ones (an empty string, an empty array) purely because they were
      * declared.
+     *
+     * Applies per KEY (#228): DXTable drops a key only when no field with that
+     * key is both submitting and visible, so a `submit: false` display twin
+     * does not strip the value of a visible editable field sharing its key.
      */
     submit?: boolean;
 
@@ -440,6 +458,8 @@ export interface BaseFieldDef {
     plaintext?: MaybeFn<boolean>;
     submit?: boolean;
     errorKeys?: string[];
+    /** On a repeater, or a span field that renders its own rows. */
+    rowLabel?: (row: Record<string, any>, index: number) => string | null | undefined;
     when?: MaybeFn<boolean>;
     show?: () => boolean;
 }
@@ -652,6 +672,54 @@ export interface FormTab {
     lazy?: boolean;
 }
 
+/**
+ * Slot props of DXField's `password-actions` slot (DXForm:
+ * `password-actions(<key>)`): content placed beside a password input, such as
+ * a "Generate password" button. It renders after the input group (the input
+ * and the reveal (eye) toggle), in `.dx-password-field__actions`, and wraps
+ * onto its own line below the input when the row is too narrow to keep
+ * `--dx-password-input-min-width`. `setRevealed` drives the same state the
+ * eye toggles.
+ *
+ * ```vue
+ * <template #password-actions(password)="{ update, setRevealed, disabled }">
+ *   <DButton variant="secondary" :disabled="disabled"
+ *     @click="update(generatePassword()); setRevealed(true)">Generate</DButton>
+ * </template>
+ * ```
+ */
+export interface PasswordActionsSlotProps {
+    /** The field definition being rendered. */
+    field: FieldDefinition;
+    /** The model passed to field predicates (defaults to the live form data). */
+    model: any;
+    /** The current field value. */
+    value: any;
+    /** Write a new value (also marks the field touched and clears its error). */
+    update: (value: any) => void;
+    /** Whether the password is currently shown as plain text. */
+    revealed: boolean;
+    /**
+     * Show (`true`) or mask (`false`) the password, exactly as the eye does.
+     * A no-op on a `revealable: false` field, which never unmasks.
+     */
+    setRevealed: (revealed: boolean) => void;
+    /** Whether the field is disabled or read-only. */
+    disabled: boolean;
+}
+
+/**
+ * Slot props of DXTable's `edit-password-actions(<key>)` slot, the edit/create
+ * modal's form of {@link PasswordActionsSlotProps}. `item` is the row being
+ * edited, `null` in create mode. (`model` is not passed, as with the modal's
+ * other field slots.)
+ */
+export interface EditPasswordActionsSlotProps
+    extends Omit<PasswordActionsSlotProps, "model"> {
+    /** The row being edited; `null` in create mode. */
+    item: any;
+}
+
 /**
  * The theme's extra colour variant, `pending`: waiting, and the next move is
  * not yours ("awaiting payment", "sent to printer, not yet confirmed").

package/resources/js/utils/formErrorTargets.ts

@@ -7,8 +7,9 @@
  * `when`/`context`-aware predicates and a standalone summary can use the
  * defaults below.
  */
+import { toRaw } from "vue";
 import type { FieldDefinition, FormTab } from "../types";
-import type { ValidationErrors } from "../composables/useForm";
+import type { FailedRow, ValidationErrors } from "../composables/useForm";
 import {
     isFieldVisible as isFieldVisibleFor,
     resolvePredicate,
@@ -19,6 +20,14 @@ import { getByPath } from "./objectPath";
 export interface ErrorTarget {
     /** The key as the server sent it (`lines.0.price`). */
     errorKey: string;
+    /**
+     * Where to take the user for this error now. The same as `errorKey`,
+     * except for a row error resolved with `failedRows`: the key at the
+     * failed row's CURRENT index (`lines.1.price` once row 0 is removed),
+     * or the owning field's key when that row is gone. Always set by
+     * `resolveErrorTargets`; optional so targets built by hand still type.
+     */
+    focusKey?: string;
     /** The server's messages for that key, as sent. */
     messages: string[];
     /**
@@ -31,7 +40,10 @@ export interface ErrorTarget {
     fieldKey: string | null;
     /** The tab holding the owning field, or `null` (flat form, or unowned). */
     tabKey: string | null;
-    /** A readable name for the key: "Price (line 1)", "Delivery date". */
+    /**
+     * A readable name for the key: "Price (line 1)", "Delivery date", or a
+     * row's own name from the field's `rowLabel`.
+     */
     label: string;
 }
 
@@ -62,6 +74,14 @@ export interface ResolveErrorTargetsOptions {
         field: FieldDefinition,
         labelModel: Record<string, any>,
     ) => string | null | undefined;
+    /**
+     * The rows a failed submit's errors named, as captured then
+     * (`SubmitFailure.failedRows`). Pass it when resolving that failure's
+     * errors after the form may have changed (the error summary does), so a
+     * row error keeps the name of the row that failed and points at where
+     * that row is now. Leave it out for the form's live errors.
+     */
+    failedRows?: Record<string, FailedRow>;
 }
 
 interface Candidate {
@@ -137,6 +157,26 @@ function defaultLabel(
     return typeof field.label === "function" ? field.label(model) : field.label;
 }
 
+/**
+ * The field's `rowLabel` for one row, or `null` when it has none, names
+ * nothing (empty or not a string) or throws: the caller then falls back to
+ * "<label> (line N)", so a broken row name can never hide an error.
+ */
+function rowLabelFor(
+    field: FieldDefinition,
+    row: Record<string, any>,
+    index: number,
+): string | null {
+    if (typeof field.rowLabel !== "function") return null;
+    let name: unknown;
+    try {
+        name = field.rowLabel(row, index);
+    } catch {
+        return null;
+    }
+    return typeof name === "string" && name.trim() !== "" ? name : null;
+}
+
 /**
  * Resolve every key in `errors` to its owning field, tab and label, with the
  * display line for each message. Rows come in tab order, then field order
@@ -151,7 +191,11 @@ function defaultLabel(
  *
  * Labels: the owning field's label; for `field.N.sub` the sub-field's label
  * (when the field defines `fields` and one has that key) or the field's own,
- * plus "(line N+1)"; for any other nested key (a media map's
+ * plus "(line N+1)" — unless the field's `rowLabel` names that row, when
+ * the row's name is the whole label. With `failedRows`, a row key's label
+ * reads the row as it was when the submit failed, and its `focusKey` and
+ * line number follow that row to where it is now (see `ownedTarget`); for
+ * any other nested key (a media map's
  * `image_media.<uuid>`) the field's label. An unowned key is humanised.
  *
  * Display lines: "Label: message", except that the label is left off when
@@ -242,20 +286,68 @@ export function resolveErrorTargets(
         return longest;
     };
 
-    const ownedLabel = (errorKey: string, field: FieldDefinition): string => {
-        if (!isNestedUnder(errorKey, field.key)) return labelFor(field);
-        const [first, second] = errorKey.slice(field.key.length + 1).split(".");
-        if (!NUMERIC_SEGMENT.test(first)) return labelFor(field);
+    /**
+     * Where a failed row is now: its index in the field's live rows, found by
+     * identity, or -1 when it is gone (removed, or the rows were replaced).
+     */
+    const currentIndexOf = (field: FieldDefinition, failedRow: FailedRow): number => {
+        const liveRows = getByPath(model, field.key);
+        if (!Array.isArray(liveRows)) return -1;
+        return liveRows.findIndex((row) => toRaw(row) === failedRow.row);
+    };
+
+    /**
+     * The label and focus key for an owned error key. For a row key
+     * (`field.N.sub`) with a captured failed row, both follow that row: the
+     * label is read from the row as it was when the submit failed, and the
+     * focus key uses the row's current index, or is the field's key when the
+     * row is gone. "(line N)" then counts the row's CURRENT position while it
+     * exists (the line a click takes the user to), and the position it failed
+     * at once it is gone.
+     */
+    const ownedTarget = (
+        errorKey: string,
+        field: FieldDefinition,
+    ): { label: string; focusKey: string } => {
+        if (!isNestedUnder(errorKey, field.key)) {
+            return { label: labelFor(field), focusKey: errorKey };
+        }
+        const [first, second, ...deeper] = errorKey
+            .slice(field.key.length + 1)
+            .split(".");
+        if (!NUMERIC_SEGMENT.test(first)) {
+            return { label: labelFor(field), focusKey: errorKey };
+        }
+        const failedIndex = Number(first);
         const subField =
             second !== undefined
                 ? field.fields?.find((candidate) => candidate.key === second)
                 : undefined;
-        // DXRepeater renders a sub-field with the ROW as its model, so its
-        // label resolves against the row here too.
-        const row = getByPath(model, `${field.key}.${first}`);
-        const rowModel = row !== null && typeof row === "object" ? row : {};
+        const failedRow = options.failedRows?.[`${field.key}.${first}`];
+
+        let rowModel: Record<string, any>;
+        let lineIndex = failedIndex;
+        let focusKey = errorKey;
+        if (failedRow !== undefined) {
+            rowModel = failedRow.snapshot;
+            const currentIndex = currentIndexOf(field, failedRow);
+            if (currentIndex >= 0) {
+                lineIndex = currentIndex;
+                const rest = second !== undefined ? [second, ...deeper] : [];
+                focusKey = [field.key, String(currentIndex), ...rest].join(".");
+            } else {
+                focusKey = field.key;
+            }
+        } else {
+            // DXRepeater renders a sub-field with the ROW as its model, so its
+            // label resolves against the row here too.
+            const row = getByPath(model, `${field.key}.${first}`);
+            rowModel = row !== null && typeof row === "object" ? row : {};
+        }
+        const rowName = rowLabelFor(field, rowModel, failedIndex);
+        if (rowName !== null) return { label: rowName, focusKey };
         const base = subField ? labelFor(subField, rowModel) : labelFor(field);
-        return `${base} (line ${Number(first) + 1})`;
+        return { label: `${base} (line ${lineIndex + 1})`, focusKey };
     };
 
     // ——— one target per error key with at least one message
@@ -272,15 +364,15 @@ export function resolveErrorTargets(
         );
         if (messages.length === 0) return;
         const owner = ownerOf(errorKey);
+        const owned = owner ? ownedTarget(errorKey, owner.field) : null;
         pending.push({
             target: {
                 errorKey,
+                focusKey: owned ? owned.focusKey : errorKey,
                 messages,
                 fieldKey: owner ? owner.field.key : null,
                 tabKey: owner ? owner.tabKey : null,
-                label: owner
-                    ? ownedLabel(errorKey, owner.field)
-                    : humaniseErrorKey(errorKey),
+                label: owned ? owned.label : humaniseErrorKey(errorKey),
             },
             rank: owner ? owner.rank : [UNOWNED_RANK, UNOWNED_RANK],
             order,

package/resources/js/utils/formSchema.ts

@@ -124,3 +124,30 @@ export function isFieldVisible(
 export function isSubmittableField(field: { submit?: boolean }): boolean {
     return field.submit !== false;
 }
+
+/**
+ * The payload keys to drop on submit: every field key for which NO field with
+ * that key is both submittable (`submit !== false`) and visible (#228).
+ *
+ * Decided per KEY, across all the fields that share it, never per field. Two
+ * fields may share a key: an editable select plus a read-only display twin
+ * (`submit: false`) that shows instead for system-created rows. Stripping a
+ * key because ONE of its fields is presentational or hidden removed it from
+ * every save, including while the select was the visible field in use. A key
+ * whose fields are all presentational (#110) or all hidden (#117) is still
+ * dropped.
+ */
+export function nonSubmittedFieldKeys<
+    TField extends { key: string; submit?: boolean },
+>(fields: readonly TField[], isVisible: (field: TField) => boolean): Set<string> {
+    const submittedKeys = new Set(
+        fields
+            .filter((field) => isSubmittableField(field) && isVisible(field))
+            .map((field) => field.key),
+    );
+    return new Set(
+        fields
+            .map((field) => field.key)
+            .filter((key) => !submittedKeys.has(key)),
+    );
+}