From 9f2399cff5c19db010a056ba4db7413fbef10e46 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Wed, 2 Dec 2020 19:52:19 +1100 Subject: [PATCH] add Aggregate, Derivative fields --- www/src/components/SideDrawer/Form/index.tsx | 2 +- .../components/Table/editors/TextEditor.tsx | 12 +++++------ www/src/components/Table/index.tsx | 10 +++++++-- www/src/components/fields/Aggregate/index.tsx | 21 +++++++++++++++++++ .../components/fields/Derivative/index.tsx | 21 +++++++++++++++++++ www/src/components/fields/index.tsx | 6 ++++-- 6 files changed, 60 insertions(+), 12 deletions(-) create mode 100644 www/src/components/fields/Aggregate/index.tsx create mode 100644 www/src/components/fields/Derivative/index.tsx diff --git a/www/src/components/SideDrawer/Form/index.tsx b/www/src/components/SideDrawer/Form/index.tsx index a4936110..429c39e2 100644 --- a/www/src/components/SideDrawer/Form/index.tsx +++ b/www/src/components/SideDrawer/Form/index.tsx @@ -89,7 +89,7 @@ export default function Form({ values }: IFormProps) { return ( diff --git a/www/src/components/Table/editors/TextEditor.tsx b/www/src/components/Table/editors/TextEditor.tsx index 996731c4..4e19ff77 100644 --- a/www/src/components/Table/editors/TextEditor.tsx +++ b/www/src/components/Table/editors/TextEditor.tsx @@ -35,10 +35,11 @@ const useStyles = makeStyles((theme) => export default function TextEditor({ row, column }: EditorProps) { const classes = useStyles(); + const type = (column as any).config?.renderFieldType ?? (column as any).type; + const cellValue = getCellValue(row, column.key); const defaultValue = - (column as any).type === FieldType.percentage && - typeof cellValue === "number" + type === FieldType.percentage && typeof cellValue === "number" ? cellValue * 100 : cellValue; @@ -48,10 +49,7 @@ export default function TextEditor({ row, column }: EditorProps) { return () => { const newValue = inputRef.current?.value; if (newValue !== undefined) { - if ( - (column as any).type === FieldType.number || - (column as any).type === FieldType.percentage - ) { + if (type === FieldType.number || type === FieldType.percentage) { row.ref.update({ [column.key]: Number(newValue) }); } else { row.ref.update({ [column.key]: newValue }); @@ -61,7 +59,7 @@ export default function TextEditor({ row, column }: EditorProps) { }, []); let inputType = "text"; - switch ((column as any).type) { + switch (type) { case FieldType.email: inputType = "email"; break; diff --git a/www/src/components/Table/index.tsx b/www/src/components/Table/index.tsx index e345d139..c1ba3de4 100644 --- a/www/src/components/Table/index.tsx +++ b/www/src/components/Table/index.tsx @@ -84,12 +84,18 @@ export default function Table() { frozen: column.fixed, headerRenderer: ColumnHeader, formatter: - getFieldProp("TableCell", column.type) ?? + getFieldProp( + "TableCell", + column.config?.renderFieldType ?? column.type + ) ?? function InDev() { return null; }, editor: - getFieldProp("TableEditor", column.type) ?? + getFieldProp( + "TableEditor", + column.config?.renderFieldType ?? column.type + ) ?? function InDev() { return null; }, diff --git a/www/src/components/fields/Aggregate/index.tsx b/www/src/components/fields/Aggregate/index.tsx new file mode 100644 index 00000000..5f9750d2 --- /dev/null +++ b/www/src/components/fields/Aggregate/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { IFieldConfig, FieldType } from "components/fields/types"; +import withCustomCell from "components/Table/withCustomCell"; + +import AggregateIcon from "@material-ui/icons/Layers"; +import BasicCell from "../_BasicCell/BasicCellNull"; +import NullEditor from "components/Table/editors/NullEditor"; + +export const config: IFieldConfig = { + type: FieldType.aggregate, + name: "Aggregate", + dataType: "string", + initialValue: + "Value aggregated from a specified sub-table of the row. Displayed using any other field type. Requires Cloud Function setup.", + icon: , + description: "Numeric data.", + TableCell: withCustomCell(BasicCell as any, BasicCell), + TableEditor: NullEditor, + SideDrawerField: BasicCell as any, +}; +export default config; diff --git a/www/src/components/fields/Derivative/index.tsx b/www/src/components/fields/Derivative/index.tsx new file mode 100644 index 00000000..eb99066f --- /dev/null +++ b/www/src/components/fields/Derivative/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { IFieldConfig, FieldType } from "components/fields/types"; +import withCustomCell from "components/Table/withCustomCell"; + +import DerivativeIcon from "assets/icons/Derivative"; +import BasicCell from "../_BasicCell/BasicCellNull"; +import NullEditor from "components/Table/editors/NullEditor"; + +export const config: IFieldConfig = { + type: FieldType.derivative, + name: "Derivative", + dataType: "string", + initialValue: + "Value derived from the rest of the row’s values. Displayed using any other field type. Requires Cloud Function setup.", + icon: , + description: "Numeric data.", + TableCell: withCustomCell(BasicCell as any, BasicCell), + TableEditor: NullEditor, + SideDrawerField: BasicCell as any, +}; +export default config; diff --git a/www/src/components/fields/index.tsx b/www/src/components/fields/index.tsx index 7eb0f746..8efdf917 100644 --- a/www/src/components/fields/index.tsx +++ b/www/src/components/fields/index.tsx @@ -18,6 +18,8 @@ import DateTime from "./DateTime"; import Duration from "./Duration"; import SubTable from "./SubTable"; import Action from "./Action"; +import Derivative from "./Derivative"; +import Aggregate from "./Aggregate"; import User from "./User"; import Id from "./Id"; @@ -56,8 +58,8 @@ export const FIELDS: IFieldConfig[] = [ // TODO: richText, // CLOUD FUNCTION Action, - // TODO: derivative, - // TODO: aggregate, + Derivative, + Aggregate, // FIRETABLE User, Id,