@omnitend/dashboard-for-laravel 0.46.0 → 0.47.0

package/resources/js/composables/useResourceEditor.ts

@@ -7,6 +7,7 @@ import {
     resolveFieldDefault,
     isFieldVisible as isFieldVisibleFor,
     isSubmittableField,
+    nonSubmittedFieldKeys as nonSubmittedFieldKeysFor,
 } from "../utils/formSchema";
 
 /**
@@ -207,24 +208,67 @@ export function useResourceEditor<T = any>(
     // Enforced at SUBMIT, not just at seeding: the modal still renders every field,
     // so a `submit: false` control — or a `span` slot calling `update` — can write
     // its key back into the form data after seeding. Strip them on the way out.
-    const nonSubmittedFieldKeys = computed(
-        () =>
-            new Set(
-                (props.editFields ?? [])
-                    .filter(
-                        (field) =>
-                            // Presentational: lays the form out, holds no data (#110).
-                            !isSubmittableField(field) ||
-                            // Hidden by `when` at submit time (#117). Submitting a field
-                            // the user cannot see is a silent write — and with `default`
-                            // set it writes a value they never chose. Omitting the key
-                            // leaves the stored value alone.
-                            !isEditFieldVisible(field),
-                    )
-                    .map((field) => field.key),
-            ),
+    //
+    // Decided per KEY (#228): a key is dropped only when no field with that key
+    // is both submitting and visible at submit time. A presentational field
+    // (#110) holds no data, and a field hidden by `when` (#117) must not write a
+    // value the user cannot see — but a display-only twin sharing its key with
+    // the visible editable field must not strip the editable field's value.
+    const nonSubmittedFieldKeys = computed(() =>
+        nonSubmittedFieldKeysFor(props.editFields ?? [], isEditFieldVisible),
     );
 
+    /*
+     * Seed the form's data, ONE value per key (#228). Presentational fields are
+     * never seeded. When several submitting fields share a key (alternative
+     * controls for one value, switched by `when`), the key is seeded from the
+     * first of them that is visible against the seeded model, else the first
+     * declared. This used to be last-declared-wins, so a hidden alternative
+     * declared after the visible field replaced its default.
+     *
+     * Two submitting fields with one key that are visible TOGETHER are almost
+     * certainly a mistake (two controls bound to one value): the first declared
+     * wins, and DXTable warns once per key.
+     */
+    const warnedSharedVisibleKeys = new Set<string>();
+    const seedFormData = (
+        valueFor: (field: FieldDefinition) => any,
+        context: Record<string, any>,
+    ): Record<string, any> => {
+        const fieldsByKey = new Map<string, FieldDefinition[]>();
+        submittableEditFields.value.forEach((field) => {
+            const sharing = fieldsByKey.get(field.key);
+            if (sharing) sharing.push(field);
+            else fieldsByKey.set(field.key, [field]);
+        });
+
+        const formData: Record<string, any> = {};
+        fieldsByKey.forEach((fields, key) => {
+            formData[key] = valueFor(fields[0]);
+        });
+
+        const seededModel = { ...context, ...formData };
+        fieldsByKey.forEach((fields, key) => {
+            if (fields.length < 2) return;
+            const visibleFields = fields.filter((field) =>
+                isFieldVisibleFor(field, seededModel),
+            );
+            if (visibleFields.length > 1 && !warnedSharedVisibleKeys.has(key)) {
+                warnedSharedVisibleKeys.add(key);
+                // eslint-disable-next-line no-console
+                console.warn(
+                    `[DXTable] ${visibleFields.length} submitting edit fields share the key "${key}" and are visible together, ` +
+                        'so they edit one value; the first declared seeds it. ' +
+                        'Give alternatives mutually exclusive `when` predicates, or mark a display-only one `submit: false`.',
+                );
+            }
+            if (visibleFields.length > 0 && visibleFields[0] !== fields[0]) {
+                formData[key] = valueFor(visibleFields[0]);
+            }
+        });
+        return formData;
+    };
+
     const stripNonSubmittedFields = (data: Record<string, any>): Record<string, any> => {
         if (nonSubmittedFieldKeys.value.size === 0) return data;
         return Object.fromEntries(
@@ -265,11 +309,9 @@ export function useResourceEditor<T = any>(
         // between successive row opens. Presentational fields (submit: false)
         // lay the form out; they hold no data and must not be POSTed just
         // because they were declared.
-        const formData: Record<string, any> = {};
-        submittableEditFields.value.forEach(field => {
-            formData[field.key] = seedValueFor(field, item);
-        });
-        startSession(formData);
+        startSession(
+            seedFormData((field) => seedValueFor(field, item), item as any),
+        );
 
         // Open modal
         editFormInstanceKey.value++;
@@ -332,11 +374,7 @@ export function useResourceEditor<T = any>(
         editLoading.value = false;
 
         // A fresh form seeded with the field defaults (see `startSession`).
-        const formData: Record<string, any> = {};
-        submittableEditFields.value.forEach(field => {
-            formData[field.key] = resolveFieldDefault(field);
-        });
-        startSession(formData);
+        startSession(seedFormData(resolveFieldDefault, {}));
         editFormInstanceKey.value++;
         showEditModal.value = true;
     };

package/resources/js/index.ts

@@ -148,6 +148,8 @@ export type {
     FormTab,
     MaybeFn,
     OptionsLoader,
+    PasswordActionsSlotProps,
+    EditPasswordActionsSlotProps,
     // Strict, discriminated field types (#131) — opt-in; canonical in a future
     // major. `FieldDef` is the union; the rest are its per-type members.
     FieldDef,

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;
 
@@ -579,6 +597,7 @@ export interface ComponentFieldDef extends BaseFieldDef {
 export interface RepeaterFieldDef extends BaseFieldDef {
     type: "repeater";
     fields?: FieldDef[];
+    rowLabel?: (row: Record<string, any>, index: number) => string | null | undefined;
     addLabel?: string;
     minItems?: number;
     maxItems?: number;
@@ -652,6 +671,51 @@ export interface FormTab {
     lazy?: boolean;
 }
 
+/**
+ * Slot props of DXField's `password-actions` slot (DXForm:
+ * `password-actions(<key>)`): content placed beside a password input, inside
+ * its input group after the reveal (eye) toggle, such as a "Generate password"
+ * button. `setRevealed` drives the same state the eye toggles.
+ *
+ * ```vue
+ * <template #password-actions(password)="{ update, setRevealed, disabled }">
+ *   <DButton variant="outline-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

@@ -31,7 +31,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;
 }
 
@@ -137,6 +140,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 +174,8 @@ 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; 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
@@ -254,6 +278,8 @@ export function resolveErrorTargets(
         // label resolves against the row here too.
         const row = getByPath(model, `${field.key}.${first}`);
         const rowModel = row !== null && typeof row === "object" ? row : {};
+        const rowName = rowLabelFor(field, rowModel, Number(first));
+        if (rowName !== null) return rowName;
         const base = subField ? labelFor(subField, rowModel) : labelFor(field);
         return `${base} (line ${Number(first) + 1})`;
     };

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)),
+    );
+}