@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/data_import/components/DataNewPropertiesMapping.tsx

@@ -0,0 +1,243 @@
+import { getPropertyInPath } from "../../util";
+import { Properties, Property } from "@rebasepro/types";
+import {
+    BooleanSwitchWithLabel,
+    ChevronRightIcon,
+    DateTimeField,
+    ExpandablePanel,
+    Select,
+    SelectItem,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    TextField,
+    Typography
+} from "@rebasepro/ui";
+import { getIn, setIn } from "@rebasepro/formex";
+import { ImportConfig } from "../types";
+
+export interface DataPropertyMappingProps {
+    importConfig: ImportConfig;
+    destinationProperties: Record<string, Property>;
+    buildPropertyView?: (props: {
+        isIdColumn: boolean,
+        property: Property | null,
+        propertyKey: string | null,
+        importKey: string
+    }) => any;
+}
+
+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 origintype = originProperty
+                                ? (originProperty.type === "array" && typeof originProperty.of === "object"
+                                    ? `${originProperty.type} - ${(originProperty.of as Property).type}`
+                                    : originProperty.type)
+                                : undefined;
+                            return <TableRow key={importKey} style={{ height: "90px" }}>
+                                <TableCell style={{ width: "20%" }}>
+                                    <Typography variant={"body2"}>{importKey}</Typography>
+                                    {originProperty && <Typography
+                                        variant={"caption"}
+                                        color={"secondary"}
+                                    >{origintype}</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} innerClassName={"p-4 mt-4"}>
+
+                <div className={"text-sm text-surface-accent-500 dark:text-surface-accent-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.type)) {
+                                    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: Properties, currentKey?: string): string[] {
+    return Object.entries(properties).reduce((acc, [key, property]) => {
+        const accumulatedKey = currentKey ? `${currentKey}.${key}` : key;
+        if (typeof property !== "function" && property.type === "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={"medium"}
+            value={idColumn ?? ""}
+            fullWidth={true}
+            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.type === "string") {
+        return <TextField size={"medium"}
+            placeholder={"Default value"}
+            value={defaultValue ?? ""}
+            onChange={(event) => onValueChange(event.target.value)} />;
+    } else if (property.type === "number") {
+        return <TextField size={"medium"}
+            type={"number"}
+            value={defaultValue ?? ""}
+            placeholder={"Default value"}
+            onChange={(event) => onValueChange(event.target.value)} />;
+    } else if (property.type === "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.type === "date") {
+        return <DateTimeField
+            mode={property.mode ?? "date"}
+            size={"medium"}
+            value={defaultValue ?? undefined}
+            onChange={(dateValue: Date | null) => {
+                onValueChange(dateValue);
+            }}
+            clearable={true}
+        />
+    }
+
+    return null;
+}

package/src/data_import/components/ImportFileUpload.tsx

@@ -0,0 +1,42 @@
+import { FileUpload, UploadIcon } from "@rebasepro/ui";
+import { convertFileToJson } from "../utils/file_to_json";
+import { useSnackbarController } from "@rebasepro/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/data_import/components/ImportNewPropertyFieldPreview.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { useCustomizationController } from "@rebasepro/core";
+import { Property } from "@rebasepro/types";
+import {
+    getFieldConfig,
+    PropertyConfigBadge,
+} from "../../components";
+import { EditIcon, ErrorBoundary, IconButton, TextField, } from "@rebasepro/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?: any
+}) {
+
+    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={"medium"}
+                            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/data_import/components/ImportSaveInProgress.tsx

@@ -0,0 +1,121 @@
+import { useData } from "@rebasepro/core";
+import { Entity, EntityCollection } from "@rebasepro/types";
+import { RebaseData } from "@rebasepro/types";
+import { Button, CenteredView, CircularProgress, Typography, } from "@rebasepro/ui";
+import { useEffect, useRef, useState } from "react";
+import { ImportConfig } from "../types";
+
+export function ImportSaveInProgress<C extends EntityCollection<any>>
+    ({
+        path,
+        importConfig,
+        collection,
+        onImportSuccess
+    }:
+        {
+            path: string,
+            importConfig: ImportConfig,
+            collection: C,
+            onImportSuccess: (collection: C) => void
+        }) {
+
+    const [errorSaving, setErrorSaving] = useState<Error | undefined>(undefined);
+    const dataClient = useData();
+
+    const savingRef = useRef<boolean>(false);
+
+    const [processedEntities, setProcessedEntities] = useState<number>(0);
+
+    function save() {
+
+        if (savingRef.current)
+            return;
+
+        savingRef.current = true;
+
+        saveDataBatch(
+            dataClient,
+            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}
+                >
+                    Retry
+                </Button>
+            </CenteredView>
+        );
+    }
+
+    return (
+        <div 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>
+
+        </div>
+    );
+
+}
+
+function saveDataBatch(dataClient: RebaseData,
+    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 =>
+        dataClient.collection(path).create(
+            d.values,
+            d.id
+        )))
+        .then(() => {
+            if (offset + batchSize < data.length) {
+                onProgressUpdate(offset + batchSize);
+                return saveDataBatch(dataClient, collection, path, data, offset + batchSize, batchSize, onProgressUpdate);
+            }
+            onProgressUpdate(data.length);
+            return Promise.resolve();
+        });
+}

package/src/data_import/components/index.ts

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

package/src/data_import/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useImportConfig";

package/src/data_import/hooks/useImportConfig.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { Entity, Property } from "@rebasepro/types";
+import { ImportConfig } from "../types";
+
+export const useImportConfig = (): ImportConfig => {
+
+    const [inUse, setInUse] = useState<boolean>(false);
+    const [defaultValues, setDefaultValues] = useState<Record<string, any>>({});
+    const [idColumn, setIdColumn] = useState<string | undefined>();
+    const [importData, setImportData] = useState<object[]>([]);
+    const [entities, setEntities] = useState<Entity<any>[]>([]);
+    const [headersMapping, setHeadersMapping] = useState<Record<string, string | null>>({});
+    const [headingsOrder, setHeadingsOrder] = useState<string[]>([]);
+    const [originProperties, setOriginProperties] = useState<Record<string, Property>>({});
+
+    return {
+        inUse,
+        setInUse,
+        idColumn,
+        setIdColumn,
+        entities,
+        setEntities,
+        importData,
+        setImportData,
+        headingsOrder: (headingsOrder ?? []).length > 0 ? headingsOrder : Object.keys(headersMapping),
+        setHeadingsOrder,
+        headersMapping,
+        setHeadersMapping,
+        originProperties,
+        setOriginProperties,
+        defaultValues,
+        setDefaultValues
+    };
+};