Fix small issues

This commit is contained in:
Owen Schwartz 2024-10-19 21:50:00 -04:00
parent bf106c221e
commit 1c9d90bca4
No known key found for this signature in database
GPG key ID: 8271FDFFD9E0CCBD
4 changed files with 106 additions and 20 deletions

View file

@ -5,7 +5,7 @@ import { useResourceContext } from "@app/hooks/useResourceContext";
const sidebarNavItems = [
{
title: "Create",
title: "General",
href: "/{orgId}/resources/{resourceId}",
},
{

View file

@ -182,7 +182,7 @@ export function CreateResourceForm() {
variant="outline"
role="combobox"
className={cn(
"w-[200px] justify-between",
"w-[350px] justify-between",
!field.value && "text-muted-foreground"
)}
>
@ -195,7 +195,7 @@ export function CreateResourceForm() {
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>

View file

@ -18,6 +18,8 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons"
import { Input } from "@/components/ui/input"
import {
Select,
@ -27,45 +29,66 @@ import {
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { useResourceContext } from "@app/hooks/useResourceContext"
import { ListSitesResponse } from "@server/routers/site"
import { useEffect, useState } from "react"
import { AxiosResponse } from "axios"
import api from "@app/api"
import { useParams } from "next/navigation";
const GeneralFormSchema = z.object({
name: z.string()
// email: z
// .string({
// required_error: "Please select an email to display.",
// })
// .email(),
// bio: z.string().max(160).min(4),
// urls: z
// .array(
// z.object({
// value: z.string().url({ message: "Please enter a valid URL." }),
// })
// )
// .optional(),
name: z.string(),
siteId: z.number()
})
type GeneralFormValues = z.infer<typeof GeneralFormSchema>
export function GeneralForm() {
const params = useParams();
const orgId = params.orgId;
const { resource, updateResource } = useResourceContext();
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: resource?.name
name: resource?.name,
siteId: resource?.siteId
},
mode: "onChange",
})
useEffect(() => {
if (typeof window !== "undefined") {
const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>(`/org/${orgId}/sites/`);
setSites(res.data.data.sites);
};
fetchSites();
}
}, []);
// const { fields, append } = useFieldArray({
// name: "urls",
// control: form.control,
// })
async function onSubmit(data: GeneralFormValues) {
await updateResource({ name: data.name });
await updateResource({ name: data.name, siteId: data.siteId });
}
return (
@ -87,6 +110,69 @@ export function GeneralForm() {
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Site</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[350px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) => site.siteId === field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>
<CommandEmpty>No site found.</CommandEmpty>
<CommandGroup>
{sites.map((site) => (
<CommandItem
value={site.name}
key={site.siteId}
onSelect={() => {
form.setValue("siteId", site.siteId)
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This is the site that will be used in the dashboard.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="email"

View file