@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

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

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { DateTimeField, Select, SelectItem } from "@firecms/ui";
+import { useCustomizationController } from "../../../hooks";
+
+interface DateTimeFilterFieldProps {
+    name: string,
+    mode?: "date" | "date_time",
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    isArray?: boolean;
+    title?: string;
+}
+
+const operationLabels: Record<VirtualTableWhereFilterOp, string> = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    "not-in": "not in",
+    in: "in",
+    "array-contains": "Contains",
+    "array-contains-any": "Any"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in"];
+
+export function DateTimeFilterField({
+                                        name,
+                                        isArray,
+                                        mode,
+                                        value,
+                                        setValue,
+                                        title
+                                    }: DateTimeFilterFieldProps) {
+
+    const { locale } = useCustomizationController();
+    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [internalValue, setInternalValue] = useState<Date | undefined>(fieldValue);
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined) {
+        let newValue: Date | undefined = val;
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (val ? [val] : []) : "";
+        }
+
+        setOperation(op);
+        setInternalValue(newValue === null ? undefined : 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-[440px] items-center">
+            <div className="w-[80px]">
+                <Select value={operation}
+                        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="flex-grow ml-2">
+
+                <DateTimeField
+                    mode={mode}
+                    size={"medium"}
+                    locale={locale}
+                    value={internalValue}
+                    onChange={(dateValue: Date | null) => {
+                        updateFilter(operation, dateValue === null ? undefined : dateValue);
+                    }}
+                    clearable={true}
+                />
+
+            </div>
+
+        </div>
+    );
+
+}

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

@@ -0,0 +1,179 @@
+import React, { useMemo, useState } from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { Entity, EntityCollection, EntityReference } from "../../../types";
+import { ReferencePreview } from "../../../preview";
+import { getReferenceFrom } from "../../../util";
+import { useNavigationController, useReferenceDialog } from "../../../hooks";
+import { Button, Select, SelectItem } from "@firecms/ui";
+
+interface ReferenceFilterFieldProps {
+    name: string,
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    isArray?: boolean;
+    path?: string;
+    title?: string;
+    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({
+                                         name,
+                                         value,
+                                         setValue,
+                                         isArray,
+                                         path,
+                                         title,
+                                         previewProperties,
+                                         setHidden
+                                     }: ReferenceFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    isArray
+        ? possibleOperations.push("array-contains-any")
+        : 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>(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[]) {
+
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        let newValue = val;
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (newValue?.isEntityReference && 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 navigationController = useNavigationController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.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 = useReferenceDialog({
+            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}
+                allowEntityNavigation={false}
+            />
+        );
+    };
+
+    return (
+
+        <div className="flex w-[440px] flex-row">
+            <div className="w-[120px]">
+                <Select value={operation}
+                        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="flex-grow ml-2 h-full">
+
+                {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}
+                            variant={"outlined"}
+                            className="h-full w-full">
+                        {multiple ? "Select references" : "Select reference"}
+                    </Button>
+                }
+            </div>
+
+        </div>
+    );
+
+}

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

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { EnumValuesChip } from "../../../preview";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { ClearIcon, IconButton, Select, SelectItem, TextField } from "@firecms/ui";
+import { EnumValueConfig } from "../../../types";
+
+interface StringNumberFilterFieldProps {
+    name: string,
+    dataType: "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"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
+
+export function StringNumberFilterField({
+                                            name,
+                                            value,
+                                            setValue,
+                                            dataType,
+                                            isArray,
+                                            enumValues,
+                                            title
+                                        }: StringNumberFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<="];
+
+    if (enumValues)
+        isArray
+            ? possibleOperations.push("array-contains-any")
+            : possibleOperations.push("in", "not-in");
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);
+
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
+        let newValue = val;
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : "";
+        }
+
+        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-[440px] items-center">
+            <div className={"w-[80px]"}>
+                <Select value={operation}
+                        position={"item-aligned"}
+                        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="flex-grow ml-2">
+
+                {!enumValues && <TextField
+                    type={dataType === "number" ? "number" : undefined}
+                    value={internalValue !== undefined ? String(internalValue) : ""}
+                    onChange={(evt) => {
+                        const val = dataType === "number"
+                            ? parseFloat(evt.target.value)
+                            : evt.target.value;
+                        updateFilter(operation, val);
+                    }}
+                    endAdornment={internalValue && <IconButton
+                        onClick={(e) => updateFilter(operation, undefined)}>
+                        <ClearIcon/>
+                    </IconButton>}
+                />}
+
+                {enumValues &&
+
+                    <Select
+                        position={"item-aligned"}
+                        value={internalValue !== undefined
+                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
+                            : isArray ? [] : ""}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
+                        }}
+                        multiple={multiple}
+                        endAdornment={internalValue && <IconButton
+                            className="absolute right-3 top-2"
+                            onClick={(e) => updateFilter(operation, undefined)}>
+                            <ClearIcon/>
+                        </IconButton>}
+                        renderValue={(enumKey) => <EnumValuesChip
+                            key={`select_value_${name}_${enumKey}`}
+                            enumKey={enumKey}
+                            enumValues={enumValues}
+                            size={"small"}/>}>
+                        {enumValues.map((enumConfig) => (
+                            <SelectItem key={`select_value_${name}_${enumConfig.id}`}
+                                        value={String(enumConfig.id)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    size={"small"}/>
+                            </SelectItem>
+                        ))}
+                    </Select>
+                }
+
+            </div>
+
+        </div>
+    );
+
+}