updated build
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
"use client"
|
||||
import { useState } from "react"
|
||||
import { useFieldArray, useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
|
||||
@@ -9,6 +10,7 @@ import { Separator } from "@/components/ui/separator"
|
||||
import { DateTimePicker } from "@/components/ui/date-time-picker"
|
||||
import { useUpdateUserMutation } from "@/pages/users/update/queries"
|
||||
import { userUpdateSchema, type UserUpdate } from "@/pages/users/update/schema"
|
||||
import PageAddUserSelections from "../selections/addPage"
|
||||
|
||||
const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () => void, initData: UserUpdate, selectedUuid: string }) => {
|
||||
|
||||
@@ -22,227 +24,175 @@ const UserForm = ({ refetchTable, initData, selectedUuid }: { refetchTable: () =
|
||||
tag: initData.tag,
|
||||
email: initData.email,
|
||||
phone: initData.phone,
|
||||
collectionTokens: initData.collectionTokens,
|
||||
},
|
||||
})
|
||||
|
||||
const { control, handleSubmit } = form
|
||||
const { handleSubmit } = form
|
||||
|
||||
const { fields, append, remove } = useFieldArray({ control, name: "collectionTokens.tokens" })
|
||||
const [defaultSelection, setDefaultSelection] = useState<string>("")
|
||||
const [selectedBuildIDS, setSelectedBuildIDS] = useState<string[]>([])
|
||||
const [selectedCompanyIDS, setSelectedCompanyIDS] = useState<string[]>([])
|
||||
|
||||
const appendBuildID = (id: string) => setSelectedBuildIDS((prev) => (id && !selectedBuildIDS.includes(id) ? [...prev, id] : prev))
|
||||
const appendCompanyID = (id: string) => setSelectedCompanyIDS((prev) => (id && !selectedCompanyIDS.includes(id) ? [...prev, id] : prev))
|
||||
|
||||
const removeBuildID = (id: string) => setSelectedBuildIDS((prev) => prev.filter((item) => item !== id))
|
||||
const removeCompanyID = (id: string) => setSelectedCompanyIDS((prev) => prev.filter((item) => item !== id))
|
||||
|
||||
const mutation = useUpdateUserMutation();
|
||||
|
||||
function onSubmit(values: UserUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid }); setTimeout(() => refetchTable(), 400) }
|
||||
function onSubmit(values: UserUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }); setTimeout(() => refetchTable(), 400) }
|
||||
|
||||
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="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>
|
||||
<PageAddUserSelections
|
||||
selectedCompanyIDS={selectedCompanyIDS} selectedBuildingIDS={selectedBuildIDS} appendCompanyID={appendCompanyID} appendBuildingID={appendBuildID}
|
||||
removeCompanyID={removeCompanyID} removeBuildingID={removeBuildID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection}
|
||||
/>
|
||||
<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>
|
||||
|
||||
{fields.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No tokens added.</p>
|
||||
)}
|
||||
{/* 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>
|
||||
)}
|
||||
/>
|
||||
|
||||
{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>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="tag"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Tag</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="User tag..." {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{/* 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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
{/* 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>
|
||||
|
||||
<Separator />
|
||||
<Button type="submit" className="w-full">Create User</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
Update User
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { UserUpdate } from './types';
|
||||
|
||||
const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string): Promise<{ data: UserUpdate | null; status: number }> => {
|
||||
const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, refetchTable: () => void): Promise<{ data: UserUpdate | null; status: number }> => {
|
||||
console.log('Fetching test data from local API');
|
||||
try {
|
||||
const res = await fetch(`/api/users/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify(record) });
|
||||
const res = await fetch(`/api/users/update?uuid=${uuid || ''}`, { method: 'POST', cache: 'no-store', credentials: "include", body: JSON.stringify({ ...record, selectedBuildIDS, selectedCompanyIDS, defaultSelection }) });
|
||||
if (!res.ok) { const errorText = await res.text(); console.error('Test data API error:', errorText); throw new Error(`API error: ${res.status} ${res.statusText}`) }
|
||||
const data = await res.json();
|
||||
return { data: data.data, status: res.status }
|
||||
@@ -14,7 +14,9 @@ const fetchGraphQlUsersUpdate = async (record: UserUpdate, uuid: string): Promis
|
||||
|
||||
export function useUpdateUserMutation() {
|
||||
return useMutation({
|
||||
mutationFn: ({ data, uuid }: { data: UserUpdate, uuid: string }) => fetchGraphQlUsersUpdate(data, uuid),
|
||||
mutationFn: (
|
||||
{ data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable }: { data: UserUpdate, uuid: string, selectedBuildIDS: string[], selectedCompanyIDS: string[], defaultSelection: string, refetchTable: () => void }
|
||||
) => fetchGraphQlUsersUpdate(data, uuid, selectedBuildIDS, selectedCompanyIDS, defaultSelection, refetchTable),
|
||||
onSuccess: () => { console.log("User updated successfully") },
|
||||
onError: (error) => { console.error("Update user failed:", error) },
|
||||
})
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
import { z } from "zod"
|
||||
|
||||
export const tokenSchema = z.object({
|
||||
prefix: z.string().min(1, "Prefix is required"),
|
||||
token: z.string().min(1, "Token is required"),
|
||||
})
|
||||
|
||||
export const collectionTokensSchema = z.object({
|
||||
default: z.string().optional(),
|
||||
tokens: z.array(tokenSchema)
|
||||
})
|
||||
|
||||
export const userUpdateSchema = z.object({
|
||||
expiryStarts: z.string().optional(),
|
||||
@@ -17,11 +8,11 @@ export const userUpdateSchema = z.object({
|
||||
isConfirmed: z.boolean(),
|
||||
isNotificationSend: z.boolean(),
|
||||
|
||||
password: z.string().min(6),
|
||||
rePassword: z.string().min(6),
|
||||
tag: z.string().optional(),
|
||||
email: z.string().email(),
|
||||
phone: z.string().min(5),
|
||||
|
||||
collectionTokens: collectionTokensSchema,
|
||||
})
|
||||
|
||||
export type UserUpdate = z.infer<typeof userUpdateSchema>
|
||||
|
||||
Reference in New Issue
Block a user