@rebasepro/admin 0.0.1-canary.4f204c2

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

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
+import { DateTimeField, Select, SelectItem } from "@rebasepro/ui";
+import { useCustomizationController } from "@rebasepro/core";
+
+interface DateTimeFilterFieldProps {
+    name: string,
+    mode?: "date" | "date_time",
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    isArray?: boolean;
+    title?: string;
+    timezone?: string;
+}
+
+const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    "not-in": "not in",
+    in: "in",
+    "array-contains": "Contains",
+    "array-contains-any": "Any",
+    "is-null": "Is null"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in"];
+
+export function DateTimeFilterField({
+    name,
+    isArray,
+    mode,
+    value,
+    setValue,
+    title,
+    timezone
+}: DateTimeFilterFieldProps) {
+
+    const { locale } = useCustomizationController();
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
+
+    const isNullOperation = operation === "is-null";
+
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {
+        // Handle "is null" operation
+        if (op === "is-null") {
+            setOperation(op);
+            setInternalValue(null);
+            setValue(["==", null]);
+            return;
+        }
+
+        let newValue: Date | Date[] | null | undefined = val;
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        if (prevOpIsArray !== newOpIsArray) {
+            newValue = newOpIsArray ? (val ? [val] : []) : undefined;
+        }
+
+        setOperation(op);
+        setInternalValue(Array.isArray(newValue) ? newValue[0] ?? null : newValue);
+
+        const hasNewValue = newValue !== null && Array.isArray(newValue)
+            ? newValue.length > 0
+            : newValue !== undefined;
+        if (op && hasNewValue) {
+            setValue(
+                [op, newValue]
+            );
+        } else {
+            setValue(
+                undefined
+            );
+        }
+    }
+
+    return (
+
+        <div className="flex w-full">
+            <div className="w-[100px]">
+                <Select value={operation}
+                    size={"medium"}
+                    fullWidth={true}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", 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">
+
+                <DateTimeField
+                    mode={mode}
+                    size={"medium"}
+                    locale={locale}
+                    timezone={timezone}
+                    disabled={isNullOperation}
+                    value={isNullOperation ? undefined : (internalValue ?? undefined)}
+                    onChange={(dateValue: Date | null) => {
+                        updateFilter(operation, dateValue === null ? undefined : dateValue);
+                    }}
+                    clearable={true}
+                />
+
+            </div>
+
+        </div>
+    );
+
+}

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

@@ -0,0 +1,208 @@
+import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
+import type { EntityCollection } from "@rebasepro/types";
+import React, { useMemo, useState } from "react";
+import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
+import { Entity, EntityReference } from "@rebasepro/types";
+import { ReferencePreview } from "../../../preview";
+import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
+import { getReferenceFrom } from "@rebasepro/common";
+import { useTranslation } from "@rebasepro/core";
+import { useCollectionRegistryController } from "../../../index";
+
+interface ReferenceFilterFieldProps {
+    name: string,
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    isArray?: boolean;
+    path?: string;
+    title?: string;
+    includeId?: boolean;
+    previewProperties?: string[];
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+}
+
+const operationLabels = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    in: "In",
+    "not-in": "Not in",
+    "array-contains": "Contains",
+    "array-contains-any": "Contains Any"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function ReferenceFilterField({
+    value,
+    setValue,
+    isArray,
+    path,
+    includeId = true,
+    previewProperties,
+    setHidden
+}: ReferenceFilterFieldProps) {
+    const { t } = useTranslation();
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    if (isArray) {
+        possibleOperations.push("array-contains-any");
+    } else {
+        possibleOperations.push("in", "not-in");
+    }
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
+
+    const selectedEntityIds = internalValue
+        ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
+                return null;
+            }
+            return ref.id;
+        }).filter(Boolean) as string[] : [internalValue.id])
+        : [];
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
+
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        let newValue = val;
+        if (prevOpIsArray !== newOpIsArray) {
+            newValue = newOpIsArray
+                ? (newValue && !Array.isArray(newValue) && newValue.isEntityReference?.() ? [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 collectionRegistryController = useCollectionRegistryController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? collectionRegistryController.getCollection(path) : undefined;
+    }, [path]);
+
+    const onSingleEntitySelected = (entity: Entity<any>) => {
+        updateFilter(operation, getReferenceFrom(entity));
+    };
+
+    const onMultipleEntitiesSelected = (entities: Entity<any>[]) => {
+        updateFilter(operation, entities.map(e => getReferenceFrom(e)));
+    };
+
+    const multiple = multipleSelectOperations.includes(operation);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: multiple,
+        path,
+        collection,
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        onClose: () => {
+            setHidden(false);
+        }
+    }
+    );
+
+    const doOpenDialog = () => {
+        setHidden(true);
+        referenceDialogController.open();
+    };
+
+    const buildEntry = (reference: EntityReference) => {
+        return (
+            <ReferencePreview
+                disabled={!path}
+                previewProperties={previewProperties}
+                size={"medium"}
+                onClick={doOpenDialog}
+                reference={reference}
+                hover={true}
+                includeId={includeId}
+                includeEntityLink={false}
+            />
+        );
+    };
+
+    return (
+
+        <div className="flex w-full flex-row">
+            <div className="w-[100px]">
+                <Select value={operation}
+                    size={"medium"}
+                    fullWidth={true}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    {possibleOperations.map((op) => (
+                        <SelectItem key={op} value={op}>
+                            {operationLabels[op]}
+                        </SelectItem>
+                    ))}
+                </Select>
+            </div>
+
+            <div className="grow ml-2 h-full gap-2 flex flex-col">
+
+                {internalValue && Array.isArray(internalValue) && <div>
+                    {internalValue.map((ref, index) => buildEntry(ref))}
+                </div>}
+
+                {internalValue && !Array.isArray(internalValue) && <div>
+                    {buildEntry(internalValue)}
+                </div>}
+
+                {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
+                    <Button onClick={doOpenDialog}
+
+                        size={"medium"}
+                        className="h-full w-full">
+                        {multiple ? t("select_references") : t("select_reference")}
+                    </Button>
+                }
+
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                        checked={internalValue === null}
+                        size={"small"}
+                        onCheckedChange={(checked) => {
+                            if (internalValue !== null)
+                                updateFilter(operation, null);
+                            else updateFilter(operation, undefined);
+                        }}/>
+                    {t("filter_for_null_values")}
+                </Label>}
+
+            </div>
+
+        </div>
+    );
+
+}

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

@@ -0,0 +1,138 @@
+import React, { useMemo, useState } from "react";
+import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
+import { EntityRelation, Relation } from "@rebasepro/types";
+import { Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
+import { RelationSelector } from "../../RelationSelector";
+
+interface RelationFilterFieldProps {
+    name: string,
+    value?: [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null];
+    setValue: (value?: [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]) => void;
+    relation: Relation; // relation config provided externally
+    hidden: boolean;
+    setHidden: (value: boolean) => void;
+}
+
+const operationLabels = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    in: "In",
+    "not-in": "Not in",
+    "array-contains": "Contains",
+    "array-contains-any": "Contains Any"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function RelationFilterField({
+    value,
+    setValue,
+    relation,
+    name: _name,
+    hidden: _hidden,
+    setHidden: _setHidden
+}: RelationFilterFieldProps) {
+
+    const manyRelation = relation.cardinality === "many";
+
+    const possibleOperations: (keyof typeof operationLabels)[] = manyRelation
+        ? ["array-contains", "array-contains-any"]
+        : ["==", "!=", ">", "<", ">=", "<=", "in", "not-in"];
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [internalValue, setInternalValue] = useState<EntityRelation | EntityRelation[] | undefined | null>(fieldValue);
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityRelation | EntityRelation[] | null) {
+
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        let newValue = val;
+        if (prevOpIsArray !== newOpIsArray) {
+            newValue = newOpIsArray ? (newValue instanceof EntityRelation ? [newValue] : []) : undefined;
+        }
+
+        setOperation(op);
+        setInternalValue(newValue);
+
+        const hasNewValue = newValue !== null && Array.isArray(newValue)
+            ? newValue.length > 0
+            : newValue !== undefined;
+        if (op && hasNewValue) {
+            setValue([op, newValue ?? null]);
+        } else {
+            setValue(undefined);
+        }
+    }
+
+    const multiple = multipleSelectOperations.includes(operation);
+
+    const relationSelectorValue = useMemo(() => {
+        if (internalValue === null || internalValue === undefined) return undefined;
+        if (Array.isArray(internalValue)) return internalValue.map(ref => new EntityRelation(ref.id, ref.path));
+        return new EntityRelation(internalValue.id, internalValue.path);
+    }, [internalValue]);
+
+    const handleRelationSelectorChange = (newVal?: EntityRelation | EntityRelation[] | null) => {
+        if (newVal === null) {
+            updateFilter(operation, null);
+            return;
+        }
+        if (newVal === undefined) {
+            updateFilter(operation, undefined);
+            return;
+        }
+        updateFilter(operation, newVal);
+    };
+
+    return (
+        <div className="flex flex-row">
+            <div className="">
+                <Select
+                    value={operation}
+                    fullWidth={true}
+                    onValueChange={(newOp) => {
+                        updateFilter(newOp as VirtualTableWhereFilterOp, internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}
+                >
+                    {possibleOperations.map((op) => (
+                        <SelectItem key={op} value={op}>
+                            {operationLabels[op]}
+                        </SelectItem>
+                    ))}
+                </Select>
+            </div>
+
+            <div className="grow ml-2 h-full gap-2 flex flex-col w-[340px]">
+                <RelationSelector
+                    relation={relation}
+                    value={relationSelectorValue}
+                    onValueChange={handleRelationSelectorChange}
+                    disabled={internalValue === null}
+                    size={"medium"}
+                />
+
+                {!manyRelation && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox
+                        id="null-filter"
+                        checked={internalValue === null}
+                        size={"small"}
+                        onCheckedChange={() => {
+                            if (internalValue !== null) updateFilter(operation, null);
+                            else updateFilter(operation, undefined);
+                        }}
+                    />
+                    Filter for null values
+                </Label>}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,221 @@
+
+import React, { useState } from "react";
+import { EnumValuesChip } from "../../../preview";
+import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
+import { XIcon } from "lucide-react";
+import { IconButton, MultiSelect, MultiSelectItem, Select, SelectItem, TextField } from "@rebasepro/ui";
+import { EnumValueConfig } from "@rebasepro/types";
+import { useTranslation } from "@rebasepro/core";
+
+interface StringNumberFilterFieldProps {
+    name: string,
+    type: "string" | "number";
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    isArray?: boolean;
+    enumValues?: EnumValueConfig[];
+    title?: string;
+}
+
+const operationLabels = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    in: "In",
+    "not-in": "Not in",
+    "array-contains": "Contains",
+    "array-contains-any": "Any",
+    "is-null": "Is null"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function StringNumberFilterField({
+    name,
+    value,
+    setValue,
+    type,
+    isArray,
+    enumValues,
+    title
+}: StringNumberFilterFieldProps) {
+    const { t } = useTranslation();
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+
+    if (enumValues) {
+        if (isArray) {
+            possibleOperations.push("array-contains-any");
+        } else {
+            possibleOperations.push("in", "not-in");
+        }
+    }
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
+
+    const isNullOperation = operation === "is-null";
+
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
+        // Handle "is null" operation
+        if (op === "is-null") {
+            setOperation(op);
+            setInternalValue(null);
+            setValue(["==", null]);
+            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 | "is-null", 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"}
+                    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>
+    );
+
+}