@firecms/data_import_export 3.0.0-canary.80 → 3.0.0-canary.82

package/src/components/DataNewPropertiesMapping.tsx

@@ -1,241 +0,0 @@
-import { getPropertyInPath, PropertiesOrBuilders, Property } from "@firecms/core";
-import {
-    BooleanSwitchWithLabel,
-    ChevronRightIcon,
-    DateTimeField,
-    ExpandablePanel,
-    Select,
-    SelectItem,
-    Table,
-    TableBody,
-    TableCell,
-    TableHeader,
-    TableRow,
-    TextField,
-    Typography
-} from "@firecms/ui";
-import { ImportConfig } from "../types";
-import { getIn, setIn } from "@firecms/formex";
-
-export interface DataPropertyMappingProps {
-    importConfig: ImportConfig;
-    destinationProperties: Record<string, Property>;
-    buildPropertyView?: (props: {
-        isIdColumn: boolean,
-        property: Property | null,
-        propertyKey: string | null,
-        importKey: string
-    }) => React.ReactNode;
-}
-
-export function DataNewPropertiesMapping({
-                                             importConfig,
-                                             destinationProperties,
-                                             buildPropertyView
-                                         }: DataPropertyMappingProps) {
-
-    const headersMapping = importConfig.headersMapping;
-    const headingsOrder = importConfig.headingsOrder;
-    const idColumn = importConfig.idColumn;
-    const originProperties = importConfig.originProperties;
-
-    return (
-        <>
-
-            <IdSelectField idColumn={idColumn}
-                           headersMapping={headersMapping}
-                           onChange={(value) => importConfig.setIdColumn(value ?? undefined)}/>
-
-            <div className={"h-4"}/>
-
-            <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%" }}>
-                        Map to Property
-                    </TableCell>
-                </TableHeader>
-                <TableBody>
-                    {destinationProperties &&
-                        headingsOrder.map((importKey) => {
-                                const mappedKey = headersMapping[importKey];
-                                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>
-
-            <ExpandablePanel title="Default values" initiallyExpanded={false} className={"p-4 mt-4"}>
-
-                <div className={"text-sm text-slate-500 dark:text-slate-300 font-medium ml-3.5 mb-1"}>
-                    You can select a default value for unmapped columns and empty values:
-                </div>
-                <Table style={{
-                    tableLayout: "fixed"
-                }}>
-                    <TableHeader>
-                        <TableCell header={true} style={{ width: "30%" }}>
-                            Property
-                        </TableCell>
-                        <TableCell header={true}>
-                        </TableCell>
-                        <TableCell header={true} style={{ width: "65%" }}>
-                            Default value
-                        </TableCell>
-                    </TableHeader>
-                    <TableBody>
-                        {destinationProperties &&
-                            getAllPropertyKeys(destinationProperties).map((key) => {
-                                    const property = getPropertyInPath(destinationProperties, key);
-                                    if (typeof property !== "object" || property === null) {
-                                        return null;
-                                    }
-                                    if (!["number", "string", "boolean", "map"].includes(property.dataType)) {
-                                        return null;
-                                    }
-                                    return <TableRow key={key} style={{ height: "70px" }}>
-                                        <TableCell style={{ width: "20%" }}>
-                                            <Typography variant={"body2"}>{key}</Typography>
-                                        </TableCell>
-                                        <TableCell>
-                                            <ChevronRightIcon/>
-                                        </TableCell>
-                                        <TableCell className={key === idColumn ? "text-center" : undefined}
-                                                   style={{ width: "75%" }}>
-                                            <DefaultValuesField property={property}
-                                                                defaultValue={getIn(importConfig.defaultValues, key)}
-                                                                onValueChange={(value) => {
-                                                                    const newValues = setIn(importConfig.defaultValues, key, value);
-                                                                    importConfig.setDefaultValues(newValues);
-                                                                }}/>
-                                        </TableCell>
-                                    </TableRow>;
-                                }
-                            )}
-                    </TableBody>
-                </Table>
-            </ExpandablePanel>
-        </>
-    );
-}
-
-function getAllPropertyKeys(properties: PropertiesOrBuilders, currentKey?: string): string[] {
-    return Object.entries(properties).reduce((acc, [key, property]) => {
-        const accumulatedKey = currentKey ? `${currentKey}.${key}` : key;
-        if (typeof property !== "function" && property.dataType === "map" && property.properties) {
-            const childProperties = getAllPropertyKeys(property.properties, accumulatedKey);
-            return [...acc, ...childProperties];
-        }
-        return [...acc, accumulatedKey];
-    }, [] as string[]);
-}
-
-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);
-            }}
-            placeholder={"Autogenerate ID"}
-            renderValue={(value) => {
-                return <Typography variant={"body2"}>
-                    {value !== "__none__" ? 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>;
-}
-
-function DefaultValuesField({
-                                property,
-                                onValueChange,
-                                defaultValue
-                            }: { property: Property, onValueChange: (value: any) => void, defaultValue?: any }) {
-    if (property.dataType === "string") {
-        return <TextField size={"small"}
-                          placeholder={"Default value"}
-                          value={defaultValue ?? ""}
-                          onChange={(event) => onValueChange(event.target.value)}/>;
-    } else if (property.dataType === "number") {
-        return <TextField size={"small"}
-                          type={"number"}
-                          value={defaultValue ?? ""}
-                          placeholder={"Default value"}
-                          onChange={(event) => onValueChange(event.target.value)}/>;
-    } else if (property.dataType === "boolean") {
-        return <BooleanSwitchWithLabel
-            value={defaultValue ?? null}
-            allowIndeterminate={true}
-            size={"small"}
-            onValueChange={(v: boolean | null) => onValueChange(v === null ? undefined : v)}
-            label={defaultValue === undefined
-                ? "Do not set value"
-                : defaultValue === true
-                    ? "Set value to true"
-                    : "Set value to false"}
-        />
-    } else if (property.dataType === "date") {
-        return <DateTimeField
-            mode={property.mode ?? "date"}
-            size={"small"}
-            value={defaultValue ?? undefined}
-            onChange={(dateValue: Date | undefined) => {
-                onValueChange(dateValue);
-            }}
-            clearable={true}
-        />
-    }
-
-    return null;
-}

package/src/components/ImportFileUpload.tsx

@@ -1,42 +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[], propertiesOrder?: string[]) => 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(({
-                               data,
-                               propertiesOrder
-                           }) => {
-                        onDataAdded(data, propertiesOrder);
-                    })
-                    .catch((error) => {
-                        console.error("Error parsing file", error);
-                        snackbarController.open({
-                            type: "error",
-                            message: error.message
-                        });
-                    });
-            }
-        }}/>
-}

package/src/components/ImportNewPropertyFieldPreview.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import {
-    ErrorBoundary,
-    getFieldConfig,
-    Property,
-    PropertyConfigBadge,
-    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/BasicExportAction.tsx

@@ -1,147 +0,0 @@
-import React, { useCallback } from "react";
-
-import { Entity, ResolvedProperties } from "@firecms/core";
-import {
-    BooleanSwitchWithLabel,
-    Button,
-    cls,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    focusedMixin,
-    GetAppIcon,
-    IconButton,
-    Tooltip,
-    Typography
-} from "@firecms/ui";
-import { downloadEntitiesExport } from "./export";
-
-export type BasicExportActionProps = {
-    data: Entity<any>[];
-    properties: ResolvedProperties;
-    propertiesOrder?: string[];
-}
-
-export function BasicExportAction({
-                                      data,
-                                      properties,
-                                      propertiesOrder
-                                  }: BasicExportActionProps) {
-
-    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 [open, setOpen] = React.useState(false);
-
-    const handleClickOpen = useCallback(() => {
-        setOpen(true);
-    }, [setOpen]);
-
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
-
-    const onOkClicked = useCallback(() => {
-        downloadEntitiesExport({
-            data,
-            additionalData: [],
-            properties,
-            propertiesOrder,
-            name: "export.csv",
-            flattenArrays,
-            additionalHeaders: [],
-            exportType,
-            dateExportType
-        });
-        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>
-
-                <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={cls(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={cls(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={cls(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={cls(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"}/>
-
-            </DialogContent>
-
-            <DialogActions>
-
-                <Button onClick={handleClose}
-                        variant={"text"}>
-                    Cancel
-                </Button>
-
-                <Button variant="filled"
-                        onClick={onOkClicked}>
-                    Download
-                </Button>
-
-            </DialogActions>
-
-        </Dialog>
-
-    </>;
-}