fix admin category list

src/app/admin/cv/category/list/page.tsx

@@ -2,19 +2,23 @@
 import Link from "next/link";
 import { trpc } from "~/app/_trpc/Client";
 import { useGSAP } from '@gsap/react'
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import * as Card from '~/components/ui/card'
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { Button } from "~/components/ui/button";
-import { Delete } from 'lucide-react'
+import { ChevronsUpDown, Delete } from 'lucide-react'
+import UpdateCvEntryForm from "../../entry/[id]/UpdateForm";
+import { CollapsibleContent, CollapsibleTrigger, Collapsible } from "~/components/ui/collapsible";
 export default function CvPage() {
   const cvCategories = trpc.cv.category.list.useQuery();
   const gsap = useGsapContext()
   const container = useRef<HTMLDivElement>(null);
-  const mut = trpc.cv.category.delete.useMutation({onSuccess: () => {
+  const mut = trpc.cv.category.delete.useMutation({
-    console.log('success')
+    onSuccess: () => {
-    cvCategories.refetch()
+      cvCategories.refetch()
-  }})
+    }
+  })
+  useEffect(() => { console.log(cvCategories.data) }, [cvCategories.data])
   const deleteCategory = (id: string) => {
     console.log(`deleting ${id}`)
     mut.mutate(id)
@@ -39,17 +43,32 @@ export default function CvPage() {
                   </Card.CardHeader>
                 </Link>
                 <Card.CardContent className="flex flex-row">
-                  Category id : {cat.id} <br />
+                  <div className="flex flex-col w-full">
-                  Category Position : {cat.layoutPosition} <br />
+                    <span>Category id : {cat.id}</span>
-                  {
+                    <span>Category Position : {cat.layoutPosition}</span>
-                    cat.cvEntry.length > 0 ? (
+                    <br />
-                      <>
+                    <span>Entries:</span>
-                        {cat.cvEntry.map((entry) => {
+                    <div className="w-full">
-                          <Link href={`/admin/cv/entry/${entry.id}`}> {entry.title} </Link>
+                      {
-                        })}
+                        cat.cvEntry.length > 0 ? (
-                      </>
+                          <>
-                    ) : (<></>)
+                            {cat.cvEntry.map((entry) => (
-                  }
+                              <Collapsible>
+                                <CollapsibleTrigger>
+                                  <Button variant={"ghost"}>
+                                    {entry.title} <ChevronsUpDown/>
+                                  </Button>
+                                </CollapsibleTrigger>
+                                <CollapsibleContent>
+                                  <UpdateCvEntryForm params={{ id: entry.id, className: "w-full" }} key={entry.id} />
+                                </CollapsibleContent>
+                              </Collapsible>
+                            ))}
+                          </>
+                        ) : (<></>)
+                      }
+                    </div>
+                  </div>
                   <Button
                     className="ml-auto cursor-pointer" variant="destructive" onClick={() => { deleteCategory(cat.id) }}>
                     <Delete />

src/app/admin/cv/entry/[id]/UpdateForm.tsx

@@ -14,10 +14,11 @@ import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover
 import { cn } from "~/lib/utils";
 import { CalendarIcon } from "lucide-react";
 import { Calendar } from "~/components/ui/calendar";
-export default function UpdateCvEntryForm({ params }: { params: { id: string } }) {
+import { Textarea } from "~/components/ui/textarea";
+export default function UpdateCvEntryForm({ params }: { params: { id: string, className: string|undefined } }) {
+  console.log(params)
   const id = params.id
   const categories = trpc.cv.category.list.useQuery()
-  console.log(id)
   const entry = trpc.cv.entry.get.useQuery({ id: id })
   const form = useForm<z.infer<typeof updateRouteSchemaCliennt>>({
     resolver: zodResolver(updateRouteSchemaCliennt),
@@ -57,7 +58,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string } }
   }
   if (entry.data !== undefined) {
     return (
-      <Card.Card className="w-5/6 lg:w-1/2">
+      <Card.Card className={params.className ? params.className : "w-5/6 lg:w-1/2"}>
       <Card.CardHeader>
         <Card.CardTitle>
           Create Entry
@@ -119,7 +120,7 @@ export default function UpdateCvEntryForm({ params }: { params: { id: string } }
                     Description
                   </FormLabel>
                   <FormControl>
-                    <Input placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
+                    <Textarea placeholder="description" onChange={field.onChange} value={field.value == null ? undefined : field.value} />
                   </FormControl>
                 </FormItem>
               )}