@flozy/editor 5.0.4 → 5.0.6

package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+const NumberType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    type: "number",
+    fullWidth: true,
+    className: "fe-tv-type_text",
+    value: value,
+    size: "small",
+    onChange: handleChange,
+    disabled: readOnly
+  });
+};
+export default NumberType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PersonType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange,
+    users
+  } = useDataView();
+  console.log(users);
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: value || [],
+    onChange: handleChange,
+    options: users,
+    multiple: false,
+    disabled: readOnly
+  });
+};
+export default PersonType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { useDataView } from "../../Providers/DataViewProvider";
+import Select from "./Components/Select";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    options,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const coloredValues = [...(value || [])]?.map(m => {
+    return {
+      ...m,
+      color: options?.find(f => f.value === m.value)?.color
+    };
+  });
+  const handleChange = data => {
+    onChange(rowIndex, {
+      [property]: data?.filter(f => f?.value)
+    });
+  };
+  return /*#__PURE__*/_jsx(Select, {
+    value: coloredValues,
+    onChange: handleChange,
+    options: options,
+    multiple: false,
+    disabled: readOnly
+  });
+};
+export default SelectType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { TextField } from "@mui/material";
+import { useDataView } from "../../Providers/DataViewProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextType = props => {
+  const {
+    rowIndex,
+    property,
+    value,
+    readOnly
+  } = props;
+  const {
+    onChange
+  } = useDataView();
+  const handleChange = e => {
+    onChange(rowIndex, {
+      [property]: e?.target?.value
+    });
+  };
+  const formatValue = () => {
+    if (typeof value === "string") {
+      return value;
+    } else if (value[0]) {
+      return value?.map(m => m.value).join(", ");
+    }
+  };
+  return /*#__PURE__*/_jsx(TextField, {
+    fullWidth: true,
+    className: "fe-tv-type_text",
+    value: formatValue(value),
+    size: "small",
+    onChange: handleChange,
+    disabled: readOnly
+  });
+};
+export default TextType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js

@@ -0,0 +1,17 @@
+import TextType from "./TextType";
+import DateType from "./DateType";
+import SelectType from "./SelectType";
+import MultiSelectType from "./MultiSelectType";
+import NumberType from "./NumberType";
+import CheckType from "./CheckType";
+import PersonType from "./PersonType";
+const DataTypes = {
+  text: TextType,
+  date: DateType,
+  select: SelectType,
+  "multi-select": MultiSelectType,
+  number: NumberType,
+  check: CheckType,
+  person: PersonType
+};
+export default DataTypes;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box } from "@mui/material";
+import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChooseField = props => {
+  const {
+    sort,
+    properties,
+    onChange
+  } = props;
+  const handleChange = e => {
+    onChange(sort, {
+      newKey: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: "120px",
+      mr: 1
+    },
+    children: /*#__PURE__*/_jsx(SimpleSelect, {
+      value: sort?.key,
+      options: properties,
+      handleChange: handleChange
+    })
+  });
+};
+export default ChooseField;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box } from "@mui/material";
+import SimpleSelect from "../../DataTypes/Components/SimpleSelect";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SORT_LABELS = {
+  asc: "Ascending",
+  desc: "Descending"
+};
+const SORT_OPTIONS = [{
+  key: "asc",
+  label: SORT_LABELS.asc
+}, {
+  key: "desc",
+  label: SORT_LABELS.desc
+}];
+const ChooseSort = props => {
+  const {
+    sort,
+    onChange
+  } = props;
+  const handleChange = e => {
+    onChange(sort, {
+      operator: e?.target?.value
+    });
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      width: "120px"
+    },
+    children: /*#__PURE__*/_jsx(SimpleSelect, {
+      value: sort?.operator,
+      options: SORT_OPTIONS,
+      handleChange: handleChange
+    })
+  });
+};
+export default ChooseSort;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import { useDataView } from "../../../Providers/DataViewProvider";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ChooseSort from "./ChooseSort";
+import ChooseField from "./ChooseField";
+import ColumnsList from "../../Options/ColumnsList";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SortOptions = props => {
+  const {
+    onClose
+  } = props;
+  const {
+    properties,
+    sort,
+    onUpdateSort
+  } = useDataView();
+  const handleSortChange = (currentSortData, data = {}) => {
+    onUpdateSort({
+      ...currentSortData,
+      ...data
+    });
+  };
+  const handleDelete = () => {
+    onClose();
+    onUpdateSort({}, false, true);
+  };
+  const onSelect = s => () => {
+    onUpdateSort({
+      ...s,
+      newKey: s.key,
+      operator: "asc"
+    }, false, false);
+    onClose();
+  };
+  return sort?.length > 0 ? /*#__PURE__*/_jsxs(List, {
+    className: "tv-opt-list",
+    sx: {
+      p: 0
+    },
+    children: [sort?.map((m, i) => {
+      return /*#__PURE__*/_jsx(ListItem, {
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex"
+          },
+          children: [/*#__PURE__*/_jsx(ChooseField, {
+            sort: m,
+            properties: properties,
+            onChange: handleSortChange
+          }), /*#__PURE__*/_jsx(ChooseSort, {
+            sort: m,
+            onChange: handleSortChange
+          })]
+        })
+      }, i);
+    }), /*#__PURE__*/_jsxs(ListItemButton, {
+      onClick: handleDelete,
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: "Delete Sort"
+      })]
+    })]
+  }) : /*#__PURE__*/_jsx(ColumnsList, {
+    properties: properties,
+    onSelect: onSelect
+  });
+};
+export default SortOptions;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { Box, Popover, SwipeableDrawer, IconButton, useTheme } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import useFilterSortStyles from "./styles";
+import SortOptions from "./SortOptions";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterSort = props => {
+  const theme = useTheme();
+  const {
+    open,
+    mode,
+    anchorEl,
+    onClose
+  } = props;
+  const classes = useFilterSortStyles(theme);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const PoperComponent = isMobile ? SwipeableDrawer : Popover;
+  const renderMode = () => {
+    if (mode?.type === "filter") {
+      return "Filter Mode will be availbele soon";
+    } else if (mode?.type === "sort") {
+      return /*#__PURE__*/_jsx(SortOptions, {
+        onClose: onClose
+      });
+    } else {
+      return "Unknown Filter / Sort Mode";
+    }
+  };
+  return /*#__PURE__*/_jsx(PoperComponent, {
+    open: open,
+    sx: classes.root,
+    anchorEl: anchorEl,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    onClose: onClose,
+    anchor: "bottom",
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: classes.contentWrapper,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "fe-dv-ap-title",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: "Sort By"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        })]
+      }), renderMode()]
+    })
+  });
+};
+export default FilterSort;

package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js

@@ -0,0 +1,66 @@
+const useFilterSortStyles = theme => ({
+  root: {
+    "& .MuiPaper-root": {
+      boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
+      border: "1px solid rgba(228, 232, 235, 1)",
+      borderRadius: "12px",
+      [theme.breakpoints.between("xs", "md")]: {
+        borderRadius: "16px 16px 0px 0px",
+        maxHeight: "50%"
+      },
+      "& .MuiList-root": {
+        padding: "4px 2px",
+        "& .MuiListItem-root": {
+          padding: "8px"
+        },
+        "& .MuiListItemButton-root": {
+          color: "rgba(15, 23, 42, 1)",
+          padding: "2px 4px",
+          "& .MuiListItemIcon-root": {
+            minWidth: "38px"
+          },
+          "& .MuiTypography-root": {
+            fontSize: "14px"
+          }
+        },
+        "& .MuiButtonBase-root": {
+          padding: "4px",
+          "& svg": {
+            // width: "16px",
+            // height: "16px",
+          }
+        }
+      },
+      "& .MuiSelect-select": {
+        padding: "4px 8px"
+      },
+      "& .ml": {
+        marginLeft: "8px"
+      }
+    }
+  },
+  contentWrapper: {
+    padding: "0px",
+    "& .tv-opt-list": {
+      minWidth: "250px"
+    },
+    "& .opt-wrpr": {
+      padding: "8px 8px 8px 8px"
+    },
+    "& .fe-dv-ap-title": {
+      display: "flex",
+      fontWeight: "bold",
+      padding: "8px 8px 8px 8px",
+      justifyContent: "space-between",
+      fontSize: "14px",
+      alignItems: "center",
+      borderBottom: "1px solid rgba(220, 228, 236, 1)",
+      marginBottom: "0px",
+      "& span": {
+        display: "flex",
+        alignItems: "center"
+      }
+    }
+  }
+});
+export default useFilterSortStyles;

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import { Box, IconButton, InputBase, Menu, MenuItem } from "@mui/material";
+import { useDataView } from "../Providers/DataViewProvider";
+import FilterSort from "./FilterSort";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SearchIcon from "@mui/icons-material/Search";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const FilterView = props => {
+  const {
+    classes,
+    onDelete,
+    onDuplicate,
+    onEnter,
+    readOnly
+  } = props;
+  const {
+    sort,
+    selectedRows,
+    onDeleteRows,
+    search,
+    onSearch,
+    title,
+    setTitle
+  } = useDataView();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorMoreEl, setAnchorMoreEl] = useState(null);
+  const [mode, setMode] = useState({});
+  const [toggle, setToggle] = useState(false);
+  const open = Boolean(anchorEl);
+  const openMore = Boolean(anchorMoreEl);
+  const handleSortClick = e => {
+    setAnchorEl(e?.currentTarget);
+    setMode({
+      type: "sort"
+    });
+  };
+  const handleMoreClick = e => {
+    setAnchorMoreEl(e?.currentTarget);
+    setMode({
+      type: ""
+    });
+  };
+  const handleDeleteRow = () => {
+    onDeleteRows();
+  };
+  const onClose = () => {
+    setAnchorEl(null);
+  };
+  const toggleSearch = () => {
+    setToggle(!toggle);
+  };
+  const onMenuClick = menu => () => {
+    switch (menu) {
+      case "Duplicate":
+        onDuplicate();
+        break;
+      case "Delete":
+        onDelete();
+        break;
+      default:
+    }
+  };
+  const handleMoreClose = () => {
+    setAnchorMoreEl(null);
+  };
+  const handleTitleChange = e => {
+    setTitle(e?.target?.value);
+  };
+  const handleEnter = e => {
+    if (e?.key === "Enter") {
+      onEnter();
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "fe-tv-fv",
+    contentEditable: false,
+    sx: classes.filterView,
+    children: [/*#__PURE__*/_jsx(Box, {
+      className: "tv-title-wrpr",
+      children: !readOnly ? /*#__PURE__*/_jsx(InputBase, {
+        sx: {
+          paddingBottom: "0px",
+          fontWeight: "bold",
+          fontSize: "16px"
+        },
+        size: "small",
+        placeholder: "Untitled",
+        inputProps: {
+          "aria-label": "Table Name",
+          maxLength: 100
+        },
+        value: title,
+        onChange: handleTitleChange,
+        onKeyUp: handleEnter
+      }) : title || "Untitled"
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "tv-fi-wrpr",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: `tv-sb mr ${toggle ? "open" : ""}`,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          type: "button",
+          "aria-label": "search",
+          onClick: toggleSearch,
+          children: /*#__PURE__*/_jsx(SearchIcon, {})
+        }), /*#__PURE__*/_jsx(InputBase, {
+          sx: {
+            paddingBottom: "0px"
+          },
+          size: "small",
+          placeholder: "Search in Table",
+          inputProps: {
+            "aria-label": "search google maps"
+          },
+          value: search,
+          onChange: onSearch
+        })]
+      }), /*#__PURE__*/_jsx(IconButton, {
+        className: `mr ${sort?.length > 0 ? "active" : ""}`,
+        onClick: handleSortClick,
+        children: /*#__PURE__*/_jsx(SwapVertIcon, {})
+      }), /*#__PURE__*/_jsx(FilterSort, {
+        open: open,
+        anchorEl: anchorEl,
+        mode: mode,
+        onClose: onClose
+      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        onClick: handleMoreClick,
+        children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
+      }) : null, selectedRows?.length > 0 && !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+        className: "mr",
+        onClick: handleDeleteRow,
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
+        sx: classes.basicMenu,
+        className: "tv-basic-menu",
+        anchorEl: anchorMoreEl,
+        open: openMore,
+        onClose: handleMoreClose,
+        MenuListProps: {
+          "aria-labelledby": "basic-button"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: [/*#__PURE__*/_jsxs(MenuItem, {
+          onClick: onMenuClick("Duplicate"),
+          children: [" ", /*#__PURE__*/_jsx(ContentCopyIcon, {
+            sx: {
+              mr: 1
+            }
+          }), " Duplicate"]
+        }), /*#__PURE__*/_jsxs(MenuItem, {
+          onClick: onMenuClick("Delete"),
+          children: [" ", /*#__PURE__*/_jsx(DeleteIcon, {
+            sx: {
+              mr: 1
+            }
+          }), " Delete"]
+        })]
+      }) : null]
+    })]
+  });
+};
+export default FilterView;

package/dist/Editor/Elements/DataView/Layouts/Formula.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RenderFormulaCell = props => {
+  const {
+    property
+  } = props;
+  return /*#__PURE__*/_jsxs("td", {
+    style: {
+      minWidth: "200px",
+      textAlign: "center",
+      color: "#CCC"
+    },
+    children: ["Calculate ", property?.key]
+  });
+};
+const Formula = props => {
+  const {
+    properties
+  } = props;
+  return /*#__PURE__*/_jsx("tr", {
+    children: properties?.map((m, i) => {
+      return /*#__PURE__*/_jsx(RenderFormulaCell, {
+        property: m
+      }, i);
+    })
+  });
+};
+export default Formula;