@firecms/data_import_export 3.0.0-canary.43 → 3.0.0-canary.45

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@firecms/data_import_export",
   "type": "module",
-  "version": "3.0.0-canary.43",
+  "version": "3.0.0-canary.45",
   "access": "public",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/core": "^3.0.0-canary.43",
-    "@firecms/formex": "^3.0.0-canary.43",
-    "@firecms/schema_inference": "^3.0.0-canary.43",
-    "@firecms/ui": "^3.0.0-canary.43",
+    "@firecms/core": "^3.0.0-canary.45",
+    "@firecms/formex": "^3.0.0-canary.45",
+    "@firecms/schema_inference": "^3.0.0-canary.45",
+    "@firecms/ui": "^3.0.0-canary.45",
     "xlsx": "^0.18.5"
   },
   "peerDependencies": {
@@ -101,5 +101,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fedcb0d43c504245dd76b702e4ab4479fa8592df"
+  "gitHead": "7f22bfa3bb20479ad23becd9c10f78cac1a3bc32"
 }

package/src/export_import/BasicExportAction.tsx

@@ -0,0 +1,137 @@
+import React, { useCallback } from "react";
+
+import { Entity, ResolvedProperties } from "@firecms/core";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    cn,
+    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, [], properties, propertiesOrder, "export.csv", flattenArrays, [], 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={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"}/>
+
+            </DialogContent>
+
+            <DialogActions>
+
+                <Button onClick={handleClose}
+                        variant={"text"}>
+                    Cancel
+                </Button>
+
+                <Button variant="filled"
+                        onClick={onOkClicked}>
+                    Download
+                </Button>
+
+            </DialogActions>
+
+        </Dialog>
+
+    </>;
+}

package/src/export_import/ExportCollectionAction.tsx

@@ -28,7 +28,7 @@ import {
     Tooltip,
     Typography,
 } from "@firecms/ui";
-import { downloadExport } from "./export";
+import { downloadEntitiesExport } from "./export";
 
 const DOCS_LIMIT = 500;
 
@@ -139,7 +139,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                     ...exportConfig?.additionalFields?.map(column => column.key) ?? [],
                     ...collection.additionalFields?.map(field => field.key) ?? []
                 ];
-                downloadExport(data, additionalData, collection, flattenArrays, additionalHeaders, exportType, dateExportType);
+                downloadEntitiesExport(data, additionalData, collection.properties, collection.propertiesOrder, collection.name, flattenArrays, additionalHeaders, exportType, dateExportType);
                 onAnalyticsEvent?.("export_collection_success", {
                     collection: collection.path
                 });

package/src/export_import/ImportCollectionAction.tsx

@@ -403,6 +403,7 @@ export function ImportDataPreview<M extends Record<string, any>>({
             dataLoading: false,
             noMoreToLoad: false
         }}
+        enablePopupIcon={false}
         endAdornment={<div className={"h-12"}/>}
         filterable={false}
         sortable={false}

package/src/export_import/export.ts

@@ -4,7 +4,6 @@ import {
     EntityReference,
     getArrayValuesCount,
     getValueInPath,
-    ResolvedEntityCollection,
     ResolvedProperties,
     ResolvedProperty
 } from "@firecms/core";
@@ -14,37 +13,43 @@ interface Header {
     label: string;
 }
 
-export function downloadExport<M extends Record<string, any>>(data: Entity<M>[],
-                                                              additionalData: Record<string, any>[] | undefined,
-                                                              collection: ResolvedEntityCollection<M>,
-                                                              flattenArrays: boolean,
-                                                              additionalHeaders: string[] | undefined,
-                                                              exportType: "csv" | "json",
-                                                              dateExportType: "timestamp" | "string"
+export function downloadEntitiesExport<M extends Record<string, any>>(data: Entity<M>[],
+                                                                      additionalData: Record<string, any>[] | undefined,
+                                                                      properties: ResolvedProperties<M>,
+                                                                      propertiesOrder: string[] | undefined,
+                                                                      name: string,
+                                                                      flattenArrays: boolean,
+                                                                      additionalHeaders: string[] | undefined,
+                                                                      exportType: "csv" | "json",
+                                                                      dateExportType: "timestamp" | "string"
 ) {
 
-    console.debug("Downloading export", { dataLength: data.length, collection, exportType, dateExportType });
-    const properties = collection.properties;
+    console.debug("Downloading export", {
+        dataLength: data.length,
+        properties,
+        exportType,
+        dateExportType
+    });
 
     if (exportType === "csv") {
         const arrayValuesCount = flattenArrays ? getArrayValuesCount(data.map(d => d.values)) : {};
-        const headers = getExportHeaders(properties, additionalHeaders, arrayValuesCount);
-        const exportableData = getCSVExportableData(data, additionalData, properties, headers, dateExportType);
+        const headers = getExportHeaders(properties, propertiesOrder, additionalHeaders, arrayValuesCount);
+        const exportableData = getEntityCSVExportableData(data, additionalData, properties, headers, dateExportType);
         const headersData = entryToCSVRow(headers.map(h => h.label));
         const csvData = exportableData.map(entry => entryToCSVRow(entry));
-        downloadBlob([headersData, ...csvData], `${collection.name}.csv`, "text/csv");
+        downloadBlob([headersData, ...csvData], `${name}.csv`, "text/csv");
     } else {
-        const exportableData = getJsonExportableData(data, additionalData, properties, dateExportType);
+        const exportableData = getEntityJsonExportableData(data, additionalData, properties, dateExportType);
         const json = JSON.stringify(exportableData, null, 2);
-        downloadBlob([json], `${collection.name}.json`, "application/json");
+        downloadBlob([json], `${name}.json`, "application/json");
     }
 }
 
-export function getCSVExportableData(data: Entity<any>[],
-                                     additionalData: Record<string, any>[] | undefined,
-                                     properties: ResolvedProperties,
-                                     headers: Header[],
-                                     dateExportType: "timestamp" | "string"
+export function getEntityCSVExportableData(data: Entity<any>[],
+                                           additionalData: Record<string, any>[] | undefined,
+                                           properties: ResolvedProperties,
+                                           headers: Header[],
+                                           dateExportType: "timestamp" | "string"
 ) {
 
     const mergedData: any[] = data.map(e => ({
@@ -63,10 +68,10 @@ export function getCSVExportableData(data: Entity<any>[],
     });
 }
 
-export function getJsonExportableData(data: Entity<any>[],
-                                      additionalData: Record<string, any>[] | undefined,
-                                      properties: ResolvedProperties,
-                                      dateExportType: "timestamp" | "string"
+export function getEntityJsonExportableData(data: Entity<any>[],
+                                            additionalData: Record<string, any>[] | undefined,
+                                            properties: ResolvedProperties,
+                                            dateExportType: "timestamp" | "string"
 ) {
 
     const mergedData: any[] = data.map(e => ({
@@ -84,13 +89,18 @@ export function getJsonExportableData(data: Entity<any>[],
 }
 
 function getExportHeaders<M extends Record<string, any>>(properties: ResolvedProperties<M>,
+                                                         propertiesOrder: string[] | undefined,
                                                          additionalHeaders: string[] | undefined,
                                                          arrayValuesCount?: ArrayValuesCount): Header[] {
 
     const headers: Header[] = [
-        { label: "id", key: "id" },
-        ...Object.entries(properties)
-            .flatMap(([childKey, property]) => {
+        {
+            label: "id",
+            key: "id"
+        },
+        ...(propertiesOrder ?? Object.keys(properties))
+            .flatMap((childKey) => {
+                const property = properties[childKey];
                 if (arrayValuesCount && arrayValuesCount[childKey] > 1) {
                     return Array.from({ length: arrayValuesCount[childKey] },
                         (_, i) => getHeaders(property as ResolvedProperty, `${childKey}[${i}]`, ""))
@@ -102,7 +112,10 @@ function getExportHeaders<M extends Record<string, any>>(properties: ResolvedPro
     ];
 
     if (additionalHeaders) {
-        headers.push(...additionalHeaders.map(h => ({ label: h, key: h })));
+        headers.push(...additionalHeaders.map(h => ({
+            label: h,
+            key: h
+        })));
     }
 
     return headers;
@@ -121,7 +134,10 @@ function getHeaders(property: ResolvedProperty, propertyKey: string, prefix = ""
             .map(([childKey, p]) => getHeaders(p, childKey, currentKey))
             .flat();
     } else {
-        return [{ label: currentKey, key: currentKey }];
+        return [{
+            label: currentKey,
+            key: currentKey
+        }];
     }
 }
 

package/src/export_import/index.ts

@@ -0,0 +1,4 @@
+export * from "./export";
+export * from "./BasicExportAction";
+export * from "./ExportCollectionAction";
+export * from "./ImportCollectionAction";

package/src/index.ts

@@ -3,3 +3,4 @@ export * from "./components";
 export * from "./types";
 export * from "./utils";
 export * from "./hooks";
+export * from "./export_import";

package/src/useImportExportPlugin.tsx

@@ -19,7 +19,7 @@ export function useImportExportPlugin(props?: ImportExportPluginProps): FireCMSP
 
 export type ImportExportPluginProps = {
     exportAllowed?: (props: ExportAllowedParams) => boolean;
-    notAllowedView: React.ReactNode;
+    notAllowedView?: React.ReactNode;
     onAnalyticsEvent?: (event: string, params?: any) => void;
 }
 export type ExportAllowedParams = { collectionEntitiesCount: number, path: string, collection: EntityCollection };