@websolutespa/payload-plugin-bowl 2.0.1 → 3.0.1

package/dist/components/ImportExport/ImportModal.js

@@ -0,0 +1,458 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MinimalTemplate } from '@payloadcms/next/templates';
+import { Button, CheckboxInput, Form, SelectInput, XIcon, toast, useAuth, useConfig, useLocale, useModal, useTranslation } from '@payloadcms/ui';
+import { getRouteResolver } from '@websolutespa/payload-utils';
+import * as Papa from 'papaparse';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { ImportLogInvalidTypes, ImportLogType, ImportMode } from '../../core/api/types';
+import './ImportModal.scss';
+const INITIAL_DATA = {
+    importMode: ImportMode.Append,
+    dataParsing: false
+};
+const baseClass = 'import-modal';
+export const ImportModal = ({ parser, slug })=>{
+    const { closeAllModals } = useModal();
+    const { config, getEntityConfig } = useConfig();
+    const collectionConfig = getEntityConfig({
+        collectionSlug: slug
+    });
+    const routeResolver = getRouteResolver(config);
+    const collectionUrl = routeResolver.api(`/${collectionConfig.slug}?pagination=false&depth=0`);
+    // !!! check translations
+    const { t } = useTranslation();
+    const format = (text, ...rest)=>{
+        return text.replace(/\{(\d)\}/g, (m, g)=>{
+            const i = parseInt(g);
+            return i >= 0 && i < rest.length ? String(rest[i]) : '';
+        });
+    };
+    const { code: locale } = useLocale();
+    const user = useAuth();
+    const [dirty, setDirty] = useState(false);
+    const [valid, setValid] = useState(false);
+    const [error, setError] = useState();
+    const [name, setName] = useState(null);
+    const [csv, setCSV] = useState(null);
+    const [keys, setKeys] = useState(null);
+    const [data, setData] = useState(null);
+    const [items, setItems] = useState([]);
+    const [logs, setLogs] = useState([]);
+    const [importMode, setImportMode] = useState(INITIAL_DATA.importMode);
+    const [dataParsing, setDataParsing] = useState(INITIAL_DATA.dataParsing);
+    const importModes = Object.entries(ImportMode).map(([k, v])=>({
+            value: v,
+            label: t(`importExport:mode${k}`)
+        }));
+    const onSelectDidChange = (option)=>{
+        // console.log('onSelectDidChange', option);
+        if (Array.isArray(option)) {
+            return;
+        }
+        if (importMode !== option.value) {
+            setValid(false);
+            setImportMode(option.value);
+        }
+    };
+    const onCheckboxkDidChange = (event)=>{
+        // console.log('onCheckboxkDidChange', value);
+        setValid(false);
+        setDataParsing(!dataParsing);
+    };
+    const validate = useCallback(async (keys, data)=>{
+        try {
+            const messageByType = (key, type)=>{
+                let message;
+                switch(type){
+                    case ImportLogType.Required:
+                        message = format(t('importExport:errorRequired'), key);
+                        break;
+                    case ImportLogType.Optional:
+                        message = format(t('importExport:errorOptional'), key);
+                        break;
+                    case ImportLogType.Invalid:
+                        message = format(t('importExport:errorInvalid'), key);
+                        break;
+                    case ImportLogType.Duplicate:
+                        message = format(t('importExport:errorDuplicate'), key);
+                        break;
+                    case ImportLogType.Unexpected:
+                        message = format(t('importExport:errorUnexpected'), key);
+                        break;
+                }
+                return message;
+            };
+            const addLog = (logs, key, type, invalid)=>{
+                const message = messageByType(key, type);
+                const id = invalid ? `${key}-${type}-${invalid}` : `${key}-${type}`;
+                const log = once(logs, {
+                    id,
+                    key,
+                    type,
+                    message,
+                    invalid,
+                    count: 0
+                });
+                log.count++;
+                return log;
+            };
+            const itemOptionalKeys = [];
+            const itemKeys = keys;
+            // collecting model fields & keys
+            const fields = collectionConfig.fields.filter((x)=>'name' in x && x['name'] !== undefined && x.type !== 'ui');
+            const fieldKeys = fields.map((x)=>x['name']);
+            const requiredFields = fields.filter((x)=>{
+                if (x['name'] === 'id' && importMode === ImportMode.Update) {
+                    return true;
+                } else {
+                    return 'required' in x && x['required'] === true;
+                }
+            });
+            const uniqueFields = fields.filter((x)=>x['unique'] === true);
+            const requiredFieldKeys = requiredFields.map((x)=>x['name']);
+            const optionalFieldKeys = fieldKeys.filter((x)=>!requiredFieldKeys.includes(x));
+            const uniqueFieldKeys = uniqueFields.map((x)=>x['name']);
+            let items = [];
+            // parse values
+            const valueParsers = itemKeys.map((key)=>{
+                let parseValue = (item)=>item[key];
+                if (fieldKeys.includes(key)) {
+                    const field = collectionConfig.fields.find((x)=>'name' in x && x['name'] === key);
+                    if (field) {
+                        switch(field.type){
+                            case 'checkbox':
+                                parseValue = (item)=>item[key] !== undefined ? Boolean(item[key]) : item[key];
+                                break;
+                            case 'date':
+                                parseValue = (item)=>item[key] !== undefined ? new Date(item[key]) : item[key];
+                                break;
+                            case 'number':
+                                parseValue = (item)=>item[key] !== undefined ? Number(item[key]) : item[key];
+                                break;
+                        }
+                    }
+                }
+                return parseValue;
+            });
+            for (const row of data){
+                const item = {};
+                itemKeys.forEach((key, i)=>{
+                    const parser = valueParsers[i];
+                    if (parser) {
+                        item[key] = parser(row);
+                    }
+                });
+                items.push(item);
+            }
+            if (dataParsing && typeof parser === 'function') {
+                items = parser(items);
+            }
+            // console.log('data', data);
+            // console.log('items', items);
+            // collecting stored values
+            const httpResponse = await fetch(collectionUrl, {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!httpResponse.ok) {
+                throw httpResponse;
+            }
+            const storedItems = await httpResponse.json();
+            // console.log('rows', rows, 'data', result.data);
+            // collecting logs
+            const logs = [];
+            // required fields
+            requiredFieldKeys.forEach((key)=>{
+                if (!itemKeys.includes(key) || itemOptionalKeys.includes(key)) {
+                    addLog(logs, key, ImportLogType.Required);
+                }
+            });
+            // optional fields
+            optionalFieldKeys.forEach((key)=>{
+                if (!itemKeys.includes(key)) {
+                    addLog(logs, key, ImportLogType.Optional);
+                }
+            });
+            // deep check values
+            for (const key of itemKeys){
+                if (fieldKeys.includes(key)) {
+                    const field = collectionConfig.fields.find((x)=>'name' in x && x['name'] === key);
+                    if (field) {
+                        const validate = 'validate' in field ? field['validate'] : undefined;
+                        const values = [];
+                        const storedValues = uniqueFieldKeys.includes(key) ? storedItems.map((x)=>x[key]) : [];
+                        for (const item of items){
+                            const value = item[key];
+                            // validate field
+                            if (typeof validate === 'function') {
+                                const validation = await validate(value, {
+                                    data: item,
+                                    siblingData: item,
+                                    operation: 'create',
+                                    user,
+                                    t
+                                });
+                                if (validation !== true) {
+                                    // console.log(key, value, validation, item);
+                                    if (logs.find((x)=>x.key === 'key' && x.type === ImportLogType.Invalid) === undefined) {
+                                        addLog(logs, key, ImportLogType.Invalid, validation);
+                                    }
+                                }
+                            }
+                            // unique field
+                            if (uniqueFieldKeys.includes(key) && (values.includes(value) || (importMode === ImportMode.Append ? storedValues.includes(value) : false))) {
+                                addLog(logs, key, ImportLogType.Duplicate, String(value));
+                            }
+                            values.push(value);
+                        }
+                    }
+                } else {
+                    addLog(logs, key, ImportLogType.Unexpected);
+                }
+            }
+            const sortOrder = Object.values(ImportLogType);
+            logs.sort((a, b)=>{
+                return sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type);
+            });
+            setItems(items);
+            setLogs(logs);
+            const errors = logs.filter((x)=>ImportLogInvalidTypes.includes(x.type));
+            if (errors.length === 0) {
+                setValid(true);
+            }
+        // console.log(logs, items, itemKeys, itemOptionalKeys, fieldKeys, requiredFieldKeys, optionalFieldKeys);
+        } catch (error) {
+            console.log('parse error', error);
+            setError(error);
+        }
+    }, [
+        collectionUrl,
+        importMode,
+        dataParsing,
+        parser,
+        collectionConfig.fields,
+        t,
+        user
+    ]);
+    useEffect(()=>{
+        if (keys && data) {
+            validate(keys, data);
+        }
+    }, [
+        keys,
+        data,
+        importMode,
+        validate
+    ]);
+    const onDrop = useCallback((acceptedFiles)=>{
+        const acceptedFile = acceptedFiles.find(()=>true);
+        if (acceptedFile) {
+            const reader = new FileReader();
+            reader.onabort = ()=>console.log('file reading was aborted');
+            reader.onerror = ()=>console.log('file reading has failed');
+            reader.onload = ()=>{
+                // Do whatever you want with the file contents
+                const csv = reader.result;
+                // console.log('csv', csv);
+                // parsing csv to { data:[][] }
+                const result = Papa.parse(csv);
+                const resultData = result.data;
+                // collecting imported keys & data
+                let keys = [];
+                const data = resultData.reduce((p, c, i)=>{
+                    if (i === 0) {
+                        keys = c;
+                    } else {
+                        const item = {};
+                        keys.forEach((key, k)=>{
+                            if (c[k] !== undefined) {
+                                item[key] = c[k];
+                            }
+                        });
+                        p.push(item);
+                    }
+                    return p;
+                }, []);
+                setName(acceptedFile.name);
+                setCSV(csv);
+                setKeys(keys);
+                setData(data);
+                setDirty(true);
+            };
+            // reader.readAsArrayBuffer(file);
+            reader.readAsText(acceptedFile);
+        }
+    }, []);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        accept: {
+            'text/csv': []
+        },
+        maxSize: 1048576 * 20,
+        maxFiles: 1,
+        onDrop
+    });
+    const onSubmit = async ()=>{
+        // console.log('ImportModal.onSubmit');
+        try {
+            const url = routeResolver.api(`/${collectionConfig.slug}/import?locale=${locale}&mode=${importMode}`);
+            const httpResponse = await fetch(url, {
+                method: 'POST',
+                body: JSON.stringify({
+                    items
+                }),
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!httpResponse.ok) {
+                throw httpResponse;
+            }
+            const response = await httpResponse.json();
+            // console.log('ImportModal.onSubmit', response);
+            toast.success(t('importExport:success'));
+            closeAllModals();
+        } catch (error) {
+            console.log('ImportModal.onSubmit.error', error);
+            toast.error(format(t('importExport:failure'), collectionConfig.slug));
+        }
+    };
+    const onClose = ()=>{
+        // console.log('onClose');
+        closeAllModals();
+    };
+    const onClear = ()=>{
+        // console.log('onClear');
+        setValid(false);
+        setDirty(false);
+        setName(null);
+        setCSV(null);
+        setKeys(null);
+        setData(null);
+        setItems([]);
+        setLogs([]);
+    };
+    return /*#__PURE__*/ _jsxs(MinimalTemplate, {
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: `${baseClass}__header`,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        children: t('importExport:modalTitle')
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "none",
+                        onClick: onClose,
+                        children: /*#__PURE__*/ _jsx(XIcon, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("main", {
+                className: `${baseClass}__main`,
+                children: /*#__PURE__*/ _jsxs(Form, {
+                    onSubmit: onSubmit,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "render-fields",
+                            children: [
+                                /*#__PURE__*/ _jsx(SelectInput, {
+                                    // isClearable={viewType === 'list'}
+                                    label: t('importExport:importMode'),
+                                    name: "importMode",
+                                    path: 'importMode',
+                                    options: importModes,
+                                    onChange: onSelectDidChange
+                                }),
+                                typeof parser === 'function' && /*#__PURE__*/ _jsx(CheckboxInput, {
+                                    label: t('importExport:enableDataParsing'),
+                                    id: "importMode",
+                                    name: "dataParsing",
+                                    onToggle: onCheckboxkDidChange
+                                })
+                            ]
+                        }),
+                        data ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    dangerouslySetInnerHTML: {
+                                        __html: format(t('importExport:records'), items.length, name)
+                                    }
+                                }),
+                                logs.length > 0 && /*#__PURE__*/ _jsx("ul", {
+                                    className: `${baseClass}__logs`,
+                                    children: logs.map((log, i)=>/*#__PURE__*/ _jsxs("li", {
+                                            className: `${baseClass}__log ${baseClass}__log--${log.type}`,
+                                            children: [
+                                                log.count,
+                                                " ",
+                                                log.message,
+                                                " ",
+                                                /*#__PURE__*/ _jsx("i", {
+                                                    children: log.invalid
+                                                })
+                                            ]
+                                        }, `log-${i}`))
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__dropzone`,
+                            ...getRootProps(),
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    className: `${baseClass}__input`,
+                                    ...getInputProps()
+                                }),
+                                isDragActive ? /*#__PURE__*/ _jsx("div", {
+                                    children: t('importExport:dropTitle')
+                                }) : /*#__PURE__*/ _jsx("div", {
+                                    children: t('importExport:dropAbstract')
+                                })
+                            ]
+                        }),
+                        error && /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    children: t('importExport:parseError')
+                                }),
+                                error.message && /*#__PURE__*/ _jsx("div", {
+                                    children: error.message
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__foot`,
+                            children: [
+                                dirty && /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    buttonStyle: "secondary",
+                                    onClick: onClear,
+                                    children: t('importExport:clear')
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    disabled: !valid,
+                                    children: t('importExport:submit')
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+function once(items, item) {
+    const exhistingItem = items.find((x)=>x.id === item.id);
+    if (exhistingItem) {
+        return exhistingItem;
+    }
+    items.push(item);
+    return item;
+}
+
+//# sourceMappingURL=ImportModal.js.map

package/dist/components/ImportExport/ImportModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImportExport/ImportModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { MinimalTemplate } from '@payloadcms/next/templates';\r\nimport { Button, CheckboxInput, Form, SelectInput, XIcon, toast, useAuth, useConfig, useLocale, useModal, useTranslation } from '@payloadcms/ui';\r\nimport { IEntity, IEquatable } from '@websolutespa/bom-core';\r\nimport { getRouteResolver } from '@websolutespa/payload-utils';\r\nimport * as Papa from 'papaparse';\r\nimport type { ClientField } from 'payload';\r\nimport React, { useCallback, useEffect, useState } from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { ImportLogInvalidTypes, ImportLogType, ImportMode } from '../../core/api/types';\r\nimport './ImportModal.scss';\r\nimport { IImportItem } from './types';\r\n\r\ntype Option<TValue = unknown> = {\r\n  [key: string]: unknown;\r\n  id?: string;\r\n  value: TValue;\r\n};\r\n\r\ntype IRow = Record<string, string>;\r\n\r\ntype ImportModalProps<T = any> = {\r\n  parser?: (items: IImportItem[]) => T[];\r\n  slug: string;\r\n};\r\n\r\ntype ILog = {\r\n  count: number;\r\n  id: IEquatable;\r\n  invalid?: string;\r\n  key: string;\r\n  message: string;\r\n  type: ImportLogType;\r\n};\r\n\r\nconst INITIAL_DATA = {\r\n  importMode: ImportMode.Append,\r\n  dataParsing: false,\r\n};\r\n\r\nconst baseClass = 'import-modal';\r\n\r\nexport const ImportModal: React.FC<ImportModalProps> = ({\r\n  parser,\r\n  slug,\r\n}) => {\r\n  const { closeAllModals } = useModal();\r\n  const { config, getEntityConfig } = useConfig();\r\n  const collectionConfig = getEntityConfig({ collectionSlug: slug });\r\n\r\n  const routeResolver = getRouteResolver(config);\r\n  const collectionUrl = routeResolver.api(`/${collectionConfig.slug}?pagination=false&depth=0`);\r\n\r\n  // !!! check translations\r\n  const { t } = useTranslation<any, any>();\r\n\r\n  const format = (text: string, ...rest: unknown[]) => {\r\n    return text.replace(/\\{(\\d)\\}/g, (m, g) => {\r\n      const i = parseInt(g);\r\n      return (i >= 0 && i < rest.length) ? String(rest[i]) : '';\r\n    });\r\n  };\r\n\r\n  const { code: locale } = useLocale();\r\n\r\n  const user = useAuth();\r\n\r\n  const [dirty, setDirty] = useState<boolean>(false);\r\n  const [valid, setValid] = useState<boolean>(false);\r\n  const [error, setError] = useState<Error>();\r\n  const [name, setName] = useState<string | null>(null);\r\n  const [csv, setCSV] = useState<string | null>(null);\r\n  const [keys, setKeys] = useState<string[] | null>(null);\r\n  const [data, setData] = useState<IRow[] | null>(null);\r\n  const [items, setItems] = useState<IImportItem[]>([]);\r\n  const [logs, setLogs] = useState<ILog[]>([]);\r\n  const [importMode, setImportMode] = useState<ImportMode>(INITIAL_DATA.importMode);\r\n  const [dataParsing, setDataParsing] = useState<boolean>(INITIAL_DATA.dataParsing);\r\n\r\n  const importModes = Object.entries(ImportMode).map(([k, v]) => ({\r\n    value: v,\r\n    label: t(`importExport:mode${k}`),\r\n  }));\r\n\r\n  const onSelectDidChange = (option: Option | Option[]) => {\r\n    // console.log('onSelectDidChange', option);\r\n    if (Array.isArray(option)) {\r\n      return;\r\n    }\r\n    if (importMode !== option.value) {\r\n      setValid(false);\r\n      setImportMode(option.value as ImportMode);\r\n    }\r\n  };\r\n\r\n  const onCheckboxkDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    // console.log('onCheckboxkDidChange', value);\r\n    setValid(false);\r\n    setDataParsing(!dataParsing);\r\n  };\r\n\r\n  const validate = useCallback(async (keys: string[], data: IRow[]) => {\r\n    try {\r\n      const messageByType = (key: string, type: ImportLogType) => {\r\n        let message: string;\r\n        switch (type) {\r\n          case ImportLogType.Required:\r\n            message = format(t('importExport:errorRequired'), key);\r\n            break;\r\n          case ImportLogType.Optional:\r\n            message = format(t('importExport:errorOptional'), key);\r\n            break;\r\n          case ImportLogType.Invalid:\r\n            message = format(t('importExport:errorInvalid'), key);\r\n            break;\r\n          case ImportLogType.Duplicate:\r\n            message = format(t('importExport:errorDuplicate'), key);\r\n            break;\r\n          case ImportLogType.Unexpected:\r\n            message = format(t('importExport:errorUnexpected'), key);\r\n            break;\r\n        }\r\n        return message;\r\n      };\r\n\r\n      const addLog = (logs: ILog[], key: string, type: ImportLogType, invalid?: string): ILog => {\r\n        const message = messageByType(key, type);\r\n        const id = invalid ? `${key}-${type}-${invalid}` : `${key}-${type}`;\r\n        const log = once<ILog>(logs, { id, key, type, message, invalid, count: 0 });\r\n        log.count++;\r\n        return log;\r\n      };\r\n\r\n      const itemOptionalKeys: string[] = [];\r\n      const itemKeys = keys;\r\n\r\n      // collecting model fields & keys\r\n      const fields = collectionConfig.fields\r\n        .filter(x => 'name' in x && x['name'] !== undefined && x.type !== 'ui') as (ClientField & { name: string })[];\r\n      const fieldKeys = fields.map(x => x['name']);\r\n      const requiredFields = fields.filter(x => {\r\n        if (x['name'] === 'id' && importMode === ImportMode.Update) {\r\n          return true;\r\n        } else {\r\n          return 'required' in x && x['required'] === true;\r\n        }\r\n      });\r\n      const uniqueFields = fields.filter(x => x['unique'] === true);\r\n      const requiredFieldKeys = requiredFields.map(x => x['name']);\r\n      const optionalFieldKeys = fieldKeys.filter(x => !requiredFieldKeys.includes(x));\r\n      const uniqueFieldKeys = uniqueFields.map(x => x['name']);\r\n\r\n      let items: IImportItem[] = [];\r\n\r\n      // parse values\r\n      const valueParsers = itemKeys.map(key => {\r\n        let parseValue = (item: IRow): string | number | boolean | Date | undefined => item[key];\r\n        if (fieldKeys.includes(key)) {\r\n          const field = collectionConfig.fields.find(x => 'name' in x && x['name'] === key);\r\n          if (field) {\r\n            switch (field.type) {\r\n              case 'checkbox':\r\n                parseValue = (item: IRow) => item[key] !== undefined ? Boolean(item[key]) : item[key];\r\n                break;\r\n              case 'date':\r\n                parseValue = (item: IRow) => item[key] !== undefined ? new Date(item[key]) : item[key];\r\n                break;\r\n              case 'number':\r\n                parseValue = (item: IRow) => item[key] !== undefined ? Number(item[key]) : item[key];\r\n                break;\r\n            }\r\n          }\r\n        }\r\n        return parseValue;\r\n      });\r\n\r\n      for (const row of data) {\r\n        const item = {};\r\n        itemKeys.forEach((key, i) => {\r\n          const parser = valueParsers[i];\r\n          if (parser) {\r\n            (item as any)[key] = parser(row);\r\n          }\r\n        });\r\n        items.push(item);\r\n      }\r\n\r\n      if (dataParsing && typeof parser === 'function') {\r\n        items = parser(items);\r\n      }\r\n\r\n      // console.log('data', data);\r\n      // console.log('items', items);\r\n\r\n      // collecting stored values\r\n      const httpResponse = await fetch(collectionUrl, {\r\n        method: 'GET',\r\n        credentials: 'include',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n      });\r\n      if (!httpResponse.ok) {\r\n        throw httpResponse;\r\n      }\r\n      const storedItems = await httpResponse.json();\r\n      // console.log('rows', rows, 'data', result.data);\r\n\r\n      // collecting logs\r\n      const logs: ILog[] = [];\r\n      // required fields\r\n      requiredFieldKeys.forEach(key => {\r\n        if (!itemKeys.includes(key) || itemOptionalKeys.includes(key)) {\r\n          addLog(logs, key, ImportLogType.Required);\r\n        }\r\n      });\r\n      // optional fields\r\n      optionalFieldKeys.forEach(key => {\r\n        if (!itemKeys.includes(key)) {\r\n          addLog(logs, key, ImportLogType.Optional);\r\n        }\r\n      });\r\n      // deep check values\r\n      for (const key of itemKeys) {\r\n        if (fieldKeys.includes(key)) {\r\n          const field = collectionConfig.fields.find(x => 'name' in x && x['name'] === key);\r\n          if (field) {\r\n            const validate = 'validate' in field ? field['validate'] : undefined;\r\n            const values: (string | number | boolean | Date | undefined)[] = [];\r\n            const storedValues = uniqueFieldKeys.includes(key) ? storedItems.map((x: any) => x[key]) : [];\r\n            for (const item of items) {\r\n              const value = item[key];\r\n              // validate field\r\n              if (typeof validate === 'function') {\r\n                const validation = await validate(value, {\r\n                  data: item,\r\n                  siblingData: item,\r\n                  operation: 'create',\r\n                  user,\r\n                  t,\r\n                });\r\n                if (validation !== true) {\r\n                  // console.log(key, value, validation, item);\r\n                  if (logs.find(x =>\r\n                    x.key === 'key' &&\r\n                    x.type === ImportLogType.Invalid\r\n                  ) === undefined) {\r\n                    addLog(logs, key, ImportLogType.Invalid, validation as string);\r\n                  }\r\n                }\r\n              }\r\n              // unique field\r\n              if (uniqueFieldKeys.includes(key) && (\r\n                values.includes(value) ||\r\n                (importMode === ImportMode.Append ? storedValues.includes(value) : false)\r\n              )) {\r\n                addLog(logs, key, ImportLogType.Duplicate, String(value));\r\n              }\r\n              values.push(value);\r\n            }\r\n          }\r\n        } else {\r\n          addLog(logs, key, ImportLogType.Unexpected);\r\n        }\r\n      }\r\n\r\n      const sortOrder = Object.values(ImportLogType);\r\n      logs.sort((a, b) => {\r\n        return sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type);\r\n      });\r\n\r\n      setItems(items);\r\n      setLogs(logs);\r\n\r\n      const errors = logs.filter(x => ImportLogInvalidTypes.includes(x.type));\r\n      if (errors.length === 0) {\r\n        setValid(true);\r\n      }\r\n\r\n      // console.log(logs, items, itemKeys, itemOptionalKeys, fieldKeys, requiredFieldKeys, optionalFieldKeys);\r\n\r\n    } catch (error) {\r\n      console.log('parse error', error);\r\n      setError(error as Error);\r\n    }\r\n  }, [collectionUrl, importMode, dataParsing, parser, collectionConfig.fields, t, user]);\r\n\r\n  useEffect(() => {\r\n    if (keys && data) {\r\n      validate(keys, data);\r\n    }\r\n  }, [keys, data, importMode, validate]);\r\n\r\n  const onDrop = useCallback((acceptedFiles: File[]) => {\r\n    const acceptedFile = acceptedFiles.find(() => true);\r\n    if (acceptedFile) {\r\n      const reader = new FileReader();\r\n      reader.onabort = () => console.log('file reading was aborted');\r\n      reader.onerror = () => console.log('file reading has failed');\r\n      reader.onload = () => {\r\n        // Do whatever you want with the file contents\r\n        const csv = reader.result as string;\r\n        // console.log('csv', csv);\r\n        // parsing csv to { data:[][] }\r\n        const result = Papa.parse(csv);\r\n        const resultData: string[][] = result.data as string[][];\r\n        // collecting imported keys & data\r\n        let keys: string[] = [];\r\n        const data: IRow[] = resultData.reduce((p, c, i) => {\r\n          if (i === 0) {\r\n            keys = c;\r\n          } else {\r\n            const item: Record<string, string> = {};\r\n            keys.forEach((key, k) => {\r\n              if (c[k] !== undefined) {\r\n                item[key] = c[k];\r\n              }\r\n            });\r\n            p.push(item);\r\n          }\r\n          return p;\r\n        }, [] as IRow[]);\r\n        setName(acceptedFile.name);\r\n        setCSV(csv);\r\n        setKeys(keys);\r\n        setData(data);\r\n        setDirty(true);\r\n      };\r\n      // reader.readAsArrayBuffer(file);\r\n      reader.readAsText(acceptedFile);\r\n    }\r\n  }, []);\r\n\r\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\r\n    accept: {\r\n      'text/csv': [],\r\n    },\r\n    maxSize: 1048576 * 20,\r\n    maxFiles: 1,\r\n    onDrop,\r\n  });\r\n\r\n  const onSubmit = async () => {\r\n    // console.log('ImportModal.onSubmit');\r\n    try {\r\n      const url = routeResolver.api(`/${collectionConfig.slug}/import?locale=${locale}&mode=${importMode}`);\r\n\r\n      const httpResponse = await fetch(url, {\r\n        method: 'POST',\r\n        body: JSON.stringify({ items }),\r\n        credentials: 'include',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n      });\r\n\r\n      if (!httpResponse.ok) {\r\n        throw httpResponse;\r\n      }\r\n\r\n      const response = await httpResponse.json();\r\n      // console.log('ImportModal.onSubmit', response);\r\n      toast.success(t('importExport:success'));\r\n      closeAllModals();\r\n\r\n    } catch (error) {\r\n      console.log('ImportModal.onSubmit.error', error);\r\n      toast.error(format(t('importExport:failure'), collectionConfig.slug));\r\n    }\r\n  };\r\n\r\n  const onClose = () => {\r\n    // console.log('onClose');\r\n    closeAllModals();\r\n  };\r\n\r\n  const onClear = () => {\r\n    // console.log('onClear');\r\n    setValid(false);\r\n    setDirty(false);\r\n    setName(null);\r\n    setCSV(null);\r\n    setKeys(null);\r\n    setData(null);\r\n    setItems([]);\r\n    setLogs([]);\r\n  };\r\n\r\n  return (\r\n    <MinimalTemplate>\r\n      <header className={`${baseClass}__header`}>\r\n        <h3>{t('importExport:modalTitle')}</h3>\r\n        <Button buttonStyle=\"none\" onClick={onClose}><XIcon /></Button>\r\n      </header>\r\n      <main className={`${baseClass}__main`}>\r\n        <Form onSubmit={onSubmit}>\r\n          <div className=\"render-fields\">\r\n            <SelectInput\r\n              // isClearable={viewType === 'list'}\r\n              label={t('importExport:importMode')}\r\n              name=\"importMode\"\r\n              path={'importMode'}\r\n              options={importModes}\r\n              onChange={onSelectDidChange}\r\n            />\r\n            {typeof parser === 'function' && (\r\n              <CheckboxInput\r\n                label={t('importExport:enableDataParsing')}\r\n                id=\"importMode\"\r\n                name=\"dataParsing\"\r\n                onToggle={onCheckboxkDidChange}\r\n              />\r\n            )}\r\n          </div>\r\n          {data ? (\r\n            <>\r\n              <div dangerouslySetInnerHTML={{ __html: format(t('importExport:records'), items.length, name) }} ></div>\r\n              {logs.length > 0 && (\r\n                <ul className={`${baseClass}__logs`}>\r\n                  {logs.map((log, i) => (\r\n                    <li key={`log-${i}`} className={`${baseClass}__log ${baseClass}__log--${log.type}`}>\r\n                      {log.count} {log.message} <i>{log.invalid}</i>\r\n                    </li>\r\n                  ))}\r\n                </ul>\r\n              )}\r\n            </>\r\n          ) : (\r\n            <div className={`${baseClass}__dropzone`} {...getRootProps()}>\r\n              <input className={`${baseClass}__input`} {...getInputProps()} />\r\n              {isDragActive ? (\r\n                <div>{t('importExport:dropTitle')}</div>\r\n              ) : (\r\n                <div>{t('importExport:dropAbstract')}</div>\r\n              )}\r\n            </div>\r\n          )}\r\n          {error && (\r\n            <>\r\n              <div>{t('importExport:parseError')}</div>\r\n              {error.message && <div>{error.message}</div>}\r\n            </>\r\n          )}\r\n          <div className={`${baseClass}__foot`}>\r\n            {dirty && <Button type=\"button\" buttonStyle=\"secondary\" onClick={onClear}>\r\n              {t('importExport:clear')}\r\n            </Button>}\r\n            <Button type=\"submit\" disabled={!valid}>\r\n              {t('importExport:submit')}\r\n            </Button>\r\n          </div>\r\n        </Form>\r\n      </main>\r\n    </MinimalTemplate>\r\n  );\r\n};\r\n\r\nfunction once<T extends IEntity = IEntity>(items: T[], item: T): T {\r\n  const exhistingItem = items.find(x => x.id === item.id);\r\n  if (exhistingItem) {\r\n    return exhistingItem;\r\n  }\r\n  items.push(item);\r\n  return item;\r\n}\r\n"],"names":["MinimalTemplate","Button","CheckboxInput","Form","SelectInput","XIcon","toast","useAuth","useConfig","useLocale","useModal","useTranslation","getRouteResolver","Papa","React","useCallback","useEffect","useState","useDropzone","ImportLogInvalidTypes","ImportLogType","ImportMode","INITIAL_DATA","importMode","Append","dataParsing","baseClass","ImportModal","parser","slug","closeAllModals","config","getEntityConfig","collectionConfig","collectionSlug","routeResolver","collectionUrl","api","t","format","text","rest","replace","m","g","i","parseInt","length","String","code","locale","user","dirty","setDirty","valid","setValid","error","setError","name","setName","csv","setCSV","keys","setKeys","data","setData","items","setItems","logs","setLogs","setImportMode","setDataParsing","importModes","Object","entries","map","k","v","value","label","onSelectDidChange","option","Array","isArray","onCheckboxkDidChange","event","validate","messageByType","key","type","message","Required","Optional","Invalid","Duplicate","Unexpected","addLog","invalid","id","log","once","count","itemOptionalKeys","itemKeys","fields","filter","x","undefined","fieldKeys","requiredFields","Update","uniqueFields","requiredFieldKeys","optionalFieldKeys","includes","uniqueFieldKeys","valueParsers","parseValue","item","field","find","Boolean","Date","Number","row","forEach","push","httpResponse","fetch","method","credentials","headers","ok","storedItems","json","values","storedValues","validation","siblingData","operation","sortOrder","sort","a","b","indexOf","errors","console","onDrop","acceptedFiles","acceptedFile","reader","FileReader","onabort","onerror","onload","result","parse","resultData","reduce","p","c","readAsText","getRootProps","getInputProps","isDragActive","accept","maxSize","maxFiles","onSubmit","url","body","JSON","stringify","response","success","onClose","onClear","header","className","h3","buttonStyle","onClick","main","div","path","options","onChange","onToggle","dangerouslySetInnerHTML","__html","ul","li","input","disabled","exhistingItem"],"mappings":"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"}

package/dist/components/ImportExport/ImportModal.scss

@@ -0,0 +1,99 @@
+@use "sass:math";
+
+.import-modal {
+
+  &__header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0.6rem 0;
+
+    h3 {
+      display: flex;
+      gap: 0.5em;
+      margin: 0;
+
+      svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+      }
+    }
+  }
+
+  &__main {
+
+    .rich-text__editor {
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: Max(160px, calc(100vh - 650px));
+    }
+  }
+
+  &__foot {
+    display: flex;
+    gap: 2rem;
+
+    &>.btn,
+    &>.form-submit {
+      flex: 1 1 calc(50% - 1rem);
+
+      &>.btn {
+        width: 100%;
+      }
+    }
+  }
+
+  &__dropzone {
+    text-align: center;
+    padding: 20px;
+    margin-top: var(--base);
+    border: 3px #2f2f2f dashed;
+    width: 100%;
+    height: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  &__logs {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    list-style: none;
+    padding: 0;
+    margin: 1em 0 0 0;
+    line-height: 1.4;
+    padding: 1rem;
+    border: 2px solid #2f2f2f;
+    border-radius: 8px;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  &__log {
+    padding: 0;
+
+    &--duplicate {
+      color: red;
+    }
+
+    &--invalid {
+      color: red;
+    }
+
+    &--required {
+      color: red;
+    }
+
+    &--unexpected {
+      color: orange;
+    }
+
+    &--optional {
+      color: grey;
+    }
+  }
+}

package/dist/components/ImportExport/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/components/ImportExport/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ImportExport/types.ts"],"sourcesContent":["export type IImportItem = Record<string, string | number | boolean | Date>;\r\n"],"names":[],"mappings":"AAAA,WAA2E"}