Skip to content

Commit f259e4f

Browse files
francislifrancisli
committed
Update all DataTablePage implementations
1 parent bb51c3d commit f259e4f

4 files changed

Lines changed: 75 additions & 109 deletions

File tree

‎src/components/design_system/dataTable/DataTablePage.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface DataTablePageRenderProps<RecordType, NewRecordType> {
2323
columns: DataTableColumn[];
2424
emptyElement: ReactNode;
2525
renderCount?: () => ReactNode;
26-
renderFormRow: (
26+
renderForm: (
2727
record: NewRecordType,
2828
hasError: (path: string[]) => boolean,
2929
errors?: { path: string[] }[]
@@ -128,7 +128,7 @@ export function withDataTablePage<
128128
onSubmit,
129129
columns: COLUMNS,
130130
renderCount,
131-
renderFormRow,
131+
renderForm,
132132
renderRow,
133133
}) => (
134134
<>
@@ -199,7 +199,9 @@ export function withDataTablePage<
199199
onSubmitInternal(event, record, onSubmit)
200200
}
201201
>
202-
{renderFormRow(record, hasError, errors)}
202+
<Stack spacing={3} sx={{ paddingTop: ".25rem" }}>
203+
{renderForm(record, hasError, errors)}
204+
</Stack>
203205
</form>
204206
</Dialog>
205207
)}

‎src/pages/admin/index.tsx‎

Lines changed: 37 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useRef, useState } from "react";
2-
import { Stack, TableRow, TableCell, TextField } from "@mui/material";
2+
import { TableRow, TableCell, TextField } from "@mui/material";
33
import Image from "next/image";
44
import { z } from "zod";
55

@@ -86,6 +86,10 @@ function Staff({
8686
setTimeout(() => focusRef.current?.focus(), 0);
8787
}
8888

89+
function onCancel() {
90+
setRecord(undefined);
91+
}
92+
8993
const utils = trpc.useUtils();
9094
const addRecord = trpc.user.createUser.useMutation({
9195
meta: { disableGlobalOnError: true },
@@ -105,6 +109,7 @@ function Staff({
105109
record,
106110
records: data?.records,
107111
onAddRecord,
112+
onCancel,
108113
onSubmit,
109114
columns: COLUMNS,
110115
emptyElement: (
@@ -114,61 +119,37 @@ function Staff({
114119
<Button onClick={onAddRecord}>Add User</Button>
115120
</>
116121
),
117-
renderFormRow: (record, hasError) => (
118-
<TableRow>
119-
<TableCell>
120-
<TextField
121-
inputRef={focusRef}
122-
label="First Name"
123-
value={record.first_name}
124-
onChange={(e) =>
125-
setRecord({ ...record, first_name: e.target.value })
126-
}
127-
error={hasError(["first_name"])}
128-
/>
129-
</TableCell>
130-
<TableCell>
131-
<TextField
132-
label="Last Name"
133-
value={record.last_name}
134-
onChange={(e) =>
135-
setRecord({ ...record, last_name: e.target.value })
136-
}
137-
error={hasError(["last_name"])}
138-
/>
139-
</TableCell>
140-
<TableCell>
141-
<TextField
142-
type="email"
143-
label="Email"
144-
value={record.email}
145-
onChange={(e) => setRecord({ ...record, email: e.target.value })}
146-
error={hasError(["email"])}
147-
/>
148-
</TableCell>
149-
<TableCell>
150-
<Dropdown
151-
itemList={[...ROLE_OPTIONS]}
152-
selectedOption={record.role}
153-
setSelectedOption={(role) =>
154-
setRecord({ ...record, role: role as string })
155-
}
156-
label="Role"
157-
/>
158-
</TableCell>
159-
<TableCell>
160-
<Stack
161-
direction="row"
162-
spacing={1}
163-
sx={{ justifyContent: "flex-end" }}
164-
>
165-
<Button type="submit">Save</Button>
166-
<Button variant="secondary" onClick={() => setRecord(undefined)}>
167-
Cancel
168-
</Button>
169-
</Stack>
170-
</TableCell>
171-
</TableRow>
122+
renderForm: (record, hasError) => (
123+
<>
124+
<TextField
125+
inputRef={focusRef}
126+
label="First Name"
127+
value={record.first_name}
128+
onChange={(e) => setRecord({ ...record, first_name: e.target.value })}
129+
error={hasError(["first_name"])}
130+
/>
131+
<TextField
132+
label="Last Name"
133+
value={record.last_name}
134+
onChange={(e) => setRecord({ ...record, last_name: e.target.value })}
135+
error={hasError(["last_name"])}
136+
/>
137+
<TextField
138+
type="email"
139+
label="Email"
140+
value={record.email}
141+
onChange={(e) => setRecord({ ...record, email: e.target.value })}
142+
error={hasError(["email"])}
143+
/>
144+
<Dropdown
145+
itemList={[...ROLE_OPTIONS]}
146+
selectedOption={record.role}
147+
setSelectedOption={(role) =>
148+
setRecord({ ...record, role: role as string })
149+
}
150+
label="Role"
151+
/>
152+
</>
172153
),
173154
renderRow: (record, router) => (
174155
<TableRow

‎src/pages/staff/index.tsx‎

Lines changed: 29 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useRef, useState } from "react";
2-
import { Stack, TableRow, TableCell, TextField } from "@mui/material";
2+
import { TableRow, TableCell, TextField } from "@mui/material";
33
import Image from "next/image";
44

55
import Button from "@/components/design_system/button/Button";
@@ -72,6 +72,10 @@ function Staff({
7272
setTimeout(() => focusRef.current?.focus(), 0);
7373
}
7474

75+
function onCancel() {
76+
setRecord(undefined);
77+
}
78+
7579
const utils = trpc.useUtils();
7680
const addRecord = trpc.case_manager.addStaff.useMutation({
7781
meta: { disableGlobalOnError: true },
@@ -91,6 +95,7 @@ function Staff({
9195
record,
9296
records,
9397
onAddRecord,
98+
onCancel,
9499
onSubmit,
95100
columns: COLUMNS,
96101
emptyElement: (
@@ -100,51 +105,29 @@ function Staff({
100105
<Button onClick={onAddRecord}>Add Staff</Button>
101106
</>
102107
),
103-
renderFormRow: (record, hasError) => (
104-
<TableRow>
105-
<TableCell>
106-
<TextField
107-
inputRef={focusRef}
108-
label="First Name"
109-
value={record.first_name}
110-
onChange={(e) =>
111-
setRecord({ ...record, first_name: e.target.value })
112-
}
113-
error={hasError(["first_name"])}
114-
/>
115-
</TableCell>
116-
<TableCell>
117-
<TextField
118-
label="Last Name"
119-
value={record.last_name}
120-
onChange={(e) =>
121-
setRecord({ ...record, last_name: e.target.value })
122-
}
123-
error={hasError(["last_name"])}
124-
/>
125-
</TableCell>
126-
<TableCell>
127-
<TextField
128-
type="email"
129-
label="Email"
130-
value={record.email}
131-
onChange={(e) => setRecord({ ...record, email: e.target.value })}
132-
error={hasError(["email"])}
133-
/>
134-
</TableCell>
135-
<TableCell>
136-
<Stack
137-
direction="row"
138-
spacing={1}
139-
sx={{ justifyContent: "flex-end" }}
140-
>
141-
<Button type="submit">Save</Button>
142-
<Button variant="secondary" onClick={() => setRecord(undefined)}>
143-
Cancel
144-
</Button>
145-
</Stack>
146-
</TableCell>
147-
</TableRow>
108+
renderForm: (record, hasError) => (
109+
<>
110+
<TextField
111+
inputRef={focusRef}
112+
label="First Name"
113+
value={record.first_name}
114+
onChange={(e) => setRecord({ ...record, first_name: e.target.value })}
115+
error={hasError(["first_name"])}
116+
/>
117+
<TextField
118+
label="Last Name"
119+
value={record.last_name}
120+
onChange={(e) => setRecord({ ...record, last_name: e.target.value })}
121+
error={hasError(["last_name"])}
122+
/>
123+
<TextField
124+
type="email"
125+
label="Email"
126+
value={record.email}
127+
onChange={(e) => setRecord({ ...record, email: e.target.value })}
128+
error={hasError(["email"])}
129+
/>
130+
</>
148131
),
149132
renderRow: (record, router) => (
150133
<TableRow

‎src/pages/students/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useRef, useState } from "react";
22
import { format } from "date-fns";
3-
import { Stack, TableRow, TableCell, TextField } from "@mui/material";
3+
import { TableRow, TableCell, TextField } from "@mui/material";
44
import Image from "next/image";
55

66
import Button from "@/components/design_system/button/Button";
@@ -124,8 +124,8 @@ function Students({
124124
),
125125
renderCount: () =>
126126
`${Math.min((page - 1) * pageSize + 1, data?.totalCount ?? 0)}-${Math.min(page * pageSize, data?.totalCount ?? 0)} of ${data?.totalCount ?? 0} students`,
127-
renderFormRow: (record, hasError) => (
128-
<Stack spacing={3} sx={{ paddingTop: ".25rem" }}>
127+
renderForm: (record, hasError) => (
128+
<>
129129
<TextField
130130
inputRef={focusRef}
131131
label="First Name"
@@ -153,7 +153,7 @@ function Students({
153153
onChange={(e) => setRecord({ ...record, end_date: e.target.value })}
154154
error={hasError(["end_date"])}
155155
/>
156-
</Stack>
156+
</>
157157
),
158158
renderRow: (record, router) => (
159159
<TableRow

0 commit comments

Comments
 (0)