58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { FC } from "react";
|
||
|
|
import { useFormState } from "react-dom";
|
||
|
|
import { Grid } from "@mui/material";
|
||
|
|
import { TextField } from "ui";
|
||
|
|
import { Selectable } from "kysely";
|
||
|
|
import { Database } from "@/app/_lib/database";
|
||
|
|
import { Edit as InternalEdit } from "@/app/_components/Edit";
|
||
|
|
import { generateUpdateAction } from "@/app/_lib/actions";
|
||
|
|
import { serviceConfig } from "@/app/_lib/config";
|
||
|
|
|
||
|
|
type EditProps = {
|
||
|
|
service: string;
|
||
|
|
row: Selectable<keyof Database>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Edit: FC<EditProps> = ({ service, row }) => {
|
||
|
|
const {
|
||
|
|
[service]: { entity, table, displayName, updateFields: fields },
|
||
|
|
} = serviceConfig;
|
||
|
|
const updateFieldNames = fields.map((val) => val.name);
|
||
|
|
const updateAction = generateUpdateAction({ entity, table, fields });
|
||
|
|
const initialState = {
|
||
|
|
message: null,
|
||
|
|
errors: {},
|
||
|
|
values: Object.fromEntries(
|
||
|
|
Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
|
||
|
|
),
|
||
|
|
};
|
||
|
|
console.log("initialState", initialState);
|
||
|
|
const [formState, formAction] = useFormState(updateAction, initialState);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<InternalEdit
|
||
|
|
title={`Edit ${displayName}: ${row.name}`}
|
||
|
|
entity={entity}
|
||
|
|
formAction={formAction}
|
||
|
|
formState={formState}
|
||
|
|
>
|
||
|
|
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
|
||
|
|
{fields.map((field) => (
|
||
|
|
<Grid item xs={field.size ?? 6}>
|
||
|
|
<TextField
|
||
|
|
key={field.name}
|
||
|
|
name={field.name}
|
||
|
|
label={field.label}
|
||
|
|
required={field.required ?? false}
|
||
|
|
formState={formState}
|
||
|
|
helperText={field.helperText}
|
||
|
|
/>
|
||
|
|
</Grid>
|
||
|
|
))}
|
||
|
|
</Grid>
|
||
|
|
</InternalEdit>
|
||
|
|
);
|
||
|
|
};
|