@firecms/collection_editor 3.0.1 → 3.1.0-canary.9e89e98

package/src/ui/collection_editor/EnumForm.tsx

@@ -3,15 +3,19 @@ import equal from "react-fast-compare"
 
 import { ArrayContainer, ArrayEntryParams, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
 import {
-    AutorenewIcon,
+    FindInPageIcon,
     Badge,
     Button,
+    ChipColorKey,
     CircularProgress,
+    ColorPicker,
     DebouncedTextField,
     Dialog,
     DialogActions,
     DialogContent,
     DialogTitle,
+    getColorSchemeForKey,
+    getColorSchemeForSeed,
     IconButton,
     ListIcon,
     Paper,
@@ -32,14 +36,14 @@ type EnumFormProps = {
 };
 
 export function EnumForm({
-                             enumValues,
-                             onValuesChanged,
-                             onError,
-                             updateIds,
-                             disabled,
-                             allowDataInference,
-                             getData
-                         }: EnumFormProps) {
+    enumValues,
+    onValuesChanged,
+    onError,
+    updateIds,
+    disabled,
+    allowDataInference,
+    getData
+}: EnumFormProps) {
 
     const formex = useCreateFormex<{
         enumValues: EnumValueConfig[]
@@ -68,7 +72,10 @@ export function EnumForm({
         }
     });
 
-    const { values, errors } = formex;
+    const {
+        values,
+        errors
+    } = formex;
 
     useEffect(() => {
         if (onValuesChanged) {
@@ -78,12 +85,12 @@ export function EnumForm({
 
     return <Formex value={formex}>
         <EnumFormFields enumValuesPath={"enumValues"}
-                        values={values}
-                        errors={errors}
-                        shouldUpdateId={updateIds}
-                        disabled={disabled}
-                        allowDataInference={allowDataInference}
-                        getData={getData}/>
+            values={values}
+            errors={errors}
+            shouldUpdateId={updateIds}
+            disabled={disabled}
+            allowDataInference={allowDataInference}
+            getData={getData} />
     </Formex>
 
 }
@@ -102,14 +109,14 @@ type EnumFormFieldsProps = {
 
 // const EnumFormFields = React.memo(
 function EnumFormFields({
-                            values,
-                            errors,
-                            disabled,
-                            enumValuesPath,
-                            shouldUpdateId,
-                            allowDataInference,
-                            getData,
-                        }: EnumFormFieldsProps) {
+    values,
+    errors,
+    disabled,
+    enumValuesPath,
+    shouldUpdateId,
+    allowDataInference,
+    getData,
+}: EnumFormFieldsProps) {
 
     const {
         setFieldValue
@@ -123,25 +130,27 @@ function EnumFormFields({
     const inferredValues = inferredValuesRef.current;
 
     const buildEntry = ({
-                            index,
-                            internalId
-                        }:ArrayEntryParams) => {
+        index,
+        internalId
+    }: ArrayEntryParams) => {
         const justAdded = lastInternalIdAdded === internalId;
         const entryError = errors?.enumValues && errors?.enumValues[index];
         return <EnumEntry index={index}
-                          disabled={disabled}
-                          enumValuesPath={enumValuesPath}
-                          autoFocus={justAdded}
-                          entryError={entryError}
-                          shouldUpdateId={shouldUpdateId || justAdded}
-                          onDialogOpen={() => setEditDialogIndex(index)}
-                          inferredEntry={inferredValues.has(values.enumValues[index]?.id as string)}
-                          key={`${internalId}`}/>;
+            disabled={disabled}
+            enumValuesPath={enumValuesPath}
+            autoFocus={justAdded}
+            entryError={entryError}
+            shouldUpdateId={shouldUpdateId || justAdded}
+            onDialogOpen={() => setEditDialogIndex(index)}
+            inferredEntry={inferredValues.has(values.enumValues[index]?.id as string)}
+            key={`${internalId}`} />;
     };
 
     const inferValues = async () => {
-        if (!getData)
+        if (!getData) {
+            console.warn("INTERNAL: No getData function provided for data inference");
             return;
+        }
         setInferring(true);
         getData?.().then((data) => {
             if (!data)
@@ -172,18 +181,18 @@ function EnumFormFields({
     return (
         <div className={"col-span-12"}>
             <div className="ml-3.5 flex flex-row items-center">
-                <ListIcon/>
+                <ListIcon />
                 <Typography variant={"subtitle2"}
-                            className="ml-2 grow">
+                    className="ml-2 grow">
                     Values
                 </Typography>
                 {allowDataInference &&
-                    <Button loading={inferring}
-                            disabled={disabled || inferring}
-                            variant={"text"}
-                            size={"small"}
-                            onClick={inferValues}>
-                        {inferring ? <CircularProgress size={"smallest"}/> : <AutorenewIcon/>}
+                    <Button 
+                        disabled={disabled || inferring}
+                        variant={"text"}
+                        size={"small"}
+                        onClick={inferValues}>
+                        {inferring ? <CircularProgress size={"smallest"} /> : <FindInPageIcon />}
                         Infer values from data
                     </Button>}
             </div>
@@ -191,20 +200,23 @@ function EnumFormFields({
             <Paper className="p-4 m-1">
 
                 <ArrayContainer droppableId={enumValuesPath}
-                                addLabel={"Add enum value"}
-                                value={values.enumValues}
-                                disabled={disabled}
-                                size={"small"}
-                                buildEntry={buildEntry}
-                                onInternalIdAdded={setLastInternalIdAdded}
-                                canAddElements={true}
-                                onValueChange={(value) => setFieldValue(enumValuesPath, value)}
-                                newDefaultEntry={{ id: "", label: "" }}/>
+                    addLabel={"Add enum value"}
+                    value={values.enumValues}
+                    disabled={disabled}
+                    size={"small"}
+                    buildEntry={buildEntry}
+                    onInternalIdAdded={setLastInternalIdAdded}
+                    canAddElements={true}
+                    onValueChange={(value) => setFieldValue(enumValuesPath, value)}
+                    newDefaultEntry={{
+                        id: "",
+                        label: ""
+                    }} />
 
                 <EnumEntryDialog index={editDialogIndex}
-                                 open={editDialogIndex !== undefined}
-                                 enumValuesPath={enumValuesPath}
-                                 onClose={() => setEditDialogIndex(undefined)}/>
+                    open={editDialogIndex !== undefined}
+                    enumValuesPath={enumValuesPath}
+                    onClose={() => setEditDialogIndex(undefined)} />
             </Paper>
         </div>
     );
@@ -223,15 +235,15 @@ type EnumEntryProps = {
 
 const EnumEntry = React.memo(
     function EnumEntryInternal({
-                                   index,
-                                   shouldUpdateId: updateId,
-                                   enumValuesPath,
-                                   autoFocus,
-                                   onDialogOpen,
-                                   disabled,
-                                   inferredEntry,
-                                   entryError
-                               }: EnumEntryProps) {
+        index,
+        shouldUpdateId: updateId,
+        enumValuesPath,
+        autoFocus,
+        onDialogOpen,
+        disabled,
+        inferredEntry,
+        entryError
+    }: EnumEntryProps) {
 
         const {
             values,
@@ -256,40 +268,59 @@ const EnumEntry = React.memo(
             currentLabelRef.current = labelValue;
         }, [labelValue]);
 
+        const colorValue = getIn(values, `${enumValuesPath}[${index}].color`) as ChipColorKey | undefined;
+        const colorScheme = colorValue
+            ? getColorSchemeForKey(colorValue)
+            : idValue
+                ? getColorSchemeForSeed(String(idValue))
+                : undefined;
+
         return (
             <>
                 <div className={"flex w-full align-center justify-center"}>
                     <Field name={`${enumValuesPath}[${index}].label`}
-                           as={DebouncedTextField}
-                           className={"flex-grow"}
-                           required
-                           disabled={disabled}
-                           size="small"
-                           autoFocus={autoFocus}
-                           autoComplete="off"
-                           endAdornment={inferredEntry && <AutorenewIcon size={"small"}/>}
-                           error={Boolean(entryError?.label)}/>
-
-                    {!disabled &&
+                        as={DebouncedTextField}
+                        className={"flex-grow"}
+                        required
+                        disabled={disabled}
+                        size="small"
+                        autoFocus={autoFocus}
+                        autoComplete="off"
+                        endAdornment={inferredEntry && <FindInPageIcon size={"small"} />}
+                        error={Boolean(entryError?.label)} />
+
+                    {!disabled && <>
+                        {/* Color indicator - clickable to open settings */}
+                        <button
+                            type="button"
+                            onClick={() => onDialogOpen()}
+                            className="w-5 h-5 rounded-full flex-shrink-0 self-center border border-surface-accent-200 dark:border-surface-accent-700 hover:scale-110 transition-transform cursor-pointer ml-3"
+                            style={{
+                                backgroundColor: colorScheme?.color ?? "#ccc"
+                            }}
+                            title={colorValue ? `Color: ${colorValue}` : "Auto color - Click to change"}
+                            aria-label="Edit enum color"
+                        />
                         <Badge color={"error"} invisible={!entryError?.id}>
                             <IconButton
                                 size="small"
                                 aria-label="edit"
                                 className={"m-1"}
                                 onClick={() => onDialogOpen()}>
-                                <SettingsIcon size={"small"}/>
+                                <SettingsIcon size={"small"} />
                             </IconButton>
-                        </Badge>}
+                        </Badge>
+                    </>}
 
                 </div>
 
                 {entryError?.label && <Typography variant={"caption"}
-                                                  className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    className={"ml-3.5 text-red-500 dark:text-red-500"}>
                     {entryError?.label}
                 </Typography>}
 
                 {entryError?.id && <Typography variant={"caption"}
-                                               className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    className={"ml-3.5 text-red-500 dark:text-red-500"}>
                     {entryError?.id}
                 </Typography>}
 
@@ -306,11 +337,11 @@ const EnumEntry = React.memo(
 );
 
 function EnumEntryDialog({
-                             index,
-                             open,
-                             onClose,
-                             enumValuesPath
-                         }: {
+    index,
+    open,
+    onClose,
+    enumValuesPath
+}: {
     index?: number;
     open: boolean;
     enumValuesPath: string;
@@ -319,9 +350,13 @@ function EnumEntryDialog({
 
     const {
         errors,
+        values,
+        setFieldValue
     } = useFormex<EnumValues>();
 
     const idError = index !== undefined ? getIn(errors, `${enumValuesPath}[${index}].id`) : undefined;
+    const colorValue = index !== undefined ? getIn(values, `${enumValuesPath}[${index}].color`) as ChipColorKey | undefined : undefined;
+
     return <Dialog
         maxWidth="md"
         aria-labelledby="enum-edit-dialog"
@@ -331,27 +366,39 @@ function EnumEntryDialog({
         <DialogTitle hidden>Enum form dialog</DialogTitle>
         <DialogContent>
             {index !== undefined &&
-                <div>
-                    <Field name={`${enumValuesPath}[${index}].id`}
-                           as={DebouncedTextField}
-                           required
-                           label={"ID"}
-                           size="small"
-                           autoComplete="off"
-                           error={Boolean(idError)}/>
-
-                    <FieldCaption error={Boolean(idError)}>
-                        {idError ?? "Value saved in the data source"}
-                    </FieldCaption>
+                <div className="flex flex-col gap-4">
+                    <div>
+                        <Field name={`${enumValuesPath}[${index}].id`}
+                            as={DebouncedTextField}
+                            required
+                            label={"ID"}
+                            size="small"
+                            autoComplete="off"
+                            error={Boolean(idError)} />
+
+                        <FieldCaption error={Boolean(idError)}>
+                            {idError ?? "Value saved in the data source"}
+                        </FieldCaption>
+                    </div>
+
+                    <div>
+                        <Typography variant="body2" className="font-medium mb-2">
+                            Chip color
+                        </Typography>
+                        <ColorPicker
+                            value={colorValue}
+                            onChange={(color) => setFieldValue(`${enumValuesPath}[${index}].color`, color)}
+                            size="small"
+                            allowClear={true}
+                        />
+                    </div>
                 </div>}
         </DialogContent>
 
         <DialogActions>
             <Button
                 autoFocus
-                variant="outlined"
-                onClick={onClose}
-                color="primary">
+                onClick={onClose}>
                 Ok
             </Button>
         </DialogActions>

package/src/ui/collection_editor/ExtendSettingsForm.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+    EntityCollection,
+    User
+} from "@firecms/core";
+import {
+    Button,
+    cls,
+    Container,
+    defaultBorderMixin,
+    Typography
+} from "@firecms/ui";
+
+import { useFormex } from "@firecms/formex";
+import { CollectionsConfigController } from "../../types/config_controller";
+import { CollectionInference } from "../../types/collection_inference";
+import { SubcollectionsEditTab } from "./SubcollectionsEditTab";
+import { EntityActionsEditTab } from "./EntityActionsEditTab";
+import { PersistedCollection } from "../../types/persisted_collection";
+
+export function ExtendSettingsForm({
+    collection,
+    parentCollection,
+    configController,
+    collectionInference,
+    getUser,
+    parentCollectionIds,
+    isMergedCollection,
+    onResetToCode
+}: {
+    collection: PersistedCollection;
+    parentCollection?: EntityCollection;
+    configController: CollectionsConfigController;
+    collectionInference?: CollectionInference;
+    getUser?: (uid: string) => User | null;
+    parentCollectionIds?: string[];
+    isMergedCollection?: boolean;
+    onResetToCode?: () => void;
+}) {
+
+    const {
+        values,
+        setFieldValue,
+        submitCount
+    } = useFormex<EntityCollection>();
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"4xl"} className={"flex flex-col gap-8 p-8 m-auto"}>
+
+                <div>
+                    <Typography variant={"h5"} className={"flex-grow"}>
+                        Extend
+                    </Typography>
+                    <Typography variant={"body2"} color={"secondary"}>
+                        Add subcollections, custom views, and entity actions to this collection.
+                    </Typography>
+                </div>
+
+                {/* Subcollections Section */}
+                <SubcollectionsEditTab
+                    collection={collection}
+                    parentCollection={parentCollection}
+                    configController={configController}
+                    collectionInference={collectionInference}
+                    getUser={getUser}
+                    parentCollectionIds={parentCollectionIds}
+                    embedded={true}
+                />
+
+                {/* Entity Actions Section */}
+                <EntityActionsEditTab collection={collection} embedded={true} />
+
+                {/* Reset to code (for merged collections) */}
+                {isMergedCollection && onResetToCode && (
+                    <div className={cls("flex flex-col gap-4 mt-8 border-t pt-8", defaultBorderMixin)}>
+                        <Typography variant={"body2"} color={"secondary"}>
+                            This collection is defined in code.
+                            The changes done in this editor will override the properties defined in code.
+                            You can delete the overridden values to revert to the state defined in code.
+                        </Typography>
+                        <Button color={"neutral"} onClick={onResetToCode}>
+                            Reset to code
+                        </Button>
+                    </div>
+                )}
+
+                <div style={{ height: "52px" }} />
+
+            </Container>
+        </div>
+    );
+}