@firecms/core 3.0.0-canary.28 → 3.0.0-canary.280

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { DateTimeField, Select, SelectItem } from "@firecms/ui";
+import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -43,10 +43,10 @@ export function DateTimeFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<Date | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined) {
-        let newValue: Date | undefined = val;
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        let newValue: Date | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
@@ -73,9 +73,11 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -88,19 +90,34 @@ export function DateTimeFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 <DateTimeField
                     mode={mode}
-                    size={"medium"}
+                    size={"large"}
                     locale={locale}
-                    value={internalValue}
+                    value={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

@@ -4,7 +4,7 @@ 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";
+import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
     name: string,
@@ -13,6 +13,7 @@ interface ReferenceFilterFieldProps {
     isArray?: boolean;
     path?: string;
     title?: string;
+    includeId?: boolean;
     previewProperties?: string[];
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
@@ -34,12 +35,11 @@ const operationLabels = {
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function ReferenceFilterField({
-                                         name,
                                          value,
                                          setValue,
                                          isArray,
                                          path,
-                                         title,
+                                         includeId = true,
                                          previewProperties,
                                          setHidden
                                      }: ReferenceFilterFieldProps) {
@@ -48,13 +48,15 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    isArray
-        ? possibleOperations.push("array-contains-any")
-        : possibleOperations.push("in", "not-in");
+    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>(fieldValue);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
@@ -65,7 +67,7 @@ export function ReferenceFilterField({
         }).filter(Boolean) as string[] : [internalValue.id])
         : [];
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[]) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
 
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
@@ -134,16 +136,19 @@ export function ReferenceFilterField({
                 onClick={doOpenDialog}
                 reference={reference}
                 hover={true}
-                allowEntityNavigation={false}
+                includeId={includeId}
+                includeEntityLink={false}
             />
         );
     };
 
     return (
 
-        <div className="flex w-[440px] flex-row">
-            <div className="w-[120px]">
+        <div className="flex w-[480px] flex-row">
+            <div className="w-[140px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -156,21 +161,40 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
 
                 {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"}
+                            size={"large"}
                             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/StringNumberFilterField.tsx

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { ClearIcon, IconButton, Select, SelectItem, TextField } from "@firecms/ui";
+import {
+    Checkbox,
+    CloseIcon,
+    IconButton,
+    Label,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    TextField
+} from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -50,15 +60,15 @@ export function StringNumberFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | 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] : []) : "";
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : undefined;
         }
 
         if (typeof newValue === "number" && isNaN(newValue))
@@ -82,11 +92,13 @@ export function StringNumberFilterField({
     }
 
     const multiple = multipleSelectOperations.includes(operation);
+
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
+                        fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -100,46 +112,51 @@ export function StringNumberFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 {!enumValues && <TextField
                     type={dataType === "number" ? "number" : undefined}
-                    value={internalValue !== undefined ? String(internalValue) : ""}
+                    value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     onChange={(evt) => {
                         const val = dataType === "number"
                             ? parseFloat(evt.target.value)
                             : evt.target.value;
                         updateFilter(operation, val);
                     }}
-                    endAdornment={internalValue && <IconButton
+                    endAdornment={internalValue !== undefined && internalValue != null && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>}
                 />}
 
-                {enumValues &&
-
+                {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
-                        value={internalValue !== undefined
-                            ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
-                            : isArray ? [] : ""}
+                        fullWidth={true}
+                        value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
-                            updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
+                            if (value !== "")
+                                updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
-                        multiple={multiple}
                         endAdornment={internalValue && <IconButton
-                            className="absolute right-3 top-2"
+                            className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
-                        renderValue={(enumKey) => <EnumValuesChip
-                            key={`select_value_${name}_${enumKey}`}
-                            enumKey={enumKey}
-                            enumValues={enumValues}
-                            size={"small"}/>}>
+                        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_value_${name}_${enumConfig.id}`}
+                            <SelectItem key={`select_item_${name}_${enumConfig.id}`}
                                         value={String(enumConfig.id)}>
                                 <EnumValuesChip
                                     enumKey={String(enumConfig.id)}
@@ -150,6 +167,58 @@ export function StringNumberFilterField({
                     </Select>
                 }
 
+                {enumValues && multiple &&
+                    <MultiSelect
+                        position={"item-aligned"}
+                        value={Array.isArray(internalValue) ? internalValue.map(e => String(e)) : []}
+                        onValueChange={(value) => {
+                            updateFilter(operation, dataType === "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>}
+                        // 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)}>
+                                <EnumValuesChip
+                                    enumKey={String(enumConfig.id)}
+                                    enumValues={enumValues}
+                                    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

@@ -0,0 +1,46 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/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"
+                        color={"primary"}
+                        onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    color={"primary"}
+                    onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/UserDisplay.tsx

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