@truedat/df 8.13.4 → 8.13.6

package/src/components/widgets/__tests__/existingDateRestrictions.spec.js

@@ -0,0 +1,354 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { fireEvent } from "@testing-library/react";
+import { DynamicField } from "../DynamicField";
+import DynamicTableField from "../DynamicTableField";
+import { applyTemplate } from "../../../templates/utils/applyTemplate";
+import { validateContent } from "../../../templates/utils/validateContent";
+
+const restrictions = {
+  between: { mode: "static", start: "2026-01-01", end: "2026-12-31" },
+  resolved: { min: "2026-01-01", max: "2026-12-31" },
+};
+
+const dateField = (type, value) => ({
+  name: "date",
+  label: "Date",
+  type,
+  widget: type,
+  restrictions,
+  value: { value, origin: "user" },
+});
+
+describe("DynamicField existing date restrictions", () => {
+  it("ignores origin-only differences in wrapped multiple date values", () => {
+    const { container } = render(
+      <DynamicField
+        field={dateField("date", [{ value: "2025-01-01", origin: "user" }])}
+        originalField={{ value: [{ value: "2025-01-01", origin: "default" }] }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(container.querySelector(".error")).toBeNull();
+    expect(container.querySelector("input")).not.toHaveAttribute("min");
+  });
+  it.each([
+    ["date", "2025-01-01"],
+    ["datetime", "2025-01-01T12:00"],
+  ])("does not mark an unchanged existing %s as an error", (type, value) => {
+    const { container } = render(
+      <DynamicField
+        field={dateField(type, value)}
+        originalField={{ value, origin: "default" }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(container.querySelector(".error")).toBeNull();
+  });
+
+  it.each([
+    ["date", "2025-01-01"],
+    ["datetime", "2025-01-01T12:00"],
+  ])("removes native bounds for an unchanged existing %s", (type, value) => {
+    const { container } = render(
+      <DynamicField
+        field={dateField(type, value)}
+        originalField={{ value, origin: "default" }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(container.querySelector("input")).not.toHaveAttribute("min");
+    expect(container.querySelector("input")).not.toHaveAttribute("max");
+  });
+
+  it.each([undefined, null, { value: "2024-01-01", origin: "user" }])(
+    "marks a new or changed out-of-range value as an error (baseline %j)",
+    (originalField) => {
+      const { getByTestId } = render(
+        <DynamicField
+          field={dateField("date", "2025-01-01")}
+          originalField={originalField}
+          onChange={jest.fn()}
+        />,
+      );
+
+      expect(getByTestId("form-field")).toHaveClass("error");
+    },
+  );
+
+  it.each([undefined, { value: "2024-01-01", origin: "user" }])(
+    "retains native bounds for a new or changed value (baseline %j)",
+    (originalField) => {
+      const { container } = render(
+        <DynamicField
+          field={dateField("date", "2025-01-01")}
+          originalField={originalField}
+          onChange={jest.fn()}
+        />,
+      );
+
+      expect(container.querySelector("input")).toHaveAttribute(
+        "min",
+        "2026-01-01",
+      );
+      expect(container.querySelector("input")).toHaveAttribute(
+        "max",
+        "2026-12-31",
+      );
+    },
+  );
+
+  it("restores bounds when the existing date changes", () => {
+    const originalField = { value: "2025-01-01", origin: "user" };
+    const { container, rerender } = render(
+      <DynamicField
+        field={dateField("date", "2025-01-01")}
+        originalField={originalField}
+        onChange={jest.fn()}
+      />,
+    );
+
+    rerender(
+      <DynamicField
+        field={dateField("date", "2025-02-01")}
+        originalField={originalField}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(container.querySelector("input")).toHaveAttribute(
+      "min",
+      "2026-01-01",
+    );
+  });
+
+  it("does not suppress required errors on an unchanged empty field", () => {
+    const { getByText } = render(
+      <DynamicField
+        field={{ ...dateField("date", null), required: true }}
+        originalField={{ value: null, origin: "user" }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(
+      getByText("template.form.validation.empty_required"),
+    ).toBeInTheDocument();
+  });
+});
+
+const tableField = (rows, columns = [dateField("date")]) => ({
+  name: "table",
+  type: "table",
+  widget: "dynamic_table",
+  value: rows,
+  values: { table_columns: columns },
+});
+
+describe("DynamicTableField existing date restrictions", () => {
+  const columns = [
+    dateField("date"),
+    { name: "sibling", type: "string", widget: "string" },
+  ];
+  const schema = {
+    content: [
+      {
+        name: "group",
+        fields: [{ ...tableField([], columns), type: "dynamic_table" }],
+      },
+    ],
+  };
+  const row = (value) => ({
+    date: { value, origin: "user" },
+    sibling: { value: "old", origin: "user" },
+  });
+
+  const mountTable = async (originalRows) => {
+    const onChange = jest.fn();
+    const originalField = { value: originalRows, origin: "user" };
+    const view = (rows) => (
+      <DynamicTableField
+        field={tableField(rows, columns)}
+        originalField={originalField}
+        onChange={onChange}
+      />
+    );
+    const initial = applyTemplate(schema)({ table: originalField }).table.value;
+    const rendered = render(view(initial));
+    await waitForLoad(rendered);
+    const update = () => {
+      const rows = onChange.mock.calls.at(-1)[1].value;
+      const normalized = applyTemplate(schema)({
+        table: { value: rows, origin: "user" },
+      });
+      rendered.rerender(view(normalized.table?.value || []));
+      return normalized;
+    };
+    return { ...rendered, update, originalField };
+  };
+
+  it("keeps the survivor exempt after removing the first row and editing a sibling", async () => {
+    const rendered = await mountTable([row("2025-01-01"), row("2024-01-01")]);
+    fireEvent.click(rendered.container.querySelector("tbody .selectable"));
+    rendered.update();
+    fireEvent.change(
+      rendered.container.querySelector('input[name="sibling"]'),
+      { target: { value: "edited" } },
+    );
+    const normalized = rendered.update();
+
+    expect(rendered.container.querySelector("td.error")).toBeNull();
+    expect(
+      rendered.container.querySelector('input[type="date"]'),
+    ).not.toHaveAttribute("min");
+    expect(
+      validateContent(schema, { table: rendered.originalField })(normalized),
+    ).toEqual([]);
+  });
+
+  it.each([false, true])(
+    "rejects an added row matching a legacy date (delete first: %s)",
+    async (removeFirst) => {
+      const rendered = await mountTable([row("2025-01-01")]);
+      if (removeFirst) {
+        fireEvent.click(rendered.container.querySelector("tbody .selectable"));
+        rendered.update();
+      }
+      fireEvent.click(rendered.getByTestId("add-button"));
+      rendered.update();
+      const inputs = rendered.container.querySelectorAll('input[type="date"]');
+      fireEvent.change(inputs[inputs.length - 1], {
+        target: { value: "2025-01-01" },
+      });
+      const normalized = rendered.update();
+
+      expect(rendered.container.querySelector("td.error")).not.toBeNull();
+      expect(
+        validateContent(schema, { table: rendered.originalField })(normalized),
+      ).toEqual([
+        {
+          error: "date out of range",
+          field: `table.${removeFirst ? 0 : 1}.date`,
+          values: restrictions.resolved,
+        },
+      ]);
+    },
+  );
+
+  it("does not mark unchanged existing cells as errors", async () => {
+    const value = [{ date: { value: "2025-01-01", origin: "user" } }];
+    const rendered = render(
+      <DynamicTableField
+        field={tableField(value)}
+        originalField={{ value, origin: "user" }}
+        onChange={jest.fn()}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector(".error")).toBeNull();
+  });
+
+  it("bounds changed cells independently of unchanged neighboring cells", async () => {
+    const originalRows = [
+      { date: { value: "2025-01-01", origin: "user" } },
+      { date: { value: "2025-02-01", origin: "user" } },
+    ];
+    const rendered = render(
+      <DynamicTableField
+        field={tableField([
+          originalRows[0],
+          { date: { value: "2025-03-01", origin: "user" } },
+          { date: { value: "2025-04-01", origin: "user" } },
+        ])}
+        originalField={{ value: originalRows, origin: "user" }}
+        onChange={jest.fn()}
+      />,
+    );
+    await waitForLoad(rendered);
+    const inputs = rendered.container.querySelectorAll("input");
+
+    expect(inputs[0]).not.toHaveAttribute("min");
+    expect(inputs[1]).toHaveAttribute("min", "2026-01-01");
+    expect(inputs[2]).toHaveAttribute("min", "2026-01-01");
+  });
+
+  it("retains cell errors when a table has no original content", async () => {
+    const rendered = render(
+      <DynamicTableField
+        field={tableField([{ date: { value: "2025-01-01", origin: "user" } }])}
+        onChange={jest.fn()}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("td.error")).not.toBeNull();
+  });
+
+  it("passes original cell baselines recursively into nested tables", async () => {
+    const nestedRows = [{ date: { value: "2025-01-01", origin: "user" } }];
+    const rows = [{ table: { value: nestedRows, origin: "user" } }];
+    const rendered = render(
+      <DynamicTableField
+        field={tableField(rows, [tableField([])])}
+        originalField={{ value: rows, origin: "user" }}
+        onChange={jest.fn()}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("input")).not.toHaveAttribute(
+      "min",
+    );
+  });
+
+  it("preserves nested survivor baselines when a nested first row is removed", async () => {
+    const originalRows = [
+      {
+        table: {
+          value: [row("2025-01-01"), row("2024-01-01")],
+          origin: "user",
+        },
+      },
+    ];
+    const onChange = jest.fn();
+    const nestedColumn = { ...tableField([], columns), type: "dynamic_table" };
+    const view = (rows) => (
+      <DynamicTableField
+        field={tableField(rows, [nestedColumn])}
+        originalField={{ value: originalRows }}
+        onChange={onChange}
+      />
+    );
+    const rendered = render(view(originalRows));
+    await waitForLoad(rendered);
+    const nestedTable = rendered.container
+      .querySelector('input[type="date"]')
+      .closest("table");
+    fireEvent.click(nestedTable.querySelector("tbody .selectable"));
+    rendered.rerender(view(onChange.mock.calls.at(-1)[1].value));
+
+    expect(rendered.container.querySelector("td.error")).toBeNull();
+    expect(
+      rendered.container.querySelector('input[type="date"]'),
+    ).not.toHaveAttribute("min");
+  });
+
+  it("uses unresolved static restrictions for table cell errors too", async () => {
+    const column = {
+      ...dateField("date"),
+      restrictions: { between: restrictions.between },
+    };
+    const rendered = render(
+      <DynamicTableField
+        field={tableField([row("2025-01-01")], [column])}
+        onChange={jest.fn()}
+      />,
+    );
+    await waitForLoad(rendered);
+
+    expect(rendered.container.querySelector("td.error")).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,217 @@
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+const TYPES = [
+  { id: "template.field.restrictions.none", value: "none" },
+  { id: "template.field.restrictions.max_date", value: "max_date" },
+  { id: "template.field.restrictions.min_date", value: "min_date" },
+  { id: "template.field.restrictions.between", value: "between" },
+];
+
+const MODES = [
+  { id: "template.field.restrictions.mode.static", value: "static" },
+  { id: "template.field.restrictions.mode.dynamic", value: "dynamic" },
+];
+
+const UNITS = [
+  { id: "template.field.restrictions.units.days", value: "days" },
+  { id: "template.field.restrictions.units.weeks", value: "weeks" },
+  { id: "template.field.restrictions.units.months", value: "months" },
+  { id: "template.field.restrictions.units.years", value: "years" },
+];
+
+const detectType = (restrictions = {}) => {
+  if (restrictions.between || restrictions.between_start !== undefined)
+    return "between";
+  if (restrictions.max_date) return "max_date";
+  if (restrictions.min_date) return "min_date";
+  return "none";
+};
+
+const detectMode = (restrictions = {}, type) => {
+  const side =
+    type === "between"
+      ? restrictions.between
+      : type === "none"
+        ? undefined
+        : restrictions[type];
+
+  return side?.mode === "dynamic" ? "dynamic" : "static";
+};
+
+const emptyFor = (type, mode) => {
+  const side = () =>
+    mode === "static"
+      ? { mode: "static", value: "" }
+      : { mode: "dynamic", amount: "", unit: "days" };
+
+  switch (type) {
+    case "max_date":
+    case "min_date":
+      return { [type]: side() };
+    case "between":
+      return mode === "static"
+        ? { between: { mode: "static", start: "", end: "" } }
+        : {
+            between: {
+              mode: "dynamic",
+              from: { amount: "", unit: "days" },
+              to: { amount: "", unit: "days" },
+            },
+          };
+    default:
+      return {};
+  }
+};
+
+const options = (formatMessage) => (items) =>
+  items.map(({ id, value }) => ({
+    key: value,
+    text: formatMessage({ id }),
+    value,
+  }));
+
+export const DateRestrictionsForm = ({
+  field,
+  errors = {},
+  fieldNamePrefix,
+  onChange,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (field?.type !== "date" && field?.type !== "datetime") return null;
+
+  const restrictions = field.restrictions || {};
+  const type = detectType(restrictions);
+  const mode = detectMode(restrictions, type);
+  const isDatetime = field.type === "datetime";
+
+  const emit = (path, value) =>
+    onChange(null, { name: `${fieldNamePrefix}.restrictions.${path}`, value });
+
+  const handleType = (_, { value }) =>
+    onChange(null, {
+      name: `${fieldNamePrefix}.restrictions`,
+      value: emptyFor(value, "static"),
+    });
+
+  const handleMode = (_, { value }) =>
+    onChange(null, {
+      name: `${fieldNamePrefix}.restrictions`,
+      value: emptyFor(type, value),
+    });
+
+  const typeSelect = (
+    <Form.Select
+      label={formatMessage({ id: "template.field.restrictions.label" })}
+      options={options(formatMessage)(TYPES)}
+      value={type}
+      onChange={handleType}
+    />
+  );
+
+  const modeSelect = (
+    <Form.Select
+      label={formatMessage({ id: "template.field.restrictions.mode" })}
+      options={options(formatMessage)(MODES)}
+      value={mode}
+      onChange={handleMode}
+      error={errors.mode && { content: formatMessage({ id: errors.mode }) }}
+    />
+  );
+
+  const valueInput = (path, value, labelId) => (
+    <Form.Input
+      key={path}
+      label={formatMessage({ id: labelId })}
+      name={`${fieldNamePrefix}.restrictions.${path}`}
+      value={value || ""}
+      onChange={handleFieldChange}
+      type={isDatetime ? "datetime-local" : "date"}
+      error={errors[path] && { content: formatMessage({ id: errors[path] }) }}
+    />
+  );
+
+  const handleFieldChange = (e, { name, value }) => {
+    e?.preventDefault?.();
+    emit(name.split("restrictions.").pop(), value);
+  };
+
+  const amountInput = (path, amount) => (
+    <Form.Input
+      key={path}
+      type="number"
+      step="1"
+      label={formatMessage({ id: "template.field.restrictions.amount" })}
+      name={`${fieldNamePrefix}.restrictions.${path}`}
+      value={amount ?? ""}
+      onChange={handleFieldChange}
+      error={errors[path] && { content: formatMessage({ id: errors[path] }) }}
+    />
+  );
+
+  const unitSelect = (path, unit) => (
+    <Form.Select
+      key={path}
+      label={formatMessage({ id: "template.field.restrictions.unit" })}
+      name={`${fieldNamePrefix}.restrictions.${path}`}
+      options={options(formatMessage)(UNITS)}
+      value={unit || ""}
+      onChange={handleFieldChange}
+      error={errors[path] && { content: formatMessage({ id: errors[path] }) }}
+    />
+  );
+
+  const fromLabel = "template.field.restrictions.between.from";
+  const toLabel = "template.field.restrictions.between.to";
+  const valueLabel = "template.field.restrictions.value";
+
+  const side = restrictions[type] || {};
+  const range = restrictions.between || {};
+
+  const bounds =
+    type === "between"
+      ? mode === "static"
+        ? [
+            valueInput("between.start", range.start, fromLabel),
+            valueInput("between.end", range.end, toLabel),
+          ]
+        : [
+            amountInput("between.from.amount", range.from?.amount),
+            unitSelect("between.from.unit", range.from?.unit),
+            amountInput("between.to.amount", range.to?.amount),
+            unitSelect("between.to.unit", range.to?.unit),
+          ]
+      : mode === "static"
+        ? [valueInput(`${type}.value`, side.value, valueLabel)]
+        : [
+            amountInput(`${type}.amount`, side.amount),
+            unitSelect(`${type}.unit`, side.unit),
+          ];
+
+  if (type === "none") {
+    return (
+      <Form.Group size="small" widths="equal">
+        {typeSelect}
+      </Form.Group>
+    );
+  }
+
+  return (
+    <Form.Group size="small" widths="equal">
+      {typeSelect}
+      {modeSelect}
+      {bounds}
+    </Form.Group>
+  );
+};
+
+DateRestrictionsForm.propTypes = {
+  field: PropTypes.object,
+  errors: PropTypes.object,
+  fieldNamePrefix: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default DateRestrictionsForm;

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

@@ -1,9 +1,62 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { Form } from "semantic-ui-react";
+import { Form, Label } from "semantic-ui-react";
 import NumberField from "../../../components/widgets/NumberField";
 import DateTimeField from "../../../components/widgets/DateTimeField";
 import DateField from "../../../components/widgets/DateField";
+import {
+  resolveRestrictions,
+  checkValuesAgainstBounds,
+} from "../../utils/dateRestrictions";
+
+const DateDefaultField = ({
+  Widget,
+  field,
+  name,
+  outOfRange,
+  onChange,
+  formatMessage,
+}) => {
+  const { min, max } = resolveRestrictions(field.restrictions, field.type);
+  const defaultValue = _.get("default.value")(field);
+  const belowMin = checkValuesAgainstBounds(defaultValue, { min, max });
+  const invalidDate = belowMin === "invalid_date";
+  const tooEarly = belowMin === "too_early";
+
+  return (
+    <Form.Field error={outOfRange}>
+      <Widget
+        field={{ ...field, value: _.get("default.value")(field) }}
+        label={formatMessage({ id: "template.field.values.default_value" })}
+        min={min}
+        max={max}
+        onChange={(e, { value }) => onChange(e, { name: name, value: value })}
+      />
+      {outOfRange && !invalidDate && (
+        <Label basic color="red" pointing="above">
+          {formatMessage(
+            {
+              id: tooEarly
+                ? "template.field.values.default_after_min"
+                : "template.field.values.default_before_max",
+            },
+            { limit: tooEarly ? min : max },
+          )}
+        </Label>
+      )}
+    </Form.Field>
+  );
+};
+
+DateDefaultField.propTypes = {
+  Widget: PropTypes.elementType.isRequired,
+
+  field: PropTypes.object,
+  name: PropTypes.string,
+  outOfRange: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  formatMessage: PropTypes.func.isRequired,
+};
 
 const defaultValueFormat = (d) => (_.isArray(d) ? _.first(d) : d);
 const multipleDefaultValueFormat = (d) => {
@@ -57,22 +110,37 @@ export const DefaultValue = ({
     multipleDefalultsAvaliableWidget.includes(field.widget) &&
     !multipleDefalultsDisableType.includes(type);
 
+  const dateFieldOutOfRange = (() => {
+    if (fieldType !== "date" && fieldType !== "datetime") return false;
+    if (_.isEmpty(field.restrictions)) return false;
+
+    const { min, max } = resolveRestrictions(field.restrictions, fieldType);
+    return (
+      checkValuesAgainstBounds(_.get("default.value")(field), { min, max }) !==
+      "ok"
+    );
+  })();
+
   return (
     <>
       {!type && fieldType === "date" && (
-        <DateField
-          field={{ ...field, value: _.get("default.value")(field) }}
-          onChange={(e, { value }) =>
-            onDefaultValueChange(e, { name: name, value: value })
-          }
+        <DateDefaultField
+          Widget={DateField}
+          field={field}
+          name={name}
+          outOfRange={dateFieldOutOfRange}
+          onChange={onDefaultValueChange}
+          formatMessage={formatMessage}
         />
       )}
       {!type && fieldType === "datetime" && (
-        <DateTimeField
-          field={{ ...field, value: _.get("default.value")(field) }}
-          onChange={(e, { value }) =>
-            onDefaultValueChange(e, { name: name, value: value })
-          }
+        <DateDefaultField
+          Widget={DateTimeField}
+          field={field}
+          name={name}
+          outOfRange={dateFieldOutOfRange}
+          onChange={onDefaultValueChange}
+          formatMessage={formatMessage}
         />
       )}
       {!type && (fieldType === "integer" || fieldType === "float") && (