@firecms/core 3.0.0 → 3.1.0-canary.02232f4

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
+import { DateTimeField, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -10,9 +10,10 @@ interface DateTimeFilterFieldProps {
     setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
     isArray?: boolean;
     title?: string;
+    timezone?: string;
 }
 
-const operationLabels: Record<VirtualTableWhereFilterOp, string> = {
+const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
     "==": "==",
     "!=": "!=",
     ">": ">",
@@ -22,30 +23,53 @@ const operationLabels: Record<VirtualTableWhereFilterOp, string> = {
     "not-in": "not in",
     in: "in",
     "array-contains": "Contains",
-    "array-contains-any": "Any"
+    "array-contains-any": "Any",
+    "is-null": "Is null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in"];
 
 export function DateTimeFilterField({
-                                        name,
-                                        isArray,
-                                        mode,
-                                        value,
-                                        setValue,
-                                        title
-                                    }: DateTimeFilterFieldProps) {
+    name,
+    isArray,
+    mode,
+    value,
+    setValue,
+    title,
+    timezone
+}: DateTimeFilterFieldProps) {
 
     const { locale } = useCustomizationController();
-    const possibleOperations: (keyof typeof operationLabels) [] = isArray
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<="];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+    React.useEffect(() => {
+        if (value) {
+            const [op, val] = value;
+            setOperation(op === "==" && val === null ? "is-null" : op);
+            setInternalValue(val);
+        } else {
+            setOperation(possibleOperations[0]);
+            setInternalValue(undefined);
+        }
+    }, [value, possibleOperations[0]]);
+
+    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 | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
@@ -73,15 +97,15 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px]">
-            <div className="w-[80px]">
+        <div className="flex w-full">
+            <div className="w-[100px]">
                 <Select value={operation}
-                        size={"large"}
-                        fullWidth={true}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    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]}
@@ -94,31 +118,17 @@ export function DateTimeFilterField({
 
                 <DateTimeField
                     mode={mode}
-                    size={"large"}
+                    size={"medium"}
                     locale={locale}
-                    disabled={internalValue === null}
-                    value={internalValue ?? undefined}
+                    timezone={timezone}
+                    disabled={isNullOperation}
+                    value={isNullOperation ? undefined : (internalValue ?? undefined)}
                     onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}
                 />
 
-                <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/ReferenceFilterField.tsx

@@ -3,7 +3,7 @@ import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import { Entity, EntityCollection, EntityReference } from "../../../types";
 import { ReferencePreview } from "../../../preview";
 import { getReferenceFrom } from "../../../util";
-import { useNavigationController, useReferenceDialog } from "../../../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../../hooks";
 import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
@@ -35,16 +35,18 @@ const operationLabels = {
 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
+    value,
+    setValue,
+    isArray,
+    path,
+    includeId = true,
+    previewProperties,
+    setHidden
+}: ReferenceFilterFieldProps) {
+
+    const { t } = useTranslation();
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
@@ -58,6 +60,17 @@ export function ReferenceFilterField({
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
     const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
+    React.useEffect(() => {
+        if (value) {
+            const [op, val] = value;
+            setOperation(op);
+            setInternalValue(val);
+        } else {
+            setOperation(possibleOperations[0] as VirtualTableWhereFilterOp);
+            setInternalValue(undefined);
+        }
+    }, [value, possibleOperations[0]]);
+
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
             if (!(ref?.isEntityReference && ref?.isEntityReference())) {
@@ -110,16 +123,16 @@ export function ReferenceFilterField({
     const multiple = multipleSelectOperations.includes(operation);
 
     const referenceDialogController = useReferenceDialog({
-            multiselect: multiple,
-            path,
-            collection,
-            onSingleEntitySelected,
-            onMultipleEntitiesSelected,
-            selectedEntityIds,
-            onClose: () => {
-                setHidden(false);
-            }
+        multiselect: multiple,
+        path,
+        collection,
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        onClose: () => {
+            setHidden(false);
         }
+    }
     );
 
     const doOpenDialog = () => {
@@ -144,15 +157,15 @@ export function ReferenceFilterField({
 
     return (
 
-        <div className="flex w-[480px] flex-row">
-            <div className="w-[140px]">
+        <div className="flex w-full flex-row">
+            <div className="w-[100px]">
                 <Select value={operation}
-                        size={"large"}
-                        fullWidth={true}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    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]}
@@ -161,7 +174,7 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
@@ -173,9 +186,9 @@ export function ReferenceFilterField({
 
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
-                            variant={"outlined"}
-                            size={"large"}
-                            className="h-full w-full">
+
+                        size={"medium"}
+                        className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }
@@ -185,14 +198,14 @@ export function ReferenceFilterField({
                     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
+                        checked={internalValue === null}
+                        size={"small"}
+                        onCheckedChange={(checked) => {
+                            if (internalValue !== null)
+                                updateFilter(operation, null);
+                            else updateFilter(operation, undefined);
+                        }} />
+                    {t("filter_for_null_values")}
                 </Label>}
 
             </div>

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

@@ -2,10 +2,8 @@ import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import {
-    Checkbox,
     CloseIcon,
     IconButton,
-    Label,
     MultiSelect,
     MultiSelectItem,
     Select,
@@ -34,24 +32,25 @@ const operationLabels = {
     in: "In",
     "not-in": "Not in",
     "array-contains": "Contains",
-    "array-contains-any": "Any"
+    "array-contains-any": "Any",
+    "is-null": "Is null"
 };
 
 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
+    name,
+    value,
+    setValue,
+    dataType,
+    isArray,
+    enumValues,
+    title
+}: StringNumberFilterFieldProps) {
+
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<="];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
 
     if (enumValues)
         isArray
@@ -59,10 +58,31 @@ export function StringNumberFilterField({
             : possibleOperations.push("in", "not-in");
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
+    React.useEffect(() => {
+        if (value) {
+            const [op, val] = value;
+            setOperation(op === "==" && val === null ? "is-null" : op);
+            setInternalValue(val);
+        } else {
+            setOperation(possibleOperations[0]);
+            setInternalValue(undefined);
+        }
+    }, [value, possibleOperations[0]]);
+
+    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);
@@ -95,15 +115,16 @@ export function StringNumberFilterField({
 
     return (
 
-        <div className="flex w-[440px]">
-            <div className={"w-[80px]"}>
+        <div className="flex w-full">
+            <div className={"w-[100px]"}>
                 <Select value={operation}
-                        fullWidth={true}
-                        position={"item-aligned"}
-                        onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                        }}
-                        renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    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]}
@@ -115,8 +136,11 @@ export function StringNumberFilterField({
             <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 {!enumValues && <TextField
+                    size={"medium"}
                     type={dataType === "number" ? "number" : undefined}
                     value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
+                    disabled={isNullOperation}
+                    placeholder={isNullOperation ? "null" : undefined}
                     onChange={(evt) => {
                         const val = dataType === "number"
                             ? parseFloat(evt.target.value)
@@ -125,14 +149,16 @@ export function StringNumberFilterField({
                     }}
                     endAdornment={internalValue !== undefined && internalValue != null && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <CloseIcon/>
+                        <CloseIcon />
                     </IconButton>}
                 />}
 
                 {enumValues && !multiple &&
                     <Select
+                        size={"medium"}
                         position={"item-aligned"}
                         fullWidth={true}
+                        disabled={isNullOperation}
                         value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")
@@ -140,7 +166,7 @@ export function StringNumberFilterField({
                         }}
                         endAdornment={internalValue && <IconButton
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <CloseIcon/>
+                            <CloseIcon />
                         </IconButton>}
                         renderValue={(enumKey) => {
                             if (enumKey === null)
@@ -152,15 +178,15 @@ export function StringNumberFilterField({
                                 key={`select_value_${name}_${enumKey}`}
                                 enumKey={enumKey}
                                 enumValues={enumValues}
-                                size={"small"}/>;
+                                size={"small"} />;
                         }}>
                         {enumValues.map((enumConfig) => (
                             <SelectItem key={`select_item_${name}_${enumConfig.id}`}
-                                        value={String(enumConfig.id)}>
+                                value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
                                     enumValues={enumValues}
-                                    size={"small"}/>
+                                    size={"small"} />
                             </SelectItem>
                         ))}
                     </Select>
@@ -168,8 +194,10 @@ export function StringNumberFilterField({
 
                 {enumValues && multiple &&
                     <MultiSelect
+                        size={"medium"}
                         position={"item-aligned"}
                         value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        disabled={isNullOperation}
                         onValueChange={(value) => {
                             updateFilter(operation, dataType === "number" ? value.map(v => parseInt(v)) : value)
                         }}
@@ -177,47 +205,21 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <CloseIcon/>
+                            <CloseIcon />
                         </IconButton>}
-                        // renderValues={(enumKeys) => {
-                        //     console.log("renderValues", enumKeys);
-                        //     if (enumKeys === null)
-                        //         return "Filter for null values";
-                        //
-                        //     return enumKeys.map(key => <EnumValuesChip
-                        //         key={`select_value_${name}_${enumKeys}`}
-                        //         enumKey={key}
-                        //         enumValues={enumValues}
-                        //         size={"small"}/>);
-                        // }}
                     >
                         {enumValues.map((enumConfig) => (
                             <MultiSelectItem key={`select_value_${name}_${enumConfig.id}`}
-                                             value={String(enumConfig.id)}>
+                                value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
                                     enumValues={enumValues}
-                                    size={"small"}/>
+                                    size={"small"} />
                             </MultiSelectItem>
                         ))}
                     </MultiSelect>
                 }
 
-                {!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/UnsavedChangesDialog.tsx

@@ -1,4 +1,6 @@
+import React from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -15,7 +17,7 @@ export function UnsavedChangesDialog({
                                          body,
                                          title
                                      }: UnsavedChangesDialogProps) {
-
+    const { t } = useTranslation();
     return (
         <Dialog
             onEscapeKeyDown={() => {
@@ -29,17 +31,15 @@ export function UnsavedChangesDialog({
                 {body}
 
                 <Typography>
-                    Are you sure you want to leave this page?
+                    {t("are_you_sure_leave")}
                 </Typography>
 
             </DialogContent>
             <DialogActions>
                 <Button variant="text"
-                        color={"primary"}
-                        onClick={handleCancel} autoFocus> Cancel </Button>
+                        onClick={handleCancel} autoFocus> {t("cancel")} </Button>
                 <Button
-                    color={"primary"}
-                    onClick={handleOk}> Ok </Button>
+                    onClick={handleOk}> {t("ok")} </Button>
             </DialogActions>
         </Dialog>
     );

package/src/components/UserDisplay.tsx

@@ -6,17 +6,17 @@ import { EmptyValue } from "../preview";
  * Component to render a single user with name and email
  */
 export function UserDisplay({
-                                user,
-                            }: { user: User | null }) {
+    user,
+}: { user: User | null }) {
     if (!user) {
-        return <EmptyValue/>;
+        return <EmptyValue />;
     }
 
     const avatarSizeClass = "w-6 h-6";
 
     return (
         <div className={cls(
-            "inline-flex items-center gap-4 px-2 py-1 rounded-xl",
+            "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