From e9dce3176900fa8869f352135edb04e1e097711b Mon Sep 17 00:00:00 2001 From: Shams mosowi Date: Tue, 16 Feb 2021 10:13:57 +0800 Subject: [PATCH 1/4] add checkbox csvParser --- www/src/components/fields/Checkbox/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/www/src/components/fields/Checkbox/index.tsx b/www/src/components/fields/Checkbox/index.tsx index d4424591..1b2a26de 100644 --- a/www/src/components/fields/Checkbox/index.tsx +++ b/www/src/components/fields/Checkbox/index.tsx @@ -26,6 +26,11 @@ export const config: IFieldConfig = { description: "Either checked or unchecked. Unchecked by default.", TableCell: withHeavyCell(BasicCell, TableCell), TableEditor: NullEditor, + csvImportParser: (value: string) => { + if (["YES", "TRUE", "1"].includes(value.toUpperCase())) return true; + else if (["NO", "FALSE", "0"].includes(value.toUpperCase())) return false; + else return null; + }, SideDrawerField, }; export default config; From 53301e90c9a744862df3b7f1a933d60cd1ce9690 Mon Sep 17 00:00:00 2001 From: Shams mosowi Date: Tue, 16 Feb 2021 10:14:24 +0800 Subject: [PATCH 2/4] use csvImportParser function --- .../components/Wizards/ImportCsvWizard/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/www/src/components/Wizards/ImportCsvWizard/index.tsx b/www/src/components/Wizards/ImportCsvWizard/index.tsx index 85cd13c9..b8248a8c 100644 --- a/www/src/components/Wizards/ImportCsvWizard/index.tsx +++ b/www/src/components/Wizards/ImportCsvWizard/index.tsx @@ -21,6 +21,7 @@ import { ColumnConfig } from "hooks/useFiretable/useTableConfig"; import { useFiretableContext } from "contexts/FiretableContext"; import { FieldType } from "constants/fields"; import { useSnackContext } from "contexts/SnackContext"; +import { getFieldProp } from "components/fields"; export type CsvConfig = { pairs: { csvKey: string; columnKey: string }[]; @@ -76,11 +77,13 @@ export default function ImportCsvWizard({ const matchingColumn = tableState.columns[pair.columnKey] ?? _find(config.newColumns, { key: pair.columnKey }); - const value = - matchingColumn.type === FieldType.date || - matchingColumn.type === FieldType.dateTime - ? parseJSON(row[pair.csvKey]) - : row[pair.csvKey]; + const csvFieldParser = getFieldProp( + "csvImportParser", + matchingColumn.type + ); + const value = csvFieldParser + ? csvFieldParser(row[pair.csvKey]) + : row[pair.csvKey]; return { ...a, [pair.columnKey]: value }; }, {}); tableActions.row.add(newRow); From 5439b6a323ba2f10b87800c69c98635d5ce05cf6 Mon Sep 17 00:00:00 2001 From: Shams mosowi Date: Wed, 17 Feb 2021 13:24:13 +0800 Subject: [PATCH 3/4] allow OPS to configure single/multi select options --- www/src/components/Table/ColumnHeader.tsx | 30 +++++++++++++---------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/www/src/components/Table/ColumnHeader.tsx b/www/src/components/Table/ColumnHeader.tsx index 49741bc9..f3c03093 100644 --- a/www/src/components/Table/ColumnHeader.tsx +++ b/www/src/components/Table/ColumnHeader.tsx @@ -259,19 +259,23 @@ export default function DraggableHeaderRenderer({ )} - {userClaims?.roles?.includes("ADMIN") && ( - - - - - - )} + {userClaims?.roles?.includes("ADMIN") || + (userClaims?.roles?.includes("OPS") && + [FieldType.multiSelect, FieldType.singleSelect].includes( + (column as any).type + ) && ( + + + + + + ))} ); // return ( From ddea2cdd799cfc3f73d4bb48f1035017fa594a9f Mon Sep 17 00:00:00 2001 From: Shams mosowi Date: Wed, 17 Feb 2021 15:48:09 +0800 Subject: [PATCH 4/4] preview parsed csv data --- .../Wizards/ImportCsvWizard/Step3Preview.tsx | 12 +++----- .../Wizards/ImportCsvWizard/index.tsx | 28 +++++++++++-------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/www/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx b/www/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx index c5888c98..beffd178 100644 --- a/www/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx +++ b/www/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx @@ -1,7 +1,6 @@ import React from "react"; import { ScrollSync, ScrollSyncPane } from "react-scroll-sync"; import _find from "lodash/find"; -import { parseJSON } from "date-fns"; import { makeStyles, createStyles, Grid } from "@material-ui/core"; @@ -83,6 +82,7 @@ export default function Step4Preview({ csvData, config }: IStepProps) { const columns = config.pairs.map(({ csvKey, columnKey }) => ({ csvKey, + columnKey, ...(tableState!.columns[columnKey] ?? _find(config.newColumns, { key: columnKey }) ?? {}), @@ -105,17 +105,13 @@ export default function Step4Preview({ csvData, config }: IStepProps) { - {columns.map(({ csvKey, name, type }) => ( + {columns.map(({ csvKey, name, columnKey, type }) => ( {csvData.rows.map((row, i) => ( diff --git a/www/src/components/Wizards/ImportCsvWizard/index.tsx b/www/src/components/Wizards/ImportCsvWizard/index.tsx index b8248a8c..995c2e92 100644 --- a/www/src/components/Wizards/ImportCsvWizard/index.tsx +++ b/www/src/components/Wizards/ImportCsvWizard/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useMemo } from "react"; import _mergeWith from "lodash/mergeWith"; import _find from "lodash/find"; import { parseJSON } from "date-fns"; @@ -68,15 +68,14 @@ export default function ImportCsvWizard({ })); }; - const handleFinish = () => { - if (!tableState || !tableActions || !csvData) return; - openSnackbar({ message: "Importing data…" }); - // Add all new rows — synchronous - for (const row of csvData.rows) { - const newRow = config.pairs.reduce((a, pair) => { + const parsedRows: any[] = useMemo(() => { + if (!tableState || !tableActions || !csvData) return []; + return csvData.rows.map((row) => + config.pairs.reduce((a, pair) => { const matchingColumn = tableState.columns[pair.columnKey] ?? _find(config.newColumns, { key: pair.columnKey }); + console.log({ type: matchingColumn.type }); const csvFieldParser = getFieldProp( "csvImportParser", matchingColumn.type @@ -85,9 +84,16 @@ export default function ImportCsvWizard({ ? csvFieldParser(row[pair.csvKey]) : row[pair.csvKey]; return { ...a, [pair.columnKey]: value }; - }, {}); - tableActions.row.add(newRow); - } + }, {}) + ); + }, [csvData, tableState, tableActions, config]); + + const handleFinish = () => { + if (!tableState || !tableActions || !parsedRows) return; + openSnackbar({ message: "Importing data…" }); + // Add all new rows — synchronous + parsedRows?.forEach((newRow) => tableActions.row.add(newRow)); + // Add any new columns to the end for (const col of config.newColumns) { tableActions.column.add(col.name, col.type, col); @@ -175,7 +181,7 @@ export default function ImportCsvWizard({ "Preview your data with your configured columns. You can change column types by clicking “Edit Type” from the column menu at any time.", content: (