apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form single line per field

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-06-19 19:18:41 +05:30
parent ac7c3d6313
commit 9a80a52fd5
3 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
react-openapi/src/components/ResourceDetail.tsx
View File

@@ -85,7 +85,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
fmt = field.inlineDisplayFormat ?? resource.displayFormat; fmt = field.inlineDisplayFormat ?? resource.displayFormat;
} }
return ( return (
<Grid item xs={12} sm={6} md={4} key={field.name}> <Grid size={12} key={field.name}>
<DetailFieldRenderer field={field} value={value} displayFormat={fmt} /> <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
</Grid> </Grid>
); );

13
react-openapi/src/components/ResourceForm.tsx
View File

@@ -106,7 +106,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
} }
const opts = items.map((item: any) => ({ const opts = items.map((item: any) => ({
value: item[targetRes.primaryKey], value: resolvePk(item, targetRes.primaryKey),
label: applyFormat(item, targetRes.displayFormat), label: applyFormat(item, targetRes.displayFormat),
})); }));
console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3)); console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3));
@@ -139,9 +139,9 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
const targetRes = allResources.find((r) => r.name === rel.config.resource); const targetRes = allResources.find((r) => r.name === rel.config.resource);
if (targetRes) { if (targetRes) {
if (Array.isArray(val)) { if (Array.isArray(val)) {
resolved[rel.fieldName] = val.map((item: any) => item[targetRes.primaryKey]); resolved[rel.fieldName] = val.map((item: any) => resolvePk(item, targetRes.primaryKey));
} else if (typeof val === "object") { } else if (typeof val === "object") {
resolved[rel.fieldName] = val[targetRes.primaryKey]; resolved[rel.fieldName] = resolvePk(val, targetRes.primaryKey);
} }
} }
if (!rel.config.prefetch) { if (!rel.config.prefetch) {
@@ -237,7 +237,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
{resource.orderedFields {resource.orderedFields
.filter((f) => !(f.name === resource.primaryKey && mode === "edit")) .filter((f) => !(f.name === resource.primaryKey && mode === "edit"))
.map((field) => ( .map((field) => (
<Grid item xs={12} sm={6} md={4} key={field.name}> <Grid size={12} key={field.name}>
<FormFieldRenderer <FormFieldRenderer
field={field} field={field}
value={formData[field.name]} value={formData[field.name]}
@@ -281,6 +281,11 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
); );
} }
function resolvePk(item: any, pk: string): any {
const v = item?.[pk];
return v != null ? v : item?.[`_${pk}`];
}
function applyFormat(obj: any, format: string): string { function applyFormat(obj: any, format: string): string {
if (!obj || typeof obj !== "object") return String(obj ?? ""); if (!obj || typeof obj !== "object") return String(obj ?? "");
return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? "")); return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));

2
react-openapi/src/components/ResourceList.tsx
View File

@@ -387,7 +387,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
{detailRow && ( {detailRow && (
<Grid container spacing={2} sx={{ mt: 0.5 }}> <Grid container spacing={2} sx={{ mt: 0.5 }}>
{visibleColumns.map((col) => ( {visibleColumns.map((col) => (
<Grid key={col.name} item xs={12} sm={6}> <Grid key={col.name} size={{ xs: 12, sm: 6 }}>
<DetailFieldRenderer <DetailFieldRenderer
field={col} field={col}
value={detailRow[col.name]} value={detailRow[col.name]}