@riligar/elysia-sqlite 1.1.0

package/src/ui/src/components/DataGrid.jsx

@@ -0,0 +1,122 @@
+import { Table, Checkbox, Group, Text, ScrollArea } from "@mantine/core";
+import { EditableCell } from "./EditableCell";
+import { ButtonDelete } from "./HoldButton";
+
+export const DataGrid = ({
+  columns,
+  rows,
+  pk,
+  selectedRows,
+  onSelectRow,
+  onSelectAll,
+  onSort,
+  sort,
+  sortDir,
+  getColumnIcon,
+  onDeleteRecord,
+  editingCell,
+  onStartEdit,
+  onUpdateCell,
+  onCancelEdit,
+  fkMap,
+  API,
+  currentTable,
+  getTagColor,
+  isTagColumn,
+}) => {
+  return (
+    <ScrollArea>
+      <Table
+        striped={false}
+        highlightOnHover
+        withTableBorder={false}
+        verticalSpacing="xs"
+      >
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th w={40} style={{ borderBottom: "1px solid #eee" }}>
+              <Checkbox
+                checked={selectedRows.size === rows.length && rows.length > 0}
+                indeterminate={
+                  selectedRows.size > 0 && selectedRows.size < rows.length
+                }
+                onChange={(e) => onSelectAll(e.target.checked)}
+              />
+            </Table.Th>
+            {columns.map((col) => (
+              <Table.Th
+                key={col.name}
+                onClick={() => onSort(col.name)}
+                style={{
+                  cursor: "pointer",
+                  borderBottom: "1px solid #eee",
+                }}
+              >
+                <Group gap={4} wrap="nowrap">
+                  {getColumnIcon(col.type, col.name)}
+                  <Text size="xs" fw={500} c="dimmed">
+                    {col.name}
+                  </Text>
+                  {sort === col.name && (
+                    <Text size="xs" c="dimmed">
+                      {sortDir === "ASC" ? "↑" : "↓"}
+                    </Text>
+                  )}
+                </Group>
+              </Table.Th>
+            ))}
+            <Table.Th
+              w={50}
+              style={{ borderBottom: "1px solid #eee" }}
+            ></Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {rows.map((row) => (
+            <Table.Tr
+              key={row[pk]}
+              bg={selectedRows.has(String(row[pk])) ? "gray.0" : undefined}
+            >
+              <Table.Td>
+                <Checkbox
+                  checked={selectedRows.has(String(row[pk]))}
+                  onChange={(e) => onSelectRow(String(row[pk]), e.target.checked)}
+                />
+              </Table.Td>
+              {columns.map((col) => (
+                <Table.Td key={col.name}>
+                  <EditableCell
+                    row={row}
+                    col={col}
+                    pk={pk}
+                    isEditing={
+                      editingCell?.rowPk === row[pk] &&
+                      editingCell?.column === col.name
+                    }
+                    onStartEdit={onStartEdit}
+                    onUpdate={onUpdateCell}
+                    onCancelEdit={onCancelEdit}
+                    fkMap={fkMap}
+                    API={API}
+                    currentTable={currentTable}
+                    getTagColor={getTagColor}
+                    isTagColumn={isTagColumn}
+                  />
+                </Table.Td>
+              ))}
+              <Table.Td>
+                <ButtonDelete
+                  type="icon"
+                  onDelete={() => onDeleteRecord(row[pk])}
+                  size="sm"
+                  variant="subtle"
+                  color="red"
+                />
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </ScrollArea>
+  );
+};

package/src/ui/src/components/EditableCell.jsx

@@ -0,0 +1,166 @@
+import { useState, useEffect } from "react";
+import { Text, Select, TextInput, Badge, Group } from "@mantine/core";
+import { IconKey, IconLink } from "@tabler/icons-react";
+import { FKPreview } from "./FKPreview";
+
+export const EditableCell = ({ 
+  row, 
+  col, 
+  pk, 
+  isEditing, 
+  onStartEdit, 
+  onUpdate, 
+  onCancelEdit,
+  fkMap,
+  API,
+  currentTable,
+  getTagColor,
+  isTagColumn
+}) => {
+  const value = row[col.name];
+  const rowPk = row[pk];
+  const isPK = col.pk === 1;
+  const hasFK = !!col.fk;
+
+  const [fkOptions, setFkOptions] = useState([]);
+  const [fkLoading, setFkLoading] = useState(false);
+
+  useEffect(() => {
+    if (isEditing && hasFK) {
+      setFkLoading(true);
+      fetch(
+        `${API}/table/${currentTable}/fk-options?refTable=${col.fk.table}&refColumn=${col.fk.column}`
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.success) {
+            setFkOptions(
+              data.options.map((o) => ({
+                value: String(o.value),
+                label: `${o.label} (ID: ${o.value})`,
+              }))
+            );
+          }
+          setFkLoading(false);
+        })
+        .catch(() => setFkLoading(false));
+    }
+  }, [isEditing, hasFK, API, currentTable, col.fk]);
+
+  if (isEditing) {
+    if (hasFK) {
+      return (
+        <Select
+          size="xs"
+          autoFocus
+          searchable
+          data={fkOptions}
+          defaultValue={value === null ? null : String(value)}
+          placeholder={
+            fkLoading ? "Loading..." : `Select ${col.fk.table}`
+          }
+          onChange={(newVal) => {
+            onUpdate(rowPk, col.name, newVal);
+          }}
+          onBlur={onCancelEdit}
+          styles={{
+            input: {
+              minHeight: "28px",
+              height: "28px",
+            },
+          }}
+          onKeyDownCapture={(e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              onCancelEdit();
+            }
+          }}
+        />
+      );
+    }
+
+    return (
+      <TextInput
+        size="xs"
+        autoFocus
+        defaultValue={value === null ? "" : String(value)}
+        onBlur={(e) => onUpdate(rowPk, col.name, e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            onUpdate(rowPk, col.name, e.target.value);
+          } else if (e.key === "Escape") {
+            onCancelEdit();
+          }
+        }}
+        styles={{
+          input: {
+            minHeight: "28px",
+            height: "28px",
+            padding: "0 8px",
+          },
+        }}
+      />
+    );
+  }
+
+  if (value === null) {
+    return (
+      <Text
+        c="dimmed"
+        fs="italic"
+        size="sm"
+        onClick={() => !isPK && onStartEdit(rowPk, col.name)}
+        style={{ cursor: isPK ? "default" : "text" }}
+      >
+        null
+      </Text>
+    );
+  }
+
+  if (hasFK) {
+    return (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          onStartEdit(rowPk, col.name);
+        }}
+      >
+        <FKPreview
+          table={col.fk.table}
+          id={value}
+          label={fkMap[`${col.fk.table}:${value}`]}
+          API={API}
+        />
+      </div>
+    );
+  }
+
+  if (isTagColumn(col.name)) {
+    return (
+      <Badge
+        color={getTagColor(value)}
+        variant="light"
+        onClick={() => onStartEdit(rowPk, col.name)}
+        style={{ cursor: "pointer" }}
+      >
+        {value}
+      </Badge>
+    );
+  }
+
+  return (
+    <Text
+      size="sm"
+      onClick={() => !isPK && onStartEdit(rowPk, col.name)}
+      style={{
+        cursor: isPK ? "default" : "text",
+        padding: "4px 0",
+        borderRadius: "4px",
+      }}
+      className={isPK ? "" : "editable-cell"}
+    >
+      {String(value)}
+    </Text>
+  );
+};

package/src/ui/src/components/ExportButton.jsx

@@ -0,0 +1,95 @@
+import { Button, Menu } from "@mantine/core";
+import { IconDownload, IconFileTypeCsv, IconJson } from "@tabler/icons-react";
+
+/**
+ * ExportButton - A reusable export component with JSON/CSV menu options
+ * @param {Object} props
+ * @param {Array} props.data - Array of objects to export
+ * @param {Array} props.columns - Array of column objects with 'name' property (optional, auto-detected if not provided)
+ * @param {string} props.filename - Base filename without extension (default: 'export')
+ * @param {string} props.size - Button size (default: 'xs')
+ * @param {string} props.variant - Button variant (default: 'default')
+ * @param {boolean} props.compact - Use compact button size (default: false)
+ */
+export function ExportButton({
+  data = [],
+  columns,
+  filename = "export",
+  size = "xs",
+  variant = "default",
+  compact = false,
+}) {
+  const getColumnNames = () => {
+    if (columns?.length) {
+      return columns.map((c) => (typeof c === "string" ? c : c.name));
+    }
+    if (data.length > 0) {
+      return Object.keys(data[0]);
+    }
+    return [];
+  };
+
+  const exportAsCSV = () => {
+    if (data.length === 0) return;
+
+    const colNames = getColumnNames();
+    const csv = [
+      colNames.join(","),
+      ...data.map((row) =>
+        colNames
+          .map((col) => `"${String(row[col] ?? "").replace(/"/g, '""')}"`)
+          .join(",")
+      ),
+    ].join("\n");
+
+    downloadFile(`${filename}.csv`, csv, "text/csv");
+  };
+
+  const exportAsJSON = () => {
+    if (data.length === 0) return;
+
+    const json = JSON.stringify(data, null, 2);
+    downloadFile(`${filename}.json`, json, "application/json");
+  };
+
+  const downloadFile = (name, content, type) => {
+    const blob = new Blob([content], { type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const buttonSize = compact ? "compact-xs" : size;
+
+  return (
+    <Menu shadow="md" width={160}>
+      <Menu.Target>
+        <Button
+          size={buttonSize}
+          variant={variant}
+          color="dark"
+          leftSection={<IconDownload size={14} />}
+          disabled={data.length === 0}
+        >
+          Export
+        </Button>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Label>Export as</Menu.Label>
+        <Menu.Item
+          leftSection={<IconFileTypeCsv size={16} />}
+          onClick={exportAsCSV}
+        >
+          CSV
+        </Menu.Item>
+        <Menu.Item leftSection={<IconJson size={16} />} onClick={exportAsJSON}>
+          JSON
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/src/ui/src/components/FKPreview.jsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { HoverCard, Group, Badge, Text, Center, Loader, Stack, Divider, Box } from "@mantine/core";
+import { IconLink } from "@tabler/icons-react";
+
+export const FKPreview = ({ table, id, label, API }) => {
+  const [record, setRecord] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [fetched, setFetched] = useState(false);
+
+  const loadRecord = async () => {
+    if (fetched) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`${API}/query`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sql: `SELECT * FROM ${table} WHERE rowid = ${id} LIMIT 1`,
+        }),
+      });
+      const data = await res.json();
+      if (data.success && data.rows && data.rows.length > 0) {
+        setRecord(data.rows[0]);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    setLoading(false);
+    setFetched(true);
+  };
+
+  return (
+    <HoverCard width={280} shadow="md" openDelay={300} onOpen={loadRecord}>
+      <HoverCard.Target>
+        <Group gap={6} wrap="nowrap" style={{ cursor: "pointer" }}>
+          <Badge
+            variant="outline"
+            color="gray"
+            size="sm"
+            leftSection={<IconLink size={10} />}
+            styles={{ label: { fontWeight: 500 } }}
+          >
+            {id}
+          </Badge>
+          {label && (
+            <Text size="xs" c="dimmed" lineClamp={1}>
+              {label}
+            </Text>
+          )}
+        </Group>
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        {loading ? (
+          <Center p="sm">
+            <Loader size="xs" type="dots" />
+          </Center>
+        ) : record ? (
+          <Stack gap="xs">
+            <Group justify="space-between">
+              <Text size="xs" fw={700} c="dimmed" tt="uppercase">
+                {table}
+              </Text>
+              <Badge size="xs" variant="light">
+                ID: {id}
+              </Badge>
+            </Group>
+            <Text size="sm" fw={600} lineClamp={2}>
+              {label || "Record"}
+            </Text>
+            <Divider />
+            <Stack gap={4}>
+              {Object.entries(record)
+                .filter(
+                  ([k]) => k !== "id" && !k.toLowerCase().includes("id")
+                )
+                .slice(0, 3)
+                .map(([k, v]) => (
+                  <Group
+                    key={k}
+                    justify="space-between"
+                    align="flex-start"
+                    wrap="nowrap"
+                  >
+                    <Text size="xs" c="dimmed" style={{ minWidth: 60 }}>
+                      {k}:
+                    </Text>
+                    <Text
+                      size="xs"
+                      lineClamp={1}
+                      style={{ textAlign: "right" }}
+                    >
+                      {String(v)}
+                    </Text>
+                  </Group>
+                ))}
+            </Stack>
+          </Stack>
+        ) : (
+          <Text size="xs" c="dimmed">
+            No preview available
+          </Text>
+        )}
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+};