stagent 0.6.3 → 0.8.0

package/src/components/tables/table-relation-combobox.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "@/components/ui/command";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TargetRow {
+  id: string;
+  displayValue: string;
+}
+
+interface TableRelationComboboxProps {
+  targetTableId: string;
+  displayColumn: string;
+  value: string | string[] | null;
+  multiple?: boolean;
+  onChange: (value: string | string[]) => void;
+}
+
+export function TableRelationCombobox({
+  targetTableId,
+  displayColumn,
+  value,
+  multiple = false,
+  onChange,
+}: TableRelationComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [rows, setRows] = useState<TargetRow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const selectedIds = multiple
+    ? Array.isArray(value)
+      ? value
+      : value
+        ? [value]
+        : []
+    : value
+      ? [value as string]
+      : [];
+
+  const fetchRows = useCallback(
+    async (query?: string) => {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams();
+        if (query) params.set("search", query);
+        params.set("limit", "50");
+
+        const res = await fetch(
+          `/api/tables/${targetTableId}/rows?${params.toString()}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const items: TargetRow[] = (data.rows ?? data ?? []).map(
+            (row: Record<string, unknown>) => ({
+              id: String(row.id ?? row._id ?? ""),
+              displayValue: String(row[displayColumn] ?? row.id ?? ""),
+            })
+          );
+          setRows(items);
+        }
+      } catch {
+        // silent
+      } finally {
+        setLoading(false);
+      }
+    },
+    [targetTableId, displayColumn]
+  );
+
+  useEffect(() => {
+    if (open) {
+      fetchRows();
+    }
+  }, [open, fetchRows]);
+
+  useEffect(() => {
+    if (open && search) {
+      const timer = setTimeout(() => fetchRows(search), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [search, open, fetchRows]);
+
+  function handleSelect(rowId: string) {
+    if (multiple) {
+      const current = [...selectedIds];
+      const idx = current.indexOf(rowId);
+      if (idx >= 0) {
+        current.splice(idx, 1);
+      } else {
+        current.push(rowId);
+      }
+      onChange(current);
+    } else {
+      onChange(rowId);
+      setOpen(false);
+    }
+  }
+
+  function handleRemove(rowId: string) {
+    if (multiple) {
+      onChange(selectedIds.filter((id) => id !== rowId));
+    } else {
+      onChange(multiple ? [] : "");
+    }
+  }
+
+  function getDisplayValue(rowId: string): string {
+    const row = rows.find((r) => r.id === rowId);
+    return row?.displayValue ?? rowId;
+  }
+
+  // Single value display
+  const singleDisplay =
+    !multiple && selectedIds.length > 0
+      ? getDisplayValue(selectedIds[0])
+      : null;
+
+  return (
+    <div className="space-y-1.5">
+      {/* Multi-select: show selected as badges */}
+      {multiple && selectedIds.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selectedIds.map((id) => (
+            <Badge key={id} variant="secondary" className="gap-1 pr-1">
+              <span className="truncate max-w-[120px]">
+                {getDisplayValue(id)}
+              </span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(id);
+                }}
+                className="ml-0.5 rounded-sm hover:bg-muted p-0.5"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between h-9 text-sm font-normal"
+          >
+            <span className="truncate">
+              {singleDisplay ?? (multiple ? "Select rows..." : "Select a row...")}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[280px] p-0" align="start">
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder="Search..."
+              value={search}
+              onValueChange={setSearch}
+            />
+            <CommandList>
+              {loading ? (
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  Loading...
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>No rows found.</CommandEmpty>
+                  <CommandGroup>
+                    {rows.map((row) => {
+                      const isSelected = selectedIds.includes(row.id);
+                      return (
+                        <CommandItem
+                          key={row.id}
+                          value={row.id}
+                          onSelect={() => handleSelect(row.id)}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              isSelected ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <span className="truncate">{row.displayValue}</span>
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/src/components/tables/table-row-sheet.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { toast } from "sonner";
+import { TableRelationCombobox } from "./table-relation-combobox";
+import type { ColumnDef } from "@/lib/tables/types";
+
+interface ParsedRow {
+  id: string;
+  data: Record<string, unknown>;
+  position: number;
+  createdBy: string | null;
+}
+
+interface TableRowSheetProps {
+  tableId: string;
+  columns: ColumnDef[];
+  row: ParsedRow;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRowUpdated: (rowId: string, data: Record<string, unknown>) => void;
+}
+
+export function TableRowSheet({
+  tableId,
+  columns,
+  row,
+  open,
+  onOpenChange,
+  onRowUpdated,
+}: TableRowSheetProps) {
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+
+  // Reset form data when sheet opens or row changes
+  useEffect(() => {
+    if (open) {
+      setFormData({ ...row.data });
+    }
+  }, [open, row.id, row.data]);
+
+  const setField = (name: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      // Exclude computed columns from the payload
+      const payload: Record<string, unknown> = {};
+      for (const col of columns) {
+        if (col.dataType !== "computed") {
+          payload[col.name] = formData[col.name] ?? null;
+        }
+      }
+
+      const res = await fetch(`/api/tables/${tableId}/rows/${row.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: payload }),
+      });
+
+      if (!res.ok) {
+        toast.error("Failed to save row");
+        return;
+      }
+
+      onRowUpdated(row.id, { ...formData, ...payload });
+      onOpenChange(false);
+      toast.success("Row updated");
+    } catch {
+      toast.error("Failed to save row");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const sortedColumns = [...columns].sort((a, b) => a.position - b.position);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[480px] sm:max-w-[480px] flex flex-col">
+        <SheetHeader>
+          <SheetTitle>Edit Row</SheetTitle>
+        </SheetHeader>
+        <div className="px-6 pb-6 space-y-4 overflow-y-auto flex-1">
+          {sortedColumns.map((col) => (
+            <RowField
+              key={col.name}
+              column={col}
+              value={formData[col.name]}
+              onChange={(v) => setField(col.name, v)}
+            />
+          ))}
+        </div>
+        <SheetFooter className="px-6">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving..." : "Save"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ── Per-field renderer ──────────────────────────────────────────────────
+
+interface RowFieldProps {
+  column: ColumnDef;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}
+
+function RowField({ column, value, onChange }: RowFieldProps) {
+  const strValue = value == null ? "" : String(value);
+
+  return (
+    <div className="space-y-2">
+      <Label className="flex items-center gap-1.5">
+        {column.displayName}
+        {column.required && <span className="text-destructive">*</span>}
+      </Label>
+      {renderInput(column, value, strValue, onChange)}
+    </div>
+  );
+}
+
+function renderInput(
+  column: ColumnDef,
+  value: unknown,
+  strValue: string,
+  onChange: (value: unknown) => void,
+) {
+  switch (column.dataType) {
+    case "text":
+      return (
+        <Textarea
+          rows={3}
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={`Enter ${column.displayName.toLowerCase()}...`}
+        />
+      );
+
+    case "number":
+      return (
+        <Input
+          type="number"
+          value={strValue}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? null : Number(e.target.value))
+          }
+          placeholder="0"
+        />
+      );
+
+    case "date":
+      return (
+        <Input
+          type="date"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+
+    case "email":
+      return (
+        <Input
+          type="email"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="name@example.com"
+        />
+      );
+
+    case "url":
+      return (
+        <Input
+          type="url"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://..."
+        />
+      );
+
+    case "boolean":
+      return (
+        <div className="flex items-center gap-2 pt-1">
+          <Switch
+            checked={!!value}
+            onCheckedChange={(checked) => onChange(checked)}
+          />
+          <span className="text-sm text-muted-foreground">
+            {value ? "Yes" : "No"}
+          </span>
+        </div>
+      );
+
+    case "select": {
+      const options = column.config?.options ?? [];
+      return (
+        <Select value={strValue} onValueChange={onChange}>
+          <SelectTrigger>
+            <SelectValue placeholder={`Select ${column.displayName.toLowerCase()}...`} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((opt) => (
+              <SelectItem key={opt} value={opt}>
+                {opt}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    }
+
+    case "relation": {
+      const targetId = column.config?.targetTableId;
+      const dispCol = column.config?.displayColumn ?? "name";
+      if (!targetId) return <Input disabled value="No target table configured" />;
+      return (
+        <TableRelationCombobox
+          targetTableId={targetId}
+          displayColumn={dispCol}
+          value={strValue || null}
+          onChange={(v) => onChange(v)}
+        />
+      );
+    }
+
+    case "computed":
+      return (
+        <Input
+          disabled
+          value={strValue}
+          className="text-muted-foreground italic"
+        />
+      );
+
+    default:
+      return (
+        <Input
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={`Enter ${column.displayName.toLowerCase()}...`}
+        />
+      );
+  }
+}