From 231869debfe2f2e6c940a934082f0ba2450a3b15 Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Tue, 25 Aug 2026 00:23:20 +0530 Subject: [PATCH] feat(react-openapi): date-aware display formatting + x-edit-as for datetime fields --- react-openapi/index.ts | 1 + .../components/fields/ListCellRenderer.tsx | 5 +- .../components/fields/renderers/DateField.tsx | 25 ++++++-- .../fields/renderers/InlineRefField.tsx | 3 +- react-openapi/src/components/fields/utils.ts | 4 +- .../src/transformers/field-config.ts | 2 + react-openapi/src/types.ts | 2 + react-openapi/src/utils/datetime.ts | 63 +++++++++++++++++++ src/Reports/ReportViewer.tsx | 4 +- 9 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 react-openapi/src/utils/datetime.ts diff --git a/react-openapi/index.ts b/react-openapi/index.ts index 0dd032d..5852ac9 100644 --- a/react-openapi/index.ts +++ b/react-openapi/index.ts @@ -17,5 +17,6 @@ export { getApi } from "./src/hooks/useApi"; export { useItemSse } from "./src/hooks/useItemSse"; export { sanitizePayload } from "./src/utils/sanitize-payload"; export type { FkResolver } from "./src/utils/sanitize-payload"; +export { formatDate, formatDateTime } from "./src/utils/datetime"; export type { FilterComponentProps } from "./src/context/useResource"; export type { SpecConfiguration, ResourceConfig, FieldConfig, FKFieldConfig, ResourceRelationship, ProfileOperation, ProfileComponents, AuthConfig } from "./src/types"; diff --git a/react-openapi/src/components/fields/ListCellRenderer.tsx b/react-openapi/src/components/fields/ListCellRenderer.tsx index 598dd16..9d6e235 100644 --- a/react-openapi/src/components/fields/ListCellRenderer.tsx +++ b/react-openapi/src/components/fields/ListCellRenderer.tsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import { Box, Typography, Chip, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material"; import type { FieldConfig } from "../../types"; import { applyDisplayFormat, resolveMediaUrl } from "./utils"; +import { formatByFieldFormat } from "../../utils/datetime"; import { InlineRefField } from "./renderers/InlineRefField"; import { CurrencyField } from "./renderers/CurrencyField"; import { extractFields } from "../../transformers/field-config"; @@ -57,7 +58,7 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List {sf.label} - {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : String(fv)} + {fv == null ? "—" : typeof fv === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(fv, sf.inlineDisplayFormat) : JSON.stringify(fv)) : formatByFieldFormat(fv, sf.format)} @@ -153,5 +154,5 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List return {applyDisplayFormat(value, displayFormat ?? "")}; } - return {String(value)}; + return {formatByFieldFormat(value, field.format)}; } diff --git a/react-openapi/src/components/fields/renderers/DateField.tsx b/react-openapi/src/components/fields/renderers/DateField.tsx index 8540006..5f335e7 100644 --- a/react-openapi/src/components/fields/renderers/DateField.tsx +++ b/react-openapi/src/components/fields/renderers/DateField.tsx @@ -10,11 +10,26 @@ interface Props { } export function DateField({ field, value, onChange, error }: Props) { - const inputType = field.format === "date" ? "date" : "datetime-local"; + // `x-edit-as: date` renders a date-time field as a plain date picker; + // the picked day is submitted as midnight so the stored type is intact. + const editAsDate = field.format === "date" || field.editAs === "date"; - const normalized = field.format === "date-time" && typeof value === "string" - ? value.replace(/\.\d+Z$/, "").replace(/Z$/, "") - : value; + const inputType = editAsDate ? "date" : "datetime-local"; + + const normalized = (() => { + if (field.format !== "date-time" || typeof value !== "string") return value; + if (editAsDate) return value.slice(0, 10); + return value.replace(/\.\d+Z$/, "").replace(/Z$/, ""); + })(); + + const handleChange = (e: React.ChangeEvent) => { + const v = e.target.value; + if (editAsDate && field.format === "date-time" && /^\d{4}-\d{2}-\d{2}$/.test(v)) { + onChange(`${v}T00:00:00`); + } else { + onChange(v); + } + }; return ( onChange(e.target.value)} + onChange={handleChange} error={!!error} helperText={error || field.description || undefined} placeholder={field.description || undefined} diff --git a/react-openapi/src/components/fields/renderers/InlineRefField.tsx b/react-openapi/src/components/fields/renderers/InlineRefField.tsx index 5a4adc6..d28a77e 100644 --- a/react-openapi/src/components/fields/renderers/InlineRefField.tsx +++ b/react-openapi/src/components/fields/renderers/InlineRefField.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Box, Typography, Chip, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material"; import type { FieldConfig } from "../../../types"; import { applyDisplayFormat } from "../utils"; +import { formatByFieldFormat } from "../../../utils/datetime"; import { extractFields } from "../../../transformers/field-config"; import { useAppContext } from "../../../context/AppContext"; @@ -68,7 +69,7 @@ export function InlineRefField({ field, value }: Props) { {sf.label} - {value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : String(value[sf.name])} + {value?.[sf.name] == null ? "—" : typeof value[sf.name] === "object" ? (sf.inlineDisplayFormat ? applyDisplayFormat(value[sf.name], sf.inlineDisplayFormat) : JSON.stringify(value[sf.name])) : formatByFieldFormat(value[sf.name], sf.format)} ))} diff --git a/react-openapi/src/components/fields/utils.ts b/react-openapi/src/components/fields/utils.ts index 66407a5..a6ed871 100644 --- a/react-openapi/src/components/fields/utils.ts +++ b/react-openapi/src/components/fields/utils.ts @@ -1,3 +1,5 @@ +import { formatIsoLike } from "../../utils/datetime"; + function getNested(obj: any, path: string): any { return path.split(".").reduce((o, k) => o?.[k], obj); } @@ -6,7 +8,7 @@ export function applyDisplayFormat(item: any, format: string): string { if (!item || typeof item !== "object") return String(item ?? ""); return format.replace(/\{([\w.]+)\}/g, (_, key) => { const val = getNested(item, key); - return val != null ? String(val) : ""; + return val != null ? formatIsoLike(val) : ""; }); } diff --git a/react-openapi/src/transformers/field-config.ts b/react-openapi/src/transformers/field-config.ts index cbdb793..526e8b0 100644 --- a/react-openapi/src/transformers/field-config.ts +++ b/react-openapi/src/transformers/field-config.ts @@ -64,6 +64,7 @@ function extractOneOfOptions(schema: any, schemas: Record, discrimi description: prop["x-description"] ?? "", type: prop.type ?? "string", format: prop.format, + editAs: prop["x-edit-as"], order: prop["x-order"] ?? Infinity, hidden: prop["x-hidden"] ?? {}, filterable: prop["x-filterable"] ?? false, @@ -130,6 +131,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record "24 Aug 2026"; non-ISO values pass through. */ +export function formatDate(value: any): string { + const d = parseIso(value); + return d ? DATE_FMT.format(d) : fallback(value); +} + +/** "2026-08-24T09:07:25" -> "24 Aug 2026, 09:07"; non-ISO values pass through. */ +export function formatDateTime(value: any): string { + const d = parseIso(value); + return d ? DATETIME_FMT.format(d) : fallback(value); +} + +/** Route by OpenAPI field format ("date" | "date-time"); other formats render plainly. */ +export function formatByFieldFormat(value: any, format?: string): string { + if (format === "date") return formatDate(value); + if (format === "date-time") return formatDateTime(value); + return fallback(value); +} + +/** + * Metadata-free variant for display-format templates ({key} interpolation): + * reformats a scalar only when it happens to be ISO-shaped. + */ +export function formatIsoLike(value: any): string { + if (typeof value === "string") { + if (ISO_DATETIME.test(value)) return formatDateTime(value); + if (ISO_DATE.test(value)) return formatDate(value); + } + return fallback(value); +} diff --git a/src/Reports/ReportViewer.tsx b/src/Reports/ReportViewer.tsx index ad151f2..fa2bd82 100644 --- a/src/Reports/ReportViewer.tsx +++ b/src/Reports/ReportViewer.tsx @@ -4,7 +4,7 @@ import CloseIcon from "@mui/icons-material/Close"; import CachedIcon from "@mui/icons-material/Cached"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; -import { FkMultiSelectField, useResource, formatCurrency } from "../../react-openapi"; +import { FkMultiSelectField, useResource, formatCurrency, formatDateTime } from "../../react-openapi"; import type { FieldConfig } from "../../react-openapi"; import { StatCard } from "../common/components/StatCard"; import { TransactionList } from "../common/components/TransactionList"; @@ -266,7 +266,7 @@ export function ReportViewer({ id, version, fields, onClose, onRegenerated }: Re - flow {report.flow} · generated {report.generated_at ?? report.created_at} + flow {report.flow} · generated {formatDateTime(report.generated_at ?? report.created_at)} {range && (