Skip to content

Commit 7989192

Browse files
agmmtooagmmtoo
committed
feat: staff form and token
1 parent 5e1753c commit 7989192

File tree

11 files changed

+786
-341
lines changed

11 files changed

+786
-341
lines changed

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { StaffEditForm } from '@/components/staffs/staff-edit-form'
2+
import {
3+
Breadcrumb,
4+
BreadcrumbItem,
5+
BreadcrumbLink,
6+
BreadcrumbList,
7+
BreadcrumbPage,
8+
BreadcrumbSeparator,
9+
} from '@/components/ui/breadcrumb'
10+
import { getStaff } from '@/lib/api/staff'
11+
import { Verify } from '@/lib/firebase/firebase'
12+
import { cookies } from 'next/headers'
13+
import Link from 'next/link'
14+
15+
export default async function EditStaffPage({
16+
params,
17+
}: {
18+
params: Promise<{ id: string }>
19+
}) {
20+
const { id } = await params
21+
22+
const [staffRes] = await Promise.all([getStaff({ id })])
23+
24+
if ('error' in staffRes) {
25+
console.log({ libRes: staffRes })
26+
return <div>{JSON.stringify(staffRes.message)}</div>
27+
}
28+
29+
await Verify({ from: `/staffs/${id}/edit` })
30+
31+
const cookieStore = await cookies()
32+
const sessionName = process.env.SESSION_COOKIE_NAME as string
33+
const session = cookieStore.get(sessionName)
34+
35+
return (
36+
<div className="grid grid-rows-2">
37+
<h1 className="text-2xl font-semibold">{staffRes.data.name}</h1>
38+
<Breadcrumb>
39+
<BreadcrumbList>
40+
<BreadcrumbItem>
41+
<Link href="/" passHref legacyBehavior>
42+
<BreadcrumbLink>Home</BreadcrumbLink>
43+
</Link>
44+
</BreadcrumbItem>
45+
<BreadcrumbSeparator />
46+
<BreadcrumbItem>
47+
<Link href="/staffs" passHref legacyBehavior>
48+
<BreadcrumbLink>Staffs</BreadcrumbLink>
49+
</Link>
50+
</BreadcrumbItem>
51+
<BreadcrumbSeparator />
52+
53+
<BreadcrumbItem>
54+
<BreadcrumbPage>Edit Staff</BreadcrumbPage>
55+
</BreadcrumbItem>
56+
</BreadcrumbList>
57+
</Breadcrumb>
58+
59+
<StaffEditForm staff={staffRes.data} token={session?.value as string} />
60+
</div>
61+
)
62+
}

‎app/(protected)/staffs/new/page.tsx‎

Lines changed: 9 additions & 288 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,4 @@
1-
'use client'
2-
3-
import { zodResolver } from '@hookform/resolvers/zod'
4-
import { Check, ChevronsUpDown } from 'lucide-react'
5-
import { useForm } from 'react-hook-form'
6-
import { z } from 'zod'
7-
8-
import { cn } from '@/lib/utils'
9-
import { toast } from '@/components/hooks/use-toast'
10-
import { Button } from '@/components/ui/button'
11-
import {
12-
Command,
13-
// CommandEmpty,
14-
CommandGroup,
15-
CommandInput,
16-
CommandItem,
17-
CommandList,
18-
} from '@/components/ui/command'
19-
import {
20-
Form,
21-
FormControl,
22-
FormDescription,
23-
// FormDescription,
24-
FormField,
25-
FormItem,
26-
FormLabel,
27-
FormMessage,
28-
} from '@/components/ui/form'
29-
import {
30-
Popover,
31-
PopoverContent,
32-
PopoverTrigger,
33-
} from '@/components/ui/popover'
1+
import { StaffCreateForm } from '@/components/staffs/staff-create-form'
342
import {
353
Breadcrumb,
364
BreadcrumbItem,
@@ -39,105 +7,16 @@ import {
397
BreadcrumbPage,
408
BreadcrumbSeparator,
419
} from '@/components/ui/breadcrumb'
10+
import { Verify } from '@/lib/firebase/firebase'
11+
import { cookies } from 'next/headers'
4212
import Link from 'next/link'
43-
import { useCallback, useEffect, useState } from 'react'
44-
import { getListUsers } from '@/lib/api/user'
45-
import { User } from '@/lib/types/user'
46-
import { useRouter } from 'next/navigation'
47-
import { createStaff } from '@/lib/api/staff'
48-
import { Library } from '@/lib/types/library'
49-
import { getListLibraries } from '@/lib/api/library'
50-
import { Input } from '@/components/ui/input'
51-
52-
const FormSchema = z.object({
53-
user_id: z
54-
.string({
55-
required_error: 'Please select a user.',
56-
})
57-
.nonempty(),
58-
library_id: z
59-
.string({
60-
required_error: 'Please select a library.',
61-
})
62-
.nonempty(),
63-
name: z
64-
.string({
65-
required_error: 'Please enter staff name.',
66-
})
67-
.nonempty(),
68-
})
69-
70-
export default function ComboboxForm() {
71-
const router = useRouter()
72-
const form = useForm<z.infer<typeof FormSchema>>({
73-
resolver: zodResolver(FormSchema),
74-
defaultValues: {
75-
library_id: '',
76-
user_id: '',
77-
name: '',
78-
},
79-
})
8013

81-
function onSubmit(data: z.infer<typeof FormSchema>) {
82-
createStaff(data)
83-
.then(console.log)
84-
.then(() => {
85-
toast({
86-
title: 'Assigned Staff to Library',
87-
description: `${data.name} has been assigned to the library.`,
88-
})
89-
router.push('/staffs')
90-
})
91-
.catch((e) => {
92-
toast({
93-
title: 'Error',
94-
description: e?.error,
95-
variant: 'destructive',
96-
})
97-
})
98-
}
14+
export default async function CreateStaffPage() {
15+
await Verify({ from: '/staffs/new' })
9916

100-
const onReset = useCallback(() => {
101-
form.reset()
102-
}, [form])
103-
104-
const [userQ, setUserQ] = useState('')
105-
const [users, setUsers] = useState<User[]>([])
106-
107-
useEffect(() => {
108-
getListUsers({
109-
limit: 20,
110-
name: userQ,
111-
}).then((res) => {
112-
if ('error' in res) {
113-
toast({
114-
title: 'Error',
115-
description: res.message,
116-
})
117-
return
118-
}
119-
setUsers(res.data)
120-
})
121-
}, [userQ])
122-
123-
const [libQ, setLibQ] = useState('')
124-
const [libs, setLibs] = useState<Library[]>([])
125-
126-
useEffect(() => {
127-
getListLibraries({
128-
limit: 20,
129-
name: libQ,
130-
}).then((res) => {
131-
if ('error' in res) {
132-
toast({
133-
title: 'Error',
134-
description: res.message,
135-
})
136-
return
137-
}
138-
setLibs(res.data)
139-
})
140-
}, [libQ])
17+
const cookieStore = await cookies()
18+
const sessionName = process.env.SESSION_COOKIE_NAME as string
19+
const session = cookieStore.get(sessionName)
14120

14221
return (
14322
<div className="grid grid-rows-2">
@@ -162,166 +41,8 @@ export default function ComboboxForm() {
16241
</BreadcrumbItem>
16342
</BreadcrumbList>
16443
</Breadcrumb>
165-
<div className="grid place-items-center">
166-
<Form {...form}>
167-
<form
168-
onSubmit={form.handleSubmit(onSubmit)}
169-
className="space-y-6 md:space-y-0 md:grid md:grid-cols-2 md:gap-2"
170-
>
171-
<FormField
172-
control={form.control}
173-
name="name"
174-
render={({ field }) => (
175-
<FormItem className="flex flex-col col-span-2">
176-
<FormLabel>Name</FormLabel>
177-
<Input placeholder="Name" {...field} />
178-
<FormDescription>
179-
What is the name of the staff?
180-
</FormDescription>
181-
<FormMessage />
182-
</FormItem>
183-
)}
184-
/>
185-
186-
<FormField
187-
control={form.control}
188-
name="user_id"
189-
render={({ field }) => (
190-
<FormItem className="flex flex-col">
191-
<FormLabel>User</FormLabel>
192-
<Popover>
193-
<PopoverTrigger asChild>
194-
<FormControl>
195-
<Button
196-
variant="outline"
197-
role="combobox"
198-
className={cn(
199-
'w-[200px] justify-between',
200-
!field.value && 'text-muted-foreground'
201-
)}
202-
>
203-
{field.value
204-
? users.find((u) => u.id === field.value)?.name
205-
: 'Select User'}
206-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
207-
</Button>
208-
</FormControl>
209-
</PopoverTrigger>
210-
<PopoverContent className="w-[200px] p-0">
211-
<Command>
212-
<CommandInput
213-
onValueChange={setUserQ}
214-
value={userQ}
215-
placeholder="Search user name..."
216-
/>
217-
<CommandList>
218-
{/* <CommandEmpty>No user found.</CommandEmpty> */}
219-
<CommandGroup forceMount>
220-
{users.map((user) => (
221-
<CommandItem
222-
value={user.id}
223-
key={user.id}
224-
onSelect={() => {
225-
form.setValue('user_id', user.id)
226-
}}
227-
>
228-
{user.name}
229-
<Check
230-
className={cn(
231-
'ml-auto',
232-
user.id === field.value
233-
? 'opacity-100'
234-
: 'opacity-0'
235-
)}
236-
/>
237-
</CommandItem>
238-
))}
239-
</CommandGroup>
240-
</CommandList>
241-
</Command>
242-
</PopoverContent>
243-
</Popover>
244-
{/* <FormDescription>
245-
This is the language that will be used in the dashboard.
246-
</FormDescription> */}
247-
<FormMessage />
248-
</FormItem>
249-
)}
250-
/>
251-
252-
<FormField
253-
control={form.control}
254-
name="library_id"
255-
render={({ field }) => (
256-
<FormItem className="flex flex-col">
257-
<FormLabel>Library</FormLabel>
258-
<Popover>
259-
<PopoverTrigger asChild>
260-
<FormControl>
261-
<Button
262-
variant="outline"
263-
role="combobox"
264-
className={cn(
265-
'w-[200px] justify-between',
266-
!field.value && 'text-muted-foreground'
267-
)}
268-
>
269-
{field.value
270-
? libs.find((lib) => lib.id === field.value)?.name
271-
: 'Select library'}
272-
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
273-
</Button>
274-
</FormControl>
275-
</PopoverTrigger>
276-
<PopoverContent className="w-[200px] p-0">
277-
<Command>
278-
<CommandInput
279-
onValueChange={setLibQ}
280-
value={libQ}
281-
placeholder="Search library name..."
282-
/>
283-
<CommandList>
284-
{/* <CommandEmpty>No user found.</CommandEmpty> */}
285-
<CommandGroup forceMount>
286-
{libs.map((lib) => (
287-
<CommandItem
288-
value={lib.id}
289-
key={lib.id}
290-
onSelect={() => {
291-
form.setValue('library_id', lib.id)
292-
}}
293-
>
294-
{lib.name}
295-
<Check
296-
className={cn(
297-
'ml-auto',
298-
lib.id === field.value
299-
? 'opacity-100'
300-
: 'opacity-0'
301-
)}
302-
/>
303-
</CommandItem>
304-
))}
305-
</CommandGroup>
306-
</CommandList>
307-
</Command>
308-
</PopoverContent>
309-
</Popover>
310-
{/* <FormDescription>
311-
This is the language that will be used in the dashboard.
312-
</FormDescription> */}
313-
<FormMessage />
314-
</FormItem>
315-
)}
316-
/>
31744

318-
<Button type="reset" variant="ghost" onClick={onReset}>
319-
Reset
320-
</Button>
321-
<Button type="submit">Assign</Button>
322-
</form>
323-
</Form>
324-
</div>
45+
<StaffCreateForm token={session?.value as string} />
32546
</div>
32647
)
32748
}

0 commit comments

Comments
 (0)