Allow editing sheet entry

Author: ajhai

llmstack/client/src/components/sheets/SheetFromTemplateDialog.jsx

@@ -30,19 +30,23 @@ export function SheetFromTemplateDialog({
     setOpen(false);
   };
 
-  const createSheet = () => {
+  const handleSave = () => {
     const payload = {
       name: sheetName,
-      data: {
-        description: sheetDescription,
-      },
+      description: sheetDescription,
     };
+    const method = sheetId ? "patch" : "post";
+    const url = sheetId ? `/api/sheets/${sheetId}` : "/api/sheets";
+
     axios()
-      .post(`/api/sheets`, payload)
+      [method](url, payload)
       .then((response) => {
         setSheetId(response.data.uuid);
+        setSheet(response.data);
         setOpen(false);
-        navigate(`/sheets/${response.data.uuid}`);
+        if (!sheetId) {
+          navigate(`/sheets/${response.data.uuid}`);
+        }
       });
   };
 
@@ -75,8 +79,8 @@ export function SheetFromTemplateDialog({
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={createSheet} variant="contained">
-          Create Sheet
+        <Button onClick={handleSave} variant="contained">
+          {sheetId ? "Save Changes" : "Create Sheet"}
         </Button>
       </DialogActions>
     </Dialog>

llmstack/client/src/components/sheets/SheetsList.jsx

@@ -19,9 +19,10 @@ import { axios } from "../../data/axios";
 import SheetDeleteDialog from "./SheetDeleteDialog";
 import { useEffect } from "react";
 
-function SheetListItem({ sheet, onDelete }) {
+function SheetListItem({ sheet, onDelete, onEdit }) {
   const navigate = useNavigate();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
 
   const handleDelete = () => {
     setDeleteDialogOpen(true);
@@ -32,48 +33,63 @@ function SheetListItem({ sheet, onDelete }) {
     setDeleteDialogOpen(false);
   };
 
+  const handleEdit = (e) => {
+    e.stopPropagation();
+    setEditDialogOpen(true);
+  };
+
   return (
-    <TableRow
-      key={sheet.uuid}
-      onClick={() => navigate(`/sheets/${sheet.uuid}`)}
-      sx={{
-        cursor: "pointer",
-        "&:hover": {
-          backgroundColor: "rgba(0, 0, 0, 0.04)",
-        },
-      }}
-    >
-      <TableCell>
-        <Typography variant="subtitle2" sx={{ fontWeight: "normal" }}>
-          {sheet.name}
-        </Typography>
-      </TableCell>
-      <TableCell>
-        <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          {sheet.data?.description || "No description available"}
-        </Typography>
-      </TableCell>
-      <TableCell>
-        <IconButton aria-label="edit" onClick={(e) => e.stopPropagation()}>
-          <EditOutlined />
-        </IconButton>
-        <IconButton
-          aria-label="delete"
-          onClick={(e) => {
-            e.stopPropagation();
-            handleDelete();
-          }}
-        >
-          <DeleteOutlineOutlined />
-        </IconButton>
-      </TableCell>
+    <>
+      <TableRow
+        key={sheet.uuid}
+        onClick={() => navigate(`/sheets/${sheet.uuid}`)}
+        sx={{
+          cursor: "pointer",
+          "&:hover": {
+            backgroundColor: "rgba(0, 0, 0, 0.04)",
+          },
+        }}
+      >
+        <TableCell>
+          <Typography variant="subtitle2" sx={{ fontWeight: "normal" }}>
+            {sheet.name}
+          </Typography>
+        </TableCell>
+        <TableCell>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            {sheet.description || "No description available"}
+          </Typography>
+        </TableCell>
+        <TableCell>
+          <IconButton aria-label="edit" onClick={handleEdit}>
+            <EditOutlined />
+          </IconButton>
+          <IconButton
+            aria-label="delete"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete();
+            }}
+          >
+            <DeleteOutlineOutlined />
+          </IconButton>
+        </TableCell>
+      </TableRow>
       <SheetDeleteDialog
         open={deleteDialogOpen}
         onClose={() => setDeleteDialogOpen(false)}
         onConfirm={confirmDelete}
         sheetName={sheet.name}
       />
-    </TableRow>
+      <SheetFromTemplateDialog
+        open={editDialogOpen}
+        setOpen={setEditDialogOpen}
+        sheet={sheet}
+        setSheet={onEdit}
+        sheetId={sheet.uuid}
+        setSheetId={() => {}}
+      />
+    </>
   );
 }
 
@@ -102,6 +118,15 @@ function SheetsList() {
       });
   };
 
+  const handleEditSheet = (updatedSheet) => {
+    setSheets((prevSheets) =>
+      prevSheets.map((sheet) =>
+        sheet.uuid === updatedSheet.uuid ? updatedSheet : sheet,
+      ),
+    );
+    enqueueSnackbar("Sheet updated successfully", { variant: "success" });
+  };
+
   return (
     <Stack>
       <Typography variant="h5" className="section-header">
@@ -139,6 +164,7 @@ function SheetsList() {
                 key={sheet.uuid}
                 sheet={sheet}
                 onDelete={handleDeleteSheet}
+                onEdit={handleEditSheet}
               />
             ))
           ) : (

llmstack/sheets/apis.py

@@ -87,7 +87,9 @@ def create(self, request):
         sheet = PromptlySheet.objects.create(
             name=request.data.get("name"),
             profile_uuid=profile.uuid,
-            data=request.data.get("data", {}),
+            data={
+                "description": request.data.get("description", ""),
+            },
             extra_data=request.data.get("extra_data", {"has_header": True}),
         )