@firecms/data_import_export 3.0.0-canary.19 → 3.0.0-canary.191

package/src/components/DataNewPropertiesMapping.tsx

@@ -1,128 +0,0 @@
-import { getPropertyInPath, Property, } from "@firecms/core";
-import {
-    ChevronRightIcon,
-    Select,
-    SelectItem,
-    Table,
-    TableBody,
-    TableCell,
-    TableHeader,
-    TableRow,
-    Typography
-} from "@firecms/ui";
-
-export interface DataPropertyMappingProps {
-    idColumn?: string;
-    headersMapping: Record<string, string | null>;
-    originProperties: Record<string, Property>;
-    destinationProperties: Record<string, Property>;
-    onIdPropertyChanged: (value: string | null) => void;
-    buildPropertyView?: (props: {
-        isIdColumn: boolean,
-        property: Property | null,
-        propertyKey: string | null,
-        importKey: string
-    }) => React.ReactNode;
-}
-
-export function DataNewPropertiesMapping({
-                                             idColumn,
-                                             headersMapping,
-                                             originProperties,
-                                             destinationProperties,
-                                             onIdPropertyChanged,
-                                             buildPropertyView,
-                                         }: DataPropertyMappingProps) {
-
-    return (
-        <>
-
-            <IdSelectField idColumn={idColumn}
-                           headersMapping={headersMapping}
-                           onChange={onIdPropertyChanged}/>
-
-            <Table style={{
-                tableLayout: "fixed"
-            }}>
-                <TableHeader>
-                    <TableCell header={true} style={{ width: "20%" }}>
-                        Column in file
-                    </TableCell>
-                    <TableCell header={true}>
-                    </TableCell>
-                    <TableCell header={true} style={{ width: "75%" }}>
-                        Property
-                    </TableCell>
-                </TableHeader>
-                <TableBody>
-                    {destinationProperties &&
-                        Object.entries(headersMapping)
-                            .map(([importKey, mappedKey]) => {
-                                    const propertyKey = headersMapping[importKey];
-                                    const property = mappedKey ? getPropertyInPath(destinationProperties, mappedKey) as Property : null;
-
-                                    const originProperty = getPropertyInPath(originProperties, importKey) as Property | undefined;
-                                    const originDataType = originProperty ? (originProperty.dataType === "array" && typeof originProperty.of === "object"
-                                            ? `${originProperty.dataType} - ${(originProperty.of as Property).dataType}`
-                                            : originProperty.dataType)
-                                        : undefined;
-                                    return <TableRow key={importKey} style={{ height: "90px" }}>
-                                        <TableCell style={{ width: "20%" }}>
-                                            <Typography variant={"body2"}>{importKey}</Typography>
-                                            {originProperty && <Typography
-                                                variant={"caption"}
-                                                color={"secondary"}
-                                            >{originDataType}</Typography>}
-                                        </TableCell>
-                                        <TableCell>
-                                            <ChevronRightIcon/>
-                                        </TableCell>
-                                        <TableCell className={importKey === idColumn ? "text-center" : undefined}
-                                                   style={{ width: "75%" }}>
-                                            {buildPropertyView?.({
-                                                isIdColumn: importKey === idColumn,
-                                                property,
-                                                propertyKey,
-                                                importKey
-                                            })
-                                            }
-                                        </TableCell>
-                                    </TableRow>;
-                                }
-                            )}
-                </TableBody>
-            </Table>
-        </>
-    );
-}
-
-function IdSelectField({
-                           idColumn,
-                           headersMapping,
-                           onChange
-                       }: {
-    idColumn?: string,
-    headersMapping: Record<string, string | null>;
-    onChange: (value: string | null) => void
-}) {
-    return <div>
-        <Select
-            size={"small"}
-            value={idColumn ?? ""}
-            onChange={(event) => {
-                const value = event.target.value;
-                onChange(value === "none" ? null : value);
-            }}
-            renderValue={(value) => {
-                return <Typography variant={"body2"}>
-                    {value !== "" ? value : "Autogenerate ID"}
-                </Typography>;
-            }}
-            label={"Column that will be used as ID for each document"}>
-            <SelectItem value={"none"}>Autogenerate ID</SelectItem>
-            {Object.entries(headersMapping).map(([key, value]) => {
-                return <SelectItem key={key} value={key}>{key}</SelectItem>;
-            })}
-        </Select>
-    </div>;
-}

package/src/components/ImportFileUpload.tsx

@@ -1,34 +0,0 @@
-import { FileUpload, UploadIcon } from "@firecms/ui";
-import { convertFileToJson } from "../utils/file_to_json";
-import { useSnackbarController } from "@firecms/core";
-
-export function ImportFileUpload({ onDataAdded }: { onDataAdded: (data: object[]) => void }) {
-    const snackbarController = useSnackbarController();
-    return <FileUpload
-        accept={{
-            "text/*": [".csv", ".xls", ".xlsx"],
-            "application/vnd.ms-excel": [".xls", ".xlsx"],
-            "application/msexcel": [".xls", ".xlsx"],
-            "application/vnd.ms-office": [".xls", ".xlsx"],
-            "application/xls": [".xls", ".xlsx"],
-            "application/x-xls": [".xls", ".xlsx"],
-            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xls", ".xlsx"],
-            "application/json": [".json"],
-        }}
-        preventDropOnDocument={true}
-        size={"small"}
-        maxFiles={1}
-        uploadDescription={<><UploadIcon/>Drag and drop a file here or click to upload</>}
-        onFilesAdded={(files: File[]) => {
-            if (files.length > 0) {
-                convertFileToJson(files[0])
-                    .then((jsonData) => {
-                        onDataAdded(jsonData);
-                    })
-                    .catch((error) => {
-                        console.error("Error parsing file", error);
-                        snackbarController.open({ type: "error", message: error.message });
-                    });
-            }
-        }}/>
-}

package/src/components/ImportNewPropertyFieldPreview.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import { ErrorBoundary, PropertyConfigBadge, getFieldConfig, Property, useCustomizationController } from "@firecms/core";
-import { EditIcon, IconButton, TextField, } from "@firecms/ui";
-
-export function ImportNewPropertyFieldPreview({
-                                                  propertyKey,
-                                                  property,
-                                                  onEditClick,
-                                                  includeName = true,
-                                                  onPropertyNameChanged,
-                                                  propertyTypeView
-                                              }: {
-    propertyKey: string | null,
-    property: Property | null
-    includeName?: boolean,
-    onEditClick?: () => void,
-    onPropertyNameChanged?: (propertyKey: string, value: string) => void,
-    propertyTypeView?: React.ReactNode
-}) {
-
-    const { propertyConfigs } = useCustomizationController();
-    const widget = property ? getFieldConfig(property, propertyConfigs) : null;
-
-    return <ErrorBoundary>
-        <div
-            className="flex flex-row w-full items-center">
-
-            <div className={"mx-4"}>
-                {propertyTypeView ?? <PropertyConfigBadge propertyConfig={widget ?? undefined}/>}
-            </div>
-
-            <div className="w-full flex flex-col grow">
-
-                <div className={"flex flex-row items-center gap-2"}>
-                    {includeName &&
-                        <TextField
-                            size={"small"}
-                            className={"text-base grow"}
-                            value={property?.name ?? ""}
-                            onChange={(e) => {
-                                if (onPropertyNameChanged && propertyKey)
-                                    onPropertyNameChanged(propertyKey, e.target.value);
-                            }}/>}
-
-                    <IconButton onClick={onEditClick} size={"small"}>
-                        <EditIcon size={"small"}/>
-                    </IconButton>
-                </div>
-
-            </div>
-
-
-        </div>
-    </ErrorBoundary>
-}

package/src/components/ImportSaveInProgress.tsx

@@ -1,122 +0,0 @@
-import { DataSource, Entity, EntityCollection, useDataSource } from "@firecms/core";
-import { Button, CenteredView, CircularProgress, Typography, } from "@firecms/ui";
-import { useEffect, useRef, useState } from "react";
-import { ImportConfig } from "../types";
-
-export function ImportSaveInProgress<C extends EntityCollection>
-({
-     path,
-     importConfig,
-     collection,
-     onImportSuccess
- }:
-     {
-         path: string,
-         importConfig: ImportConfig,
-         collection: C,
-         onImportSuccess: (collection: C) => void
-     }) {
-
-    const [errorSaving, setErrorSaving] = useState<Error | undefined>(undefined);
-    const dataSource = useDataSource();
-
-    const savingRef = useRef<boolean>(false);
-
-    const [processedEntities, setProcessedEntities] = useState<number>(0);
-
-    function save() {
-
-        if (savingRef.current)
-            return;
-
-        savingRef.current = true;
-
-        saveDataBatch(
-            dataSource,
-            collection,
-            path,
-            importConfig.entities,
-            0,
-            25,
-            setProcessedEntities
-        ).then(() => {
-            onImportSuccess(collection);
-            savingRef.current = false;
-        }).catch((e) => {
-            setErrorSaving(e);
-            savingRef.current = false;
-        });
-    }
-
-    useEffect(() => {
-        save();
-    }, []);
-
-    if (errorSaving) {
-        return (
-            <CenteredView className={"flex flex-col gap-4 items-center"}>
-                <Typography variant={"h6"}>
-                    Error saving data
-                </Typography>
-
-                <Typography variant={"body2"} color={"error"}>
-                    {errorSaving.message}
-                </Typography>
-                <Button
-                    onClick={save}
-                    variant={"outlined"}>
-                    Retry
-                </Button>
-            </CenteredView>
-        );
-    }
-
-    return (
-        <CenteredView className={"flex flex-col gap-4 items-center"}>
-            <CircularProgress/>
-
-            <Typography variant={"h6"}>
-                Saving data
-            </Typography>
-
-            <Typography variant={"body2"}>
-                {processedEntities}/{importConfig.entities.length} entities saved
-            </Typography>
-
-            <Typography variant={"caption"}>
-                Do not close this tab or the import will be interrupted.
-            </Typography>
-
-        </CenteredView>
-    );
-
-}
-
-function saveDataBatch(dataSource: DataSource,
-                       collection: EntityCollection,
-                       path: string,
-                       data: Partial<Entity<any>>[],
-                       offset = 0,
-                       batchSize = 25,
-                       onProgressUpdate: (progress: number) => void): Promise<void> {
-
-    console.debug("Saving imported data", offset, batchSize);
-
-    const batch = data.slice(offset, offset + batchSize);
-    return Promise.all(batch.map(d =>
-        dataSource.saveEntity({
-            path,
-            values: d.values,
-            entityId: d.id,
-            collection,
-            status: "new"
-        })))
-        .then(() => {
-            if (offset + batchSize < data.length) {
-                onProgressUpdate(offset + batchSize);
-                return saveDataBatch(dataSource, collection, path, data, offset + batchSize, batchSize, onProgressUpdate);
-            }
-            onProgressUpdate(data.length);
-            return Promise.resolve();
-        });
-}

package/src/components/index.ts

@@ -1,4 +0,0 @@
-export * from "./DataNewPropertiesMapping";
-export * from "./ImportFileUpload";
-export * from "./ImportNewPropertyFieldPreview";
-export * from "./ImportSaveInProgress";

package/src/export_import/ExportCollectionAction.tsx

@@ -1,252 +0,0 @@
-import React, { useCallback } from "react";
-
-import {
-    CollectionActionsProps,
-    Entity,
-    EntityCollection,
-    ExportConfig,
-    resolveCollection,
-    ResolvedEntityCollection,
-    useCustomizationController,
-    useDataSource,
-    useFireCMSContext,
-    useNavigationController,
-    User
-} from "@firecms/core";
-import {
-    Alert,
-    BooleanSwitchWithLabel,
-    Button,
-    CircularProgress,
-    cn,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    focusedMixin,
-    GetAppIcon,
-    IconButton,
-    Tooltip,
-    Typography,
-} from "@firecms/ui";
-import { downloadExport } from "./export";
-
-const DOCS_LIMIT = 500;
-
-export function ExportCollectionAction<M extends Record<string, any>, UserType extends User>({
-                                                                                                 collection: inputCollection,
-                                                                                                 path: inputPath,
-                                                                                                 collectionEntitiesCount,
-                                                                                                 exportAllowed,
-                                                                                                 notAllowedView
-                                                                                             }: CollectionActionsProps<M, UserType, EntityCollection<M, any>> & {
-    exportAllowed?: (props: { collectionEntitiesCount: number, path: string, collection: EntityCollection }) => boolean;
-    notAllowedView?: React.ReactNode;
-    onAnalyticsEvent?: (event: string, params?: any) => void;
-}) {
-
-    const customizationController = useCustomizationController();
-
-    const exportConfig = typeof inputCollection.exportable === "object" ? inputCollection.exportable : undefined;
-
-    const dateRef = React.useRef<Date>(new Date());
-    const [flattenArrays, setFlattenArrays] = React.useState<boolean>(true);
-    const [exportType, setExportType] = React.useState<"csv" | "json">("csv");
-    const [dateExportType, setDateExportType] = React.useState<"timestamp" | "string">("string");
-
-    const context = useFireCMSContext<UserType>();
-    const dataSource = useDataSource();
-    const navigationController = useNavigationController();
-
-    const path = navigationController.resolveAliasesFrom(inputPath);
-
-    const canExport = !exportAllowed || exportAllowed({
-        collectionEntitiesCount,
-        path,
-        collection: inputCollection
-    });
-
-    const collection: ResolvedEntityCollection<M> = React.useMemo(() => resolveCollection({
-        collection: inputCollection,
-        path,
-        fields: customizationController.propertyConfigs
-    }), [inputCollection, path]);
-
-    const [dataLoading, setDataLoading] = React.useState<boolean>(false);
-    const [dataLoadingError, setDataLoadingError] = React.useState<Error | undefined>();
-
-    const [open, setOpen] = React.useState(false);
-
-    const handleClickOpen = useCallback(() => {
-        setOpen(true);
-    }, [setOpen]);
-
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
-
-    const fetchAdditionalFields = useCallback(async (entities: Entity<M>[]) => {
-
-        const additionalExportFields = exportConfig?.additionalFields;
-        const additionalFields = collection.additionalFields;
-
-        const resolvedExportColumnsValues: Record<string, any>[] = additionalExportFields
-            ? await Promise.all(entities.map(async (entity) => {
-                return (await Promise.all(additionalExportFields.map(async (column) => {
-                    return {
-                        [column.key]: await column.builder({
-                            entity,
-                            context
-                        })
-                    };
-                }))).reduce((a, b) => ({ ...a, ...b }), {});
-            }))
-            : [];
-
-        const resolvedColumnsValues: Record<string, any>[] = additionalFields
-            ? await Promise.all(entities.map(async (entity) => {
-                return (await Promise.all(additionalFields
-                    .map(async (field) => {
-                        if (!field.value)
-                            return {};
-                        return {
-                            [field.key]: await field.value({
-                                entity,
-                                context
-                            })
-                        };
-                    }))).reduce((a, b) => ({ ...a, ...b }), {});
-            }))
-            : [];
-        return [...resolvedExportColumnsValues, ...resolvedColumnsValues];
-    }, [exportConfig?.additionalFields]);
-
-    const doDownload = useCallback(async (collection: ResolvedEntityCollection<M>,
-                                          exportConfig: ExportConfig<any> | undefined) => {
-
-        setDataLoading(true);
-        dataSource.fetchCollection<M>({
-            path,
-            collection
-        })
-            .then(async (data) => {
-                setDataLoadingError(undefined);
-                const additionalData = await fetchAdditionalFields(data);
-                const additionalHeaders = [
-                    ...exportConfig?.additionalFields?.map(column => column.key) ?? [],
-                    ...collection.additionalFields?.map(field => field.key) ?? []
-                ];
-                downloadExport(data, additionalData, collection, flattenArrays, additionalHeaders, exportType, dateExportType);
-            })
-            .catch((e) => {
-                console.error("Error loading export data", e);
-                setDataLoadingError(e);
-            })
-            .finally(() => setDataLoading(false));
-
-    }, [dataSource, path, fetchAdditionalFields, flattenArrays, exportType, dateExportType]);
-
-    const onOkClicked = useCallback(() => {
-        doDownload(collection, exportConfig);
-        handleClose();
-    }, [doDownload, collection, exportConfig, handleClose]);
-
-    return <>
-
-        <Tooltip title={"Export"}>
-            <IconButton color={"primary"} onClick={handleClickOpen}>
-                <GetAppIcon/>
-            </IconButton>
-        </Tooltip>
-
-        <Dialog
-            open={open}
-            onOpenChange={setOpen}
-            maxWidth={"xl"}>
-            <DialogContent className={"flex flex-col gap-4 my-4"}>
-
-                <Typography variant={"h6"}>Export data</Typography>
-
-                <div>Download the the content of this table as a CSV</div>
-
-                {collectionEntitiesCount > DOCS_LIMIT &&
-                    <Alert color={"warning"}>
-                        <div>
-                            This collections has a large number
-                            of documents ({collectionEntitiesCount}).
-                        </div>
-                    </Alert>}
-
-                <div className={"flex flex-row gap-4"}>
-                    <div className={"p-4 flex flex-col"}>
-                        <div className="flex items-center">
-                            <input id="radio-csv" type="radio" value="csv" name="exportType"
-                                   checked={exportType === "csv"}
-                                   onChange={() => setExportType("csv")}
-                                   className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
-                            <label htmlFor="radio-csv"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">CSV</label>
-                        </div>
-                        <div className="flex items-center">
-                            <input id="radio-json" type="radio" value="json" name="exportType"
-                                   checked={exportType === "json"}
-                                   onChange={() => setExportType("json")}
-                                   className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
-                            <label htmlFor="radio-json"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">JSON</label>
-                        </div>
-                    </div>
-
-                    <div className={"p-4 flex flex-col"}>
-                        <div className="flex items-center">
-                            <input id="radio-timestamp" type="radio" value="timestamp" name="dateExportType"
-                                   checked={dateExportType === "timestamp"}
-                                   onChange={() => setDateExportType("timestamp")}
-                                   className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
-                            <label htmlFor="radio-timestamp"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">Dates as
-                                timestamps ({dateRef.current.getTime()})</label>
-                        </div>
-                        <div className="flex items-center">
-                            <input id="radio-string" type="radio" value="string" name="dateExportType"
-                                   checked={dateExportType === "string"}
-                                   onChange={() => setDateExportType("string")}
-                                   className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
-                            <label htmlFor="radio-string"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">Dates as
-                                strings ({dateRef.current.toISOString()})</label>
-                        </div>
-                    </div>
-                </div>
-
-                <BooleanSwitchWithLabel
-                    size={"small"}
-                    disabled={exportType !== "csv"}
-                    value={flattenArrays}
-                    onValueChange={setFlattenArrays}
-                    label={"Flatten arrays"}/>
-
-                {!canExport && notAllowedView}
-
-            </DialogContent>
-
-            <DialogActions>
-
-                {dataLoading && <CircularProgress size={"small"}/>}
-
-                <Button onClick={handleClose}
-                        variant={"text"}>
-                    Cancel
-                </Button>
-
-                <Button variant="filled"
-                        onClick={onOkClicked}
-                        disabled={dataLoading || !canExport}>
-                    Download
-                </Button>
-
-            </DialogActions>
-
-        </Dialog>
-
-    </>;
-}