Merge pull request #164 from Zindiks/claude/fix-card-details-click-01MVuq5CPEZrEf75DvYQdeM7

Fix card details click functionality

Author: Zindiks

api/src/modules/cards/card.controller.ts

@@ -4,6 +4,7 @@ import {
   UpdateCardOrderArray,
   UpdateCardTitle,
   UpdateCardDetails,
+  UpdateCardDetailsById,
   DeleteCard,
 } from "./card.schema";
 import { CardService } from "./card.service";
@@ -170,6 +171,24 @@ export class CardController {
     }
   }
 
+  public async updateCardDetailsByIdController(
+    request: FastifyRequest<{
+      Params: { id: string };
+      Body: UpdateCardDetailsById;
+    }>,
+    reply: FastifyReply,
+  ) {
+    const { id } = request.params;
+    const body = request.body;
+
+    try {
+      const card = await this.cardService.updateDetails({ id, ...body });
+      return reply.status(200).send(card);
+    } catch (err) {
+      return reply.status(500).send(err);
+    }
+  }
+
   public async updateCardOrderController(
     request: FastifyRequest<{
       Body: UpdateCardOrderArray;

api/src/modules/cards/card.route.ts

@@ -58,6 +58,22 @@ export default async function cardRoutes(fastify: FastifyInstance) {
     cardController.getCardWithDetailsController.bind(cardController),
   );
 
+  fastify.patch(
+    "/:id/details",
+    {
+      schema: {
+        params: { type: "object", properties: { id: { type: "string" } } },
+        body: CardSchema.UpdateCardDetailsByIdSchema,
+        response: {
+          200: CardSchema.FullCardResponseSchema,
+        },
+        tags: ["card"],
+        description: "Update card details by ID (title, description, status, due_date, priority)",
+      },
+    },
+    cardController.updateCardDetailsByIdController.bind(cardController),
+  );
+
   fastify.get(
     "/list/:list_id",
     {

api/src/modules/cards/card.schema.ts

@@ -90,6 +90,29 @@ export class CardSchema {
     { $id: "UpdateCardDetailsSchema" },
   );
 
+  static UpdateCardDetailsByIdSchema = Type.Object(
+    {
+      list_id,
+      title: Type.Optional(title),
+      description: Type.Optional(
+        Type.Union([Type.String({ minLength: 3, maxLength: 255 }), Type.Null()]),
+      ),
+      status: Type.Optional(Type.String()),
+      due_date: Type.Optional(
+        Type.Union([Type.String({ format: "date-time" }), Type.Null()]),
+      ),
+      priority: Type.Optional(
+        Type.Union([
+          Type.Literal("low"),
+          Type.Literal("medium"),
+          Type.Literal("high"),
+          Type.Literal("critical"),
+        ]),
+      ),
+    },
+    { $id: "UpdateCardDetailsByIdSchema" },
+  );
+
   //RESPONSE SCHEMA
   static FullCardResponseSchema = Type.Object(
     {
@@ -255,6 +278,7 @@ export class CardSchema {
 export type CreateCard = Static<typeof CardSchema.CreateCardSchema>;
 export type UpdateCardTitle = Static<typeof CardSchema.UpdateCardTitleSchema>;
 export type UpdateCardDetails = Static<typeof CardSchema.UpdateCardDetailsSchema>;
+export type UpdateCardDetailsById = Static<typeof CardSchema.UpdateCardDetailsByIdSchema>;
 export type UpdateCardOrder = Static<typeof CardSchema.UpdateCardOrderSchema>;
 export type UpdateCardOrderArray = Static<
   typeof CardSchema.UpdateCardOrderSchemaArray

client/src/components/card/CardDetailsPanel.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
 import type { CardWithDetails } from "@/types/types";
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-} from "@/components/ui/sheet";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+} from "@/components/ui/dialog";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useCardDetails } from "@/hooks/useCardDetails";
@@ -105,28 +105,28 @@ export const CardDetailsPanel = ({
 
   // Handler functions
   const handleUpdateTitle = (title: string) => {
-    if (!cardId) return;
-    updateDetails.mutate({ id: cardId, title });
+    if (!cardId || !cardDetails) return;
+    updateDetails.mutate({ id: cardId, list_id: cardDetails.list_id, title });
   };
 
   const handleUpdateDescription = (description: string) => {
-    if (!cardId) return;
-    updateDetails.mutate({ id: cardId, description });
+    if (!cardId || !cardDetails) return;
+    updateDetails.mutate({ id: cardId, list_id: cardDetails.list_id, description });
   };
 
   const handleUpdatePriority = (priority: "low" | "medium" | "high" | "critical" | undefined) => {
-    if (!cardId) return;
-    updateDetails.mutate({ id: cardId, priority });
+    if (!cardId || !cardDetails) return;
+    updateDetails.mutate({ id: cardId, list_id: cardDetails.list_id, priority });
   };
 
   const handleUpdateStatus = (status: string) => {
-    if (!cardId) return;
-    updateDetails.mutate({ id: cardId, status });
+    if (!cardId || !cardDetails) return;
+    updateDetails.mutate({ id: cardId, list_id: cardDetails.list_id, status });
   };
 
   const handleUpdateDueDate = (due_date: string | undefined) => {
-    if (!cardId) return;
-    updateDetails.mutate({ id: cardId, due_date });
+    if (!cardId || !cardDetails) return;
+    updateDetails.mutate({ id: cardId, list_id: cardDetails.list_id, due_date });
   };
 
   const handleDeleteCard = () => {
@@ -142,8 +142,8 @@ export const CardDetailsPanel = ({
   };
 
   return (
-    <Sheet open={isOpen} onOpenChange={onClose}>
-      <SheetContent size="wide" className="overflow-y-auto p-0">
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto p-0">
         {isLoading && (
           <div className="p-6 space-y-4">
             <Skeleton className="h-8 w-3/4" />
@@ -153,9 +153,9 @@ export const CardDetailsPanel = ({
         )}
 
         {!isLoading && cardDetails && (
-          <div className="flex flex-col h-full">
+          <div className="flex flex-col">
             {/* Header */}
-            <SheetHeader className="p-6 pb-4">
+            <DialogHeader className="p-6 pb-4">
               <div className="flex items-start justify-between pr-8" ref={titleRef}>
                 <EditableTitle
                   value={cardDetails.title}
@@ -171,10 +171,10 @@ export const CardDetailsPanel = ({
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
                 in list <span className="font-medium">List Name</span>
               </div>
-            </SheetHeader>
+            </DialogHeader>
 
             {/* Main Content */}
-            <div className="flex-1 px-6 pb-6 space-y-6">
+            <div className="px-6 pb-6 space-y-6">
               {/* Metadata Section */}
               <div className="flex flex-wrap gap-3">
                 <PrioritySelector
@@ -250,10 +250,10 @@ export const CardDetailsPanel = ({
             <p>Card not found</p>
           </div>
         )}
-      </SheetContent>
+      </DialogContent>
 
       {/* Keyboard Shortcuts Dialog */}
       <KeyboardShortcutsDialog open={showDialog} onOpenChange={setShowDialog} />
-    </Sheet>
+    </Dialog>
   );
 };

client/src/hooks/useCardDetails.ts

@@ -11,6 +11,7 @@ const API_URL = `${API_HOST}:${API_PORT}${API_VERSION}`;
 
 export interface UpdateCardDetailsParams {
   id: string;
+  list_id: string;
   title?: string;
   description?: string;
   status?: string;