Skip to content

Commit 9617a66

Browse files
agmmtooagmmtoo
committed
fix: borrow return form
1 parent 163d79c commit 9617a66

File tree

4 files changed

+144
-26
lines changed

4 files changed

+144
-26
lines changed

‎app/(protected)/borrows/[id]/edit/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,9 @@ export default async function BorrowDetailsPage({
1818
return <div>{JSON.stringify(borrowRes.message)}</div>
1919
}
2020

21-
return <FormEditBorrow borrow={borrowRes.data} />
21+
return (
22+
<div className="grid place-items-center">
23+
<FormEditBorrow borrow={borrowRes.data} />
24+
</div>
25+
)
2226
}

‎app/(protected)/borrows/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ export default async function BorrowDetailsPage({
315315
</Card>
316316
)}
317317

318-
<div className="bottom-0 sticky py-2 grid md:grid-cols-2 gap-4">
318+
<div className="bottom-0 sticky py-2 flex flex-col md:flex-row gap-4 basis-1/2">
319319
{!borrowRes.data.returning && (
320320
<BtnReturnBook
321321
variant="outline"

‎components/borrows/FormEditBorrow.tsx‎

Lines changed: 131 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
'use client'
22

3-
import { Borrow } from '@/lib/types/borrow'
3+
import { BorrowDetail } from '@/lib/types/borrow'
44
import { zodResolver } from '@hookform/resolvers/zod'
55
import { useForm } from 'react-hook-form'
66
import { z } from 'zod'
77
import {
88
Form,
99
FormControl,
10-
FormDescription,
1110
FormField,
1211
FormItem,
1312
FormLabel,
@@ -19,19 +18,26 @@ import { Button } from '../ui/button'
1918
import { cn, formatDate } from '@/lib/utils'
2019
import { CalendarIcon } from 'lucide-react'
2120
import { Calendar } from '../ui/calendar'
21+
import { Input } from '../ui/input'
22+
import { useCallback } from 'react'
2223

2324
const FormSchema = z.object({
2425
id: z.string({
2526
required_error: 'Please select a borrow.',
2627
}),
2728
borrowed_at: z.string(),
28-
// due_at: z.coerce.string().datetime(),
29-
// staff_id: z.string({
30-
// required_error: 'Please select a staff.',
31-
// }),
29+
due_at: z.string(),
30+
returning: z
31+
.object({
32+
returned_at: z.string(),
33+
fine: z.coerce.number().nonnegative(),
34+
})
35+
.nullable(),
3236
})
3337

34-
export const FormEditBorrow: React.FC<{ borrow: Borrow }> = ({ borrow }) => {
38+
export const FormEditBorrow: React.FC<{ borrow: BorrowDetail }> = ({
39+
borrow,
40+
}) => {
3541
const form = useForm<z.infer<typeof FormSchema>>({
3642
resolver: zodResolver(FormSchema),
3743
defaultValues: borrow,
@@ -49,24 +55,68 @@ export const FormEditBorrow: React.FC<{ borrow: Borrow }> = ({ borrow }) => {
4955
})
5056
}
5157

58+
const onReset = useCallback(() => {
59+
form.reset()
60+
}, [form])
61+
5262
return (
5363
<Form {...form}>
54-
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
64+
<form
65+
onSubmit={form.handleSubmit(onSubmit)}
66+
className="grid md:grid-cols-2 gap-2"
67+
>
5568
<FormField
5669
control={form.control}
5770
name="borrowed_at"
5871
render={({ field }) => (
5972
<FormItem className="flex flex-col">
60-
<FormLabel>Borrowed At</FormLabel>
73+
<FormLabel>Borrow Date</FormLabel>
6174
<Popover>
6275
<PopoverTrigger asChild>
6376
<FormControl>
6477
<Button
6578
variant={'outline'}
66-
className={cn(
67-
'w-[240px] pl-3 text-left font-normal',
68-
!field.value && 'text-muted-foreground'
79+
className={cn(!field.value && 'text-muted-foreground')}
80+
>
81+
{field.value ? (
82+
formatDate(field.value)
83+
) : (
84+
<span>Pick a date</span>
6985
)}
86+
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
87+
</Button>
88+
</FormControl>
89+
</PopoverTrigger>
90+
<PopoverContent className="w-auto p-0" align="start">
91+
<Calendar
92+
mode="single"
93+
selected={new Date(field.value)}
94+
onSelect={(v) => field.onChange(v?.toISOString())}
95+
disabled={(date) =>
96+
date > new Date(form.getValues('due_at')) ||
97+
date < new Date('1900-01-01')
98+
}
99+
initialFocus
100+
/>
101+
</PopoverContent>
102+
</Popover>
103+
104+
<FormMessage />
105+
</FormItem>
106+
)}
107+
/>
108+
<FormField
109+
control={form.control}
110+
name="due_at"
111+
render={({ field }) => (
112+
<FormItem className="flex flex-col">
113+
<FormLabel>Due Date</FormLabel>
114+
<Popover>
115+
<PopoverTrigger asChild>
116+
<FormControl>
117+
<Button
118+
variant={'outline'}
119+
className={cn(!field.value && 'text-muted-foreground')}
70120
>
71121
{field.value ? (
72122
formatDate(field.value)
@@ -83,20 +133,84 @@ export const FormEditBorrow: React.FC<{ borrow: Borrow }> = ({ borrow }) => {
83133
selected={new Date(field.value)}
84134
onSelect={(v) => field.onChange(v?.toISOString())}
85135
disabled={(date) =>
86-
date > new Date() || date < new Date('1900-01-01')
136+
date < new Date(form.getValues('borrowed_at'))
87137
}
88138
initialFocus
89139
/>
90140
</PopoverContent>
91141
</Popover>
92-
<FormDescription>
93-
Change the date when the book was borrowed.
94-
</FormDescription>
142+
95143
<FormMessage />
96144
</FormItem>
97145
)}
98146
/>
99-
<Button type="submit">Submit</Button>
147+
{borrow.returning ? (
148+
<>
149+
<FormField
150+
control={form.control}
151+
name="returning.returned_at"
152+
render={({ field }) => (
153+
<FormItem className="flex flex-col">
154+
<FormLabel>Return Date</FormLabel>
155+
<Popover>
156+
<PopoverTrigger asChild>
157+
<FormControl>
158+
<Button
159+
variant={'outline'}
160+
className={cn(
161+
!field.value && 'text-muted-foreground'
162+
)}
163+
>
164+
{field.value ? (
165+
formatDate(field.value)
166+
) : (
167+
<span>Pick a date</span>
168+
)}
169+
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
170+
</Button>
171+
</FormControl>
172+
</PopoverTrigger>
173+
<PopoverContent className="w-auto p-0" align="start">
174+
<Calendar
175+
mode="single"
176+
selected={new Date(field.value)}
177+
onSelect={(v) => field.onChange(v?.toISOString())}
178+
disabled={(date) =>
179+
date < new Date(form.getValues('borrowed_at'))
180+
}
181+
initialFocus
182+
/>
183+
</PopoverContent>
184+
</Popover>
185+
186+
<FormMessage />
187+
</FormItem>
188+
)}
189+
/>
190+
<FormField
191+
control={form.control}
192+
name="returning.fine"
193+
render={({ field }) => (
194+
<FormItem className="flex flex-col">
195+
<FormLabel>Fine</FormLabel>
196+
<Input
197+
placeholder="Pts"
198+
type="number"
199+
{...field}
200+
onChange={field.onChange}
201+
/>
202+
<FormMessage />
203+
</FormItem>
204+
)}
205+
/>
206+
</>
207+
) : null}
208+
<Button type="reset" variant="ghost" onClick={onReset}>
209+
Reset
210+
</Button>
211+
<Button type="submit" disabled={!form.formState.isDirty}>
212+
Submit
213+
</Button>
100214
</form>
101215
</Form>
102216
)

‎components/borrows/ModalEditBorrow.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ import {
88
DialogHeader,
99
DialogTitle,
1010
} from '@/components/ui/dialog'
11-
import { Borrow } from '@/lib/types/borrow'
11+
import { BorrowDetail } from '@/lib/types/borrow'
1212
import { useRouter } from 'next/navigation'
1313

14-
export const ModalEditBorrow: React.FC<{ borrow: Borrow }> = ({ borrow }) => {
14+
export const ModalEditBorrow: React.FC<{ borrow: BorrowDetail }> = ({
15+
borrow,
16+
}) => {
1517
const router = useRouter()
1618
return (
1719
<Dialog open={true} onOpenChange={router.back}>
1820
<DialogContent>
1921
<DialogHeader>
2022
<DialogTitle>{borrow.book.title}</DialogTitle>
21-
<DialogDescription>
22-
Editing {borrow.subscription.user.name}&apos;s Borrow.
23-
</DialogDescription>
24-
25-
<FormEditBorrow borrow={borrow} />
23+
<DialogDescription>{borrow.subscription.user.name}</DialogDescription>
2624
</DialogHeader>
25+
26+
<FormEditBorrow borrow={borrow} />
2727
</DialogContent>
2828
</Dialog>
2929
)

0 commit comments

Comments
 (0)