122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useEffect, useState } from "react";
|
|
import { useFormState } from "react-dom";
|
|
import { Grid } from "@mui/material";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
TextField,
|
|
Dialog,
|
|
Button,
|
|
Select,
|
|
MultiValueField,
|
|
} from "@link-stack/ui";
|
|
import { Selectable } from "kysely";
|
|
import { type Database } from "@link-stack/bridge-common";
|
|
import { generateUpdateAction } from "../lib/actions";
|
|
import { serviceConfig } from "../config/config";
|
|
import { FieldDescription } from "../lib/service";
|
|
import { getBasePath } from "../lib/frontendUtils";
|
|
|
|
type EditProps = {
|
|
service: string;
|
|
row: Selectable<keyof Database>;
|
|
};
|
|
|
|
export const Edit: FC<EditProps> = ({ service, row }) => {
|
|
const {
|
|
[service]: { entity, table, displayName, updateFields },
|
|
} = serviceConfig;
|
|
const fields = updateFields.map((field: any) => {
|
|
const copy = { ...field };
|
|
Object.keys(copy).forEach((key: any) => {
|
|
if (typeof copy[key] === "function") {
|
|
delete copy[key];
|
|
}
|
|
});
|
|
return copy;
|
|
});
|
|
const updateFieldNames = fields.map((val: FieldDescription) => val.name);
|
|
const updateAction = generateUpdateAction({ entity, table, fields });
|
|
const updateValues = Object.fromEntries(
|
|
Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
|
|
);
|
|
updateValues.id = row.id;
|
|
const initialState = {
|
|
message: null,
|
|
errors: {},
|
|
values: updateValues,
|
|
};
|
|
const [formState, formAction] = useFormState(updateAction, initialState);
|
|
const router = useRouter();
|
|
const [liveFormState, setLiveFormState] = useState(formState);
|
|
const updateFormState = (field: string, value: any) => {
|
|
const newState = { ...liveFormState };
|
|
newState.values[field] = value;
|
|
setLiveFormState(newState);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (formState.success) {
|
|
router.push(`${getBasePath()}${entity}`);
|
|
}
|
|
}, [formState.success, router, entity]);
|
|
|
|
return (
|
|
<Dialog
|
|
open
|
|
title={`Edit ${displayName}`}
|
|
formAction={formAction}
|
|
onClose={() => router.push(`${getBasePath()}${entity}`)}
|
|
buttons={
|
|
<Grid container justifyContent="space-between">
|
|
<Grid item>
|
|
<Button
|
|
text="Cancel"
|
|
kind="secondary"
|
|
onClick={() => router.push(`${getBasePath()}${entity}`)}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button text="Save" kind="primary" type="submit" />
|
|
</Grid>
|
|
</Grid>
|
|
}
|
|
>
|
|
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
|
|
{updateFields.map((field: FieldDescription) => (
|
|
<Grid key={field.name} item xs={field.size ?? 6}>
|
|
{field.kind === "select" && (
|
|
<Select
|
|
name={field.name}
|
|
label={field.label}
|
|
required={field.required ?? false}
|
|
formState={liveFormState}
|
|
getOptions={field.getOptions}
|
|
updateFormState={updateFormState}
|
|
/>
|
|
)}
|
|
{field.kind === "multi" && (
|
|
<MultiValueField
|
|
name={field.name}
|
|
label={field.label}
|
|
formState={formState}
|
|
helperText={field.helperText}
|
|
/>
|
|
)}
|
|
{(!field.kind || field.kind === "text") && (
|
|
<TextField
|
|
name={field.name}
|
|
label={field.label}
|
|
lines={field.lines ?? 1}
|
|
required={field.required ?? false}
|
|
formState={formState}
|
|
helperText={field.helperText}
|
|
/>
|
|
)}
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Dialog>
|
|
);
|
|
};
|