@riligar/elysia-sqlite 1.1.0 → 1.1.4

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

@@ -1,122 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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>
-  );
-};