@truedat/df 8.13.5 → 8.13.7

package/src/templates/components/templateForm/FieldDefinition.js

@@ -13,6 +13,7 @@ import {
 import { getValues } from "./valueDefinitions";
 
 const defaultType = (values) => _.flow(_.map("value"), _.first)(values);
+const isDateType = (type) => type === "date" || type === "datetime";
 
 const FieldDefinition = ({
   allowedTypes = [],
@@ -37,8 +38,18 @@ const FieldDefinition = ({
           value: { [value]: null },
         });
 
+  const clearRestrictionsForType = (e, nextType) => {
+    if (isDateType(type) && !isDateType(nextType)) {
+      onChange(e, {
+        name: `${fieldNamePrefix}.restrictions`,
+        value: null,
+      });
+    }
+  };
+
   const handleTypeChange = (e, data) => {
     const { value } = data;
+    clearRestrictionsForType(e, value);
     changeValue(valueName, defaultType(getValues(widget, value)) || "null");
     onChange(e, {
       name: defaultField,
@@ -59,6 +70,7 @@ const FieldDefinition = ({
     const { value } = data;
     const types = _.find({ value })(WIDGETS).types;
     const updatedType = _.indexOf(type)(types) < 0 ? _.head(types) : type;
+    clearRestrictionsForType(e, updatedType);
     changeValue(
       valueName,
       defaultType(getValues(value, updatedType)) || "null",
@@ -72,11 +84,13 @@ const FieldDefinition = ({
   };
 
   const typeCheckOnChange = (widgetOption) => {
-    if (widgetOption && _.indexOf(type)(widgetOption.types) < 0)
+    if (widgetOption && _.indexOf(type)(widgetOption.types) < 0) {
+      clearRestrictionsForType(null, widgetOption.types[0]);
       onChange(null, {
         name: `${fieldNamePrefix}.type`,
         value: widgetOption.types[0],
       });
+    }
   };
 
   const cardinalityCheckOnChange = (widgetOption) => {

package/src/templates/components/templateForm/TemplateForm.js

@@ -98,6 +98,10 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
           "searchable",
           "ai_suggestion",
         ];
+        const restrictionProperties =
+          field?.type === "date" || field?.type === "datetime"
+            ? ["restrictions"]
+            : [];
 
         const dependsProperty = _.isEmpty(_.path("depends.on")(field))
           ? []
@@ -106,6 +110,7 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
           ? []
           : ["mandatory"];
         const allFields = _.flow(
+          _.concat(restrictionProperties),
           _.concat(dependsProperty),
           _.concat(mandatoryProperty),
         )(fieldProperties);

package/src/templates/components/templateForm/ValuesField.js

@@ -5,6 +5,7 @@ import { Form, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { hasAiSuggestions, valueSegment, getKeyType } from "./valueDefinitions";
 import DefaultValue from "./DefaultValue";
+import DateRestrictionsForm from "./DateRestrictionsForm";
 import ValuesSelector from "./ValuesSelector";
 import ValuesConfiguration from "./ValuesConfiguration";
 
@@ -100,6 +101,12 @@ export const ValuesField = ({
             onChange={onChange}
             type={keyType}
           />
+          <DateRestrictionsForm
+            field={field}
+            errors={field?.errors?.restrictions}
+            fieldNamePrefix={fieldNamePrefix}
+            onChange={onChange}
+          />
         </Segment>
       );
 };

package/src/templates/components/templateForm/__tests__/FieldDefinition.spec.js

@@ -153,6 +153,54 @@ describe("FieldDefinition", () => {
     );
   });
 
+  test("clears date restrictions when a widget change switches to a non-date type", async () => {
+    const onChange = jest.fn();
+    const rendered = render(
+      <FieldDefinition
+        {...baseProps}
+        widget="date"
+        type="date"
+        onChange={onChange}
+      />,
+    );
+
+    const widgetDropdown = rendered.getAllByRole("listbox")[0];
+    await user.click(
+      within(widgetDropdown).getByRole("option", { name: "Text Input" }),
+    );
+
+    expect(onChange).toHaveBeenNthCalledWith(1, expect.anything(), {
+      name: "field.restrictions",
+      value: null,
+    });
+    expect(onChange).toHaveBeenLastCalledWith(
+      expect.anything(),
+      expect.objectContaining({ name: "field.widget", value: "string" }),
+    );
+  });
+
+  test("preserves date restrictions when switching between date widgets", async () => {
+    const onChange = jest.fn();
+    const rendered = render(
+      <FieldDefinition
+        {...baseProps}
+        widget="datetime"
+        type="datetime"
+        onChange={onChange}
+      />,
+    );
+    const widgetDropdown = rendered.getAllByRole("listbox")[0];
+
+    await user.click(
+      within(widgetDropdown).getByRole("option", { name: "Date Time" }),
+    );
+
+    expect(onChange).not.toHaveBeenCalledWith(null, {
+      name: "field.restrictions",
+      value: null,
+    });
+  });
+
   test("useEffect: auto-fixes invalid type/cardinality for a widget (real WIDGETS)", () => {
     const onChange = jest.fn();
 

package/src/templates/components/templateForm/__tests__/TemplateForm.spec.js

@@ -122,6 +122,113 @@ describe("<TemplateForm />", () => {
     ]);
   });
 
+  it("shows restriction errors and prevents saving an incomplete date range", async () => {
+    const onSubmit = jest.fn();
+    const invalidTemplate = {
+      ...validTemplate,
+      content: [
+        {
+          name: "Group1",
+          fields: [
+            {
+              name: "field1",
+              label: "Field 1",
+              type: "date",
+              widget: "date",
+              cardinality: "?",
+              values: {},
+              restrictions: {
+                between: { mode: "static", start: "", end: "2026-12-31" },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    const rendered = render(
+      <TemplateForm
+        template={invalidTemplate}
+        onSubmit={onSubmit}
+        loading={false}
+      />,
+      {
+        state: {
+          templateDeleting: false,
+          templateSaving: false,
+        },
+      },
+    );
+    await waitForLoad(rendered);
+
+    expect(
+      rendered.getByText("template.field.restrictions.validation.required"),
+    ).toBeInTheDocument();
+    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("keeps restrictions for date fields and excludes stale restrictions from other types on save", async () => {
+    const onSubmit = jest.fn();
+    const templateWithRestrictions = {
+      ...validTemplate,
+      content: [
+        {
+          name: "Group1",
+          fields: [
+            {
+              name: "date_field",
+              label: "Date Field",
+              type: "date",
+              widget: "date",
+              cardinality: "?",
+              values: {},
+              restrictions: {
+                max_date: { mode: "static", value: "2026-12-31" },
+              },
+            },
+            {
+              name: "text_field",
+              label: "Text Field",
+              type: "string",
+              widget: "string",
+              cardinality: "?",
+              values: {},
+              restrictions: {
+                max_date: { mode: "static", value: "2026-12-31" },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    const rendered = render(
+      <TemplateForm
+        template={templateWithRestrictions}
+        onSubmit={onSubmit}
+        loading={false}
+      />,
+      {
+        state: {
+          templateDeleting: false,
+          templateSaving: false,
+        },
+      },
+    );
+    await waitForLoad(rendered);
+
+    const user = userEvent.setup({ delay: null });
+    await user.click(rendered.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled());
+    const submittedFields =
+      onSubmit.mock.calls[0][0].template.content[0].fields;
+
+    expect(submittedFields[0].restrictions).toEqual({
+      max_date: { mode: "static", value: "2026-12-31" },
+    });
+    expect(submittedFields[1]).not.toHaveProperty("restrictions");
+  });
+
   it("initializes template_resource_relations from template when provided", async () => {
     const onSubmit = jest.fn();
     const initialRelations = [

package/src/templates/components/templateForm/__tests__/dateRestrictionsForm.spec.js

@@ -0,0 +1,429 @@
+import { useState } from "react";
+import { screen, fireEvent } from "@testing-library/react";
+import { renderWithIntl as render } from "@truedat/test/renderWithIntl";
+import { DateRestrictionsForm } from "../DateRestrictionsForm";
+
+const PREFIX = "content[0].fields[0]";
+
+const applyTo = (field, name, value) => {
+  const head = `${PREFIX}.restrictions`;
+  if (!name.startsWith(head)) return field;
+
+  const segments = name.slice(head.length).split(".").filter(Boolean);
+
+  if (segments.length === 0) return { ...field, restrictions: value };
+
+  const next = { ...(field.restrictions || {}) };
+  let cursor = next;
+
+  segments.forEach((segment, index) => {
+    if (index === segments.length - 1) {
+      cursor[segment] = value;
+    } else {
+      cursor[segment] = { ...(cursor[segment] || {}) };
+      cursor = cursor[segment];
+    }
+  });
+
+  return { ...field, restrictions: next };
+};
+
+const Harness = ({ initial, onChangeSpy }) => {
+  const [field, setField] = useState(initial);
+
+  return (
+    <DateRestrictionsForm
+      field={field}
+      errors={field.errors?.restrictions}
+      fieldNamePrefix={PREFIX}
+      onChange={(_, data) => {
+        onChangeSpy?.(data);
+        setField(applyTo(field, data.name, data.value));
+      }}
+    />
+  );
+};
+
+const mount = (initial, onChangeSpy) =>
+  render(<Harness initial={initial} onChangeSpy={onChangeSpy} />);
+
+const dateField = (restrictions, type = "date") => ({
+  name: "fecha",
+  label: "Fecha",
+  type,
+  widget: type,
+  restrictions,
+});
+
+const dropdownsIn = (container) => container.querySelectorAll(".ui.dropdown");
+
+const openOptions = () =>
+  Array.from(document.querySelectorAll(".ui.dropdown .menu > .item"));
+
+const choose = (container, occurrence, optionText) => {
+  fireEvent.click(dropdownsIn(container)[occurrence]);
+  fireEvent.click(
+    openOptions().find((item) => item.textContent === optionText),
+  );
+};
+
+const amountFor = (container, suffix) =>
+  container.querySelector(`input[name="${PREFIX}.restrictions.${suffix}"]`);
+
+const calendarFor = (container, suffix) =>
+  container.querySelector(`input[name="${PREFIX}.restrictions.${suffix}"]`);
+
+const labelsIn = (container) =>
+  Array.from(container.querySelectorAll("label")).map(
+    (label) => label.textContent,
+  );
+
+describe("choosing which restriction to apply", () => {
+  it("offers none, a maximum, a minimum or a range", () => {
+    const { container } = mount(dateField(undefined));
+
+    fireEvent.click(dropdownsIn(container)[0]);
+
+    expect(openOptions().map((item) => item.textContent)).toEqual([
+      "template.field.restrictions.none",
+      "template.field.restrictions.max_date",
+      "template.field.restrictions.min_date",
+      "template.field.restrictions.between",
+    ]);
+  });
+
+  it("none clears an existing restriction rather than leaving a stale bound", () => {
+    const spy = jest.fn();
+    const { container } = mount(
+      dateField({ max_date: { mode: "static", value: "2026-10-05" } }),
+      spy,
+    );
+
+    choose(container, 0, "template.field.restrictions.none");
+
+    expect(spy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        name: `${PREFIX}.restrictions`,
+        value: {},
+      }),
+    );
+  });
+
+  it("choosing a type reveals its mode and its bound", () => {
+    const { container } = mount(dateField(undefined));
+
+    choose(container, 0, "template.field.restrictions.max_date");
+
+    expect(labelsIn(container)).toEqual([
+      "template.field.restrictions.label",
+      "template.field.restrictions.mode",
+      "template.field.restrictions.value",
+    ]);
+  });
+});
+
+describe("layout", () => {
+  it("puts the type, the mode and the bound on one line", () => {
+    const { container } = mount(dateField(undefined));
+
+    choose(container, 0, "template.field.restrictions.max_date");
+
+    const group = container.querySelector(".equal.width.fields");
+    expect(group).not.toBeNull();
+    expect(group.querySelectorAll(":scope > .field")).toHaveLength(3);
+  });
+
+  it("keeps a relative range on one line too: four bound fields", () => {
+    const { container } = mount(
+      dateField({
+        between: {
+          mode: "dynamic",
+          from: { amount: -1, unit: "months" },
+          to: { amount: 1, unit: "years" },
+        },
+      }),
+    );
+
+    const group = container.querySelector(".equal.width.fields");
+    expect(group.querySelectorAll(":scope > .field")).toHaveLength(6);
+  });
+});
+
+describe("a fixed (static) maximum", () => {
+  it("offers a calendar and writes the chosen date", () => {
+    const spy = jest.fn();
+    const { container } = mount(dateField(undefined), spy);
+
+    choose(container, 0, "template.field.restrictions.max_date");
+    choose(container, 1, "template.field.restrictions.mode.static");
+
+    fireEvent.change(calendarFor(container, "max_date.value"), {
+      target: { value: "2026-10-05" },
+    });
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.max_date.value`,
+      value: "2026-10-05",
+    });
+  });
+
+  it("shows the stored date", () => {
+    const { container } = mount(
+      dateField({ max_date: { mode: "static", value: "2026-10-05" } }),
+    );
+
+    expect(calendarFor(container, "max_date.value")).toHaveValue("2026-10-05");
+  });
+
+  it("defaults to static mode", () => {
+    const { container } = mount(dateField(undefined));
+
+    choose(container, 0, "template.field.restrictions.max_date");
+
+    expect(
+      screen.getAllByText("template.field.restrictions.mode.static")[0],
+    ).toBeInTheDocument();
+  });
+
+  it("shows a validation error beside the invalid bound", () => {
+    const { container } = mount({
+      ...dateField({ max_date: { mode: "static", value: "" } }),
+      errors: {
+        restrictions: {
+          "max_date.value": "template.field.restrictions.validation.required",
+        },
+      },
+    });
+
+    expect(
+      container.querySelector('input[name$="max_date.value"]'),
+    ).toHaveAttribute("aria-invalid", "true");
+    expect(
+      screen.getByText("template.field.restrictions.validation.required"),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("a relative maximum", () => {
+  const relative = { max_date: { mode: "dynamic", amount: -6, unit: "days" } };
+
+  it("offers an amount and a unit instead of a calendar", () => {
+    const { container } = mount(dateField(relative));
+
+    expect(amountFor(container, "max_date.amount")).toHaveValue(-6);
+    expect(
+      screen.getAllByText("template.field.restrictions.units.days")[0],
+    ).toBeInTheDocument();
+    expect(container.querySelector('input[type="date"]')).toBeNull();
+  });
+
+  it("writes the unit that was chosen", () => {
+    const spy = jest.fn();
+    const { container } = mount(dateField(relative), spy);
+
+    fireEvent.click(dropdownsIn(container)[1]);
+    fireEvent.click(
+      openOptions().find(
+        (i) => i.textContent === "template.field.restrictions.units.months",
+      ),
+    );
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.max_date.unit`,
+      value: "months",
+    });
+  });
+
+  it("shows a positive amount for a minimum relative to the past", () => {
+    const { container } = mount(
+      dateField({ min_date: { mode: "dynamic", amount: 3, unit: "weeks" } }),
+    );
+
+    expect(amountFor(container, "min_date.amount")).toHaveValue(3);
+  });
+
+  it("keeps a negative minimum amount visible when editing existing data", () => {
+    const { container } = mount(
+      dateField({ min_date: { mode: "dynamic", amount: -3, unit: "weeks" } }),
+    );
+
+    expect(amountFor(container, "min_date.amount")).toHaveValue(-3);
+  });
+
+  it("accepts and saves a negative amount entered for a minimum", () => {
+    const spy = jest.fn();
+    const { container } = mount(
+      dateField({ min_date: { mode: "dynamic", amount: 3, unit: "weeks" } }),
+      spy,
+    );
+
+    fireEvent.change(amountFor(container, "min_date.amount"), {
+      target: { value: "-3" },
+    });
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.min_date.amount`,
+      value: "-3",
+    });
+  });
+
+  it("writes the signed amount as a number", () => {
+    const spy = jest.fn();
+    mount(dateField(relative), spy);
+
+    fireEvent.change(amountFor(document, "max_date.amount"), {
+      target: { value: "-2" },
+    });
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.max_date.amount`,
+      value: "-2",
+    });
+  });
+
+  it("preserves the sign of a relative amount entered for a maximum", () => {
+    const spy = jest.fn();
+    mount(
+      dateField({ max_date: { mode: "dynamic", amount: 2, unit: "days" } }),
+      spy,
+    );
+
+    fireEvent.change(amountFor(document, "max_date.amount"), {
+      target: { value: "3" },
+    });
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.max_date.amount`,
+      value: "3",
+    });
+  });
+});
+
+describe("a range", () => {
+  it("fixed offers two calendars, From and To", () => {
+    const { container } = mount(
+      dateField({
+        between: { mode: "static", start: "2026-01-01", end: "2026-12-31" },
+      }),
+    );
+
+    expect(calendarFor(container, "between.start")).toHaveValue("2026-01-01");
+    expect(calendarFor(container, "between.end")).toHaveValue("2026-12-31");
+    expect(labelsIn(container)).toEqual(
+      expect.arrayContaining([
+        "template.field.restrictions.label",
+        "template.field.restrictions.mode",
+        "template.field.restrictions.between.from",
+        "template.field.restrictions.between.to",
+      ]),
+    );
+  });
+
+  it("relative offers two amounts and two units", () => {
+    const { container } = mount(
+      dateField({
+        between: {
+          mode: "dynamic",
+          from: { amount: -1, unit: "months" },
+          to: { amount: 1, unit: "years" },
+        },
+      }),
+    );
+
+    expect(amountFor(container, "between.from.amount")).toHaveValue(-1);
+    expect(amountFor(container, "between.to.amount")).toHaveValue(1);
+
+    expect(
+      screen.getAllByText("template.field.restrictions.units.months")[0],
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByText("template.field.restrictions.units.years")[0],
+    ).toBeInTheDocument();
+  });
+
+  it("mode lives on the parent and never on each side", () => {
+    const spy = jest.fn();
+    const { container } = mount(dateField(undefined), spy);
+
+    choose(container, 0, "template.field.restrictions.between");
+    choose(container, 1, "template.field.restrictions.mode.dynamic");
+
+    const names = spy.mock.calls.map(([data]) => data.name);
+
+    expect(names).toContain(`${PREFIX}.restrictions`);
+
+    const modeWrites = names.filter((name) => name.endsWith(".mode"));
+    for (const name of modeWrites) {
+      expect(name).toBe(`${PREFIX}.restrictions.between.mode`);
+    }
+
+    const sides = spy.mock.calls
+      .map(([data]) => data)
+      .filter(
+        (data) => data.name.includes(".from.") || data.name.includes(".to."),
+      );
+    for (const side of sides) {
+      expect(side.name).not.toContain("mode");
+    }
+  });
+
+  it("the end of a range writes under `end`, not `to`", () => {
+    const spy = jest.fn();
+    const { container } = mount(
+      dateField({
+        between: { mode: "static", start: "2026-01-01", end: "2026-12-31" },
+      }),
+      spy,
+    );
+
+    fireEvent.change(calendarFor(container, "between.end"), {
+      target: { value: "2026-06-30" },
+    });
+
+    expect(spy).toHaveBeenLastCalledWith({
+      name: `${PREFIX}.restrictions.between.end`,
+      value: "2026-06-30",
+    });
+  });
+});
+
+describe("a datetime field", () => {
+  it("uses a date-time calendar, not a date one", () => {
+    const { container } = mount(
+      dateField(
+        { max_date: { mode: "static", value: "2026-10-05T18:30" } },
+        "datetime",
+      ),
+    );
+
+    expect(calendarFor(container, "max_date.value")).toHaveValue(
+      "2026-10-05T18:30",
+    );
+  });
+});
+
+describe("the legacy flat range", () => {
+  it("is read as a range rather than ignored", () => {
+    const { container } = mount(
+      dateField({
+        between_start: "2026-01-01",
+        between_end: "2026-12-31",
+      }),
+    );
+
+    expect(dropdownsIn(container)).toHaveLength(2);
+  });
+});
+
+describe("fields that cannot carry a restriction", () => {
+  it("a string field renders nothing", () => {
+    const { container } = render(
+      <Harness
+        initial={{ name: "s", type: "string", widget: "string" }}
+        onChangeSpy={jest.fn()}
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});