@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -1,282 +0,0 @@
-import React, { useState } from "react";
-import { EnumValuesChip } from "../../../preview";
-import {
-    IconButton,
-    MultiSelect,
-    MultiSelectItem,
-    Select,
-    SelectItem,
-    TextField,
-    VirtualTableWhereFilterOp,
-    XIcon
-} from "@rebasepro/ui";
-import { EnumValueConfig } from "@rebasepro/types";
-import { useTranslation } from "@rebasepro/app";
-
-interface StringNumberFilterFieldProps {
-    name: string,
-    type: "string" | "number";
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
-    isArray?: boolean;
-    enumValues?: EnumValueConfig[];
-    title?: string;
-    /**
-     * Restrict the offered operators (already resolved against engine
-     * capabilities and property config). When omitted, all operators this
-     * field can render are offered.
-     */
-    operators?: readonly VirtualTableWhereFilterOp[];
-}
-
-const operationLabels = {
-    "==": "==",
-    "!=": "!=",
-    ">": ">",
-    "<": "<",
-    ">=": ">=",
-    "<=": "<=",
-    in: "In",
-    "not-in": "Not in",
-    "array-contains": "Contains",
-    "array-contains-any": "Any",
-    "ilike": "Contains",
-    "not-ilike": "Not contains",
-    "is-null": "Is null",
-    "is-not-null": "Is not null"
-};
-
-const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
-
-/** Operators that match a substring, wrapped in SQL wildcards (`%value%`). */
-const containsOperations = ["ilike", "not-ilike"];
-
-/** Strip the surrounding `%` wildcards a contains-filter adds, for display. */
-function unwrapContains(value: unknown): string {
-    if (typeof value !== "string") return "";
-    return value.replace(/^%/, "").replace(/%$/, "");
-}
-
-export function StringNumberFilterField({
-                                            name,
-                                            value,
-                                            setValue,
-                                            type,
-                                            isArray,
-                                            enumValues,
-                                            title,
-                                            operators
-                                        }: StringNumberFilterFieldProps) {
-    const { t } = useTranslation();
-
-    let possibleOperations: (keyof typeof operationLabels)[] = isArray
-        ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
-
-    // Case-insensitive substring matching is only meaningful for free-text
-    // string columns (not numbers, arrays, or enums).
-    if (!isArray && !enumValues && type === "string") {
-        possibleOperations.push("ilike", "not-ilike");
-    }
-
-    if (enumValues) {
-        if (isArray) {
-            possibleOperations.push("array-contains-any");
-        } else {
-            possibleOperations.push("in", "not-in");
-        }
-    }
-
-    if (operators) {
-        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
-    }
-
-    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    // Read back both the canonical null operators and the legacy `["==", null]` /
-    // `["!=", null]` form saved by older filter presets.
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
-        fieldOperation === "==" && fieldValue === null ? "is-null"
-            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
-                : fieldOperation
-    );
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(
-        containsOperations.includes(fieldOperation) ? unwrapContains(fieldValue) : (fieldValue as string | number | string[] | number[] | null | undefined)
-    );
-
-    const isNullOperation = operation === "is-null" || operation === "is-not-null";
-
-    // All renderable operators were filtered out (engine/property narrowing).
-    if (possibleOperations.length === 0) return null;
-
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
-        // Null-testing operators ignore their value.
-        if (op === "is-null" || op === "is-not-null") {
-            setOperation(op);
-            setInternalValue(null);
-            setValue([op, null]);
-            return;
-        }
-
-        // Substring matching: keep the raw text in the field, emit it wrapped
-        // in SQL wildcards so the backend runs `column ILIKE '%value%'`.
-        if (op === "ilike" || op === "not-ilike") {
-            const raw = typeof val === "string" ? val : "";
-            setOperation(op);
-            setInternalValue(raw);
-            if (raw.length > 0) {
-                setValue([op, `%${raw}%`]);
-            } else {
-                setValue(undefined);
-            }
-            return;
-        }
-
-        let newValue = val;
-        const prevOpIsArray = multipleSelectOperations.includes(operation);
-        const newOpIsArray = multipleSelectOperations.includes(op);
-        if (prevOpIsArray !== newOpIsArray) {
-            if (newOpIsArray) {
-                if (typeof val === "string") newValue = [val];
-                else if (typeof val === "number") newValue = [val];
-                else newValue = [];
-            } else {
-                newValue = undefined;
-            }
-        }
-
-        if (typeof newValue === "number" && isNaN(newValue))
-            newValue = undefined;
-
-        setOperation(op);
-        setInternalValue(newValue);
-
-        const hasNewValue = newValue !== null && Array.isArray(newValue)
-            ? newValue.length > 0
-            : newValue !== undefined;
-        if (op && hasNewValue) {
-            setValue(
-                [op, newValue]
-            );
-        } else {
-            setValue(
-                undefined
-            );
-        }
-    }
-
-    const multiple = multipleSelectOperations.includes(operation);
-
-    return (
-
-        <div className="flex w-full">
-            <div className={"w-[100px]"}>
-                <Select value={operation}
-                        size={"medium"}
-                        fullWidth={true}
-                        position={"item-aligned"}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
-                    {possibleOperations.map((op) => (
-                        <SelectItem key={op} value={op}>
-                            {operationLabels[op]}
-                        </SelectItem>
-                    ))}
-                </Select>
-            </div>
-
-            <div className="grow ml-2 flex flex-col gap-2">
-
-                {!enumValues && <TextField
-                    size={"medium"}
-                    aria-label={`${title ?? name} filter value`}
-                    type={type === "number" ? "number" : undefined}
-                    value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
-                    disabled={isNullOperation}
-                    placeholder={isNullOperation ? "null" : undefined}
-                    onChange={(evt) => {
-                        const val = type === "number"
-                            ? parseFloat(evt.target.value)
-                            : evt.target.value;
-                        updateFilter(operation, val);
-                    }}
-                    endAdornment={internalValue !== undefined && internalValue != null && <IconButton
-                        onClick={(e) => updateFilter(operation, undefined)}>
-                        <XIcon/>
-                    </IconButton>}
-                />}
-
-                {enumValues && !multiple &&
-                    <Select
-                        size={"medium"}
-                        position={"item-aligned"}
-                        fullWidth={true}
-                        disabled={isNullOperation}
-                        value={typeof internalValue === "string" ? internalValue : ""}
-                        onValueChange={(value) => {
-                            if (value !== "")
-                                updateFilter(operation, type === "number" ? parseInt(value as string) : value as string)
-                        }}
-                        endAdornment={internalValue && <IconButton
-                            onClick={(e) => updateFilter(operation, undefined)}>
-                            <XIcon/>
-                        </IconButton>}
-                        renderValue={(enumKey) => {
-                            if (enumKey === null)
-                                return t("filter_for_null_values");
-                            if (enumKey === undefined)
-                                return null;
-
-                            return <EnumValuesChip
-                                key={`select_value_${name}_${enumKey}`}
-                                enumKey={enumKey}
-                                enumValues={enumValues}
-                                size={"small"}/>;
-                        }}>
-                        {enumValues.map((enumConfig) => (
-                            <SelectItem key={`select_item_${name}_${enumConfig.id}`}
-                                        value={String(enumConfig.id)}>
-                                <EnumValuesChip
-                                    enumKey={String(enumConfig.id)}
-                                    enumValues={enumValues}
-                                    size={"small"}/>
-                            </SelectItem>
-                        ))}
-                    </Select>
-                }
-
-                {enumValues && multiple &&
-                    <MultiSelect
-                        size={"medium"}
-                        position={"item-aligned"}
-                        value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
-                        disabled={isNullOperation}
-                        onValueChange={(value) => {
-                            updateFilter(operation, type === "number" ? (value ?? []).map(v => parseInt(v)) : value)
-                        }}
-                        multiple={multiple}
-                        endAdornment={internalValue && <IconButton
-                            className="absolute right-2 top-3"
-                            onClick={(e) => updateFilter(operation, undefined)}>
-                            <XIcon/>
-                        </IconButton>}
-                    >
-                        {enumValues.map((enumConfig) => (
-                            <MultiSelectItem key={`select_value_${name}_${enumConfig.id}`}
-                                             value={String(enumConfig.id)}>
-                                <EnumValuesChip
-                                    enumKey={String(enumConfig.id)}
-                                    enumValues={enumValues}
-                                    size={"small"}/>
-                            </MultiSelectItem>
-                        ))}
-                    </MultiSelect>
-                }
-
-            </div>
-
-        </div>
-    );
-
-}

package/src/components/SelectableTable/filters/null_filter.ts

@@ -1,63 +0,0 @@
-import { WhereFilterOp } from "@rebasepro/types";
-
-/**
- * The "filter for null values" checkbox, expressed portably.
- *
- * The checkbox used to emit `[whichever operator is selected, null]` and leave
- * the driver to work out that a null value means a null check. That reads as
- * an engine-neutral convention and is not one:
- *
- *  - Postgres took `["==", null]` as `IS NULL`, but dropped `["in", null]`
- *    entirely — a dropped condition widens, so ticking the box returned every
- *    row instead of the ones with no value.
- *  - MongoDB maps `in`/`not-in` straight onto `$in`/`$nin`, and Mongo rejects
- *    those with a non-array: `$in needs an array`. The read fails outright.
- *  - A Firestore driver is supplied by the developer, and the Firestore SDK
- *    likewise refuses `in` without a non-empty array.
- *
- * Only `==`/`!=` ever worked, and only because two engines independently chose
- * to special-case a null operand. Nothing in the filter contract promises that,
- * and a filter field is shared by every engine the admin can talk to.
- *
- * `is-null`/`is-not-null` are the operators that mean this, they are in
- * {@link ALL_WHERE_FILTER_OPS}, and every driver already handles them
- * explicitly rather than by inference. So the checkbox emits those, and the
- * question of what a null operand means to a given engine stops being asked.
- */
-export const NULL_FILTER_OPERATORS: readonly WhereFilterOp[] = ["is-null", "is-not-null"];
-
-/** Whether `op` asks about absence rather than about a value. */
-export function isNullFilterOperator(op: WhereFilterOp | undefined): boolean {
-    return op === "is-null" || op === "is-not-null";
-}
-
-/**
- * The null check carrying the same sense as `op`.
- *
- * The checkbox is a toggle, not an operator, so the operator it is ticked
- * alongside is what says which way round it means: `==`/`in` are asking for
- * a match, so their null form is "has nothing"; `!=`/`not-in` are asking for
- * the absence of one, so theirs is "has something".
- */
-export function nullFilterOperatorFor(op: WhereFilterOp | undefined): WhereFilterOp {
-    if (op === "!=" || op === "not-in" || op === "is-not-null") return "is-not-null";
-    return "is-null";
-}
-
-/**
- * The value operator to return to when the checkbox is unticked.
- *
- * `is-null` could have been reached from `==` or from `in` — the field cannot
- * know which, and it does not matter. What matters is landing on an operator
- * the dropdown actually offers, in the same sense, so the control does not
- * come back showing something it cannot render.
- */
-export function valueOperatorFor(
-    op: WhereFilterOp | undefined,
-    offered: readonly WhereFilterOp[]
-): WhereFilterOp | undefined {
-    const negative = op === "is-not-null";
-    const wanted: WhereFilterOp[] = negative ? ["!=", "not-in"] : ["==", "in", "array-contains"];
-    return wanted.find(candidate => offered.includes(candidate))
-        ?? offered.find(candidate => !isNullFilterOperator(candidate));
-}

package/src/components/SideDialogs.tsx

@@ -1,238 +0,0 @@
-import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
-import React, { useCallback, useContext, useEffect, useState, useMemo } from "react";
-import { useSideDialogsController } from "../hooks";
-import { Sheet, Dialog } from "@rebasepro/ui";
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/app";
-import { ErrorBoundary } from "@rebasepro/ui";
-import type { SidePanelBindingProps } from "@rebasepro/cms-types";
-
-
-export type SideDialogController = {
-    blocked: boolean,
-    setBlocked: (blocked: boolean) => void,
-    setBlockedNavigationMessage: (message?: React.ReactNode) => void,
-    width?: string,
-    close: (force?: boolean) => void;
-    pendingClose: boolean,
-    setPendingClose: (pendingClose: boolean) => void
-}
-
-const SideDialogContext = React.createContext<SideDialogController>({
-    width: "",
-    blocked: false,
-    setBlocked: (blocked: boolean) => {
-    },
-    setBlockedNavigationMessage: (message?: React.ReactNode) => {
-    },
-    close: () => {
-    },
-    pendingClose: false,
-    setPendingClose: () => {
-
-    }
-});
-
-/**
- * This hook is used to access the properties of a particular side dialog,
- * in contrast with {@link useSideDialogsController} which handles the
- * state of all the dialogs.
- */
-export const useSideDialogContext = () => useContext<SideDialogController>(SideDialogContext);
-
-/**
- * This is the component in charge of rendering the side dialogs used
- * for editing entities. Use the {@link useSidePanel} to open
- * and control the dialogs.
- * This component needs a parent {@link Rebase}
- * {@link useSideDialogsController}
- * @group Components
- */
-export function SideDialogs() {
-
-    const sideDialogsController = useSideDialogsController();
-
-    const sidePanels = sideDialogsController.sidePanels;
-
-    // A trailing `undefined` slot ("ghost panel") is always appended so that
-    // close animations work correctly. Index-based keys ensure that when the
-    // last real panel is removed, the ghost inherits key=0 — re-using the
-    // same SideDialogView instance so the Sheet smoothly transitions from
-    // open → closed rather than unmounting instantly.
-    const panels: (SideDialogPanelProps | undefined)[] = [...sidePanels];
-    panels.push(undefined);
-
-    return <>
-        {
-            panels.map((panel, index) =>
-                <SideDialogView
-                    key={`side_dialog_${index}`}
-                    panel={panel}
-                    panelIndex={index}
-                    offsetPosition={sidePanels.length - index - 1}
-                    isTopPanel={index === sidePanels.length - 1}/>)
-        }
-    </>;
-}
-
-function SideDialogView({
-    offsetPosition,
-    panel,
-    panelIndex,
-    isTopPanel
-}: {
-    offsetPosition: number,
-    panel?: SideDialogPanelProps,
-    panelIndex: number,
-    isTopPanel: boolean
-}) {
-
-    // was the closing of the dialog requested by the drawer
-    const [drawerCloseRequested, setDrawerCloseRequested] = useState<boolean>(false);
-    const [blocked, setBlocked] = useState(false);
-    const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
-
-    // Held in a ref, read through a getter, because of *when* it is written and
-    // read. "Save and close" raises it and submits the form in one click
-    // handler, and the callback that acts on it — the form's `onSaved` — was
-    // captured before React could re-render with the new value. As state the
-    // flag was therefore always read one save late: the first "save and close"
-    // saved and left the panel open, and the *next* save closed it.
-    // Nothing renders from it, so a ref loses nothing.
-    const pendingCloseRef = React.useRef(false);
-    const setPendingClose = useCallback((value: boolean) => {
-        pendingCloseRef.current = value;
-    }, []);
-
-    const widthRef = React.useRef<string | undefined>(panel?.width);
-    const width = widthRef.current;
-
-    const sideDialogsController = useSideDialogsController();
-
-    // Prevent non-topmost dialogs from being dismissed by outside clicks.
-    // When stacked Sheets exist, clicking the overlay of the topmost dialog
-    // would otherwise propagate and dismiss lower dialogs too.
-    const preventDismiss = useCallback((e: Event) => {
-        e.preventDefault();
-    }, []);
-
-    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(
-        blocked,
-        () => setBlocked(false)
-    );
-
-    useEffect(() => {
-        if (panel)
-            widthRef.current = panel.width;
-    }, [panel])
-
-    const handleDrawerCloseOk = () => {
-        setBlocked(false);
-        setDrawerCloseRequested(false);
-        sideDialogsController.close();
-        panel?.onClose?.();
-    };
-
-    const handleDrawerCloseCancel = () => {
-        setDrawerCloseRequested(false);
-    };
-
-    const onCloseRequest = useCallback((force?: boolean) => {
-        if (blocked && !force) {
-            setDrawerCloseRequested(true);
-            triggerDialog();
-        } else {
-            sideDialogsController.close();
-            panel?.onClose?.();
-        }
-    }, [blocked, triggerDialog, sideDialogsController, panel]);
-
-    const contextValue = useMemo(() => ({
-        blocked,
-        setBlocked,
-        setBlockedNavigationMessage,
-        width,
-        close: onCloseRequest,
-        get pendingClose() {
-            return pendingCloseRef.current;
-        },
-        setPendingClose
-    }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, setPendingClose]);
-
-    const additionalProps = panel?.additional as SidePanelBindingProps | undefined;
-    const isDialogMode = additionalProps?.collection?.openEntityMode === "dialog";
-
-    return (
-        <SideDialogContext.Provider value={contextValue}>
-
-            {isDialogMode ? (
-                <Dialog
-                    open={Boolean(panel)}
-                    onOpenChange={(open) => {
-                        if (!open) {
-                            onCloseRequest();
-                        }
-                    }}
-                    maxWidth="4xl"
-                    scrollable={false}
-                >
-                    {panel && (
-                        <div className="flex flex-col h-[75vh] min-h-[500px] w-full min-w-0 max-w-full overflow-hidden">
-                            <ErrorBoundary>
-                                {panel.component}
-                            </ErrorBoundary>
-                        </div>
-                    )}
-                </Dialog>
-            ) : (
-                <Sheet
-                    open={Boolean(panel)}
-                    includeBackgroundOverlay={true}
-                    overlayStyle={{ zIndex: 40 + panelIndex * 10 }}
-                    style={{ zIndex: 45 + panelIndex * 10 }}
-                    onOpenChange={(open) => {
-                        if (!open) {
-                            onCloseRequest();
-                        }
-                    }}
-                    onPointerDownOutside={!isTopPanel ? preventDismiss : undefined}
-                    onInteractOutside={!isTopPanel ? preventDismiss : undefined}
-                    title={"Side dialog " + panel?.key}
-                >
-                    {panel &&
-                        <div
-                            className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-800 "}
-                            style={{
-                                width: panel.width,
-                                transform: `translateX(-${offsetPosition * 200}px)`
-                            }}
-                        >
-                            <ErrorBoundary>
-                                {panel.component}
-                            </ErrorBoundary>
-                        </div>}
-
-                    {!panel && <div style={{ width }}/>}
-
-                </Sheet>
-            )}
-
-            <UnsavedChangesDialog
-                {...dialogProps}
-                handleOk={() => {
-                    dialogProps.handleOk();
-                    if (drawerCloseRequested) {
-                        handleDrawerCloseOk();
-                    }
-                }}
-                handleCancel={() => {
-                    dialogProps.handleCancel();
-                    if (drawerCloseRequested) {
-                        handleDrawerCloseCancel();
-                    }
-                }}
-                body={blockedNavigationMessage || "There are unsaved changes"}/>
-
-        </SideDialogContext.Provider>
-
-    );
-}