From 985d46be08c7d518457e6efefddce88b010a4dd5 Mon Sep 17 00:00:00 2001 From: shams mosowi Date: Fri, 20 Sep 2019 11:46:11 +1000 Subject: [PATCH] updated rating/checkbox/date inputs for campatiblity --- src/components/Fields/CheckBox.tsx | 11 +- src/components/Fields/Date.tsx | 43 ++++---- src/components/Fields/Rating.tsx | 15 +-- src/components/Fields/index.tsx | 85 ++++++++++++++++ src/components/Table.tsx | 96 ------------------ src/components/Table/index.tsx | 157 +++++++++++++++++++++++++++++ 6 files changed, 269 insertions(+), 138 deletions(-) delete mode 100644 src/components/Table.tsx create mode 100644 src/components/Table/index.tsx diff --git a/src/components/Fields/CheckBox.tsx b/src/components/Fields/CheckBox.tsx index 497fe0ad..5e0716c7 100644 --- a/src/components/Fields/CheckBox.tsx +++ b/src/components/Fields/CheckBox.tsx @@ -2,17 +2,12 @@ import React from "react"; import Checkbox from "@material-ui/core/Checkbox"; const CheckBox = (props: any) => { - const { columnData, cellData, cellActions, rowData, rowIndex } = props; + const { value, row, onSubmit } = props; return ( { - cellActions.updateFirestore({ - rowIndex, - value: !cellData, - docRef: rowData.ref, - fieldName: columnData.fieldName - }); + onSubmit(row.ref, !value); }} /> ); diff --git a/src/components/Fields/Date.tsx b/src/components/Fields/Date.tsx index 24af8a10..67f478c3 100644 --- a/src/components/Fields/Date.tsx +++ b/src/components/Fields/Date.tsx @@ -5,40 +5,35 @@ import { MuiPickersUtilsProvider, // KeyboardTimePicker, // KeyboardDatePicker, - DatePicker + DatePicker, + DateTimePicker } from "@material-ui/pickers"; -import Button from "@material-ui/core/Button"; +import { FieldType } from "."; const Date = (props: any) => { - const { - isFocusedCell, - columnData, - cellData, - cellActions, - rowData, - rowIndex - } = props; + const { value, row, onSubmit, fieldType } = props; function handleDateChange(date: Date | null) { if (date) { - const cell = { - rowIndex, - value: date, - docRef: rowData.ref, - fieldName: columnData.fieldName - }; - cellActions.updateFirestore(cell); + onSubmit(row.ref, date); } } - if (!cellData && !isFocusedCell) return ; - else - return ( - + + return ( + + {fieldType === FieldType.date ? ( - - ); + ) : ( + + )} + + ); }; export default Date; diff --git a/src/components/Fields/Rating.tsx b/src/components/Fields/Rating.tsx index b7c65fc3..14fec3c3 100644 --- a/src/components/Fields/Rating.tsx +++ b/src/components/Fields/Rating.tsx @@ -2,19 +2,14 @@ import React from "react"; import MuiRating from "@material-ui/lab/Rating"; const Rating = (props: any) => { - const { columnData, cellData, cellActions, rowData, rowIndex } = props; + const { value, row, onSubmit } = props; return ( { - const cell = { - rowIndex, - value: newValue, - docRef: rowData.ref, - fieldName: columnData.fieldName - }; - cellActions.updateFirestore(cell); + onSubmit(row.ref, newValue); }} /> ); diff --git a/src/components/Fields/index.tsx b/src/components/Fields/index.tsx index c29e8349..50f1e111 100644 --- a/src/components/Fields/index.tsx +++ b/src/components/Fields/index.tsx @@ -13,6 +13,12 @@ import URLIcon from "@material-ui/icons/Explore"; import NumberIcon from "@material-ui/icons/Looks3"; import propEq from "ramda/es/propEq"; import find from "ramda/es/find"; +import SimpleText from "./SimpleText"; +import CheckBox from "./CheckBox"; +import Number from "./Number"; +import Rating from "./Rating"; +import Date from "./Date"; +import Image from "./Image"; export enum FieldType { simpleText = "SIMPLE_TEXT", longText = "LONG_TEXT", @@ -46,3 +52,82 @@ export const FIELDS = [ export const getFieldIcon = (type: FieldType) => { return find(propEq("type", type))(FIELDS).icon; }; + +export const CellField = ( + fieldType: FieldType, + rowIndex: number, + ref: firebase.firestore.DocumentReference, + isFocusedCell: boolean, + value: any, + cellActions: any, + fieldName: string +) => { + const columnData = { fieldName }; + const rowData = { ref }; + + switch (fieldType) { + case FieldType.checkBox: + return ( + + ); + case FieldType.rating: + return ( + + ); + case FieldType.image: + return ( + + ); + case FieldType.date: + return ( + + ); + case FieldType.number: + return ( + + ); + default: + return ( + + ); + } +}; diff --git a/src/components/Table.tsx b/src/components/Table.tsx deleted file mode 100644 index 5a9ed567..00000000 --- a/src/components/Table.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from "react"; -import ReactDataGrid from "react-data-grid"; -import useFiretable from "../hooks/useFiretable"; -import Button from "@material-ui/core/Button"; -import Popper, { PopperPlacementType } from "@material-ui/core/Popper"; -import Typography from "@material-ui/core/Typography"; -import Fade from "@material-ui/core/Fade"; -import Paper from "@material-ui/core/Paper"; -import { createStyles, Theme, makeStyles } from "@material-ui/core/styles"; - -const useStyles = makeStyles(Theme => - createStyles({ - typography: { - padding: 1 - }, - header: { - position: "absolute", - left: 0, - top: 0, - zIndex: 1000000 - } - }) -); - -function Table(props: any) { - const { collection } = props; - const { tableState, tableActions } = useFiretable(collection); - const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState( - null - ); - const [open, setOpen] = React.useState(false); - const [placement, setPlacement] = React.useState(); - - const handleClick = ( - event: React.MouseEvent - ) => { - setAnchorEl(event.currentTarget); - setOpen(!open); - }; - - const onGridRowsUpdated = (props: any) => { - const { fromRowData, updated } = props; - fromRowData.ref.update(updated); - }; - - const headerRenderer = (props: any) => { - return ( -
- -
- ); - }; - if (tableState.columns) { - const columns = tableState.columns.map((column: any) => ({ - key: column.fieldName, - name: column.columnName, - editable: true, - resizeable: true, - frozen: column.fieldName === "cohort", - headerRenderer: headerRenderer, - width: 200 - })); - const rows = tableState.rows; - return ( - <> - rows[i]} - rowsCount={rows.length} - onGridRowsUpdated={onGridRowsUpdated} - enableCellSelect={true} - /> - - {({ TransitionProps }) => ( - - - - The content of the Popper. - - - - )} - - - ); - } else return

Loading

; -} - -export default Table; diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx new file mode 100644 index 00000000..c78e25c7 --- /dev/null +++ b/src/components/Table/index.tsx @@ -0,0 +1,157 @@ +import React, { useState } from "react"; +import ReactDataGrid from "react-data-grid"; + +import useFiretable from "../../hooks/useFiretable"; +import Typography from "@material-ui/core/Typography"; + +import { createStyles, Theme, makeStyles } from "@material-ui/core/styles"; +import IconButton from "@material-ui/core/IconButton"; +import Button from "@material-ui/core/Button"; +import EditIcon from "@material-ui/icons/Edit"; +import HeaderPopper from "./HeaderPopper"; +import { FieldType } from "../Fields"; + +import Date from "../Fields/Date"; +import Rating from "../Fields/Rating"; +import CheckBox from "../Fields/CheckBox"; +import UrlLink from "../Fields/UrlLink"; + +const useStyles = makeStyles(Theme => + createStyles({ + typography: { + padding: 1 + }, + header: { + position: "absolute", + left: 0, + top: 0 + }, + button: { + // margin: theme.spacing(1) + } + }) +); + +const copyPaste = (props: any) => { + console.log(props); +}; +const editable = (fieldType: FieldType) => { + switch (fieldType) { + case FieldType.date: + case FieldType.dateTime: + case FieldType.rating: + case FieldType.checkBox: + return false; + + default: + return true; + } +}; +const onSubmit = (fieldName: string) => ( + ref: firebase.firestore.DocumentReference, + value: any +) => { + if (!!value) { + ref.update({ [fieldName]: value }); + } +}; + +const DateFormatter = (fieldName: string, fieldType: FieldType) => ( + props: any +) => { + return ( + + ); +}; + +const formatter = (fieldType: FieldType, fieldName: string) => { + console.log(fieldType); + switch (fieldType) { + case FieldType.date: + case FieldType.dateTime: + return DateFormatter(fieldName, fieldType); + case FieldType.rating: + return (props: any) => { + return ; + }; + case FieldType.checkBox: + return (props: any) => { + return ; + }; + case FieldType.url: + return (props: any) => { + return ; + }; + default: + return false; + } +}; + +function Table(props: any) { + const { collection } = props; + const { tableState, tableActions } = useFiretable(collection); + const classes = useStyles(); + const [anchorEl, setAnchorEl] = useState(null); + + const [header, setHeader] = useState(); + + const handleClick = ( + event: React.MouseEvent + ) => { + setAnchorEl(event.currentTarget); + }; + + const onGridRowsUpdated = (props: any) => { + const { fromRowData, updated } = props; + fromRowData.ref.update(updated); + }; + + const headerRenderer = (props: any) => { + console.log(props); + return ( +
+ {props.column.name}{" "} + + + +
+ ); + }; + + if (tableState.columns) { + const columns = tableState.columns.map((column: any) => ({ + key: column.fieldName, + name: column.columnName, + editable: editable(column.type), + resizeable: true, + frozen: column.fieldName === "cohort", + headerRenderer: headerRenderer, + formatter: formatter(column.type, column.fieldName), + width: 200 + })); + const rows = tableState.rows; + return ( + <> + rows[i]} + rowsCount={rows.length} + onGridRowsUpdated={onGridRowsUpdated} + enableCellSelect={true} + onCellCopyPaste={copyPaste} + minHeight={500} + // getCellActions={getCellActions} + /> + + + + ); + } else return

Loading

; +} + +export default Table;