status field type

cloud_functions/functions/src/sparks/index.ts

@@ -47,7 +47,7 @@ const sparkTrigger = async (
         requiredFields.length !== 0 &&
         !hasRequiredFields(requiredFields, afterData)
       )
-        return false; // check if it hase required fields for the spark to run
+        return false; // check if it has required fields for the spark to run
       const dontRun = shouldRun ? !(await shouldRun(sparkContext)) : false; //
       if (dontRun) return false;
       const sparkData = await Object.keys(sparkBody).reduce(

www/src/components/fields/ConnectTable/ConnectTableSelect.tsx

@@ -86,7 +86,7 @@ export default function ConnectTableSelect({
       } else {
         console.log('get new key')
         const resp = await getAlgoliaSearchKey(algoliaIndex)
-        const key = resp.data.data?.key
+        const key = resp.data.data
         if (key) {
           const newKey = {
             key,

www/src/components/fields/Status/Settings.tsx

@@ -0,0 +1,177 @@
+import React, { useState,useEffect } from "react";
+import { ISettingsProps } from "../types";
+
+import Subheading from "components/Table/ColumnMenu/Subheading";
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import _sortBy from "lodash/sortBy";
+import EditIcon from "@material-ui/icons/Edit"
+import Modal from "components/Modal"
+import DeleteIcon from "@material-ui/icons/Delete"
+import Typography from "@material-ui/core/Typography"
+import TextField from "@material-ui/core/TextField"
+import MultiSelect from "@antlerengineering/multiselect"
+
+const EMPTY_STATE: {
+  isOpen: boolean;
+  index: number| null;
+  condition: {
+    type: string;
+    value: any;
+    label: string;
+    operator: string | undefined;
+  };
+} = {
+  index: null,
+  isOpen: false,
+  condition: {
+    type: "null",
+    value: null,
+    label: "",
+    operator: "=="
+  }
+}
+const ConditionModal = ({ modal, setModal, conditions, setConditions }) => {
+  const handleClose = () => {
+    setModal(EMPTY_STATE)
+  }
+  const handleSave = () => {
+      let _conditions = [...conditions]
+      _conditions[modal.index] = modal.condition
+      setConditions(_conditions)
+    setModal(EMPTY_STATE)
+
+  }
+  const handleAdd = () => {
+    setConditions(conditions ? [...conditions, modal.condition] : [modal.condition])
+    setModal(EMPTY_STATE)
+  }
+  const handleRemove = () => {
+    let _conditions = [...conditions]
+    delete _conditions[modal.index]
+    setConditions(_conditions)
+    setModal(EMPTY_STATE)
+  }
+  const handleUpdate = (key: string) => (value) => {
+    setModal({ ...modal, condition: { ...modal.condition, [key]: value } })
+  }
+  useEffect(()=>{
+    handleUpdate("operator")('==')
+  },[modal.condition.type])
+  return (
+    <Modal open={modal.isOpen} title={`${modal.index ?'Edit':'Add'} Condition`} maxWidth={'xs'}
+      onClose={handleClose}
+      actions={{
+        primary: modal.index === null?{
+          children: "Add Condition",
+          onClick: handleAdd,
+          disabled: false
+        }:{
+          children: "Save Changes",
+          onClick: handleSave,
+          disabled: false
+        },
+        secondary: modal.index === null?{
+          children: "Cancel",
+          onClick: ()=>{setModal(EMPTY_STATE)},
+        }:{
+          startIcon:<DeleteIcon/>,
+          children: "Remove Condition",
+          onClick: handleRemove,
+        },
+      }}
+      children={<>
+        <Typography variant="overline">
+          DATA TYPE (input)
+    </Typography>
+        <MultiSelect
+          options={[
+            { label: "Boolean", value: "boolean" },
+            { label: "Number", value: "number" },
+            { label: "Undefined", value: "undefined" },
+            { label: "Null", value: "null" },
+          ]}
+          onChange={handleUpdate('type')}
+          value={modal.condition.type}
+          multiple={false}
+          label={'Select data type'} />
+        <Typography variant="overline">
+          Condition
+        </Typography>
+        { modal.condition.type === "boolean" && <MultiSelect
+          options={[
+            { label: "True", value: "true" },
+            { label: "False", value: "false" }
+          ]}
+          onChange={(v)=>handleUpdate('value')(v==="true")}
+          value={modal.condition.value?"true":"false"}
+          multiple={false}
+          label={'Select Condition Value'} />}
+        
+        { modal.condition.type === "number" && <Grid container direction="row" justify="space-between">
+          <div style={{width:'45%'}}><MultiSelect
+          options={[
+            { label: "Less Than", value: "<" },
+            { label: "Less Than or Equal", value: "<=" },
+            { label: "Equal", value: "==" },
+            { label: "Equal or More Than", value: ">=" },
+            { label: "More Than", value: ">" },
+          ]}
+          onChange={handleUpdate('operator')}
+          value={modal.condition.operator}
+          multiple={false}
+          label={'Select Operator'} /></div>
+          <TextField  type={'number'}  label={'Value'} value={modal.condition.value} onChange={(e) => handleUpdate('value')(e.target.value)} />
+          </Grid>}
+          { modal.condition.type === "string" && 
+          <TextField label={'Value'} value={modal.condition.value} onChange={(e) => handleUpdate('value')(e.target.value)} />}
+
+        <Typography variant="overline">
+          assigned label (output)
+        </Typography>
+        <TextField value={modal.condition.label} label={'Type the cell output'} fullWidth onChange={(e) => handleUpdate('label')(e.target.value)} />
+      </>}
+    />
+  )
+}
+
+
+export default function Settings({ handleChange, config }: ISettingsProps) {
+
+  const [modal, setModal] = useState(EMPTY_STATE)
+  const { conditions } = config
+  return (
+    <>
+      <Subheading>Conditions</Subheading>
+      {conditions ? conditions.map((condition, index) => {
+        return (<><Grid container justify='space-between' alignItems={'center'}>
+          {condition.label}<Grid item>{
+          ['undefined','null'].includes(condition.type)?condition.type
+          :`${condition.type}:${condition.type ==="number"?condition.operator:""}${condition.type==="boolean"?JSON.stringify(condition.value):condition.value}`}
+          <IconButton
+            onClick={()=>{
+              setModal({isOpen: true,condition,index})
+            }}
+          ><EditIcon /></IconButton></Grid>
+        </Grid>
+          <Divider /></>)
+      }) : <>
+        no conditions set yet
+        <br />
+      </>}
+
+
+      <Button onClick={() => setModal({ ...EMPTY_STATE, isOpen: true})}>+ ADD CONDITION</Button>
+      <ConditionModal
+        modal={modal}
+        setModal={setModal}
+        conditions={config.conditions}
+        setConditions={handleChange('conditions')}
+      />
+    </>
+  );
+}
+
+

www/src/components/fields/Status/SideDrawerField.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Controller } from "react-hook-form";
+import { ISideDrawerFieldProps } from "../types";
+
+import { Grid } from "@material-ui/core";
+import { Rating as MuiRating } from "@material-ui/lab";
+import StarBorderIcon from "@material-ui/icons/StarBorder";
+
+import { useFieldStyles } from "components/SideDrawer/Form/utils";
+import { useStatusStyles } from "./styles";
+
+
+export default function Rating({
+  control,
+  column,
+  disabled,
+}: ISideDrawerFieldProps) {
+  const fieldClasses = useFieldStyles();
+  const ratingClasses = useStatusStyles();
+
+
+
+  return (
+    <Controller
+      control={control}
+      name={column.key}
+      render={({ onChange, onBlur, value }) => (
+        <Grid container alignItems="center" className={fieldClasses.root}>
+         <>{value}</>
+        </Grid>
+      )}
+    />
+  );
+}

www/src/components/fields/Status/TableCell.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from "react";
+import { IHeavyCellProps } from "../types";
+
+
+import { useStatusStyles } from "./styles";
+import _find from "lodash/find"
+
+export default function Status({
+  column,
+  value,
+}: IHeavyCellProps) {
+  const statusClasses = useStatusStyles();
+
+  const conditions = column.config?.conditions ?? []
+  const label = useMemo(() => {
+    if (["null", "undefined"].includes(typeof value)) {
+      const condition = _find(conditions, (c) => c.type === typeof value)
+      return condition.label
+    } else if (typeof value === "number") {
+      const numberConditions = conditions.filter(c => c.type === "number")
+      for (let i = 0; i < numberConditions.length; i++) {
+        const condition = numberConditions[i];
+        switch (condition.operator) {
+          case '<':
+            if (value < condition.value) return condition.label
+            break;
+          case '<=':
+            if (value <= condition.value) return condition.label
+            break;
+          case '>=':
+            if (value >= condition.value) return condition.label
+            break;
+          case '>':
+            if (value > condition.value) return condition.label
+            break;
+          case '==':
+          default:
+            if (value == condition.value) return condition.label
+            break;
+        }
+      }
+    } else {
+      for (let i = 0; i < conditions.length; i++) {
+        const condition = conditions[i];
+        if (value == condition.value) return condition.label
+      }
+    }
+    return JSON.stringify(value)
+  }, [value, conditions])
+
+  return (
+    <>{label}</>
+  );
+}

www/src/components/fields/Status/index.tsx

@@ -0,0 +1,34 @@
+import React, { lazy } from "react";
+import { IFieldConfig, FieldType } from "components/fields/types";
+import withHeavyCell from "../_withTableCell/withHeavyCell";
+
+import StatusIcon from "@material-ui/icons/WavesOutlined";
+import BasicCell from "../_BasicCell/BasicCellNull";
+import NullEditor from "components/Table/editors/NullEditor";
+
+const TableCell = lazy(
+  () => import("./TableCell" /* webpackChunkName: "TableCell-Status" */)
+);
+const SideDrawerField = lazy(
+  () =>
+    import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-Status" */)
+);
+const Settings = lazy(
+  () => import("./Settings" /* webpackChunkName: "Settings-Status" */)
+);
+
+export const config: IFieldConfig = {
+  type: FieldType.status,
+  name: "Status",
+  dataType: "any",
+  initialValue: undefined,
+  initializable: true,
+  icon: <StatusIcon />,
+  description:
+    "Status is read only field that displays field values in more visual format",
+  TableCell: withHeavyCell(BasicCell, TableCell),
+  TableEditor: NullEditor,
+  settings: Settings,
+  SideDrawerField,
+};
+export default config;

www/src/components/fields/Status/styles.ts

@@ -0,0 +1,8 @@
+import { makeStyles, createStyles } from "@material-ui/core";
+
+export const useStatusStyles = makeStyles((theme) =>
+  createStyles({
+    root: { color: theme.palette.text.secondary },
+    iconEmpty: { color: theme.palette.text.secondary },
+  })
+);

www/src/components/fields/index.tsx

@@ -34,6 +34,7 @@ import Derivative from "./Derivative";
 import Aggregate from "./Aggregate";
 import User from "./User";
 import Id from "./Id";
+import Status from "./Status";
 
 // Export field configs in order for FieldsDropdown
 export const FIELDS: IFieldConfig[] = [
@@ -75,6 +76,7 @@ export const FIELDS: IFieldConfig[] = [
   // FIRETABLE
   User,
   Id,
+  Status
 ];
 
 /**

www/src/constants/fields.ts

@@ -39,4 +39,6 @@ export enum FieldType {
   user = "USER",
   id = "ID",
   last = "LAST",
+  status = "STATUS",
 }
+