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

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -0,0 +1,262 @@
+import React from "react";
+import {
+    DeleteConfirmationDialog,
+    EntityCollection,
+    EntityCustomView,
+    resolveEntityView,
+    useCustomizationController,
+    User
+} from "@firecms/core";
+import {
+    AddIcon,
+    Alert,
+    Button,
+    Container,
+    DeleteIcon,
+    IconButton,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Typography,
+} from "@firecms/ui";
+import { CollectionEditorDialog } from "./CollectionEditorDialog";
+import { CollectionsConfigController } from "../../types/config_controller";
+import { PersistedCollection } from "../../types/persisted_collection";
+import { CollectionInference } from "../../types/collection_inference";
+import { EntityCustomViewsSelectDialog } from "./EntityCustomViewsSelectDialog";
+import { useFormex } from "@firecms/formex";
+
+export function SubcollectionsEditTab({
+                                          collection,
+                                          parentCollection,
+                                          configController,
+                                          collectionInference,
+                                          getUser,
+                                          parentCollectionIds
+                                      }: {
+    collection: PersistedCollection,
+    parentCollection?: EntityCollection,
+    configController: CollectionsConfigController;
+    collectionInference?: CollectionInference;
+    getUser: (uid: string) => User | null;
+    parentCollectionIds?: string[];
+}) {
+
+    const { entityViews: contextEntityViews } = useCustomizationController();
+
+    const [subcollectionToDelete, setSubcollectionToDelete] = React.useState<string | undefined>();
+    const [addEntityViewDialogOpen, setAddEntityViewDialogOpen] = React.useState<boolean>(false);
+    const [viewToDelete, setViewToDelete] = React.useState<string | undefined>();
+
+    const [currentDialog, setCurrentDialog] = React.useState<{
+        isNewCollection: boolean,
+        editedCollectionId?: string,
+    }>();
+
+    const {
+        values,
+        setFieldValue,
+    } = useFormex<EntityCollection>();
+
+    const subcollections = collection.subcollections ?? [];
+    const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
+        .map(e => resolveEntityView(e, contextEntityViews))
+        .filter(Boolean) as EntityCustomView[] ?? [];
+    const hardCodedEntityViews = collection.entityViews?.filter(e => typeof e !== "string") as EntityCustomView[] ?? [];
+    const totalEntityViews = resolvedEntityViews.length + hardCodedEntityViews.length;
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+                <div className={"flex  flex-col gap-16"}>
+
+                    <div className={"flex-grow flex flex-col gap-4 items-start"}>
+                        <Typography variant={"h5"}>
+                            Subcollections of {values.name}
+                        </Typography>
+
+                        <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                            {subcollections && subcollections.length > 0 && <Table>
+                                <TableBody>
+                                    {subcollections.map((subcollection) => (
+                                        <TableRow key={subcollection.path}
+                                                  onClick={() => setCurrentDialog({
+                                                      isNewCollection: false,
+                                                      editedCollectionId: subcollection.id
+                                                  })}>
+                                            <TableCell
+                                                align="left">
+                                                <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                    {subcollection.name}
+                                                </Typography>
+                                            </TableCell>
+                                            <TableCell
+                                                align="right">
+                                                <Tooltip title={"Remove"}>
+                                                    <IconButton size="small"
+                                                                onClick={(e) => {
+                                                                    e.preventDefault();
+                                                                    e.stopPropagation();
+                                                                    setSubcollectionToDelete(subcollection.id);
+                                                                }}
+                                                                color="inherit">
+                                                        <DeleteIcon size={"small"}/>
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>}
+
+                            <Button
+                                onClick={() => {
+                                    setCurrentDialog({
+                                        isNewCollection: true
+                                    });
+                                }}
+                                variant={"text"}
+                                startIcon={<AddIcon/>}>
+                                Add subcollection
+                            </Button>
+
+                        </Paper>
+
+                    </div>
+
+                    <div className={"flex-grow  flex flex-col gap-4 items-start"}>
+                        <Typography variant={"h5"}>
+                            Custom views
+                        </Typography>
+
+                        {totalEntityViews === 0 &&
+                            <Alert action={<Button variant="text"
+                                                   size={"small"}
+                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   component={"a"}
+                                                   rel="noopener noreferrer"
+                                                   target="_blank">More info</Button>}>
+                                Define your own custom views by uploading them with the CLI.
+                            </Alert>
+                        }
+
+                        {<>
+                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                                <Table>
+                                    <TableBody>
+                                        {resolvedEntityViews.map((view) => (
+                                            <TableRow key={view.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                        {view.name}
+                                                    </Typography>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="right">
+                                                    <Tooltip title={"Remove"}>
+                                                        <IconButton size="small"
+                                                                    onClick={(e) => {
+                                                                        e.preventDefault();
+                                                                        e.stopPropagation();
+                                                                        setViewToDelete(view.key);
+                                                                    }}
+                                                                    color="inherit">
+                                                            <DeleteIcon size={"small"}/>
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                        {hardCodedEntityViews.map((view) => (
+                                            <TableRow key={view.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                        {view.name}
+                                                    </Typography>
+                                                    <Typography variant={"caption"} className={"flex-grow"}>
+                                                        This view is defined in code with
+                                                        key <code>{view.key}</code>
+                                                    </Typography>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+
+                                <Button
+                                    onClick={() => {
+                                        setAddEntityViewDialogOpen(true);
+                                    }}
+                                    variant={"text"}
+                                    startIcon={<AddIcon/>}>
+                                    Add custom entity view
+                                </Button>
+                            </Paper>
+
+                        </>}
+
+
+                    </div>
+
+                </div>
+            </Container>
+
+            <div style={{ height: "52px" }}/>
+
+            {subcollectionToDelete &&
+                <DeleteConfirmationDialog open={Boolean(subcollectionToDelete)}
+                                          onAccept={() => {
+                                              const props = {
+                                                  id: subcollectionToDelete,
+                                                  parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
+                                              };
+                                              console.debug("Deleting subcollection", props)
+                                              configController.deleteCollection(props);
+                                              setSubcollectionToDelete(undefined);
+                                          }}
+                                          onCancel={() => setSubcollectionToDelete(undefined)}
+                                          title={<>Delete this subcollection?</>}
+                                          body={<> This will <b>not
+                                              delete any data</b>, only
+                                              the collection in the CMS</>}/>}
+            {viewToDelete &&
+                <DeleteConfirmationDialog open={Boolean(viewToDelete)}
+                                          onAccept={() => {
+                                              setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
+                                              setViewToDelete(undefined);
+                                          }}
+                                          onCancel={() => setViewToDelete(undefined)}
+                                          title={<>Remove this view?</>}
+                                          body={<>This will <b>not
+                                              delete any data</b>, only
+                                              the view in the CMS</>}/>}
+
+            <CollectionEditorDialog
+                open={Boolean(currentDialog)}
+                configController={configController}
+                parentCollection={collection}
+                collectionInference={collectionInference}
+                parentCollectionIds={[...parentCollectionIds ?? [], values.id]}
+                isNewCollection={false}
+                {...currentDialog}
+                getUser={getUser}
+                handleClose={() => {
+                    setCurrentDialog(undefined);
+                }}/>
+
+            <EntityCustomViewsSelectDialog
+                open={addEntityViewDialogOpen}
+                onClose={(selectedViewKey) => {
+                    if (selectedViewKey) {
+                        setFieldValue("entityViews", [...(values.entityViews ?? []), selectedViewKey]);
+                    }
+                    setAddEntityViewDialogOpen(false);
+                }}/>
+        </div>
+    );
+}

package/src/ui/collection_editor/SwitchControl.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { BooleanSwitchWithLabel, Tooltip } from "@firecms/ui";
+import { FormexFieldProps } from "@firecms/formex";
+
+export function SwitchControl({
+                                  field,
+                                  form,
+                                  label,
+                                  tooltip,
+                                  disabled,
+                                  size = "small",
+                                  allowIndeterminate
+                              }: FormexFieldProps & {
+    label: string,
+    tooltip?: string,
+    disabled?: boolean,
+    size?: "small" | "medium",
+    allowIndeterminate?: boolean
+}) {
+
+    const formControlLabel = <BooleanSwitchWithLabel
+        label={label}
+        size={size}
+        position={"start"}
+        value={field.value}
+        disabled={disabled}
+        allowIndeterminate={allowIndeterminate}
+        onValueChange={(checked:boolean | null) => form.setFieldValue(field.name, checked)}/>;
+
+    if (tooltip)
+        return (
+            <Tooltip
+                title={tooltip}>
+                {formControlLabel}
+            </Tooltip>
+        );
+    return formControlLabel;
+}

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, 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
+            open={open}
+            onOpenChange={(open) => open ? handleCancel() : handleOk()}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogContent>
+                <Typography variant={"h6"}>
+                    {title ?? "Unsaved changes"}
+                </Typography>
+
+                {body && <Typography>
+                    {body}
+                </Typography>}
+                <Typography>
+                    Are you sure?
+                </Typography>
+
+            </DialogContent>
+
+            <DialogActions>
+                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/ui/collection_editor/import/CollectionEditorImportDataPreview.tsx

@@ -0,0 +1,37 @@
+import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
+import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
+import { useEffect } from "react";
+import { Typography } from "@firecms/ui";
+
+export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+    importConfig: ImportConfig,
+    properties: Properties,
+    propertiesOrder: string[]
+}) {
+
+    useEffect(() => {
+        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+        importConfig.setEntities(mappedData);
+    }, []);
+
+    const selectionController = useSelectionController();
+
+    return <EntityCollectionTable
+        title={<div>
+            <Typography variant={"subtitle2"}>Imported data preview</Typography>
+            <Typography variant={"caption"}>Entities with the same id will be overwritten</Typography>
+        </div>}
+        tableController={{
+            data: importConfig.entities,
+            dataLoading: false,
+            noMoreToLoad: false
+        }}
+        endAdornment={<div className={"h-12"}/>}
+        filterable={false}
+        sortable={false}
+        selectionController={selectionController}
+        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
+        properties={properties}/>
+
+}

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -0,0 +1,268 @@
+import {
+    DataNewPropertiesMapping,
+    getInferenceType,
+    ImportConfig,
+    ImportNewPropertyFieldPreview
+} from "@firecms/data_import_export";
+import { getIn, useFormex } from "@firecms/formex";
+
+import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
+import { Container, Select, Tooltip, Typography } from "@firecms/ui";
+import React, { useState } from "react";
+import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
+import { PersistedCollection } from "../../../types/persisted_collection";
+import { updatePropertyFromWidget } from "../utils/update_property_for_widget";
+import { PropertySelectItem } from "../PropertySelectItem";
+import { supportedFields } from "../utils/supported_fields";
+import { buildPropertyFromData } from "@firecms/schema_inference";
+
+export function CollectionEditorImportMapping({
+                                                  importConfig,
+                                                  propertyConfigs,
+                                                  collectionEditable
+                                              }:
+                                                  {
+                                                      importConfig: ImportConfig,
+                                                      propertyConfigs: Record<string, PropertyConfig>,
+                                                      collectionEditable: boolean
+                                                  }) {
+
+    // const {
+    //     values,
+    //     setFieldValue,
+    //     setFieldTouched,
+    //     setValues,
+    //     submitCount
+    // } = useFormex();
+
+    const {
+        setFieldValue,
+        setFieldTouched,
+        values
+    } = useFormex<PersistedCollection>();
+    const [selectedProperty, setSelectedProperty] = useState<PropertyWithId | undefined>(undefined);
+
+    const currentPropertiesOrderRef = React.useRef<{
+        [key: string]: string[]
+    }>(values.propertiesOrder ? { "": values.propertiesOrder } : {});
+
+    const propertyKey = selectedProperty ? selectedProperty.id : undefined;
+    const property = selectedProperty || undefined;
+
+    const onPropertyChanged = ({
+                                   id,
+                                   property,
+                                   previousId,
+                                   namespace
+                               }: OnPropertyChangedParams) => {
+
+        const fullId = id ? getFullId(id, namespace) : undefined;
+        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
+
+        // setSelectedProperty(property);
+        const getCurrentPropertiesOrder = (namespace?: string) => {
+            if (!namespace) return currentPropertiesOrderRef.current[""];
+            return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
+        }
+
+        const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
+            const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
+
+            setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
+            currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
+
+        };
+
+        // If the id has changed we need to a little cleanup
+        if (previousId && previousId !== id) {
+            const previousFullId = getFullId(previousId, namespace);
+            const previousPropertyPath = idToPropertiesPath(previousFullId);
+
+            const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+
+            // replace previousId with id in propertiesOrder
+            const newPropertiesOrder = currentPropertiesOrder
+                .map((p) => p === previousId ? id : p)
+                .filter((p) => p !== undefined) as string[];
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+
+            // replace previousId with id in headersMapping
+            const newHeadersMapping = { ...importConfig.headersMapping };
+            Object.keys(newHeadersMapping).forEach((key) => {
+                if (newHeadersMapping[key] === previousId) {
+                    newHeadersMapping[key] = id ?? "";
+                }
+            });
+            importConfig.setHeadersMapping(newHeadersMapping);
+
+            // if (id) {
+            //     setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
+            //     setSelectedPropertyKey(id);
+            // }
+            setFieldValue(previousPropertyPath, undefined, false);
+            setFieldTouched(previousPropertyPath, false, false);
+        }
+
+        if (propertyPath) {
+            setFieldValue(propertyPath, property, false);
+            setFieldTouched(propertyPath, true, false);
+        }
+    };
+    const onPropertyTypeChanged = async ({
+                                             id,
+                                             importKey,
+                                             property,
+                                             namespace
+                                         }: OnPropertyChangedParams & {
+        importKey: string
+    }) => {
+
+        const fullId = id ? getFullId(id, namespace) : undefined;
+        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
+
+        // we try to infer the rest of the properties of a property, from the type and the data
+        const propertyData = importConfig.importData.map((d) => getIn(d, importKey));
+        const inferredNewProperty = {
+            ...buildPropertyFromData(propertyData, property, getInferenceType),
+            editable: true
+        };
+
+        if (propertyPath) {
+            if (inferredNewProperty) {
+                setFieldValue(propertyPath, inferredNewProperty, false);
+            } else {
+                setFieldValue(propertyPath, property, false);
+            }
+            setFieldTouched(propertyPath, true, false);
+        }
+    };
+
+    return (
+
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+
+                <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
+
+                <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
+                                          idColumn={importConfig.idColumn}
+                                          originProperties={importConfig.originProperties}
+                                          destinationProperties={values.properties as Properties}
+                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
+                                          buildPropertyView={({
+                                                                  property,
+                                                                  propertyKey,
+                                                                  importKey
+                                                              }) => {
+                                              return <ImportNewPropertyFieldPreview
+                                                  property={property}
+                                                  propertyKey={propertyKey}
+                                                  onPropertyNameChanged={(propertyKey: string, value: string) => setFieldValue(`properties.${propertyKey}.name`, value, false)}
+                                                  onEditClick={() => {
+                                                      if (!propertyKey || !property) return;
+                                                      setSelectedProperty({
+                                                          ...property,
+                                                          id: propertyKey,
+                                                          editable: true
+                                                      });
+                                                  }}
+                                                  propertyTypeView={<PropertySelect property={property}
+                                                                                    disabled={false}
+                                                                                    onPropertyChanged={(props) => onPropertyTypeChanged({
+                                                                                        ...props,
+                                                                                        importKey
+                                                                                    })}
+                                                                                    propertyKey={propertyKey}
+                                                                                    propertyConfigs={propertyConfigs}/>}
+                                              />;
+                                          }}/>
+            </Container>
+
+            <PropertyFormDialog
+                open={selectedProperty !== undefined}
+                propertyKey={propertyKey}
+                property={property}
+                inArray={false}
+                autoUpdateId={false}
+                onPropertyChanged={onPropertyChanged}
+                allowDataInference={false}
+                collectionEditable={collectionEditable}
+                onOkClicked={() => {
+                    setSelectedProperty(undefined);
+                }}
+                onCancel={() => {
+                    setSelectedProperty(undefined);
+                }}
+                autoOpenTypeSelect={false}
+                existingProperty={false}
+                propertyConfigs={propertyConfigs}/>
+
+            <div style={{ height: "52px" }}/>
+        </div>
+    );
+
+}
+
+function PropertySelect({
+                            property,
+                            onPropertyChanged,
+                            propertyKey,
+                            propertyConfigs,
+                            disabled
+                        }: {
+    property: Property | null,
+    propertyKey: string | null,
+    onPropertyChanged: ({
+                            id,
+                            property,
+                            previousId,
+                            namespace
+                        }: OnPropertyChangedParams) => void,
+    propertyConfigs: Record<string, PropertyConfig>,
+    disabled?: boolean
+}) {
+
+    const fieldId = property ? getFieldId(property) : null;
+    const widget = property ? getFieldConfig(property, propertyConfigs) : null;
+
+    const [selectOpen, setSelectOpen] = useState(false);
+
+    return <Tooltip title={property && widget ? `${widget?.name} - ${property.dataType}` : undefined}
+                    open={selectOpen ? false : undefined}>
+        <Select
+            open={selectOpen}
+            onOpenChange={setSelectOpen}
+            invisible={true}
+            className={"w-full"}
+            disabled={disabled}
+            error={!widget}
+            value={fieldId ?? ""}
+            placeholder={"Select a property widget"}
+            position={"item-aligned"}
+            renderValue={(value) => {
+                if (!widget) return null;
+                return <PropertyConfigBadge propertyConfig={widget}/>
+            }}
+            onValueChange={(newSelectedWidgetId) => {
+                const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, propertyConfigs)
+                if (!propertyKey) return;
+                onPropertyChanged({
+                    id: propertyKey,
+                    property: newProperty,
+                    previousId: propertyKey,
+                    namespace: undefined
+                });
+            }}>
+            {Object.entries(supportedFields).map(([key, widget]) => {
+                return <PropertySelectItem
+                    key={key}
+                    value={key}
+                    optionDisabled={false}
+                    propertyConfig={widget}
+                    existing={false}/>;
+            })
+            }
+        </Select>
+    </Tooltip>;
+}