@ai-matrx/records-ui 0.68.0 → 0.70.0

package/dist/index.js

@@ -667,22 +667,28 @@ import {
   cn as cn2
 } from "@ai-matrx/design-system";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function RelationPicker({ field, value, onChange, disabled, id, className }) {
+function RelationPicker({ field, value, onChange, disabled, id, className, allowCreate = true }) {
   const client = useRecordsClient();
   const [rows, setRows] = useState2(null);
   const [words, setWords] = useState2({});
   const [refusal, setRefusal] = useState2(null);
   const [search, setSearch] = useState2("");
   const [open, setOpen] = useState2(false);
+  const [target, setTarget] = useState2(null);
+  const [targetRefusal, setTargetRefusal] = useState2(null);
+  const [creating, setCreating] = useState2(false);
+  const [newTitle, setNewTitle] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const [createRefusal, setCreateRefusal] = useState2(null);
   const picked = useMemo3(
     () => Array.isArray(value) ? value.map(String) : value === null || value === void 0 ? [] : [String(value)],
     [value]
   );
   useEffect(() => {
-    const target = field.relation_target;
-    if (!target) return;
+    const target2 = field.relation_target;
+    if (!target2) return;
     let cancelled = false;
-    void client.list({ table_id: target, limit: 200 }).then((result) => {
+    void client.list({ table_id: target2, limit: 200 }).then((result) => {
       if (cancelled) return;
       if (result.ok) setRows(result.data.rows);
       else setRefusal(refusalLineForAPerson(result.error));
@@ -711,6 +717,28 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
       cancelled = true;
     };
   }, [client, field.id, rows, picked, words]);
+  useEffect(() => {
+    if (!open || !allowCreate || target || targetRefusal) return;
+    const id2 = field.relation_target;
+    if (!id2) return;
+    let cancelled = false;
+    void client.tableList().then((result) => {
+      if (cancelled) return;
+      if (!result.ok) {
+        setTargetRefusal(refusalLineForAPerson(result.error));
+        return;
+      }
+      const found = result.data.find((t) => t.id === id2) ?? null;
+      if (found) setTarget(found);
+      else
+        setTargetRefusal(
+          "That Table is not one you can open, so a new record cannot be added to it from here."
+        );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, open, allowCreate, target, targetRefusal, field.relation_target]);
   if (!field.relation_target) {
     return /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
       fieldName(field),
@@ -730,6 +758,39 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
     else if (!full) next.add(recordId);
     onChange(next.size === 0 ? null : [...next]);
   };
+  const targetWord = (target?.label_singular ?? "").trim() || (target?.name ?? "").trim() || "record";
+  const create = async (rawTitle) => {
+    const title = rawTitle.trim();
+    const tableId = field.relation_target;
+    if (!tableId || title === "" || busy) return;
+    if (!target) {
+      setCreateRefusal("Still reading that Table. Try again in a moment.");
+      return;
+    }
+    const titleField = target.title_field;
+    if (!titleField) {
+      setCreateRefusal(
+        `${target.name} has no column that names a record yet, so a new one would have nothing to show here. A table admin picks its title column in that table's settings.`
+      );
+      return;
+    }
+    setBusy(true);
+    setCreateRefusal(null);
+    const written = await client.recordWrite({ table_id: tableId, data: { [titleField]: title } });
+    if (!written.ok) {
+      setBusy(false);
+      setCreateRefusal(refusalLineForAPerson(written.error));
+      return;
+    }
+    const createdId = String(written.data);
+    const refreshed = await client.list({ table_id: tableId, limit: 200 });
+    if (refreshed.ok) setRows(refreshed.data.rows);
+    setBusy(false);
+    setCreating(false);
+    setNewTitle("");
+    setSearch("");
+    toggle(createdId);
+  };
   const visible = (rows ?? []).filter(
     (row) => search.trim() === "" ? true : titleOf(row.id).toLowerCase().includes(search.trim().toLowerCase())
   );
@@ -776,7 +837,57 @@ function RelationPicker({ field, value, onChange, disabled, id, className }) {
             }
           ) }, row.id)) }),
           rows && visible.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-muted-foreground", children: "Nothing in that table matches." }) : null
-        ] })
+        ] }),
+        allowCreate && !full ? /* @__PURE__ */ jsxs2("div", { className: "mt-1 border-t pt-1", children: [
+          targetRefusal ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-destructive", children: targetRefusal }) : !target ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-muted-foreground", children: "Reading that table\u2026" }) : creating ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 p-1", children: [
+            /* @__PURE__ */ jsx3(
+              BasicInput2,
+              {
+                autoFocus: true,
+                value: newTitle,
+                onChange: (e) => setNewTitle(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    void create(newTitle);
+                  }
+                },
+                placeholder: `New ${targetWord}`,
+                className: "h-7 flex-1 text-xs",
+                "aria-label": `Name the new ${targetWord}`
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Button2,
+              {
+                type: "button",
+                size: "sm",
+                variant: "default",
+                disabled: busy || newTitle.trim() === "",
+                onClick: () => void create(newTitle),
+                children: busy ? "Creating\u2026" : "Create"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx3(
+            Button2,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              className: "w-full justify-start text-xs",
+              disabled: busy,
+              onClick: () => {
+                if (search.trim() !== "") void create(search);
+                else {
+                  setNewTitle("");
+                  setCreating(true);
+                }
+              },
+              children: search.trim() !== "" ? `Create \u201C${search.trim()}\u201D` : `New ${targetWord}`
+            }
+          ),
+          createRefusal ? /* @__PURE__ */ jsx3("p", { className: "p-2 text-xs text-destructive", children: createRefusal }) : null
+        ] }) : null
       ] })
     ] })
   ] });
@@ -3221,6 +3332,7 @@ var NO_COLUMNS_WHY = "A column is what a record holds \u2014 a name, a date, an
 function Grid({
   tableId,
   pageSize = 50,
+  filter,
   onOpenRecord,
   onAddField,
   onNewRecordForm,
@@ -3236,7 +3348,7 @@ function Grid({
   const table = useTable2(tableId);
   const fields = useFields3(tableId);
   const [page, setPage] = useState10(0);
-  const records = useRecords2(tableId, { pageSize, page });
+  const records = useRecords2(tableId, { pageSize, page, ...filter ? { filter } : {} });
   const rights = useTableRights(table.data);
   const rows = useMemo9(() => records.data?.rows ?? [], [records.data]);
   const rowIds = useMemo9(() => rows.map((row) => row.id), [rows]);
@@ -5210,7 +5322,8 @@ function ConditionRow({ lead, expr, fields, onChange, emptyLabel = "always", cla
             value: value === "" ? null : value,
             onChange: (next) => write({ value: next === null || next === void 0 ? "" : String(next) }),
             id: "condition-value-record",
-            className: "min-w-[8rem]"
+            className: "min-w-[8rem]",
+            allowCreate: false
           }
         )
       ) : /* @__PURE__ */ jsx18(
@@ -7019,9 +7132,12 @@ function unplacedName(record, field, labels) {
 // src/ViewSwitcher.tsx
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var NO_FIELDS = [];
-function useViewRecords(view, pageSize = 200) {
+function useViewRecords(view, pageSize = 200, filter) {
   const client = useRecordsClient16();
-  const table = useRecords5(view.ruleId ? null : view.subject, { pageSize });
+  const table = useRecords5(view.ruleId ? null : view.subject, {
+    pageSize,
+    ...filter ? { filter } : {}
+  });
   const [ruled, setRuled] = useState24({
     rows: [],
     loading: Boolean(view.ruleId),
@@ -7076,6 +7192,7 @@ function ViewSwitcher({
   onNewRecordForm,
   onAskWhoChanged,
   pageSize = 200,
+  filter,
   className
 }) {
   const [layout, setLayout] = useState24(view.layout);
@@ -7113,6 +7230,7 @@ function ViewSwitcher({
       {
         tableId: view.subject,
         pageSize,
+        ...filter ? { filter } : {},
         ...local.presentation ?? view.presentation ? { presentation: local.presentation ?? view.presentation } : {},
         ...onViewChange ? { onPresentationChange: (next) => change({ presentation: next }) } : {},
         ...onOpenRecord ? { onOpenRecord } : {},
@@ -7124,6 +7242,7 @@ function ViewSwitcher({
       {
         view: { ...view, ...local, layout },
         pageSize,
+        ...filter ? { filter } : {},
         onChange: change,
         remembered: Boolean(onViewChange),
         ...onOpenRecord ? { onOpenRecord } : {},
@@ -7171,13 +7290,14 @@ function boardColumnChoice(fields, chosenKey, stage) {
 function Board({
   view,
   pageSize,
+  filter,
   onChange,
   remembered,
   onOpenRecord,
   onMoved
 }) {
   const fields = useFields12(view.subject);
-  const records = useViewRecords(view, pageSize);
+  const records = useViewRecords(view, pageSize, filter);
   const stage = useStageField(view.subject);
   if (fields.error) return /* @__PURE__ */ jsx26(RefusalNotice, { error: fields.error });
   if (records.error) return /* @__PURE__ */ jsx26(RefusalNotice, { error: records.error });
@@ -12740,14 +12860,20 @@ function DashboardCanvas({ tableId, activeDashboardId, filter, className }) {
         rights.admin ? /* @__PURE__ */ jsx47(Button39, { size: "sm", variant: "ghost", onClick: () => void remove(board), children: "Delete" }) : null
       ] }) : null
     ] }),
-    board && scheduling ? /* @__PURE__ */ jsx47(
-      DigestScheduler,
-      {
-        tableId,
-        subjectName: board.name,
-        ...filter ? { filters: filter } : {},
-        onClose: () => setScheduling(false)
-      }
+    board && scheduling ? (
+      // ONE SHAPE, SO NO CAST. The dashboard's own filter, the saved view it
+      // schedules over and the drill-through it opens are all the same
+      // `RecordFilter`; the `as Record<string, unknown>` that used to be here
+      // was the seam where they could have drifted.
+      /* @__PURE__ */ jsx47(
+        DigestScheduler,
+        {
+          tableId,
+          subjectName: board.name,
+          ...filter ? { filters: filter } : {},
+          onClose: () => setScheduling(false)
+        }
+      )
     ) : null,
     board ? /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-1", children: [
@@ -14750,12 +14876,38 @@ function TablesHome({ onOpenTable, className }) {
 
 // src/TablePage.tsx
 import { useCallback as useCallback37, useEffect as useEffect41, useState as useState53 } from "react";
-import { useRecordsClient as useRecordsClient43, useTable as useTable22 } from "@ai-matrx/records/react";
+import { useFields as useFields23, useRecordsClient as useRecordsClient43, useTable as useTable22 } from "@ai-matrx/records/react";
 import { Button as Button48, Separator as Separator12, Skeleton as Skeleton34, cn as cn51 } from "@ai-matrx/design-system";
 import { Fragment as Fragment28, jsx as jsx58, jsxs as jsxs53 } from "react/jsx-runtime";
-function cameFromLine(label, groupField) {
-  const grouped = groupField ? `grouped into the same columns the chart used` : `for this table`;
-  return `You came here from \u201C${label}\u201D. This is every record ${grouped} \u2014 not only the ones that number counted \u2014 so the column you clicked is here with the rest beside it.`;
+function filterInWords(filter, fields) {
+  const nameOf = (key) => {
+    const field = fields.find((f) => f.key === key);
+    return field ? fieldName(field) : humanize(key);
+  };
+  const parts = Object.keys(filter).map((key) => {
+    const value = filter[key];
+    if (value === null || value === void 0) return `${nameOf(key)} is not filled in`;
+    if (typeof value === "object") {
+      const from = (value.from ?? "").toString().trim();
+      const to = (value.to ?? "").toString().trim();
+      if (from !== "" && to !== "") return `${nameOf(key)} from ${from} up to ${to}`;
+      if (from !== "") return `${nameOf(key)} from ${from} onwards`;
+      if (to !== "") return `${nameOf(key)} up to ${to}`;
+      return `${nameOf(key)} in a period nobody named`;
+    }
+    return `${nameOf(key)} is ${String(value)}`;
+  });
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0];
+  return `${parts.slice(0, -1).join(", ")} and ${parts[parts.length - 1]}`;
+}
+function cameFromLine(label, groupField, question) {
+  const asked = (question ?? "").trim();
+  if (asked === "") {
+    const grouped = groupField ? " grouped into the same columns the chart used" : "";
+    return `You came here from \u201C${label}\u201D. This is every record in this table${grouped} \u2014 that number was counted over all of them.`;
+  }
+  return `You came here from \u201C${label}\u201D. These are only the records that number counted: ${asked}. Everything else in this table is being held back \u2014 clear the filter to see all of it.`;
 }
 var TABLE_NOT_REACHABLE = "This table is not in the organization you are working in, so there is nothing here to show. Switch to the organization that owns it and open it again \u2014 or it may have been deleted.";
 var DEFAULT_VIEW_NAME = "All records";
@@ -14802,11 +14954,14 @@ function TablePage({
   onViewChanged,
   activeGroupField,
   cameFrom,
+  filter,
   className
 }) {
   const client = useRecordsClient43();
   const table = useTable22(tableId);
   const rights = useTableRights(table.data);
+  const pageFields = useFields23(filter ? tableId : null);
+  const askedInWords = filter ? filterInWords(filter, pageFields.data ?? []) : null;
   const organizationId = useRecordsClient43().config.organizationId;
   const [view, setView] = useState53(null);
   const opening = openingRail(activeRecordId);
@@ -15000,7 +15155,7 @@ function TablePage({
           {
             "data-testid": "came-from-a-number",
             className: "rounded-md border px-3 py-2 text-xs leading-relaxed text-muted-foreground",
-            children: cameFromLine(cameFrom, activeGroupField ?? null)
+            children: cameFromLine(cameFrom, activeGroupField ?? null, askedInWords)
           }
         ) : null,
         /* @__PURE__ */ jsx58(
@@ -15014,6 +15169,7 @@ function TablePage({
               ...activeGroupField ? { groupField: activeGroupField } : {}
             },
             pageSize,
+            ...filter ? { filter } : {},
             onLayoutChange: (layout) => {
               setLayoutFromLink(layout);
               onViewChanged?.(layout);