add validation conditions

src/components/fields/Status/ConditionModal.tsx

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
+import _find from "lodash/find";
 import Modal from "@src/components/Modal";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { default as Content } from "./ConditionModalContent";
 import { EMPTY_STATE } from "./Settings";
+import { isElement, isEmpty } from "lodash";
 
 export default function ConditionModal({
   modal,
@@ -18,6 +20,15 @@ export default function ConditionModal({
     setModal(EMPTY_STATE);
   };
   const handleAdd = () => {
+    const labelIsEmpty = Boolean(modal.condition.label.length < 4);
+    const stringValueIsEmpty = Boolean(
+      modal.condition.type === "string" && modal.condition.value.length === 0
+    );
+    const hasDuplicate = Boolean(_find(conditions, modal.condition));
+    const validation = Boolean(
+      labelIsEmpty || stringValueIsEmpty || hasDuplicate
+    );
+    if (validation) return;
     function setConditionHack(type, condition) {
       let rCondition = condition;
       if (type === "undefined") rCondition = { ...condition, value: undefined };
@@ -44,7 +55,11 @@ export default function ConditionModal({
     setModal(EMPTY_STATE);
   };
   const handleUpdate = (key: string) => (value) => {
-    setModal({ ...modal, condition: { ...modal.condition, [key]: value } });
+    const newState = {
+      ...modal,
+      condition: { ...modal.condition, [key]: value },
+    };
+    setModal(newState);
   };
   const primaryAction = (index) => {
     return index === null
@@ -87,7 +102,11 @@ export default function ConditionModal({
         secondary: secondaryAction(modal.index),
       }}
       children={
-        <Content condition={modal.condition} handleUpdate={handleUpdate} />
+        <Content
+          condition={modal.condition}
+          conditions={conditions}
+          handleUpdate={handleUpdate}
+        />
       }
     />
   );

src/components/fields/Status/ConditionModalContent.tsx

@@ -1,3 +1,4 @@
+import _find from "lodash/find";
 import Grid from "@mui/material/Grid";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
@@ -31,9 +32,12 @@ const operatorOptions = [
 
 export default function ConditionModalContent({
   condition,
+  conditions,
   handleUpdate,
 }: any) {
   const { label, operator, type, value } = condition;
+  const duplicateCond = Boolean(_find(conditions, condition));
+  const labelReqLen = Boolean(condition.label.length < 4);
   return (
     <>
       <Typography variant="overline">DATA TYPE (input)</Typography>
@@ -67,22 +71,29 @@ export default function ConditionModalContent({
             />
           </div>
           <TextField
+            error={duplicateCond}
             type="number"
             label="Value"
             value={value}
             onChange={(e) => handleUpdate("value")(Number(e.target.value))}
+            helperText={
+              duplicateCond ? "Numeric Conditional already exists" : ""
+            }
           />
         </Grid>
       )}
       {type === "string" && (
         <TextField
+          error={duplicateCond}
           fullWidth
           label="Value"
           value={value}
           onChange={(e) => handleUpdate("value")(e.target.value)}
+          helperText={duplicateCond ? "string value already exists" : ""}
         />
       )}
       <TextField
+        error={labelReqLen}
         value={label}
         label="Label"
         fullWidth

src/components/fields/Status/utils/getLabelHelper.ts

@@ -33,12 +33,24 @@ const getNumericLabelFrom = (arr: condition[], value: number) => {
   const numLabelFind = (v, c) => {
     const val = Number(v); // need to handle when value is default seted
     const condVal: number = Number(c.value);
+
+    const handleLessThan = () => {
+      if (val === condVal) return true;
+      if (val < condVal) return true;
+      else return false;
+    };
+
+    const hanldeGreaterThan = () => {
+      if (val === condVal) return true;
+      if (val > condVal) return true;
+      else return false;
+    };
     const operatorMap = new Map([
-      ["==", val === condVal ? true : false],
-      ["<", val < condVal ? true : false],
-      ["<=", val <= condVal ? true : false], // will never reach this point
-      [">", val > condVal ? true : false],
+      ["<", handleLessThan()],
+      [">", hanldeGreaterThan()],
+      ["<=", val <= condVal ? true : false],
       [">=", val >= condVal ? true : false],
+      ["==", val === condVal ? true : false],
     ]);
     return operatorMap.get(c.operator) ? c.label : undefined;
   };
@@ -67,7 +79,7 @@ export default function getLabel(value, conditions) {
   const isBoolean = Boolean(typeof value === "boolean");
   const notBoolean = Boolean(typeof value !== "boolean");
   const isNullOrUndefined = Boolean(!value && notBoolean);
-  const isNumeric = Boolean(typeof value === "number" || Number(value)); //currently this is hacky. we need to make sure types are being saved correctly. numbers are being save as number
+  const isNumeric = Boolean(typeof value === "number");
 
   if (isNullOrUndefined) _label = getFalseyLabelFrom(conditions, value);
   else if (isBoolean) _label = getBooleanLabelFrom(conditions, value);

src/components/fields/_withTableCell/withPopoverCell.tsx

@@ -6,6 +6,7 @@ import {
   IPopoverCellProps,
 } from "../types";
 
+import _find from "lodash/find";
 import { makeStyles, createStyles } from "@mui/styles";
 import { Popover, PopoverProps } from "@mui/material";
 
@@ -50,7 +51,7 @@ export default function withPopoverCell(
   return function PopoverCell(props: FormatterProps<any>) {
     const classes = useStyles();
     const { transparent, ...popoverProps } = options ?? {};
-    const { deleteCell, updateCell } = useProjectContext();
+    const { deleteCell, updateCell, tableState } = useProjectContext();
 
     const { validationRegex, required } = (props.column as any).config;
 
@@ -100,7 +101,13 @@ export default function withPopoverCell(
 
     //This is where we update the documents
     const handleSubmit = (value: any) => {
-      if (deleteCell && !options?.readOnly && typeof value === "undefined") {
+      const targetRow = _find(tableState?.rows, { id: props.row.ref.id });
+      const targetCell = targetRow?.[props.column.key];
+      const canDelete = Boolean(
+        typeof value === "undefined" && targetCell !== value
+      );
+
+      if (deleteCell && !options?.readOnly && canDelete) {
         deleteCell(props.row.ref, props.column.key);
         setLocalValue(value);
       } else if (updateCell && !options?.readOnly) {