@rebasepro/core 0.0.1-canary.0

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

@@ -0,0 +1,203 @@
+import React, { useMemo, useState } from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { Entity, EntityCollection, EntityReference } from "@rebasepro/types";
+import { ReferencePreview } from "../../../preview";
+import { useCollectionRegistryController, useEntitySelectionDialog } from "../../../hooks";
+import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
+import { getReferenceFrom } from "@rebasepro/common";
+
+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 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) {
+            // @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 = useCollectionRegistryController();
+    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 = 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 ? "Select references" : "Select reference"}
+                    </Button>
+                }
+
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]: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);
+                        }} />
+                    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 "../../VirtualTable";
+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 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]: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,217 @@
+import React, { useState } from "react";
+import { EnumValuesChip } from "../../../preview";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import {
+    CloseIcon,
+    IconButton,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@rebasepro/ui";
+import { EnumValueConfig } from "@rebasepro/types";
+
+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 possibleOperations: (keyof typeof operationLabels)[] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+
+    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 | "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) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : 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)}>
+                        <CloseIcon />
+                    </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)}>
+                            <CloseIcon />
+                        </IconButton>}
+                        renderValue={(enumKey) => {
+                            if (enumKey === null)
+                                return "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)}>
+                            <CloseIcon />
+                        </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/UnsavedChangesDialog.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+    open,
+    handleOk,
+    handleCancel,
+    body,
+    title
+}: UnsavedChangesDialogProps) {
+
+    return (
+        <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
+            open={open}
+        >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
+            <DialogContent>
+
+                {body}
+
+                <Typography>
+                    Are you sure you want to leave this page?
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text"
+                    onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/UserDisplay.tsx

@@ -0,0 +1,55 @@
+import { AccountCircleIcon, cls, defaultBorderMixin } from "@rebasepro/ui";
+import { EmptyValue } from "../preview";
+import { User } from "@rebasepro/types";
+
+/**
+ * Component to render a single user with name and email
+ */
+export function UserDisplay({
+    user,
+}: { user: User | null }) {
+    if (!user) {
+        return <EmptyValue />;
+    }
+
+    const avatarSizeClass = "w-6 h-6";
+
+    return (
+        <div className={cls(
+            "inline-flex items-center gap-4 px-2 py-1 rounded-xl text-left",
+            "bg-surface-accent-100 dark:bg-surface-accent-800",
+            "border",
+            defaultBorderMixin
+        )}>
+            {user.photoURL ? (
+                <img
+                    src={user.photoURL}
+                    alt={user.displayName || user.email || "User"}
+                    className={cls(
+                        "rounded-full object-cover",
+                        avatarSizeClass
+                    )}
+                />
+            ) : (
+                <AccountCircleIcon
+                    className={cls(
+                        "text-text-secondary dark:text-text-secondary-dark",
+                        avatarSizeClass
+                    )}
+                />
+            )}
+            <div className="flex flex-col min-w-0">
+                <span className={cls("font-regular truncate", "text-sm")}>
+                    {user.displayName || user.email || "-"}
+                </span>
+                {user.displayName && user.email && (
+                    <span className={cls("text-text-secondary dark:text-text-secondary-dark truncate",
+                        "text-xs"
+                    )}>
+                        {user.email}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}