save types properly, and when cell set to undefined delete the firestore fieldvalue

src/components/fields/Status/ConditionModal.tsx

@@ -3,8 +3,6 @@ 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 { ConstructionOutlined } from "@mui/icons-material";
-import { mdiConsoleLine } from "@mdi/js";
 
 export default function ConditionModal({
   modal,
@@ -13,8 +11,6 @@ export default function ConditionModal({
   setConditions,
 }) {
   const handleClose = () => setModal(EMPTY_STATE);
-
-  //This is fine
   const handleSave = () => {
     let _conditions = [...conditions];
     _conditions[modal.index] = modal.condition;
@@ -25,10 +21,8 @@ export default function ConditionModal({
     function setConditionHack(type, condition) {
       let rCondition = condition;
       if (type === "undefined") rCondition = { ...condition, value: undefined };
-      if (type === "boolean" && typeof condition.value === "object") {
-        //Again 'rowy's multiselect does not accept default value'
-        rCondition = { ...condition, value: false };
-      }
+      if (type === "boolean" && typeof condition.value === "object")
+        rCondition = { ...condition, value: false }; //Again 'rowy's multiselect does not accept default value'
       return rCondition;
     }
     const modalCondition = setConditionHack(

src/components/fields/Status/ConditionModalContent.tsx

@@ -44,8 +44,8 @@ export default function ConditionModalContent({
         multiple={false}
         label="Select data type"
       />
-      {/** This is the issue where false i causing a problem */}
-      {/** To add into MultiSelect library, defaultValue */}
+      {/** This is the issue where false is causing a problem */}
+      {/** To add defaultValue into MultiSelect?*/}
       {type === "boolean" && (
         <MultiSelect
           options={booleanOptions}
@@ -70,7 +70,7 @@ export default function ConditionModalContent({
             type="number"
             label="Value"
             value={value}
-            onChange={(e) => handleUpdate("value")(e.target.value)}
+            onChange={(e) => handleUpdate("value")(Number(e.target.value))}
           />
         </Grid>
       )}

src/components/fields/Status/PopoverCell.tsx

@@ -1,5 +1,5 @@
+import _find from "lodash/find";
 import { IPopoverCellProps } from "../types";
-
 import MultiSelect_ from "@rowy/multiselect";
 
 export default function StatusSingleSelect({
@@ -12,11 +12,14 @@ export default function StatusSingleSelect({
 }: IPopoverCellProps) {
   const config = column.config ?? {};
   const conditions = config.conditions ?? [];
+  const reMappedConditions = conditions.map((c) =>
+    c.type === "number" ? { ...c, value: Number(c.value) } : { ...c }
+  );
   return (
     <MultiSelect_
       value={value}
-      onChange={onSubmit}
-      options={conditions.length >= 1 ? conditions : []} // this handles when conditions are deleted
+      onChange={(v) => onSubmit(v)}
+      options={conditions.length >= 1 ? reMappedConditions : []} // this handles when conditions are deleted
       multiple={false}
       freeText={config.freeText}
       disabled={disabled}

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

@@ -24,18 +24,22 @@ const getBooleanLabelFrom = (arr: condition[], value: string) => {
   }
 };
 
+/**
+ * @param arr conditional array
+ * @param value if value is not detected, conditional value becomes the default value
+ * @returns conditional's label || undefined
+ */
 const getNumericLabelFrom = (arr: condition[], value: number) => {
   const numLabelFind = (v, c) => {
-    const val = Number(v);
+    const val = Number(v); // need to handle when value is default seted
     const condVal: number = Number(c.value);
     const operatorMap = new Map([
-      ["<", val < condVal ? true : false],
-      ["<=", val <= condVal ? true : false],
-      [">=", val >= condVal ? true : false],
-      [">", val > condVal ? true : false],
       ["==", val === condVal ? true : false],
+      ["<", val < condVal ? true : false],
+      ["<=", val <= condVal ? true : false], // will never reach this point
+      [">", val > condVal ? true : false],
+      [">=", val >= condVal ? true : false],
     ]);
-    //console.log('check', `${val}${c.operator}${c.value}`, operatorMap.get(c.operator))
     return operatorMap.get(c.operator) ? c.label : undefined;
   };
 
@@ -55,7 +59,7 @@ const getLabelFrom = (arr, value) => {
 };
 
 const finalLabel = (label: string | undefined, value) => {
-  return typeof label === "string" ? label : JSON.stringify(value); //last resort
+  return typeof label === "string" ? label : value;
 };
 
 export default function getLabel(value, conditions) {

src/components/fields/_withTableCell/withPopoverCell.tsx

@@ -50,7 +50,7 @@ export default function withPopoverCell(
   return function PopoverCell(props: FormatterProps<any>) {
     const classes = useStyles();
     const { transparent, ...popoverProps } = options ?? {};
-    const { updateCell } = useProjectContext();
+    const { deleteCell, updateCell } = useProjectContext();
 
     const { validationRegex, required } = (props.column as any).config;
 
@@ -100,7 +100,10 @@ export default function withPopoverCell(
 
     //This is where we update the documents
     const handleSubmit = (value: any) => {
-      if (updateCell && !options?.readOnly) {
+      if (deleteCell && !options?.readOnly && typeof value === "undefined") {
+        deleteCell(props.row.ref, props.column.key);
+        setLocalValue(value);
+      } else if (updateCell && !options?.readOnly) {
         updateCell(props.row.ref, props.column.key, value);
         setLocalValue(value);
       }

src/contexts/ProjectContext.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext, useEffect, useRef, useMemo } from "react";
+import { db } from "@src/firebase";
 import { useSnackbar } from "notistack";
 import { DataGridHandle } from "react-data-grid";
 import _sortBy from "lodash/sortBy";
@@ -60,6 +61,10 @@ export interface IProjectContext {
     ignoreRequiredFields?: boolean
   ) => void;
   deleteRow: (rowId) => void;
+  deleteCell: (
+    rowRef: firebase.firestore.DocumentReference,
+    fieldValue: string
+  ) => void;
   updateCell: (
     ref: firebase.firestore.DocumentReference,
     fieldName: string,
@@ -289,6 +294,17 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
     return;
   };
 
+  const deleteCell: IProjectContext["deleteCell"] = (rowRef, fieldValue) => {
+    rowRef
+      .update({
+        [fieldValue]: firebase.firestore.FieldValue.delete(),
+      })
+      .then(
+        () => console.log("Field Value deleted"),
+        (error) => console.error("Failed to delete", error)
+      );
+  };
+
   const updateCell: IProjectContext["updateCell"] = (
     ref,
     fieldName,
@@ -296,9 +312,7 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
     onSuccess
   ) => {
     if (value === undefined) return;
-
     const update = { [fieldName]: value };
-
     if (table?.audit !== false) {
       update[table?.auditFieldUpdatedBy || "_updatedBy"] = rowyUser(
         currentUser!,
@@ -394,6 +408,7 @@ export const ProjectContextProvider: React.FC = ({ children }) => {
         tableActions,
         addRow,
         addRows,
+        deleteCell,
         updateCell,
         deleteRow,
         settingsActions,