diff --git a/.env.example b/.env.example
index 275ef85a..0e8f2bff 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,2 @@
-REACT_APP_FIREBASE_PROJECT_ID=
-REACT_APP_FIREBASE_PROJECT_WEB_API_KEY=
\ No newline at end of file
+VITE_APP_FIREBASE_PROJECT_ID=
+VITE_APP_FIREBASE_PROJECT_WEB_API_KEY=
\ No newline at end of file
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
index 9ca97e44..5b13cc51 100644
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -6,8 +6,8 @@ on:
# paths:
# - "website/**"
env:
- REACT_APP_FIREBASE_PROJECT_ID: rowyio
- REACT_APP_FIREBASE_PROJECT_WEB_API_KEY:
+ VITE_APP_FIREBASE_PROJECT_ID: rowyio
+ VITE_APP_FIREBASE_PROJECT_WEB_API_KEY:
"${{ secrets.FIREBASE_WEB_API_KEY_TRYROWY }}"
CI: ""
jobs:
diff --git a/.gitignore b/.gitignore
index af599611..4e723f64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
# production
/build
+/dist
cloud_functions/functions/lib
# firebase
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4b6c33ba..c5187a36 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -17,16 +17,26 @@ Read the documentation on setting up your local development environment
Read how to submit a pull request [here](https://docs.rowy.io/contributing).
To get familiar with the project,
-[good first issues](https://github.com/rowyio/rowy/projects/3) is a good place
-to start.
+[good first issues](https://github.com/rowyio/rowy/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+is a good place to start.
## Working on existing issues
+Before you get started working on an
+[issue](https://github.com/rowyio/rowy/issues), please make sure to share that
+you are working on it by commenting on the issue and posting a message on
+#contributions channel in Rowy's
+[Discord](https://discord.com/invite/fjBugmvzZP). The maintainers will then
+assign the issue to you after making sure any relevant information or context in
+addition is provided before you can start on the task.
-
-Before you get started working on an [issue](https://github.com/rowyio/rowy/issues), please make sure to share that you are working on it by commenting on the issue and posting a message on #contributions channel in Rowy's [Discord](https://discord.com/invite/fjBugmvzZP). The maintainers will then assign the issue to you after making sure any relevant information or context in addition is provided before you can start on the task.
-
-Once you are assigned a task, please provide periodic updates or share any questions or roadblocks on either discord or the Github issue, so that the commmunity or the project maintainers can provide you any feedback or guidance as needed. If you are inactive for more than 1-2 week on a issue that was assigned to you, then we will assume you have stopped working on it and we will unassign it from you - so that we can give a chance to others in the community to work on it.
+Once you are assigned a task, please provide periodic updates or share any
+questions or roadblocks on either discord or the Github issue, so that the
+commmunity or the project maintainers can provide you any feedback or guidance
+as needed. If you are inactive for more than 1-2 week on a issue that was
+assigned to you, then we will assume you have stopped working on it and we will
+unassign it from you - so that we can give a chance to others in the community
+to work on it.
## File a feature request
@@ -35,10 +45,9 @@ create a new issue using
[Feature Request Template](https://github.com/rowyio/rowy/issues/new?assignees=&labels=&template=feature_request.md)
to share your idea. If you are working on this to contribute to the project,
then let others in the community and project maintainers know by posting on
-#contributions channel in Rowy's
-[Discord](https://discord.com/invite/fjBugmvzZP). This allows others in the
-community and the maintainers a chance to provide feedback and guidance before
-you spend time working on it.
+#contributions channel in Rowy's [Discord](https://rowy.io/discord). This allows
+others in the community and the maintainers a chance to provide feedback and
+guidance before you spend time working on it.
## Report an issue
diff --git a/README.md b/README.md
index 13e8317b..f2d5077c 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,24 @@
-
-
+
+
-
-✨ Low-code backend ✨
-Manage your database and build automations as easy as using a spreadsheet.
+✨ Airtable-like UI for managing database ✨ Build any automation, with or without code ✨
-Connect to your database (Firestore), manage data on an Airtable-like UI with role based access controls. Build cloud function workflows in JS/TS using any NPM or APIs. Forget CLIs, configs, and DevOps. Focus on building your apps with a platform designed for developer productivity. Low-code for Firebase and Google Cloud.
+Connect to your database and create Cloud Functions in low-code - without leaving your browser.
-[](https://discord.gg/fjBugmvzZP)
+[](https://discord.gg/fjBugmvzZP)
Website Documentation Discord Chat with us Twitter
@@ -27,26 +26,35 @@ Connect to your database (Firestore), manage data on an Airtable-like UI with ro
[](https://github.com/rowyio/rowy/stargazers/)
You need to enable JavaScript to run this app.
+
7
+ *
+ * number = 0;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 0
+ *
+ * number = 0.1;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 10
+ *
+ * number = 0.001;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 0.1
+ *
+ * number = 0.00001;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 0.001
+ *
+ * number = 100;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 10000
+ *
+ * number = 1999.99;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 199999
+ *
+ * number = 1999.999;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 199999.9
+ *
+ * number = 0.25;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 25
+ *
+ * number = 0.15;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 15
+ *
+ * number = 1.23456789;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 123.456789
+ *
+ * number = 0.0000000001;
+ * console.log(number, multiply100WithPrecision(number));
+ * --> 1e-8
+ */
+export const multiply100WithPrecision = (value: number) => {
+ if (value === 0) {
+ return 0;
+ }
+
+ let valueString = value.toString();
+
+ // e.g 1e-10 becomes 1e-8
+ if (valueString.includes("e")) {
+ return value * 100;
+ }
+
+ // if the number is integer, add .00
+ if (!valueString.includes(".")) {
+ valueString = valueString.concat(".00");
+ }
+
+ let [before, after] = valueString.split(".");
+
+ // if after decimal has only 1 digit, pad a 0
+ if (after.length === 1) {
+ after = after.concat("0");
+ }
+
+ let newNumber = `${before}${after.slice(0, 2)}.${after.slice(2)}`;
+ newNumber = trimEnd(trim(newNumber, "0"), ".");
+ if (newNumber.startsWith(".")) {
+ newNumber = "0" + newNumber;
+ }
+ return Number(newNumber);
+};
+
+/**
+ * Divide a number by 100 and return a string without floating point error
+ * by shifting the decimal point 2 places to the left as a string
+ */
+export const divide100WithPrecision = (value: number) => {
+ if (value === 0) {
+ return 0;
+ }
+
+ let valueString = value.toString();
+
+ // e.g 1e-10 becomes 1e-8
+ if (valueString.includes("e")) {
+ return value / 100;
+ }
+
+ // add decimal if integer
+ if (!valueString.includes(".")) {
+ valueString = valueString + ".";
+ }
+
+ let [before, after] = valueString.split(".");
+
+ // if before decimal has less than digit, pad 0
+ if (before.length < 2) {
+ before = "00" + before;
+ }
+
+ let newNumber = `${before.slice(0, before.length - 2)}.${before.slice(
+ before.length - 2
+ )}${after}`;
+ newNumber = trimEnd(trimEnd(newNumber, "0"), ".");
+ if (newNumber.startsWith(".")) {
+ newNumber = "0" + newNumber;
+ }
+ return Number(newNumber);
+};
diff --git a/src/components/fields/Rating/index.tsx b/src/components/fields/Rating/index.tsx
index 3712ffe7..b1f6ced9 100644
--- a/src/components/fields/Rating/index.tsx
+++ b/src/components/fields/Rating/index.tsx
@@ -6,6 +6,7 @@ import RatingIcon from "@mui/icons-material/StarBorder";
import DisplayCell from "./DisplayCell";
import EditorCell from "./EditorCell";
import { filterOperators } from "@src/components/fields/Number/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
const SideDrawerField = lazy(
() =>
@@ -44,5 +45,6 @@ export const config: IFieldConfig = {
return null;
}
},
+ contextMenuActions: BasicContextMenuActions,
};
export default config;
diff --git a/src/components/fields/Reference/index.tsx b/src/components/fields/Reference/index.tsx
index 0dd1c697..7a7ee267 100644
--- a/src/components/fields/Reference/index.tsx
+++ b/src/components/fields/Reference/index.tsx
@@ -7,6 +7,7 @@ import DisplayCell from "./DisplayCell";
import EditorCell from "./EditorCell";
import { filterOperators } from "@src/components/fields/ShortText/Filter";
import { valueFormatter } from "./filters";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
const SideDrawerField = lazy(
() =>
@@ -24,10 +25,12 @@ export const config: IFieldConfig = {
initializable: true,
icon:
- {sanitiseValue(value)}
+
+ {value && (
+
);
diff --git a/src/components/fields/SingleSelect/Settings.tsx b/src/components/fields/SingleSelect/Settings.tsx
index c028f874..9d8123fc 100644
--- a/src/components/fields/SingleSelect/Settings.tsx
+++ b/src/components/fields/SingleSelect/Settings.tsx
@@ -14,6 +14,10 @@ import {
} from "@mui/material";
import AddIcon from "@mui/icons-material/AddCircle";
import RemoveIcon from "@mui/icons-material/CancelRounded";
+import CheckIcon from "@mui/icons-material/CheckCircleRounded";
+import ColorSelect, {
+ SelectColorThemeOptions,
+} from "@src/components/SelectColors";
import {
DragDropContext,
@@ -23,6 +27,7 @@ import {
NotDraggingStyle,
} from "react-beautiful-dnd";
import DragIndicatorOutlinedIcon from "@mui/icons-material/DragIndicatorOutlined";
+import palette, { paletteToMui } from "@src/theme/palette";
const getItemStyle = (
isDragging: boolean,
@@ -33,10 +38,33 @@ const getItemStyle = (
...draggableStyle,
});
+export interface IColors extends SelectColorThemeOptions {
+ name: string;
+}
+
+export const getColors = (
+ list: IColors[],
+ option: string
+): SelectColorThemeOptions => {
+ const defaultColor = paletteToMui(palette.aGray);
+ const key = option.toLocaleLowerCase?.().replace(" ", "_").trim();
+ const color = list.find((opt: IColors) => opt.name === key);
+ // Null check in return
+ return color || defaultColor;
+};
+
export default function Settings({ onChange, config }: ISettingsProps) {
const listEndRef: any = useRef(null);
const options = config.options ?? [];
const [newOption, setNewOption] = useState("");
+ const [editOption, setEditOption] = useState({
+ oldOption: "",
+ newOption: "",
+ });
+
+ /* State for holding Chip Colors for Select and MultiSelect */
+ let colors = config.colors ?? [];
+
const handleAdd = () => {
if (newOption.trim() !== "") {
if (options.includes(newOption)) {
@@ -49,6 +77,77 @@ export default function Settings({ onChange, config }: ISettingsProps) {
}
};
+ const handleEdit = () => {
+ const { oldOption, newOption: _newOption } = editOption;
+ const newOption = _newOption.trim();
+ if (oldOption === newOption) {
+ setEditOption({
+ oldOption: "",
+ newOption: "",
+ });
+ return;
+ }
+
+ if (newOption !== "") {
+ if (options.includes(newOption)) {
+ window.alert(`"${newOption}" is already an option`);
+ } else {
+ const newOptions = options.map((option: string) =>
+ option === oldOption ? newOption : option
+ );
+ onChange("options")(newOptions);
+
+ handleChipColorChange("update", oldOption, undefined, newOption);
+
+ setEditOption({
+ oldOption: "",
+ newOption: "",
+ });
+ }
+ }
+ };
+
+ const handleChipColorChange = (
+ type: "save" | "delete" | "update",
+ key: string,
+ color?: SelectColorThemeOptions,
+ newKey?: string
+ ) => {
+ const _key = key.toLocaleLowerCase?.().replace(" ", "_").trim();
+ const exists = colors.findIndex((option: IColors) => option.name === _key);
+
+ // If saving Check if object with the `color.name` is equal to `_key` and replace value at the index of `exists`
+ // Else save new value with `_key` as `color.name`
+ if (type === "save") {
+ if (exists !== -1) {
+ colors[exists] = { name: _key, ...{ ...color } };
+ onChange("colors")(colors);
+ } else {
+ onChange("colors")([...colors, { name: _key, ...{ ...color } }]);
+ }
+ }
+ // If deleting Filter out object that has `color.name` equals to `_key`
+ if (type === "delete") {
+ const updatedColors = colors.filter(
+ (option: IColors) => option.name !== _key
+ );
+ onChange("colors")(updatedColors);
+ }
+
+ if (type === "update" && newKey) {
+ const _newKey = newKey.toLocaleLowerCase?.().replace(" ", "_").trim();
+ const updatedColors = colors.map((option: IColors) =>
+ option.name === _key ? { ...option, name: _newKey } : option
+ );
+ onChange("colors")(updatedColors);
+ }
+ };
+
+ const handleItemDelete = (option: string) => {
+ onChange("options")(options.filter((o: string) => o !== option));
+ handleChipColorChange("delete", option);
+ };
+
const handleOnDragEnd = (result: any) => {
if (!result.destination) return;
const [removed] = options.splice(result.source.index, 1);
@@ -91,7 +190,8 @@ export default function Settings({ onChange, config }: ISettingsProps) {
{option}
+
+
+ handleChipColorChange("save", option, color)
+ }
+ />
+
+ {editOption.oldOption === option ? (
+
+
+ setEditOption({
+ oldOption: option,
+ newOption: e.target.value,
+ })
+ }
+ value={editOption.newOption}
+ sx={{ flexGrow: 1 }}
+ autoFocus
+ onKeyPress={(e) => {
+ if (e.key === "Enter") {
+ handleEdit();
+ }
+ }}
+ onBlur={handleEdit}
+ />
+
+ {
+
+ ) : (
+ {
+ // While editing a field, if the user clicks on some other field
+ // This makes sure that the previous edit is saved
+ handleEdit();
+
+ setEditOption({
+ oldOption: option,
+ newOption: option,
+ });
+ }}
+ sx={{ "&:hover": { cursor: "pointer" } }}
+ >
+ {option}
+
+ )}
+
- onChange("options")(
- options.filter((o: string) => o !== option)
- )
- }
+ onClick={() => handleItemDelete(option)}
>
{
diff --git a/src/components/fields/SingleSelect/index.tsx b/src/components/fields/SingleSelect/index.tsx
index 83a23e3e..21d961c2 100644
--- a/src/components/fields/SingleSelect/index.tsx
+++ b/src/components/fields/SingleSelect/index.tsx
@@ -6,6 +6,7 @@ import { SingleSelect as SingleSelectIcon } from "@src/assets/icons";
import DisplayCell from "./DisplayCell";
import EditorCell from "./EditorCell";
import { filterOperators } from "@src/components/fields/ShortText/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
const SideDrawerField = lazy(
() =>
@@ -21,7 +22,7 @@ export const config: IFieldConfig = {
type: FieldType.singleSelect,
name: "Single Select",
group: "Select",
- dataType: "string | null",
+ dataType: "string",
initialValue: null,
initializable: true,
icon:
@@ -48,7 +53,11 @@ export default function Slider({ column, value }: IDisplayCellProps) {
maxWidth: "100%",
width: `${progress}%`,
- backgroundColor: resultColorsScale(progress / 100).toHex(),
+ backgroundColor: resultColorsScale(
+ percentage,
+ colors,
+ theme.palette.background.paper
+ ).toHex(),
}}
/>
diff --git a/src/components/fields/Slider/Settings.tsx b/src/components/fields/Slider/Settings.tsx
index c4bb268e..96009d04 100644
--- a/src/components/fields/Slider/Settings.tsx
+++ b/src/components/fields/Slider/Settings.tsx
@@ -1,7 +1,54 @@
+import { useState } from "react";
+
+import {
+ Box,
+ TextField,
+ FormControlLabel,
+ Switch,
+ MenuItem,
+ Checkbox,
+ Grid,
+ InputLabel,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import ColorPickerInput from "@src/components/ColorPickerInput";
import { ISettingsProps } from "@src/components/fields/types";
-import { TextField, FormControlLabel, Switch } from "@mui/material";
+
+import { Color, toColor } from "react-color-palette";
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { resultColorsScale, defaultColors } from "@src/utils/color";
+
+const colorLabels: { [key: string]: string } = {
+ 0: "Start",
+ 1: "Middle",
+ 2: "End",
+};
export default function Settings({ onChange, config }: ISettingsProps) {
+ const colors: string[] = config.colors ?? defaultColors;
+
+ const [checkStates, setCheckStates] = useState(
+ colors.map(Boolean)
+ );
+
+ const onCheckboxChange = (index: number, checked: boolean) => {
+ onChange("colors")(
+ colors.map((value: any, idx: number) =>
+ index === idx ? (checked ? value || defaultColors[idx] : null) : value
+ )
+ );
+ setCheckStates(
+ checkStates.map((value, idx) => (index === idx ? checked : value))
+ );
+ };
+
+ const handleColorChange = (index: number, color: Color): void => {
+ onChange("colors")(
+ colors.map((value, idx) => (index === idx ? color.hex : value))
+ );
+ };
+
return (
<>
+ {checkStates.map((checked: boolean, index: number) => {
+ const colorHex = colors[index];
+ return (
+
+ onCheckboxChange(index, !checked)}
+ />
+
+
+ {checked && (
+
+
+ `0 0 0 1px ${theme.palette.divider} inset`,
+ borderRadius: 0.5,
+ opacity: 0.5,
+ }}
+ />
+ {colorHex}
+
+ )}
+
+ {colorHex && (
+
+
+ handleColorChange(index, color)
+ }
+ disabled={!checkStates[index]}
+ />
+
+ )}
+
+
+ );
+ })}
+
+
+ Preview:
+
+ {[0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1].map((value) => {
+ return (
+
+
+ {value * 100}%
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/src/components/fields/Slider/index.tsx b/src/components/fields/Slider/index.tsx
index 06f7bce0..0356c4b3 100644
--- a/src/components/fields/Slider/index.tsx
+++ b/src/components/fields/Slider/index.tsx
@@ -5,6 +5,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
import { Slider as SliderIcon } from "@src/assets/icons";
import DisplayCell from "./DisplayCell";
import { filterOperators } from "@src/components/fields/Number/Filter";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
const SideDrawerField = lazy(
() =>
@@ -44,5 +45,6 @@ export const config: IFieldConfig = {
return null;
}
},
+ contextMenuActions: BasicContextMenuActions,
};
export default config;
diff --git a/src/components/fields/Status/utils/getLabelHelper.ts b/src/components/fields/Status/utils/getLabelHelper.ts
index 7cb8b33e..1ee73e52 100644
--- a/src/components/fields/Status/utils/getLabelHelper.ts
+++ b/src/components/fields/Status/utils/getLabelHelper.ts
@@ -63,7 +63,9 @@ export default function getLabel(value: any, conditions: any) {
let _label: any = undefined;
const isBoolean = Boolean(typeof value === "boolean");
const notBoolean = Boolean(typeof value !== "boolean");
- const isNullOrUndefined = Boolean(!value && notBoolean);
+ const isNullOrUndefined = Boolean(
+ (value === null || value === undefined) && notBoolean
+ );
const isNumeric = Boolean(typeof value === "number");
if (isNullOrUndefined) _label = getFalseyLabelFrom(conditions, value);
diff --git a/src/components/fields/SubTable/index.tsx b/src/components/fields/SubTable/index.tsx
index 7e153771..574c0a2e 100644
--- a/src/components/fields/SubTable/index.tsx
+++ b/src/components/fields/SubTable/index.tsx
@@ -31,5 +31,6 @@ export const config: IFieldConfig = {
SideDrawerField,
initializable: false,
requireConfiguration: true,
+ requireCollectionTable: true,
};
export default config;
diff --git a/src/components/fields/SubTable/utils.ts b/src/components/fields/SubTable/utils.ts
index 6f6c7746..79ae5dc1 100644
--- a/src/components/fields/SubTable/utils.ts
+++ b/src/components/fields/SubTable/utils.ts
@@ -2,6 +2,7 @@ import { useLocation } from "react-router-dom";
import { ROUTES } from "@src/constants/routes";
import { ColumnConfig, TableRow, TableRowRef } from "@src/types/table";
+import get from "lodash-es/get";
export const useSubTableData = (
column: ColumnConfig,
@@ -9,8 +10,8 @@ export const useSubTableData = (
_rowy_ref: TableRowRef
) => {
const label = (column.config?.parentLabel ?? []).reduce((acc, curr) => {
- if (acc !== "") return `${acc} - ${row[curr]}`;
- else return row[curr];
+ if (acc !== "") return `${acc} - ${get(row, curr)}`;
+ else return get(row, curr);
}, "");
const documentCount: string = row[column.fieldName]?.count ?? "";
diff --git a/src/components/fields/UpdatedAt/index.tsx b/src/components/fields/UpdatedAt/index.tsx
index d6e5eb92..10a16d73 100644
--- a/src/components/fields/UpdatedAt/index.tsx
+++ b/src/components/fields/UpdatedAt/index.tsx
@@ -4,6 +4,7 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
import { UpdatedAt as UpdatedAtIcon } from "@src/assets/icons";
import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
const SideDrawerField = lazy(
() =>
@@ -28,5 +29,7 @@ export const config: IFieldConfig = {
TableCell: withRenderTableCell(DisplayCell, null),
SideDrawerField,
settings: Settings,
+ requireCollectionTable: true,
+ contextMenuActions: BasicContextMenuActions,
};
export default config;
diff --git a/src/components/fields/UpdatedBy/index.tsx b/src/components/fields/UpdatedBy/index.tsx
index 4b1c3a42..5aacfaa8 100644
--- a/src/components/fields/UpdatedBy/index.tsx
+++ b/src/components/fields/UpdatedBy/index.tsx
@@ -5,6 +5,8 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
import { UpdatedBy as UpdatedByIcon } from "@src/assets/icons";
import DisplayCell from "./DisplayCell";
+import BasicContextMenuActions from "@src/components/Table/ContextMenu/BasicCellContextMenuActions";
+
const SideDrawerField = lazy(
() =>
import(
@@ -29,5 +31,7 @@ export const config: IFieldConfig = {
TableCell: withRenderTableCell(DisplayCell, null),
SideDrawerField,
settings: Settings,
+ requireCollectionTable: true,
+ contextMenuActions: BasicContextMenuActions,
};
export default config;
diff --git a/src/components/fields/User/DisplayCell.tsx b/src/components/fields/User/DisplayCell.tsx
index d299b6c5..2b059ed9 100644
--- a/src/components/fields/User/DisplayCell.tsx
+++ b/src/components/fields/User/DisplayCell.tsx
@@ -1,30 +1,111 @@
+import { useAtom } from "jotai";
+import { Avatar, AvatarGroup, ButtonBase, Stack, Tooltip } from "@mui/material";
+import { allUsersAtom, projectScope } from "@src/atoms/projectScope";
import { IDisplayCellProps } from "@src/components/fields/types";
+import { ChevronDown } from "@src/assets/icons/ChevronDown";
+import { UserDataType } from "./UserSelect";
-import { Tooltip, Stack, Avatar } from "@mui/material";
+export default function User({
+ value,
+ showPopoverCell,
+ disabled,
+ tabIndex,
+}: IDisplayCellProps) {
+ const [users] = useAtom(allUsersAtom, projectScope);
-import { format } from "date-fns";
-import { DATE_TIME_FORMAT } from "@src/constants/dates";
+ let userValue: UserDataType[] = [];
+ let emails = new Set();
-export default function User({ value, column }: IDisplayCellProps) {
- if (!value || !value.displayName) return null;
+ if (value !== undefined && value !== null) {
+ if (!Array.isArray(value)) {
+ value = [value.email];
+ }
+ for (const user of users) {
+ if (user.user && user.user?.email && value.includes(user.user.email)) {
+ if (!emails.has(user.user.email)) {
+ emails.add(user.user.email);
+ userValue.push(user.user);
+ }
+ }
+ }
+ }
- const chip = (
-
- {value.displayName}
+ if (userValue.length === 0) {
+ return (
+ showPopoverCell(true)}
+ style={{
+ width: "100%",
+ height: "100%",
+ font: "inherit",
+ color: "inherit !important",
+ letterSpacing: "inherit",
+ textAlign: "inherit",
+ justifyContent: "flex-end",
+ }}
+ tabIndex={tabIndex}
+ >
+
+ );
+ }
+
+ const rendered = (
+
+ {userValue.length > 1 ? (
+
+ {userValue.map((user: UserDataType) => (
+
+
+ ))}
+
+ ) : (
+ <>
+ {userValue[0].displayName}
+
+ )}
);
- if (!value.timestamp) return chip;
-
- const dateLabel = format(
- value.timestamp.toDate ? value.timestamp.toDate() : value.timestamp,
- column.config?.format || DATE_TIME_FORMAT
+ if (disabled) {
+ return rendered;
+ }
+ return (
+ showPopoverCell(true)}
+ style={{
+ width: "100%",
+ height: "100%",
+ font: "inherit",
+ color: "inherit !important",
+ letterSpacing: "inherit",
+ textAlign: "inherit",
+ justifyContent: "flex-start",
+ }}
+ tabIndex={tabIndex}
+ >
+ {rendered}
+
);
-
- return {chip} ;
}
diff --git a/src/components/fields/User/EditorCell.tsx b/src/components/fields/User/EditorCell.tsx
new file mode 100644
index 00000000..a65101dd
--- /dev/null
+++ b/src/components/fields/User/EditorCell.tsx
@@ -0,0 +1,6 @@
+import { IEditorCellProps } from "@src/components/fields/types";
+import UserSelect from "./UserSelect";
+
+export default function EditorCell({ ...props }: IEditorCellProps) {
+ return
+ Accept multiple value
+
+ Make this column to support multiple values.
+
+
+ }
+ control={
+ onChange("multiple")(e.target.checked)}
+ name="multiple"
+ />
+ }
+ />
+ );
+}
diff --git a/src/components/fields/User/SideDrawerField.tsx b/src/components/fields/User/SideDrawerField.tsx
index 1c21792a..8187bc83 100644
--- a/src/components/fields/User/SideDrawerField.tsx
+++ b/src/components/fields/User/SideDrawerField.tsx
@@ -1,50 +1,101 @@
-import { format } from "date-fns";
+import { useRef, useState } from "react";
+import { useAtom } from "jotai";
+import { Tooltip, Stack, AvatarGroup, Avatar } from "@mui/material";
+
+import { allUsersAtom, projectScope } from "@src/atoms/projectScope";
+import { fieldSx } from "@src/components/SideDrawer/utils";
+import { ChevronDown } from "@src/assets/icons/ChevronDown";
import { ISideDrawerFieldProps } from "@src/components/fields/types";
+import UserSelect, { UserDataType } from "./UserSelect";
-import { Box, Stack, Typography, Avatar } from "@mui/material";
-
-import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
-import { DATE_TIME_FORMAT } from "@src/constants/dates";
-
-export default function User({
+export default function SideDrawerSelect({
column,
- _rowy_ref,
value,
- onDirty,
onChange,
onSubmit,
disabled,
}: ISideDrawerFieldProps) {
- if (!value || !value.displayName || !value.timestamp)
- return
-
+ setOpen(true)}
+ direction="row"
+ sx={[
+ fieldSx,
+ {
+ alignItems: "center",
+ justifyContent: userValue.length > 0 ? "space-between" : "flex-end",
+ marginTop: "8px",
+ marginBottom: "8px",
+ },
+ ]}
>
- {value.displayName} ({value.email})
- {dateLabel && (
-
- {dateLabel}
-
+ {userValue.length === 0 ? null : userValue.length > 1 ? (
+
+ {userValue.map(
+ (user: UserDataType) =>
+ user && (
+
+
+ )
+ )}
+
+ ) : (
+
+
+
{userValue[0].displayName}
+
-
+
+ {
+ open?: boolean;
+ value: T;
+ onChange: (value: T) => void;
+ onSubmit: () => void;
+ parentRef?: PopoverProps["anchorEl"];
+ column: ColumnConfig;
+ disabled: boolean;
+ showPopoverCell: (value: boolean) => void;
+}
+
+export default function UserSelect({
+ open,
+ value,
+ onChange,
+ onSubmit,
+ parentRef,
+ column,
+ showPopoverCell,
+ disabled,
+}: IUserSelectProps) {
+ const [users] = useAtom(allUsersAtom, projectScope);
+
+ const options = useMemo(() => {
+ let options: UserOptionType[] = [];
+ let emails = new Set();
+ for (const user of users) {
+ if (user.user && user.user?.email) {
+ if (!emails.has(user.user.email)) {
+ emails.add(user.user.email);
+ options.push({
+ label: user.user.email,
+ value: user.user.email,
+ user: user.user,
+ });
+ }
+ }
+ }
+ return options;
+ }, [users]);
+
+ const filterOptions = createFilterOptions({
+ trim: true,
+ ignoreCase: true,
+ matchFrom: "start",
+ stringify: (option: UserOptionType) => option.user.displayName || "",
+ });
+
+ const renderOption: AutocompleteProps<
+ UserOptionType,
+ false,
+ false,
+ false
+ >["renderOption"] = (props, option) => {
+ return {
+ if (typeof v === "string") {
+ v = [v];
+ }
+ onChange(v);
+ }}
+ disabled={disabled}
+ clearText="Clear"
+ doneText="Done"
+ {...{
+ AutocompleteProps: {
+ renderOption,
+ filterOptions,
+ },
+ }}
+ onClose={() => {
+ onSubmit();
+ showPopoverCell(false);
+ }}
+ // itemRenderer={(option: UserOptionType) =>
+
+
+
+ {user.displayName ? user.displayName[0] : ""}
+
+ {user.displayName}
+
+
+
+ );
+};
diff --git a/src/components/fields/User/index.tsx b/src/components/fields/User/index.tsx
index b06680df..f7d42921 100644
--- a/src/components/fields/User/index.tsx
+++ b/src/components/fields/User/index.tsx
@@ -4,14 +4,14 @@ import withRenderTableCell from "@src/components/Table/TableCell/withRenderTable
import UserIcon from "@mui/icons-material/PersonOutlined";
import DisplayCell from "./DisplayCell";
+import EditorCell from "./EditorCell";
const SideDrawerField = lazy(
() =>
import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-User" */)
);
const Settings = lazy(
- () =>
- import("../CreatedBy/Settings" /* webpackChunkName: "Settings-CreatedBy" */)
+ () => import("./Settings" /* webpackChunkName: "Settings-User" */)
);
export const config: IFieldConfig = {
@@ -23,7 +23,10 @@ export const config: IFieldConfig = {
initialValue: null,
icon: {
column: ColumnConfig;
/** The row’s _rowy_ref object */
_rowy_ref: TableRowRef;
-
/** The field’s local value – synced with db when field is not dirty */
value: T;
/** Call when the user has input but changes have not been saved */
onDirty: (dirty?: boolean) => void;
/** Update the local value. Also calls onDirty */
- onChange: (T: any) => void;
+ onChange: (value: T) => void;
/** Call when user input is ready to be saved (e.g. onBlur) */
onSubmit: () => void;
/** Field locked. Do NOT check `column.locked` */
disabled: boolean;
+
+ row: TableRow;
}
export interface ISettingsProps {
diff --git a/src/constants/externalLinks.ts b/src/constants/externalLinks.ts
index a2b64de4..e501be4b 100644
--- a/src/constants/externalLinks.ts
+++ b/src/constants/externalLinks.ts
@@ -65,8 +65,10 @@ const WIKI_PATHS = {
webhooks: "/webhooks",
importAirtable: "/import-export-data/import-airtable",
- importAirtableApiKey: "/import-export-data/import-airtable#api-key",
- importAirtableTableUrl: "/import-export-data/import-airtable#table-url",
+ importAirtableApiKey:
+ "/import-export-data/import-airtable#retrieving-the-airtable-api-key",
+ importAirtableTableUrl:
+ "/import-export-data/import-airtable#obtaining-the-airtable-table-url",
cloudLogs: "/cloud-logs",
};
export const WIKI_LINKS = mapValues(
diff --git a/src/constants/fields.ts b/src/constants/fields.ts
index 900b88db..78aba3ca 100644
--- a/src/constants/fields.ts
+++ b/src/constants/fields.ts
@@ -28,6 +28,7 @@ export enum FieldType {
// CONNECTION
connector = "CONNECTOR",
subTable = "SUB_TABLE",
+ arraySubTable = "ARRAY_SUB_TABLE",
reference = "REFERENCE",
connectTable = "DOCUMENT_SELECT",
connectService = "SERVICE_SELECT",
@@ -35,6 +36,7 @@ export enum FieldType {
json = "JSON",
code = "CODE",
markdown = "MARKDOWN",
+ array = "ARRAY",
// CLOUD FUNCTION
action = "ACTION",
derivative = "DERIVATIVE",
diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx
index af23e2cd..ec1f496f 100644
--- a/src/constants/routes.tsx
+++ b/src/constants/routes.tsx
@@ -16,17 +16,15 @@ export enum ROUTES {
pageNotFound = "/404",
tables = "/tables",
- automations = "/automations",
- functions = "/functions",
- function = "/function",
- functionWithId = "/function/:id",
table = "/table",
tableWithId = "/table/:id",
/** Nested route: `/table/:id/subTable/...` */
subTable = "subTable",
+ arraySubTable = "arraySubTable",
/** Nested route: `/table/:id/subTable/...` */
subTableWithId = "subTable/:docPath/:subTableKey",
+ arraySubTableWithId = "arraySubTable/:docPath/:subTableKey",
/** @deprecated Redirects to /table */
tableGroup = "/tableGroup",
/** @deprecated Redirects to /table */
diff --git a/src/hooks/useDocumentTitle.ts b/src/hooks/useDocumentTitle.ts
index 54148dca..6b7d11b3 100644
--- a/src/hooks/useDocumentTitle.ts
+++ b/src/hooks/useDocumentTitle.ts
@@ -2,11 +2,11 @@ import { useEffect } from "react";
const DOCUMENT_TITLE_BASE =
"Rowy" +
- (process.env.NODE_ENV === "production"
+ (import.meta.env.MODE === "production"
? ""
: ` (${
- process.env.REACT_APP_FIREBASE_EMULATORS ? "Emulator • " : ""
- }${process.env.NODE_ENV.replace("development", "dev")})`);
+ import.meta.env.VITE_APP_FIREBASE_EMULATORS ? "Emulator • " : ""
+ }${import.meta.env.MODE.replace("development", "dev")})`);
/**
* Sets the document/tab title and resets when the page is changed
diff --git a/src/hooks/useFirebaseStorageUploader.tsx b/src/hooks/useFirebaseStorageUploader.tsx
index 2be914fd..4e69cbd8 100644
--- a/src/hooks/useFirebaseStorageUploader.tsx
+++ b/src/hooks/useFirebaseStorageUploader.tsx
@@ -127,14 +127,11 @@ const useFirebaseStorageUploader = () => {
- Fix
+ Learn More
diff --git a/src/hooks/useFirestoreDocAsCollectionWithAtom.ts b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
new file mode 100644
index 00000000..9d204544
--- /dev/null
+++ b/src/hooks/useFirestoreDocAsCollectionWithAtom.ts
@@ -0,0 +1,480 @@
+import { useCallback, useEffect } from "react";
+import useMemoValue from "use-memo-value";
+import { useAtom, PrimitiveAtom, useSetAtom } from "jotai";
+import { orderBy } from "lodash-es";
+import { useSnackbar } from "notistack";
+
+import {
+ Firestore,
+ doc,
+ refEqual,
+ onSnapshot,
+ FirestoreError,
+ DocumentReference,
+ runTransaction,
+} from "firebase/firestore";
+import { useErrorHandler } from "react-error-boundary";
+
+import { projectScope } from "@src/atoms/projectScope";
+import {
+ ArrayTableRowData,
+ DeleteCollectionDocFunction,
+ TableRow,
+ TableSort,
+ UpdateCollectionDocFunction,
+} from "@src/types/table";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { omitRowyFields } from "@src/utils/table";
+
+type UpdateFunction = (rows: T[]) => T[];
+
+/** Options for {@link useFirestoreDocWithAtom} */
+interface IUseFirestoreDocWithAtomOptions {
+ /** Called when an error occurs. Make sure to wrap in useCallback! If not provided, errors trigger the nearest ErrorBoundary. */
+ onError?: (error: FirestoreError) => void;
+ /** Optionally disable Suspense */
+ disableSuspense?: boolean;
+ /** Optionally create the document if it doesn’t exist with the following data */
+ createIfNonExistent?: T;
+ /** Set this atom’s value to a function that updates the document. Uses same scope as `dataScope`. */
+ // updateDataAtom?: PrimitiveAtom | undefined>;
+ updateDocAtom?: PrimitiveAtom | undefined>;
+ deleteDocAtom?: PrimitiveAtom;
+ sorts?: TableSort[];
+}
+
+/**
+ * Attaches a listener for a Firestore document and unsubscribes on unmount.
+ * Gets the Firestore instance initiated in projectScope.
+ * Updates an atom and Suspends that atom until the first snapshot is received.
+ *
+ * @param dataAtom - Atom to store data in
+ * @param dataScope - Atom scope
+ * @param path - Document path. If falsy, the listener isn’t created at all.
+ * @param fieldName - Parent field name
+ * @param options - {@link IUseFirestoreDocWithAtomOptions}
+ */
+export function useFirestoreDocAsCollectionWithAtom(
+ dataAtom: PrimitiveAtom,
+ dataScope: Parameters[1] | undefined,
+ path: string,
+ fieldName: string,
+ options: IUseFirestoreDocWithAtomOptions
+) {
+ // Destructure options so they can be used as useEffect dependencies
+ const {
+ onError,
+ disableSuspense,
+ createIfNonExistent,
+ updateDocAtom,
+ deleteDocAtom,
+ sorts,
+ } = options || {};
+
+ const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
+ const setDataAtom = useSetAtom(dataAtom, dataScope);
+ const { addRow, deleteRow, deleteField, updateTable } = useAlterArrayTable(
+ {
+ firebaseDb,
+ dataAtom,
+ dataScope,
+ sorts,
+ path,
+ fieldName,
+ }
+ );
+ const handleError = useErrorHandler();
+ const { enqueueSnackbar } = useSnackbar();
+ const setUpdateDocAtom = useSetAtom(
+ updateDocAtom || (dataAtom as any),
+ dataScope
+ );
+ const setDeleteRowAtom = useSetAtom(
+ deleteDocAtom || (dataAtom as any),
+ dataScope
+ );
+
+ // Create the doc ref and memoize using Firestore’s refEqual
+ const memoizedDocRef = useMemoValue(
+ getDocRef(firebaseDb, path),
+ (next, prev) => refEqual(next as any, prev as any)
+ );
+
+ useEffect(() => {
+ // If path is invalid and no memoizedDocRef was created, don’t continue
+ if (!memoizedDocRef) return;
+
+ // Suspend data atom until we get the first snapshot
+ let suspended = false;
+ if (!disableSuspense) {
+ setDataAtom(new Promise(() => []) as unknown as T[]);
+ suspended = true;
+ }
+
+ // Create a listener for the document
+ const unsubscribe = onSnapshot(
+ memoizedDocRef,
+ { includeMetadataChanges: true },
+ (docSnapshot) => {
+ try {
+ if (docSnapshot.exists() && docSnapshot.data() !== undefined) {
+ const pseudoDoc = docSnapshot.get(fieldName) || [];
+ const pseudoRow = pseudoDoc.map((row: any, i: number) => {
+ return {
+ ...row,
+ _rowy_ref: {
+ path: docSnapshot.ref.path,
+ id: docSnapshot.ref.id,
+ arrayTableData: {
+ index: i,
+ parentField: fieldName,
+ },
+ },
+ };
+ });
+ const sorted = sortRows(pseudoRow, sorts);
+ setDataAtom(sorted);
+ } else {
+ enqueueSnackbar(`Array table doesn't exist`, {
+ variant: "error",
+ });
+ // console.log("docSnapshot", docSnapshot.data());
+ // setDataAtom([] as T[]);
+ }
+ } catch (error) {
+ if (onError) onError(error as FirestoreError);
+ else handleError(error);
+ }
+ suspended = false;
+ },
+ (error) => {
+ if (suspended) setDataAtom([] as T[]);
+ if (onError) onError(error);
+ else handleError(error);
+ }
+ );
+
+ // When the listener will change, unsubscribe
+ return () => {
+ unsubscribe();
+ };
+ }, [
+ memoizedDocRef,
+ onError,
+ setDataAtom,
+ disableSuspense,
+ createIfNonExistent,
+ handleError,
+ fieldName,
+ sorts,
+ enqueueSnackbar,
+ ]);
+
+ const setRows = useCallback(
+ (updateFunction: UpdateFunction) => {
+ if (!fieldName) return;
+
+ try {
+ return runTransaction(firebaseDb, async (transaction) => {
+ const docRef = doc(firebaseDb, path);
+ const docSnap = await transaction.get(docRef);
+ const rows = docSnap.data()?.[fieldName] || [];
+
+ const updatedRows = updateFunction(rows);
+
+ return await transaction.set(
+ docRef,
+ { [fieldName]: updatedRows },
+ { merge: true }
+ );
+ });
+ } catch (error) {
+ enqueueSnackbar(`Error updating array table`, {
+ variant: "error",
+ });
+ return;
+ }
+ },
+ [enqueueSnackbar, fieldName, firebaseDb, path]
+ );
+
+ useEffect(() => {
+ if (deleteDocAtom) {
+ setDeleteRowAtom(() => (_: string, options?: ArrayTableRowData) => {
+ if (!options || options.index === undefined) return;
+ const updateFunction = deleteRow(options.index);
+ return setRows(updateFunction);
+ });
+ }
+ }, [
+ deleteDocAtom,
+ deleteRow,
+ fieldName,
+ firebaseDb,
+ path,
+ setDataAtom,
+ setDeleteRowAtom,
+ setRows,
+ sorts,
+ ]);
+
+ useEffect(() => {
+ if (updateDocAtom) {
+ setUpdateDocAtom(
+ () =>
+ (
+ _: string,
+ update: T,
+ deleteFields?: string[],
+ options?: ArrayTableRowData
+ ) => {
+ if (options === undefined) return;
+
+ const deleteRowFields = () => {
+ if (options.index === undefined) return;
+
+ const updateFunction = deleteField(options.index, deleteFields);
+ return setRows(updateFunction);
+ };
+
+ const updateRowValues = () => {
+ if (options.index === undefined) return;
+
+ const updateFunction = updateTable(options.index, update);
+ return setRows(updateFunction);
+ };
+
+ const addNewRow = (addTo: "top" | "bottom", base?: T) => {
+ const updateFunction = addRow(addTo, base ?? update);
+ return setRows(updateFunction);
+ };
+
+ if (Array.isArray(deleteFields) && deleteFields.length > 0) {
+ return deleteRowFields();
+ } else if (options.operation?.addRow) {
+ return addNewRow(
+ options.operation.addRow,
+ options?.operation.base as T
+ );
+ } else {
+ return updateRowValues();
+ }
+ }
+ );
+ }
+ }, [
+ addRow,
+ deleteField,
+ fieldName,
+ firebaseDb,
+ path,
+ setDataAtom,
+ setRows,
+ setUpdateDocAtom,
+ sorts,
+ updateDocAtom,
+ updateTable,
+ ]);
+}
+
+export default useFirestoreDocAsCollectionWithAtom;
+
+function useAlterArrayTable({
+ firebaseDb,
+ dataAtom,
+ dataScope,
+ sorts,
+ path,
+ fieldName,
+}: {
+ firebaseDb: Firestore;
+ dataAtom: PrimitiveAtom;
+ dataScope: Parameters[1] | undefined;
+ sorts: TableSort[] | undefined;
+ path: string;
+ fieldName: string;
+}) {
+ const setData = useSetAtom(dataAtom, dataScope);
+
+ const add = useCallback(
+ (addTo: "top" | "bottom", base?: T): UpdateFunction => {
+ if (base) {
+ base = omitRowyFields(base);
+ }
+ const newRow = (i: number, meta: boolean) => {
+ const _meta = {
+ _rowy_ref: {
+ id: doc(firebaseDb, path).id,
+ path: doc(firebaseDb, path).path,
+ arrayTableData: {
+ index: i,
+ parentField: fieldName,
+ },
+ },
+ };
+ if (meta === true) {
+ return {
+ ...(base ?? {}),
+ ..._meta,
+ } as T;
+ }
+ return {
+ ...(base ?? {}),
+ } as T;
+ };
+
+ setData((prevData) => {
+ prevData = unsortRows(prevData);
+
+ if (addTo === "bottom") {
+ prevData.push(newRow(prevData.length, true));
+ } else {
+ const modifiedPrevData = prevData.map((row: any, i: number) => {
+ return {
+ ...row,
+ _rowy_ref: {
+ ...row._rowy_ref,
+ arrayTableData: {
+ index: i + 1,
+ parentField: fieldName,
+ },
+ },
+ };
+ });
+ prevData = [newRow(0, true), ...modifiedPrevData];
+ }
+ return sortRows(prevData, sorts);
+ });
+
+ return (rows) => {
+ if (addTo === "bottom") {
+ rows.push(newRow(rows.length, false));
+ } else {
+ rows = [newRow(0, false), ...rows];
+ }
+ return rows;
+ };
+ },
+ [fieldName, firebaseDb, path, setData, sorts]
+ );
+
+ const _delete = useCallback(
+ (index: number): UpdateFunction => {
+ setData((prevData) => {
+ prevData = unsortRows(prevData);
+ prevData.splice(index, 1);
+ for (let i = index; i < prevData.length; i++) {
+ // @ts-ignore
+ prevData[i]._rowy_ref.arrayTableData.index = i;
+ }
+ return sortRows(prevData, sorts);
+ });
+ return (rows) => {
+ rows.splice(index, 1);
+ return [...rows];
+ };
+ },
+ [setData, sorts]
+ );
+
+ const deleteField = useCallback(
+ (index: number, deleteFields?: string[]): UpdateFunction => {
+ setData((prevData) => {
+ prevData = unsortRows(prevData);
+
+ if (deleteFields === undefined) return prevData;
+
+ prevData[index] = {
+ ...prevData[index],
+ ...deleteFields?.reduce(
+ (acc, field) => ({ ...acc, [field]: undefined }),
+ {}
+ ),
+ };
+
+ return sortRows(prevData, sorts);
+ });
+ return (rows) => {
+ if (deleteFields === undefined) return rows;
+
+ rows[index] = {
+ ...rows[index],
+ ...deleteFields?.reduce(
+ (acc, field) => ({ ...acc, [field]: undefined }),
+ {}
+ ),
+ };
+
+ return rows;
+ };
+ },
+ [setData, sorts]
+ );
+
+ const update = useCallback(
+ (index: number, update: Partial): UpdateFunction => {
+ setData((prevData) => {
+ prevData = unsortRows(prevData);
+ prevData[index] = {
+ ...prevData[index],
+ ...update,
+ };
+
+ return sortRows(prevData, sorts);
+ });
+
+ return (rows) => {
+ rows[index] = {
+ ...rows[index],
+ ...update,
+ };
+ return rows;
+ };
+ },
+ [setData, sorts]
+ );
+
+ return {
+ addRow: add,
+ deleteRow: _delete,
+ deleteField: deleteField,
+ updateTable: update,
+ };
+}
+
+/**
+ * Create the Firestore document reference.
+ * Put code in a function so the results can be compared by useMemoValue.
+ */
+export const getDocRef = (
+ firebaseDb: Firestore,
+ path: string | undefined,
+ pathSegments?: Array
+) => {
+ if (!path || (Array.isArray(pathSegments) && pathSegments?.some((x) => !x)))
+ return null;
+
+ return doc(
+ firebaseDb,
+ path,
+ ...((pathSegments as string[]) || [])
+ ) as DocumentReference;
+};
+
+function sortRows(
+ rows: T[],
+ sorts: TableSort[] | undefined
+): T[] {
+ if (sorts === undefined || sorts.length < 1) {
+ return rows;
+ }
+
+ const order: "asc" | "desc" =
+ sorts[0].direction === undefined ? "asc" : sorts[0].direction;
+
+ return orderBy(rows, [sorts[0].key], [order]);
+}
+
+function unsortRows(rows: T[]): T[] {
+ return orderBy(rows, ["_rowy_ref.arrayTableData.index"], ["asc"]);
+}
diff --git a/src/hooks/useOffline.ts b/src/hooks/useOffline.ts
index ad5cb199..5dd9ffd5 100644
--- a/src/hooks/useOffline.ts
+++ b/src/hooks/useOffline.ts
@@ -5,10 +5,24 @@ export default function useOffline() {
const handleOffline = () => setIsOffline(true);
const handleOnline = () => setIsOffline(false);
+ const checkOnlineStatus = async () => {
+ try {
+ const res = await fetch("https://httpbin.org/get", { cache: "no-store" });
+ if (res.status >= 200 && res.status < 300) {
+ handleOnline();
+ } else {
+ handleOffline();
+ }
+ } catch (error) {
+ handleOffline();
+ }
+ };
useEffect(() => {
// Need to set here because the listener doesn’t fire on initial load
setIsOffline(!window.navigator.onLine);
-
+ if (!window.navigator.onLine) {
+ checkOnlineStatus();
+ }
window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
index 031056c1..546c3d08 100644
--- a/src/layouts/AuthLayout.tsx
+++ b/src/layouts/AuthLayout.tsx
@@ -105,18 +105,25 @@ export default function AuthLayout({
display: "flex",
flexDirection: "column",
+ justifyContent: "center",
+ alignContent: "center",
"& > :not(style) + :not(style)": { mt: 4 },
} as any
}
>
{title && (
-
+
{title}
)}
{description && (
-
+
{description}
)}
@@ -126,6 +133,7 @@ export default function AuthLayout({
justifyContent="center"
alignItems="flex-start"
style={{ flexGrow: 1 }}
+ margin="auto"
>
{children}
@@ -146,6 +154,7 @@ export default function AuthLayout({
Project: {projectId}
diff --git a/src/pages/FunctionPage.tsx b/src/pages/FunctionPage.tsx
deleted file mode 100644
index 721eefb1..00000000
--- a/src/pages/FunctionPage.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Suspense } from "react";
-import { useAtom, Provider } from "jotai";
-import { useParams } from "react-router-dom";
-import { isEmpty } from "lodash-es";
-
-import { Fade } from "@mui/material";
-
-//import TableHeaderSkeleton from "@src/components/Table/Skeleton/TableHeaderSkeleton";
-//import TableSkeleton from "@src/components/Table/Skeleton/TableSkeleton";
-//import EmptyTable from "@src/components/Table/EmptyTable";
-import Function from "@src/components/Function";
-
-import { currentUserAtom, projectScope } from "@src/atoms/projectScope";
-// import TableSourceFirestore from "@src/sources/TableSourceFirestore";
-// import {
-// tableScope,
-// tableIdAtom,
-// tableSettingsAtom,
-// tableSchemaAtom,
-// } from "@src/atoms/tableScope";
-
-export default function FunctionPage() {
- // const [tableId] = useAtom(tableIdAtom, tableScope);
- // const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
- // const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
-
- // console.log(tableSchema);
-
- // if (isEmpty(tableSchema.columns))
- // return (
- //
- //
- //
- //
- // );
-
- return
- {/* */}
- {/* */}
-
- );
-}
diff --git a/src/pages/FunctionsPage.tsx b/src/pages/FunctionsPage.tsx
deleted file mode 100644
index dd1dcd93..00000000
--- a/src/pages/FunctionsPage.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { useAtom, useSetAtom } from "jotai";
-import { find, groupBy } from "lodash-es";
-
-import {
- Container,
- Stack,
- Typography,
- ToggleButtonGroup,
- ToggleButton,
- Tooltip,
- Fab,
- Checkbox,
- IconButton,
- Zoom,
-} from "@mui/material";
-import ViewListIcon from "@mui/icons-material/ViewListOutlined";
-import ViewGridIcon from "@mui/icons-material/ViewModuleOutlined";
-import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
-import FavoriteIcon from "@mui/icons-material/Favorite";
-import EditIcon from "@mui/icons-material/EditOutlined";
-import AddIcon from "@mui/icons-material/Add";
-
-import FloatingSearch from "@src/components/FloatingSearch";
-import SlideTransition from "@src/components/Modal/SlideTransition";
-import FunctionGrid from "@src/components/Functions/FunctionGrid";
-import FunctionList from "@src/components/Functions/FunctionList";
-import HomeWelcomePrompt from "@src/components/Functions/HomeWelcomePrompt";
-import EmptyState from "@src/components/EmptyState";
-
-import {
- projectScope,
- userRolesAtom,
- userSettingsAtom,
- updateUserSettingsAtom,
- tablesAtom,
- tablesViewAtom,
- tableSettingsDialogAtom,
-} from "@src/atoms/projectScope";
-import { TableSettings } from "@src/types/table";
-import { ROUTES } from "@src/constants/routes";
-import useBasicSearch from "@src/hooks/useBasicSearch";
-import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
-
-const SEARCH_KEYS = ["id", "name", "section", "description"];
-
-export default function HomePage() {
- const [userRoles] = useAtom(userRolesAtom, projectScope);
- const [userSettings] = useAtom(userSettingsAtom, projectScope);
- const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope);
- const [tables] = useAtom(tablesAtom, projectScope);
- const [view, setView] = useAtom(tablesViewAtom, projectScope);
- const openTableSettingsDialog = useSetAtom(
- tableSettingsDialogAtom,
- projectScope
- );
-
- const [results, query, handleQuery] = useBasicSearch(
- tables ?? [],
- SEARCH_KEYS
- );
-
- const favorites = Array.isArray(userSettings.favoriteTables)
- ? userSettings.favoriteTables
- : [];
- const sections: Record = {
- Favorites: favorites.map((id) => find(results, { id })) as TableSettings[],
- ...groupBy(results, "section"),
- };
-
- if (!Array.isArray(tables))
- throw new Error(
- "Project settings are not configured correctly. `tables` is not an array."
- );
-
- const createFunctionFab = (
-
-
- openTableSettingsDialog({ mode: "create" })}
- sx={{
- zIndex: "speedDial",
- position: "fixed",
- bottom: (theme) => ({
- xs: `max(${theme.spacing(2)}, env(safe-area-inset-bottom))`,
- sm: `max(${theme.spacing(3)}, env(safe-area-inset-bottom))`,
- }),
- right: (theme) => ({
- xs: `max(${theme.spacing(2)}, env(safe-area-inset-right))`,
- sm: `max(${theme.spacing(3)}, env(safe-area-inset-right))`,
- }),
- }}
- >
-
-
-
- );
-
- if (tables.length === 0) {
- if (userRoles.includes("ADMIN"))
- return (
- <>
- ) => {
- const favoriteTables = e.target.checked
- ? [...favorites, id]
- : favorites.filter((f) => f !== id);
-
- if (updateUserSettings) updateUserSettings({ favoriteTables });
- };
-
- const getActions = (table: TableSettings) => (
- <>
- {userRoles.includes("ADMIN") && (
-
- openTableSettingsDialog({ mode: "update", data: table })
- }
- size={view === "list" ? "large" : undefined}
- >
-
- )}
-
-
- }
- name={`favorite-${table.id}`}
- inputProps={{ "aria-label": "Favorite" }}
- sx={view === "list" ? { p: 1.5 } : undefined}
- color="secondary"
- />
-
- );
-
- return (
-
- handleQuery(e.target.value)}
- paperSx={{
- maxWidth: (theme) => ({ md: theme.breakpoints.values.sm - 48 }),
- mb: { xs: 2, md: -6 },
- }}
- />
-
-
-
-
- {query ? `${results.length} of ${tables.length}` : tables.length}{" "}
- tables
-
-
- {
- if (v !== null) setView(v);
- }}
- aria-label="Table view"
- sx={{ "& .MuiToggleButton-root": { borderRadius: 2 } }}
- >
-
-
-
-
-
-
-
-
- {view === "list" ? (
-
- );
-}
diff --git a/src/pages/Table/ProvidedArraySubTablePage.tsx b/src/pages/Table/ProvidedArraySubTablePage.tsx
new file mode 100644
index 00000000..56efae4b
--- /dev/null
+++ b/src/pages/Table/ProvidedArraySubTablePage.tsx
@@ -0,0 +1,155 @@
+import { lazy, Suspense, useMemo } from "react";
+import { useAtom, Provider } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { DebugAtoms } from "@src/atoms/utils";
+import { ErrorBoundary } from "react-error-boundary";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { find, isEqual } from "lodash-es";
+
+import Modal from "@src/components/Modal";
+import BreadcrumbsSubTable from "@src/components/Table/Breadcrumbs/BreadcrumbsSubTable";
+import ErrorFallback from "@src/components/ErrorFallback";
+import ArraySubTableSourceFirestore from "@src/sources/TableSourceFirestore/ArraySubTableSourceFirestore";
+import TableToolbarSkeleton from "@src/components/TableToolbar/TableToolbarSkeleton";
+import TableSkeleton from "@src/components/Table/TableSkeleton";
+
+import { projectScope, currentUserAtom } from "@src/atoms/projectScope";
+import {
+ tableScope,
+ tableIdAtom,
+ tableSettingsAtom,
+ tableSchemaAtom,
+} from "@src/atoms/tableScope";
+import { ROUTES } from "@src/constants/routes";
+import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
+import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
+
+// prettier-ignore
+const TablePage = lazy(() => import("./TablePage" /* webpackChunkName: "TablePage" */));
+
+/**
+ * Wraps `TablePage` with the data for a array-sub-table.
+ *
+ * Differences to `ProvidedTablePage`:
+ * - Renders a `Modal`
+ * - When this is a child of `ProvidedTablePage`, the `TablePage` rendered for
+ * the root table has its modals disabled
+ */
+export default function ProvidedArraySubTablePage() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ // Get params from URL: /arraySubTable/:docPath/:subTableKey
+ const { docPath, subTableKey } = useParams();
+
+ const [currentUser] = useAtom(currentUserAtom, projectScope);
+
+ // Get table settings and the source column from root table
+ const [rootTableSettings] = useAtom(tableSettingsAtom, tableScope);
+ const [sourceColumn] = useAtom(
+ useMemo(
+ () =>
+ selectAtom(
+ tableSchemaAtom,
+ (tableSchema) => find(tableSchema.columns, ["key", subTableKey]),
+ isEqual
+ ),
+ [subTableKey]
+ ),
+ tableScope
+ );
+
+ // Consumed by children as `tableSettings.collection`
+ const subTableCollection = docPath ?? ""; // + "/" + (sourceColumn?.fieldName || subTableKey);
+
+ // Must be compatible with `getTableSchemaPath`: tableId/rowId/subTableKey
+ // This is why we can’t have a sub-table column fieldName !== key
+ const subTableId =
+ docPath?.replace(rootTableSettings.collection, rootTableSettings.id) +
+ "/" +
+ subTableKey;
+
+ // Write fake tableSettings
+ const subTableSettings = {
+ ...rootTableSettings,
+ collection: subTableCollection,
+ id: subTableId,
+ subTableKey,
+ isCollection: false,
+ tableType: "primaryCollection" as "primaryCollection",
+ name: sourceColumn?.name || subTableKey || "",
+ };
+
+ const rootTableLink = location.pathname.split("/" + ROUTES.arraySubTable)[0];
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Table/TablePage.tsx b/src/pages/Table/TablePage.tsx
index 04fc0e61..421be174 100644
--- a/src/pages/Table/TablePage.tsx
+++ b/src/pages/Table/TablePage.tsx
@@ -33,6 +33,7 @@ import {
tableSchemaAtom,
columnModalAtom,
tableModalAtom,
+ tableSortsAtom,
} from "@src/atoms/tableScope";
import useBeforeUnload from "@src/hooks/useBeforeUnload";
import ActionParamsProvider from "@src/components/fields/Action/FormDialog/Provider";
@@ -41,6 +42,7 @@ import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
import { DRAWER_COLLAPSED_WIDTH } from "@src/components/SideDrawer";
import { formatSubTableName } from "@src/utils/table";
+import { TableToolsType } from "@src/types/table";
// prettier-ignore
const BuildLogsSnack = lazy(() => import("@src/components/TableModals/CloudLogsModal/BuildLogs/BuildLogsSnack" /* webpackChunkName: "TableModals-BuildLogsSnack" */));
@@ -53,6 +55,8 @@ export interface ITablePageProps {
disableModals?: boolean;
/** Disable side drawer */
disableSideDrawer?: boolean;
+ /** list of table tools to be disabled */
+ disabledTools?: TableToolsType;
}
/**
@@ -71,6 +75,7 @@ export interface ITablePageProps {
export default function TablePage({
disableModals,
disableSideDrawer,
+ disabledTools,
}: ITablePageProps) {
const [userRoles] = useAtom(userRolesAtom, projectScope);
const [userSettings] = useAtom(userSettingsAtom, projectScope);
@@ -127,7 +132,7 @@ export default function TablePage({
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5f..00000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// (firebaseDb, getTableSchemaPath(tableSettings)),
+ (next, prev) => refEqual(next as any, prev as any)
+ );
+
+ setTableNextPage({
+ loading: false,
+ available: false,
+ });
+ useEffect(() => {
+ if (!tableSchemaDocRef) return;
+
+ setUpdateTableSchema(
+ () => (update: TableSchema, deleteFields?: string[]) => {
+ const updateToDb = cloneDeep(update);
+
+ if (Array.isArray(deleteFields)) {
+ for (const field of deleteFields) {
+ // Use deterministic set firestore sentinel's on schema columns config
+ // Required for nested columns
+ // i.e field = "columns.base.nested.nested"
+ // key: columns, rest: base.nested.nested
+ // set columns["base.nested.nested"] instead columns.base.nested.nested
+ const [key, ...rest] = field.split(".");
+ if (key === "columns") {
+ (updateToDb as any).columns[rest.join(".")] = deleteField();
+ } else {
+ set(updateToDb, field, deleteField());
+ }
+ }
+ }
+
+ // Update UI state to reflect changes immediately to prevent flickering effects
+ setTableSchema((tableSchema) => ({ ...tableSchema, ...update }));
+
+ return setDoc(tableSchemaDocRef, updateToDb, { merge: true }).catch(
+ (e) => {
+ enqueueSnackbar((e as Error).message, { variant: "error" });
+ }
+ );
+ }
+ );
+
+ return () => {
+ setUpdateTableSchema(undefined);
+ };
+ }, [tableSchemaDocRef, setTableSchema, setUpdateTableSchema, enqueueSnackbar]);
+
+ // Get tableSchema and store in tableSchemaAtom.
+ // If it doesn’t exist, initialize columns
+ useFirestoreDocWithAtom(
+ tableSchemaAtom,
+ tableScope,
+ getTableSchemaPath(tableSettings),
+ {
+ createIfNonExistent: { columns: {} },
+ disableSuspense: true,
+ }
+ );
+
+ // Get table sorts
+ const [sorts] = useAtom(tableSortsAtom, tableScope);
+ // Get documents from collection and store in tableRowsDbAtom
+ // and handle some errors with snackbars
+ const elevateError = useErrorHandler();
+ const handleErrorCallback = useCallback(
+ (error: FirestoreError) =>
+ handleFirestoreError(error, enqueueSnackbar, elevateError),
+ [enqueueSnackbar, elevateError]
+ );
+ useFirestoreDocAsCollectionWithAtom(
+ tableRowsDbAtom,
+ tableScope,
+ tableSettings.collection,
+ tableSettings.subTableKey || "",
+ {
+ sorts,
+ onError: handleErrorCallback,
+ updateDocAtom: _updateRowDbAtom,
+ deleteDocAtom: _deleteRowDbAtom,
+ }
+ );
+ useAuditChange();
+ useBulkWriteDb();
+
+ return null;
+});
+
+export default TableSourceFirestore2;
diff --git a/src/types/settings.d.ts b/src/types/settings.d.ts
index 0f3b5761..0e762841 100644
--- a/src/types/settings.d.ts
+++ b/src/types/settings.d.ts
@@ -32,6 +32,7 @@ export type ProjectSettings = Partial<{
builder: string;
terminal: string;
}>;
+ exporterRoles?: string[];
}>;
/** User info and settings */
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 46a5a939..5b33e6d7 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -31,7 +31,8 @@ export type UpdateDocFunction = (
export type UpdateCollectionDocFunction = (
path: string,
update: Partial,
- deleteFields?: string[]
+ deleteFields?: string[],
+ options?: ArrayTableRowData
) => Promise;
/**
@@ -39,7 +40,10 @@ export type UpdateCollectionDocFunction = (
* @param path - The full path to the doc
* @returns Promise
*/
-export type DeleteCollectionDocFunction = (path: string) => Promise;
+export type DeleteCollectionDocFunction = (
+ path: string,
+ options?: ArrayTableRowData
+) => Promise;
export type BulkWriteOperation =
| { type: "delete"; path: string }
@@ -71,6 +75,8 @@ export type TableSettings = {
/** Roles that can see this table in the UI and navigate. Firestore Rules need to be set to give access to the data */
roles: string[];
+ isCollection?: boolean;
+ subTableKey?: string | undefined;
section: string;
description?: string;
details?: string;
@@ -95,12 +101,16 @@ export type TableSettings = {
readOnly?: boolean;
};
+export type TableIdType = "decrement" | "random" | "custom";
+
/** Table schema document loaded when table or table settings dialog is open */
export type TableSchema = {
columns?: Record;
+ idType?: TableIdType;
rowHeight?: number;
filters?: TableFilter[];
filtersOverridable?: boolean;
+ sorts?: TableSort[];
functionConfigPath?: string;
functionBuilderRef?: any;
@@ -183,20 +193,42 @@ export type TableFilter = {
| "time-minute-equal"
| "id-equal"
| "color-equal"
- | "color-not-equal";
+ | "color-not-equal"
+ | "-is-";
value: any;
};
+export const TableTools = [
+ "import",
+ "export",
+ "webhooks",
+ "extensions",
+ "cloud_logs",
+] as const;
+export type TableToolsType = typeof Tools[number];
+
export type TableSort = {
key: string;
direction: Parameters[1];
};
+export type ArrayTableRowData = {
+ index?: number;
+ parentField?: string;
+ operation?: ArrayTableOperations;
+};
+
export type TableRowRef = {
id: string;
path: string;
+ arrayTableData?: ArrayTableRowData;
} & Partial;
+type ArrayTableOperations = {
+ addRow?: "top" | "bottom";
+ base?: TableRow;
+};
+
export type TableRow = DocumentData & {
_rowy_ref: TableRowRef;
_rowy_missingRequiredFields?: string[];
diff --git a/src/utils/table.ts b/src/utils/table.ts
index 691dd385..0a46eea0 100644
--- a/src/utils/table.ts
+++ b/src/utils/table.ts
@@ -52,6 +52,12 @@ export const omitRowyFields = >(row: T) => {
delete shallowClonedRow["_rowy_missingRequiredFields"];
delete shallowClonedRow["_rowy_new"];
+ Object.keys(shallowClonedRow).forEach((key) => {
+ if (key.startsWith("_rowy_formulaValue_")) {
+ delete shallowClonedRow[key];
+ }
+ });
+
return shallowClonedRow as T;
};
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// 
-
+
-
-## Live Demo
+## Live Demo 🛝
-💥 Check out the [live demo](https://demo.rowy.io/) of Rowy 💥
+💥 Explore Rowy on [live demo playground](https://demo.rowy.io/) 💥
-## Quick Deploy
+## Features ✨
-Set up Rowy on your Google Cloud Platform project with this easy deploy button.
-
-[
](https://rowy.app/)
-
-https://rowy.app
-
-## Documentation
-
-You can find the full documentation with how-to guides and templates
-[here](http://docs.rowy.io/).
-
-## Features
+
https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-9589-d7defbf7a63f.mp4
@@ -89,27 +97,35 @@ https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-95
- Built in user management
- Customizable views for different user roles
-## Install
+## Quick guided install
-Set up Rowy on your Google Cloud project with this one-click deploy button. Your
-data and cloud functions stay on your own Firestore/GCP.
+Set up Rowy on your Google Cloud Platform project with this easy deploy button.
+Your data and cloud functions stay on your own Firestore/GCP and is managed via
+a cloud run instance that operates exclusively on your GCP project. So we do do
+not access or store any of your data on Rowy.
-[](https://rowy.app/)
+[