@aglyn/plugins-crm 1.0.0-beta.200 → 1.0.0-beta.202

package/src/lib/components/fields-section.js

@@ -16,19 +16,27 @@
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CONTACT_FIELD_TYPE_LABELS, createResourceUid, CRM_COLLECTIONS, CRM_FIELD_OBJECT_LABELS, CRM_FIELD_OBJECTS, isCrmFieldObject, newResourceScopeFields, ORG_SCOPE_TOKEN, pluginDocsHelp } from "@aglyn/aglyn";
+import { CONTACT_FIELD_TYPE_LABELS, CONTACT_FIELD_TYPES, CONTACT_FIELDS_MAX_PER_ORG, createResourceUid, CRM_COLLECTIONS, crmFieldListFields, CRM_FIELD_OBJECT_LABELS, CRM_FIELD_OBJECTS, isCrmFieldObject, newResourceScopeFields, ORG_SCOPE_TOKEN, pluginDocsHelp } from "@aglyn/aglyn";
 import EmptyStateComponent from "@aglyn/shared-ui-jsx/components/empty-state.component";
+import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
 import { mdiArchiveArrowUpOutline, mdiArchiveOutline, mdiArrowDown, mdiArrowUp, mdiDeleteOutline, mdiPencilOutline } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon, SrOnly, useConfirmationContext } from "@aglyn/shared-ui-jsx";
-import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
-import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
+import { planListQuery } from "@aglyn/shared-ui-jsx/const/list-query-plan";
+import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
+import { nameSearchNormalizers } from "@aglyn/aglyn/app-utils/name-search";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { useFirestore, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
-import { Button, Chip, IconButton, Stack, Tab, TableBody, TableCell, TableHead, TableRow, Tabs, Typography } from "@mui/material";
-import { collection, deleteDoc, doc, setDoc, updateDoc, writeBatch } from "firebase/firestore";
-import { useCallback, useState } from "react";
+import { ceilingedWindow } from "@aglyn/tenant-feature-instance/hooks/host-collection-queries";
+import { listQueryConstraints } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
+import { useFirestore, useFirestoreCollection, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { Button, Chip, IconButton, Stack, Tab, Tabs, Tooltip, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, limit, query, setDoc, updateDoc, writeBatch } from "firebase/firestore";
+import { useCallback, useMemo, useState } from "react";
 import { useContactFieldDefinitions } from "../hooks/use-contact-field-definitions.js";
 import { useCrmScope } from "../hooks/use-crm-scope.js";
+import { CRM_FIELD_LIST_QUERY, crmFieldListBase } from "../constants/field-list-query.js";
 import ContactFieldDrawer from "./contact-field-drawer.js";
 import { LeadSourceValuesCard } from "./lead-source-values-card.js";
 import { recomputeAllCrmNextActivity } from "../model/next-activity-api.js";
@@ -45,6 +53,322 @@ import { crmTaskCallScope } from "../model/task-routes.js";
     deal: 'deal',
     lead: 'lead'
 };
+/** What the grid's Filters panel offers: the type and whether it is required, on the query. */ const FIELD_FILTER_FIELDS = CRM_FIELD_LIST_QUERY.fields;
+const FIELD_FILTER_HEADERS = {
+    type: 'Type',
+    required: 'Required'
+};
+const FIELD_FILTER_OPTIONS = {
+    type: CONTACT_FIELD_TYPES.map((type)=>({
+            value: type,
+            label: CONTACT_FIELD_TYPE_LABELS[type]
+        })),
+    required: [
+        {
+            value: 'true',
+            label: 'Required'
+        },
+        {
+            value: 'false',
+            label: 'Optional'
+        }
+    ]
+};
+/** Why the arrows are off while the list is not in its stored order. */ export const FIELD_REORDER_LOCKED_REASON = 'Clear sorting and filters to reorder';
+const typeLabel = (type)=>{
+    var _CONTACT_FIELD_TYPE_LABELS_type;
+    return (_CONTACT_FIELD_TYPE_LABELS_type = CONTACT_FIELD_TYPE_LABELS[type]) != null ? _CONTACT_FIELD_TYPE_LABELS_type : String(type != null ? type : '');
+};
+/**
+ * One tab's field definitions in the console's list table (AGL-3335): the
+ * toolbar's columns, filters, export and search, sorting by Field, Key and
+ * Type, and the shared footer.
+ *
+ * ## Order is data, not a sort
+ *
+ * The stored `order` is where each field appears on every record and form,
+ * so the arrows that move it are kept, and are live only while the table
+ * shows that order: no sort, no filter and no search. Under any of them the
+ * row above a field on screen is not the field above it in the stored
+ * order, and a move would land somewhere the reader cannot see; the arrows
+ * say so rather than disappear.
+ *
+ * The panel and the search are asked of Firestore (AGL-3321): a clause or
+ * a search word reads the tab's definitions that match it
+ * (`CRM_FIELD_LIST_QUERY`), and never narrows the rows already on screen.
+ * That answer is every match, at most `CONTACT_FIELDS_MAX_PER_ORG`, so the
+ * grid sorts and pages it whole; a read that reaches the ceiling says so.
+ */ function FieldsTable(props) {
+    const { orgId, object, definitions, busyId, onMove, rowActions } = props;
+    const firestore = useFirestore();
+    const gridFilter = useListGridFilter({
+        selectFields: [
+            'type',
+            'required'
+        ]
+    });
+    const [sortModel, setSortModel] = useState([]);
+    const searching = gridFilter.searchWords.some((word)=>word.trim() !== '');
+    const reorderLocked = sortModel.length > 0 || gridFilter.clauses.length > 0 || searching;
+    const narrowed = gridFilter.clauses.length > 0 || searching;
+    const plan = useMemo(()=>planListQuery(CRM_FIELD_LIST_QUERY, {
+            clauses: gridFilter.clauses,
+            search: gridFilter.searchWords,
+            base: crmFieldListBase(object)
+        }, nameSearchNormalizers), // The words are a new array each render; their text is their identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        object,
+        gridFilter.clauses,
+        gridFilter.searchWords.join(' ')
+    ]);
+    const planKey = JSON.stringify({
+        filters: plan.filters,
+        orderBy: plan.orderBy
+    });
+    /*
+   * Read only while something narrows the tab. Unnarrowed, the table is the
+   * shared definitions read every CRM surface already holds, in its stored
+   * order — the same fields, with no second read.
+   */ const matched = useFirestoreCollection(()=>narrowed && orgId ? query(collection(firestore, 'orgs', orgId, CRM_COLLECTIONS.contactFields), ...listQueryConstraints(plan), limit(CONTACT_FIELDS_MAX_PER_ORG + 1)) : null, [
+        firestore,
+        orgId,
+        narrowed,
+        planKey
+    ], {
+        idField: '$id'
+    });
+    const answer = useMemo(()=>ceilingedWindow(matched.data, CONTACT_FIELDS_MAX_PER_ORG), [
+        matched.data
+    ]);
+    const positions = useMemo(()=>new Map(definitions.map((definition, position)=>[
+                definition.$id,
+                position
+            ])), [
+        definitions
+    ]);
+    const rows = useMemo(()=>{
+        const shown = narrowed ? [
+            ...answer.rows
+        ].sort((a, b)=>{
+            var _positions_get, _positions_get1;
+            return ((_positions_get = positions.get(a.$id)) != null ? _positions_get : Number.MAX_SAFE_INTEGER) - ((_positions_get1 = positions.get(b.$id)) != null ? _positions_get1 : Number.MAX_SAFE_INTEGER);
+        }) : definitions;
+        return shown.map((definition)=>{
+            var _positions_get;
+            return {
+                $id: definition.$id,
+                label: definition.label,
+                key: definition.key,
+                type: definition.type,
+                required: definition.required ? 'true' : 'false',
+                position: (_positions_get = positions.get(definition.$id)) != null ? _positions_get : 0,
+                definition
+            };
+        });
+    }, [
+        narrowed,
+        answer.rows,
+        definitions,
+        positions
+    ]);
+    const refused = useMemo(()=>listQueryRefusals(plan.refused, {
+            fields: FIELD_FILTER_FIELDS,
+            headers: FIELD_FILTER_HEADERS,
+            options: FIELD_FILTER_OPTIONS
+        }), [
+        plan.refused
+    ]);
+    const columns = useMemo(()=>listFilterGridColumns([
+            {
+                field: 'position',
+                headerName: 'Order',
+                width: 132,
+                sortable: false,
+                filterable: false,
+                hideable: false,
+                disableColumnMenu: true,
+                renderCell: ({ row })=>{
+                    const arrows = /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 0,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                sx: {
+                                    minWidth: 24,
+                                    textAlign: 'right',
+                                    mr: 0.5
+                                },
+                                children: row.position + 1
+                            }),
+                            /*#__PURE__*/ _jsxs(IconButton, {
+                                size: "small",
+                                disabled: reorderLocked || row.position === 0 || Boolean(busyId),
+                                onClick: ()=>onMove(row.definition, -1),
+                                children: [
+                                    /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: mdiArrowUp.path,
+                                        size: 0.7
+                                    }),
+                                    /*#__PURE__*/ _jsx(SrOnly, {
+                                        children: `Move ${row.label} up`
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(IconButton, {
+                                size: "small",
+                                disabled: reorderLocked || row.position === definitions.length - 1 || Boolean(busyId),
+                                onClick: ()=>onMove(row.definition, 1),
+                                children: [
+                                    /*#__PURE__*/ _jsx(MdiIcon, {
+                                        path: mdiArrowDown.path,
+                                        size: 0.7
+                                    }),
+                                    /*#__PURE__*/ _jsx(SrOnly, {
+                                        children: `Move ${row.label} down`
+                                    })
+                                ]
+                            })
+                        ]
+                    });
+                    return reorderLocked ? /*#__PURE__*/ _jsx(Tooltip, {
+                        title: FIELD_REORDER_LOCKED_REASON,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: arrows
+                        })
+                    }) : arrows;
+                }
+            },
+            {
+                field: 'label',
+                headerName: 'Field',
+                flex: 1,
+                minWidth: 180,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            flexWrap: 'wrap',
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: row.label
+                            }),
+                            row.definition.retiredAt ? /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                variant: "outlined",
+                                color: "warning",
+                                label: "Retired"
+                            }) : null
+                        ]
+                    })
+            },
+            {
+                field: 'key',
+                headerName: 'Key',
+                flex: 1,
+                minWidth: 160,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            fontFamily: 'monospace'
+                        },
+                        children: row.key
+                    })
+            },
+            {
+                field: 'type',
+                headerName: 'Type',
+                width: 170,
+                // By what the type reads as, not by its stored key.
+                sortComparator: (a, b)=>typeLabel(a).localeCompare(typeLabel(b)),
+                renderCell: ({ row })=>{
+                    var _row_definition_options;
+                    return /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "body2",
+                        children: [
+                            typeLabel(row.type),
+                            row.definition.type === 'select' && ((_row_definition_options = row.definition.options) == null ? void 0 : _row_definition_options.length) ? ` · ${row.definition.options.length} choices` : ''
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'required',
+                headerName: 'Required',
+                width: 120,
+                sortable: false,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: row.required === 'true' ? 'Yes' : '—'
+                    })
+            },
+            listActionsColumn((row)=>/*#__PURE__*/ _jsx(ListRowActions, {
+                    label: row.label,
+                    items: rowActions(row.definition)
+                }), {
+                width: 72
+            })
+        ], FIELD_FILTER_FIELDS, FIELD_FILTER_OPTIONS, FIELD_FILTER_HEADERS), [
+        reorderLocked,
+        busyId,
+        onMove,
+        rowActions,
+        definitions.length
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(ListFilterChips, {
+                fields: FIELD_FILTER_FIELDS,
+                headers: FIELD_FILTER_HEADERS,
+                clauses: gridFilter.clauses,
+                onChange: gridFilter.setClauses,
+                options: FIELD_FILTER_OPTIONS,
+                marksServed: false
+            }),
+            /*#__PURE__*/ _jsx(ListQueryNotices, {
+                refused: refused,
+                notices: plan.notices
+            }),
+            narrowed && answer.truncated ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: `Showing the first ${CONTACT_FIELDS_MAX_PER_ORG} matching fields.`
+            }) : null,
+            /*#__PURE__*/ _jsx(ListTable, {
+                "aria-label": "Fields",
+                rows: rows,
+                loading: narrowed && matched.status === 'loading',
+                columns: columns,
+                sortModel: sortModel,
+                onSortModelChange: setSortModel,
+                // Firestore narrowed the rows above; the grid only draws them.
+                filterMode: "server",
+                filterModel: gridFilter.filterModel,
+                onFilterModelChange: gridFilter.onFilterModelChange,
+                quickFilter: true,
+                noRowsLabel: "No fields match these filters",
+                getRowClassName: ({ row })=>row.definition.retiredAt ? 'field-retired' : '',
+                sx: {
+                    '& .field-retired': {
+                        opacity: 0.6
+                    }
+                }
+            })
+        ]
+    });
+}
+FieldsTable.displayName = 'FieldsTable';
 /**
  * `/crm/fields` — the custom fields a holder keeps on a person (AGL-2601),
  * since AGL-2661 on a company and a deal too, and since AGL-3272 on a lead:
@@ -63,6 +387,8 @@ import { crmTaskCallScope } from "../model/task-routes.js";
  *    rename is a new field and a retire.
  *  - Order is a stored `order` on each document, moved with the arrows here,
  *    and every reader sorts by it — the profile card, the columns, an export.
+ *    The list table sorts, filters and searches a tab too (AGL-3335), and
+ *    the arrows wait while it does — see `FieldsTable`.
  *
  * ## What is NOT on this page
  *
@@ -179,8 +505,10 @@ import { crmTaskCallScope } from "../model/task-routes.js";
                     label: draft.label
                 }, editing.type === 'select' ? {
                     options: draft.options
-                } : {}, {
-                    required: draft.required,
+                } : {}, crmFieldListFields(_extends({}, editing, {
+                    label: draft.label,
+                    required: draft.required
+                })), {
                     updatedAt: now
                 }));
             });
@@ -205,9 +533,13 @@ import { crmTaskCallScope } from "../model/task-routes.js";
             } : {}, {
                 required: draft.required,
                 order,
-                retiredAt: null,
-                // Which record the field describes — the tab it was made on.
-                object,
+                retiredAt: null
+            }, crmFieldListFields({
+                key: draft.key,
+                label: draft.label,
+                required: draft.required,
+                object
+            }), {
                 hostId: createHostId
             }, newResourceScopeFields([
                 ORG_SCOPE_TOKEN
@@ -382,7 +714,10 @@ import { crmTaskCallScope } from "../model/task-routes.js";
         enqueueSnackbar,
         noun
     ]);
-    const rowActions = (definition)=>[
+    /*
+   * Stable across renders, as the table's columns are built from them: a
+   * fresh function each render would rebuild every column on every render.
+   */ const rowActions = useCallback((definition)=>[
             {
                 key: 'edit',
                 label: 'Edit field',
@@ -418,7 +753,15 @@ import { crmTaskCallScope } from "../model/task-routes.js";
                     onClick: ()=>void handleDelete(definition)
                 }
             ] : []
-        ];
+        ], [
+        openEdit,
+        toggleRetired,
+        handleDelete,
+        busyId
+    ]);
+    const onMove = useCallback((definition, direction)=>void move(definition, direction), [
+        move
+    ]);
     return /*#__PURE__*/ _jsxs(CardDisplay, {
         header: 'Fields',
         help: pluginDocsHelp('contactFields', {
@@ -481,146 +824,17 @@ import { crmTaskCallScope } from "../model/task-routes.js";
                             onClick: openCreate,
                             children: 'New field'
                         }) : undefined
-                    }) : /*#__PURE__*/ _jsxs(ScrollTable, {
-                        size: "small",
-                        children: [
-                            /*#__PURE__*/ _jsx(TableHead, {
-                                children: /*#__PURE__*/ _jsxs(TableRow, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            sx: {
-                                                width: 96
-                                            },
-                                            children: 'Order'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Field'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Key'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Type'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            children: 'Required'
-                                        }),
-                                        /*#__PURE__*/ _jsx(TableCell, {
-                                            align: "right"
-                                        })
-                                    ]
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(TableBody, {
-                                children: definitions.map((definition, index)=>{
-                                    var _CONTACT_FIELD_TYPE_LABELS_definition_type;
-                                    var _definition_options;
-                                    return /*#__PURE__*/ _jsxs(TableRow, {
-                                        hover: true,
-                                        sx: definition.retiredAt ? {
-                                            opacity: 0.6
-                                        } : undefined,
-                                        children: [
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsxs(Stack, {
-                                                    direction: "row",
-                                                    spacing: 0,
-                                                    children: [
-                                                        /*#__PURE__*/ _jsxs(IconButton, {
-                                                            size: "small",
-                                                            disabled: index === 0 || Boolean(busyId),
-                                                            onClick: ()=>void move(definition, -1),
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(MdiIcon, {
-                                                                    path: mdiArrowUp.path,
-                                                                    size: 0.7
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(SrOnly, {
-                                                                    children: `Move ${definition.label} up`
-                                                                })
-                                                            ]
-                                                        }),
-                                                        /*#__PURE__*/ _jsxs(IconButton, {
-                                                            size: "small",
-                                                            disabled: index === definitions.length - 1 || Boolean(busyId),
-                                                            onClick: ()=>void move(definition, 1),
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(MdiIcon, {
-                                                                    path: mdiArrowDown.path,
-                                                                    size: 0.7
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(SrOnly, {
-                                                                    children: `Move ${definition.label} down`
-                                                                })
-                                                            ]
-                                                        })
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsxs(Stack, {
-                                                    direction: "row",
-                                                    spacing: 1,
-                                                    sx: {
-                                                        flexWrap: 'wrap',
-                                                        alignItems: 'center'
-                                                    },
-                                                    children: [
-                                                        /*#__PURE__*/ _jsx(Typography, {
-                                                            variant: "body2",
-                                                            children: definition.label
-                                                        }),
-                                                        definition.retiredAt ? /*#__PURE__*/ _jsx(Chip, {
-                                                            size: "small",
-                                                            variant: "outlined",
-                                                            color: "warning",
-                                                            label: "Retired"
-                                                        }) : null
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsx(Typography, {
-                                                    variant: "body2",
-                                                    color: "text.secondary",
-                                                    sx: {
-                                                        fontFamily: 'monospace'
-                                                    },
-                                                    children: definition.key
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsxs(Typography, {
-                                                    variant: "body2",
-                                                    children: [
-                                                        (_CONTACT_FIELD_TYPE_LABELS_definition_type = CONTACT_FIELD_TYPE_LABELS[definition.type]) != null ? _CONTACT_FIELD_TYPE_LABELS_definition_type : definition.type,
-                                                        definition.type === 'select' && ((_definition_options = definition.options) == null ? void 0 : _definition_options.length) ? ` · ${definition.options.length} choices` : ''
-                                                    ]
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                children: /*#__PURE__*/ _jsx(Typography, {
-                                                    variant: "body2",
-                                                    color: "text.secondary",
-                                                    children: definition.required ? 'Yes' : '—'
-                                                })
-                                            }),
-                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                align: "right",
-                                                sx: {
-                                                    width: 56
-                                                },
-                                                children: /*#__PURE__*/ _jsx(RowActionsMenu, {
-                                                    label: definition.label,
-                                                    items: rowActions(definition)
-                                                })
-                                            })
-                                        ]
-                                    }, definition.$id);
-                                })
-                            })
-                        ]
-                    }),
+                    }) : /*
+            Keyed by the tab, so a sort, a filter or a search made on one
+            record's fields does not follow the reader onto another's.
+          */ /*#__PURE__*/ _jsx(FieldsTable, {
+                        orgId: orgId,
+                        object: object,
+                        definitions: definitions,
+                        busyId: busyId,
+                        onMove: onMove,
+                        rowActions: rowActions
+                    }, object),
                     definitions.length ? /*#__PURE__*/ _jsx(Typography, {
                         variant: "caption",
                         color: "text.secondary",