Refactoring 2
This commit is contained in:
Darren Clarke
parent
dd14dfe72e
commit
e4b78ceec2
76 changed files with 870 additions and 734 deletions
|
|
@ -1,89 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { useFormState } from "react-dom";
|
||||
import { Grid } from "@mui/material";
|
||||
import { TextField, Select, MultiValueField } from "ui";
|
||||
import { Create as InternalCreate } from "@/app/_components/Create";
|
||||
import { generateCreateAction } from "@/app/_lib/actions";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
import { FieldDescription } from "@/app/_lib/service";
|
||||
|
||||
type CreateProps = {
|
||||
service: string;
|
||||
};
|
||||
|
||||
export const Create: FC<CreateProps> = ({ service }) => {
|
||||
const {
|
||||
[service]: { entity, table, displayName, createFields },
|
||||
} = serviceConfig;
|
||||
const fields = createFields.map((field: any) => {
|
||||
const copy = { ...field };
|
||||
Object.keys(copy).forEach((key: any) => {
|
||||
if (typeof copy[key] === "function") {
|
||||
delete copy[key];
|
||||
}
|
||||
});
|
||||
return copy;
|
||||
});
|
||||
|
||||
const createAction = generateCreateAction({ entity, table, fields });
|
||||
const initialState = {
|
||||
message: null,
|
||||
errors: {},
|
||||
values: fields.reduce(
|
||||
(acc: Record<string, any>, field: FieldDescription) => {
|
||||
acc[field.name] = field.defaultValue;
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
),
|
||||
};
|
||||
const [formState, formAction] = useFormState(createAction, initialState);
|
||||
|
||||
return (
|
||||
<InternalCreate
|
||||
title={`Create ${displayName}`}
|
||||
entity={entity}
|
||||
formAction={formAction}
|
||||
formState={formState}
|
||||
>
|
||||
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
|
||||
{createFields.map(
|
||||
(field) =>
|
||||
!field.hidden && (
|
||||
<Grid key={field.name} item xs={field.size ?? 6}>
|
||||
{field.kind === "select" && (
|
||||
<Select
|
||||
name={field.name}
|
||||
label={field.label}
|
||||
required={field.required ?? false}
|
||||
formState={formState}
|
||||
getOptions={field.getOptions}
|
||||
/>
|
||||
)}
|
||||
{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>
|
||||
</InternalCreate>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Create } from "./_components/Create";
|
||||
import { Create } from "bridge-ui";
|
||||
|
||||
type PageProps = {
|
||||
params: { segment: string[] };
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { Grid } from "@mui/material";
|
||||
import { DisplayTextField } from "ui";
|
||||
import { Selectable } from "kysely";
|
||||
import { Database } from "@/app/_lib/database";
|
||||
import { Detail as InternalDetail } from "@/app/_components/Detail";
|
||||
import { generateDeleteAction } from "@/app/_lib/actions";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
|
||||
type DetailProps = {
|
||||
service: string;
|
||||
row: Selectable<keyof Database>;
|
||||
};
|
||||
|
||||
export const Detail: FC<DetailProps> = ({ service, row }) => {
|
||||
const {
|
||||
[service]: { entity, table, displayName, displayFields: fields },
|
||||
} = serviceConfig;
|
||||
const deleteAction = generateDeleteAction({ entity, table });
|
||||
|
||||
return (
|
||||
<InternalDetail
|
||||
title={`${displayName}: ${row.name}`}
|
||||
entity={entity}
|
||||
id={row.id as string}
|
||||
deleteAction={deleteAction}
|
||||
>
|
||||
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
|
||||
{fields.map((field) => (
|
||||
<Grid item xs={field.size ?? 6} key={field.name}>
|
||||
<DisplayTextField
|
||||
name={field.name}
|
||||
label={field.label}
|
||||
lines={field.lines ?? 1}
|
||||
value={row[field.name] as string}
|
||||
copyable={field.copyable ?? false}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</InternalDetail>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { db } from "@/app/_lib/database";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
import { Detail } from "./_components/Detail";
|
||||
import { db } from "bridge-common";
|
||||
import { serviceConfig, Detail } from "bridge-ui";
|
||||
|
||||
type Props = {
|
||||
params: { segment: string[] };
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
"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/_config/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 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);
|
||||
|
||||
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 key={field.name} item xs={field.size ?? 6}>
|
||||
<TextField
|
||||
name={field.name}
|
||||
label={field.label}
|
||||
lines={field.lines ?? 1}
|
||||
disabled={field.disabled ?? false}
|
||||
refreshable={field.refreshable ?? false}
|
||||
required={field.required ?? false}
|
||||
formState={formState}
|
||||
helperText={field.helperText}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</InternalEdit>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { db } from "@/app/_lib/database";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
import { Edit } from "./_components/Edit";
|
||||
import { db } from "bridge-common";
|
||||
import { serviceConfig, Edit } from "bridge-ui";
|
||||
|
||||
type PageProps = {
|
||||
params: { segment: string[] };
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { List as InternalList } from "@/app/_components/List";
|
||||
import type { Selectable } from "kysely";
|
||||
import { Database } from "@/app/_lib/database";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
|
||||
type ListProps = {
|
||||
service: string;
|
||||
rows: Selectable<keyof Database>[];
|
||||
};
|
||||
|
||||
export const List: FC<ListProps> = ({ service, rows }) => {
|
||||
const { displayName, entity, listColumns } = serviceConfig[service];
|
||||
|
||||
return (
|
||||
<InternalList
|
||||
title={`${displayName}s`}
|
||||
entity={entity}
|
||||
rows={rows}
|
||||
columns={listColumns}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,32 +1,3 @@
|
|||
type ServiceLayoutProps = {
|
||||
children: any;
|
||||
detail: any;
|
||||
edit: any;
|
||||
create: any;
|
||||
params: {
|
||||
segment: string[];
|
||||
};
|
||||
};
|
||||
import { ServiceLayout } from "bridge-ui";
|
||||
|
||||
export default function ServiceLayout({
|
||||
children,
|
||||
detail,
|
||||
edit,
|
||||
create,
|
||||
params: { segment },
|
||||
}: ServiceLayoutProps) {
|
||||
const length = segment?.length ?? 0;
|
||||
const isCreate = length === 2 && segment[1] === "create";
|
||||
const isEdit = length === 3 && segment[2] === "edit";
|
||||
const id = length > 1 && !isCreate ? segment[1] : null;
|
||||
const isDetail = length === 2 && !!id && !isCreate && !isEdit;
|
||||
|
||||
return (
|
||||
<>
|
||||
{children}
|
||||
{isDetail && detail}
|
||||
{isEdit && edit}
|
||||
{isCreate && create}
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default ServiceLayout;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { List } from "./_components/List";
|
||||
import { db } from "@/app/_lib/database";
|
||||
import { serviceConfig } from "@/app/_config/config";
|
||||
import { db } from "bridge-common";
|
||||
import { serviceConfig, List } from "bridge-ui";
|
||||
|
||||
type PageProps = {
|
||||
params: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue