290 lines
11 KiB
TypeScript
290 lines
11 KiB
TypeScript
"use client"
|
|
import { useFieldArray, useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { userAddSchema, type UserAdd } from "./schema"
|
|
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { useAddUserMutation } from "./queries"
|
|
import { DateTimePicker } from "@/components/ui/date-time-picker"
|
|
|
|
const UserForm = ({ refetchTable }: { refetchTable: () => void }) => {
|
|
const form = useForm<UserAdd>({
|
|
resolver: zodResolver(userAddSchema),
|
|
defaultValues: {
|
|
expiryStarts: "",
|
|
expiryEnds: "",
|
|
isConfirmed: false,
|
|
isNotificationSend: false,
|
|
password: "",
|
|
rePassword: "",
|
|
tag: "",
|
|
email: "",
|
|
phone: "",
|
|
collectionTokens: {
|
|
default: "",
|
|
tokens: [],
|
|
},
|
|
},
|
|
})
|
|
|
|
const { control, handleSubmit } = form
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
control,
|
|
name: "collectionTokens.tokens",
|
|
})
|
|
|
|
const mutation = useAddUserMutation();
|
|
|
|
function onSubmit(values: UserAdd) {
|
|
mutation.mutate(values as any);
|
|
setTimeout(() => refetchTable(), 200);
|
|
}
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="space-y-6 p-4"
|
|
>
|
|
{/* BASIC INFO */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Email</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="user@example.com" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="phone"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Phone</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="+901234567" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* PASSWORD / TAG */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Password</FormLabel>
|
|
<FormControl>
|
|
<Input type="password" placeholder="•••••••" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="rePassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Re-Password</FormLabel>
|
|
<FormControl>
|
|
<Input type="password" placeholder="•••••••" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="tag"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Tag</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="User tag..." {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* DATES */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="expiryStarts"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Expiry Starts</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="expiryEnds"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Expiry Ends</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
{/* SWITCHES */}
|
|
<div className="flex items-center gap-6">
|
|
<FormField
|
|
control={form.control}
|
|
name="isConfirmed"
|
|
render={({ field }) => (
|
|
<FormItem className="flex items-center gap-2">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="mt-0!">Confirmed</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="isNotificationSend"
|
|
render={({ field }) => (
|
|
<FormItem className="flex items-center gap-2">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="mt-0!">Send Notification</FormLabel>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* COLLECTION TOKENS */}
|
|
<FormField
|
|
control={form.control}
|
|
name="collectionTokens.default"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Default Token</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Default token..." {...field} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<FormLabel>Tokens</FormLabel>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => append({ prefix: "", token: "" })}
|
|
>
|
|
+ Add Token
|
|
</Button>
|
|
</div>
|
|
|
|
{fields.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">No tokens added.</p>
|
|
)}
|
|
|
|
{fields.map((fieldItem, i) => (
|
|
<div
|
|
key={fieldItem.id}
|
|
className="grid grid-cols-12 gap-2 items-end"
|
|
>
|
|
<div className="col-span-4">
|
|
<FormField
|
|
control={form.control}
|
|
name={`collectionTokens.tokens.${i}.prefix`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Prefix</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="prefix" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-6">
|
|
<FormField
|
|
control={form.control}
|
|
name={`collectionTokens.tokens.${i}.token`}
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Token</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="token" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
size="icon"
|
|
className="col-span-2 h-10"
|
|
onClick={() => remove(i)}
|
|
>
|
|
✕
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<Button type="submit" className="w-full">
|
|
Create User
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
export { UserForm }
|