@firecms/data_import_export 3.0.0-canary.41 → 3.0.0-canary.42

package/src/components/DataNewPropertiesMapping.tsx

@@ -14,6 +14,7 @@ import {
 export interface DataPropertyMappingProps {
     idColumn?: string;
     headersMapping: Record<string, string | null>;
+    headingsOrder: string[];
     originProperties: Record<string, Property>;
     destinationProperties: Record<string, Property>;
     onIdPropertyChanged: (value: string | null) => void;
@@ -28,12 +29,18 @@ export interface DataPropertyMappingProps {
 export function DataNewPropertiesMapping({
                                              idColumn,
                                              headersMapping,
+                                             headingsOrder,
                                              originProperties,
                                              destinationProperties,
                                              onIdPropertyChanged,
                                              buildPropertyView,
                                          }: DataPropertyMappingProps) {
 
+    console.log({
+        headersMapping,
+        headingsOrder,
+    })
+
     return (
         <>
 
@@ -41,6 +48,8 @@ export function DataNewPropertiesMapping({
                            headersMapping={headersMapping}
                            onChange={onIdPropertyChanged}/>
 
+            <div className={"h-4"}/>
+
             <Table style={{
                 tableLayout: "fixed"
             }}>
@@ -51,45 +60,45 @@ export function DataNewPropertiesMapping({
                     <TableCell header={true}>
                     </TableCell>
                     <TableCell header={true} style={{ width: "75%" }}>
-                        Property
+                        Map to Property
                     </TableCell>
                 </TableHeader>
                 <TableBody>
                     {destinationProperties &&
-                        Object.entries(headersMapping)
-                            .map(([importKey, mappedKey]) => {
-                                    const propertyKey = headersMapping[importKey];
-                                    const property = mappedKey ? getPropertyInPath(destinationProperties, mappedKey) as Property : null;
+                        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>;
-                                }
-                            )}
+                                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>
         </>
@@ -111,15 +120,16 @@ function IdSelectField({
             value={idColumn ?? ""}
             onChange={(event) => {
                 const value = event.target.value;
-                onChange(value === "none" ? null : value);
+                onChange(value === "__none__" ? null : value);
             }}
+            placeholder={"Autogenerate ID"}
             renderValue={(value) => {
                 return <Typography variant={"body2"}>
-                    {value !== "" ? value : "Autogenerate ID"}
+                    {value !== "__none__" ? value : "Autogenerate ID"}
                 </Typography>;
             }}
             label={"Column that will be used as ID for each document"}>
-            <SelectItem value={"none"}>Autogenerate ID</SelectItem>
+            <SelectItem value={"__none__"}>Autogenerate ID</SelectItem>
             {Object.entries(headersMapping).map(([key, value]) => {
                 return <SelectItem key={key} value={key}>{key}</SelectItem>;
             })}

package/src/components/ImportFileUpload.tsx

@@ -2,7 +2,9 @@ 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 }) {
+export function ImportFileUpload({ onDataAdded }: {
+    onDataAdded: (data: object[], propertiesOrder?: string[]) => void
+}) {
     const snackbarController = useSnackbarController();
     return <FileUpload
         accept={{
@@ -22,12 +24,18 @@ export function ImportFileUpload({ onDataAdded }: { onDataAdded: (data: object[]
         onFilesAdded={(files: File[]) => {
             if (files.length > 0) {
                 convertFileToJson(files[0])
-                    .then((jsonData) => {
-                        onDataAdded(jsonData);
+                    .then(({
+                               data,
+                               propertiesOrder
+                           }) => {
+                        onDataAdded(data, propertiesOrder);
                     })
                     .catch((error) => {
                         console.error("Error parsing file", error);
-                        snackbarController.open({ type: "error", message: error.message });
+                        snackbarController.open({
+                            type: "error",
+                            message: error.message
+                        });
                     });
             }
         }}/>

package/src/components/ImportNewPropertyFieldPreview.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { ErrorBoundary, PropertyConfigBadge, getFieldConfig, Property, useCustomizationController } from "@firecms/core";
+import {
+    ErrorBoundary,
+    getFieldConfig,
+    Property,
+    PropertyConfigBadge,
+    useCustomizationController
+} from "@firecms/core";
 import { EditIcon, IconButton, TextField, } from "@firecms/ui";
 
 export function ImportNewPropertyFieldPreview({
@@ -49,7 +55,6 @@ export function ImportNewPropertyFieldPreview({
 
             </div>
 
-
         </div>
     </ErrorBoundary>
 }

package/src/export_import/ImportCollectionAction.tsx

@@ -135,13 +135,14 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                     <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
                                               idColumn={importConfig.idColumn}
                                               originProperties={importConfig.originProperties}
+                                              headingsOrder={importConfig.headingsOrder}
                                               destinationProperties={properties}
                                               onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                               buildPropertyView={({
                                                                       isIdColumn,
                                                                       property,
                                                                       propertyKey,
-                                                                      importKey
+                                                                      importKey,
                                                                   }) => {
                                                   return <PropertyTreeSelect
                                                       selectedPropertyKey={propertyKey ?? ""}

package/src/hooks/useImportConfig.tsx

@@ -9,6 +9,7 @@ export const useImportConfig = (): ImportConfig => {
     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 {
@@ -20,6 +21,8 @@ export const useImportConfig = (): ImportConfig => {
         setEntities,
         importData,
         setImportData,
+        headingsOrder: (headingsOrder ?? []).length > 0 ? headingsOrder : Object.keys(headersMapping),
+        setHeadingsOrder,
         headersMapping,
         setHeadersMapping,
         originProperties,

package/src/types/column_mapping.ts

@@ -22,6 +22,10 @@ export type ImportConfig = {
     originProperties: Record<string, Property>;
     setOriginProperties: React.Dispatch<React.SetStateAction<Record<string, Property>>>;
 
+    // unmapped headings order
+    headingsOrder: string[];
+    setHeadingsOrder: React.Dispatch<React.SetStateAction<string[]>>;
+
 }
 
 export type DataTypeMapping = {

package/src/utils/file_headers.ts

@@ -0,0 +1,90 @@
+import * as XLSX from "xlsx";
+export function getXLSXHeaders(sheet: any) {
+    let header = 0; let offset = 1;
+    const hdr = [];
+    const o:any = {};
+    if (sheet == null || sheet["!ref"] == null) return [];
+    const range = o.range !== undefined ? o.range : sheet["!ref"];
+    let r;
+    if (o.header === 1) header = 1;
+    else if (o.header === "A") header = 2;
+    else if (Array.isArray(o.header)) header = 3;
+    switch (typeof range) {
+        case "string":
+            r = safeDecodeRange(range);
+            break;
+        case "number":
+            r = safeDecodeRange(sheet["!ref"]);
+            r.s.r = range;
+            break;
+        default:
+            r = range;
+    }
+    if (header > 0) offset = 0;
+    const rr = XLSX.utils.encode_row(r.s.r);
+    const cols = new Array(r.e.c - r.s.c + 1);
+    for (let C = r.s.c; C <= r.e.c; ++C) {
+        cols[C] = XLSX.utils.encode_col(C);
+        const val = sheet[cols[C] + rr];
+        switch (header) {
+            case 1:
+                hdr.push(C);
+                break;
+            case 2:
+                hdr.push(cols[C]);
+                break;
+            case 3:
+                hdr.push(o.header[C - r.s.c]);
+                break;
+            default:
+                if (val === undefined) continue;
+                hdr.push(XLSX.utils.format_cell(val));
+        }
+    }
+    return hdr;
+}
+
+function safeDecodeRange(range:any) {
+    const o = {
+        s: {
+            c: 0,
+            r: 0
+        },
+        e: {
+            c: 0,
+            r: 0
+        }
+    };
+    let idx = 0; let i = 0; let cc = 0;
+    const len = range.length;
+    for (idx = 0; i < len; ++i) {
+        if ((cc = range.charCodeAt(i) - 64) < 1 || cc > 26) break;
+        idx = 26 * idx + cc;
+    }
+    o.s.c = --idx;
+
+    for (idx = 0; i < len; ++i) {
+        if ((cc = range.charCodeAt(i) - 48) < 0 || cc > 9) break;
+        idx = 10 * idx + cc;
+    }
+    o.s.r = --idx;
+
+    if (i === len || range.charCodeAt(++i) === 58) {
+        o.e.c = o.s.c;
+        o.e.r = o.s.r;
+        return o;
+    }
+
+    for (idx = 0; i !== len; ++i) {
+        if ((cc = range.charCodeAt(i) - 64) < 1 || cc > 26) break;
+        idx = 26 * idx + cc;
+    }
+    o.e.c = --idx;
+
+    for (idx = 0; i !== len; ++i) {
+        if ((cc = range.charCodeAt(i) - 48) < 0 || cc > 9) break;
+        idx = 10 * idx + cc;
+    }
+    o.e.r = --idx;
+    return o;
+}

package/src/utils/file_to_json.ts

@@ -1,8 +1,13 @@
 import * as XLSX from "xlsx";
+import { getXLSXHeaders } from "./file_headers";
 
-export function convertFileToJson(file: File): Promise<object[]> {
+type ConversionResult = {
+    data: object[];
+    propertiesOrder: string[]
+}
+
+export function convertFileToJson(file: File): Promise<ConversionResult> {
     return new Promise((resolve, reject) => {
-        // check if file is a JSON file
         if (file.type === "application/json") {
             console.debug("Converting JSON file to JSON", file.name);
             const reader = new FileReader();
@@ -12,8 +17,14 @@ export function convertFileToJson(file: File): Promise<object[]> {
                     const jsonData = JSON.parse(data);
                     if (!Array.isArray(jsonData)) {
                         reject(new Error("JSON file should contain an array of objects"));
+                    } else {
+                        // Assuming all objects in the array have the same structure/order
+                        const propertiesOrder = jsonData.length > 0 ? Object.keys(jsonData[0]) : [];
+                        resolve({
+                            data: jsonData,
+                            propertiesOrder
+                        });
                     }
-                    resolve(jsonData);
                 } catch (e) {
                     console.error("Error parsing JSON file", e);
                     reject(e);
@@ -24,20 +35,22 @@ export function convertFileToJson(file: File): Promise<object[]> {
             console.debug("Converting Excel file to JSON", file.name);
             const reader = new FileReader();
             reader.onload = function (e) {
-
                 const data = new Uint8Array(e.target?.result as ArrayBuffer);
-                const workbook = XLSX.read(data,
-                    {
-                        type: "array",
-                        codepage: 65001,
-                        cellDates: true,
-                    });
+                const workbook = XLSX.read(data, {
+                    type: "array",
+                    codepage: 65001,
+                    cellDates: true,
+                });
                 const worksheetName = workbook.SheetNames[0];
                 const worksheet = workbook.Sheets[worksheetName];
                 const parsedData: Array<any> = XLSX.utils.sheet_to_json(worksheet);
+                const headers = getXLSXHeaders(worksheet);
                 const cleanedData = parsedData.map(mapJsonParse);
                 const jsonData = cleanedData.map(unflattenObject);
-                resolve(jsonData);
+                resolve({
+                    data: jsonData,
+                    propertiesOrder: headers
+                });
             };
             reader.readAsArrayBuffer(file);
         }