Update category colors

This commit is contained in:
Ryan Pandya 2025-01-13 19:37:29 -08:00
parent 2fa8b6261f
commit a932321324
3 changed files with 70 additions and 61 deletions

View File

@ -34,6 +34,7 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
import { zUpdateCategoryRequestSchema, ZUpdateCategoryRequest } from "@lifetracker/shared/types/categories";
import { Textarea } from "@/components/ui/textarea";
export default function EditCategoryDialog({
category: initialCategory,
@ -88,51 +89,70 @@ export default function EditCategoryDialog({
<Form {...form}>
<form onSubmit={form.handleSubmit((val) => mutate(val))}>
<div className="flex w-full flex-col space-y-2">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
type="text"
placeholder="Name"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Code</FormLabel>
<FormControl>
<Input
type="number"
placeholder="Code"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div style={{ display: "grid", gridTemplateColumns: "5em 1fr 75px", gap: "10px" }}>
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
{/* <FormLabel>Code</FormLabel> */}
<FormControl>
<Input
type="text"
placeholder="Code"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
{/* <FormLabel>Name</FormLabel> */}
<FormControl>
<Input
type="text"
placeholder="Name"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="color.name"
render={({ field }) => (
<FormItem>
{/* <FormLabel>Color</FormLabel> */}
<FormControl>
<Input
type="text"
placeholder="Color"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
{/* <FormLabel>Description</FormLabel> */}
<FormControl>
<Input
type="text"
<Textarea
placeholder="Description"
{...field}
className="w-full rounded border p-2"
@ -142,24 +162,6 @@ export default function EditCategoryDialog({
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="colorId"
render={({ field }) => (
<FormItem>
<FormLabel>Color</FormLabel>
<FormControl>
<Input
type="text"
placeholder="Color"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">

View File

@ -32,11 +32,13 @@ export const zGetCategoryResponseSchema = z.object({
export type ZGetCategoryResponse = z.infer<typeof zGetCategoryResponseSchema>;
export const zUpdateCategoryRequestSchema = z.object({
code: z.number().nullish(),
code: z.number(),
name: z.string().optional(),
description: z.string().optional(),
colorId: z.string().nullish(),
parentId: z.string().nullish(),
categoryId: z.string(),
color: z.object({
name: z.string(),
}),
});
export type ZUpdateCategoryRequest = z.infer<typeof zUpdateCategoryRequestSchema>;

View File

@ -222,13 +222,19 @@ export const categoriesAppRouter = router({
}),
)
.mutation(async ({ input, ctx }) => {
console.log("Updating");
const colorIdQuery = await ctx.db.select({ id: colors.id }).from(colors).where(
and(
eq(colors.name, input.color.name),
eq(colors.userId, ctx.user.id),
)
);
const res = await ctx.db
.update(categories)
.set({
name: input.name,
description: input.description,
code: input.code,
colorId: colorIdQuery[0].id,
})
.where(
and(
@ -236,7 +242,6 @@ export const categoriesAppRouter = router({
eq(categories.userId, ctx.user.id),
),
).returning();
console.log(res);
return res[0];
}),
delete: authedProcedure