Merge pull request #635 from gibsonliketheguitar/support-dervi-contex…

…t-menu Fix false positive duplicate value conditions & Right click supports derivates output fields
rowyio · Feb 4, 2022 · 34880a0 · 34880a0
2 parents d7cc479 + 2f5ef06
commit 34880a0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 41 deletions.
diff --git a/src/components/Table/ContextMenu/index.tsx b/src/components/Table/ContextMenu/index.tsx
@@ -1,4 +1,7 @@
 import _find from "lodash/find";
+
+import { PopoverProps } from "@mui/material";
+import { FieldType } from "@src/constants/fields";
 import { getFieldProp } from "@src/components/fields";
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { MenuContents } from "./MenuContent";
@@ -9,11 +12,27 @@ export default function ContextMenu() {
   const { anchorEle, selectedCell, resetContextMenu } = useContextMenuAtom();
   const columns = tableState?.columns;
   const selectedColIndex = selectedCell?.colIndex;
+  const selectedCol = _find(tableState?.columns, { index: selectedColIndex });
+
+  function getColType(col) {
+    if (!col) return null;
+    return col.type === FieldType.derivative
+      ? selectedCol.config.renderFieldType
+      : selectedCol.type;
+  }
+
+  const columnType = getColType(selectedCol);
+  const getActions =
+    getFieldProp("contextMenuActions", columnType) || function empty() {};
+  const actions = getActions() || [];
+  const hasNoActions = Boolean(actions.length === 0);
+
   const selectedCol = _find(columns, { index: selectedColIndex });
   const configActions =
     getFieldProp("contextMenuActions", selectedCol?.type) ||
     function empty() {};
   const actions = configActions(selectedCell, resetContextMenu) || [];
+
 
   if (!anchorEle || actions.length === 0) return <></>;
   return (

diff --git a/src/components/fields/Status/ConditionList.tsx b/src/components/fields/Status/ConditionList.tsx
@@ -14,9 +14,7 @@ interface I_ConditionList {
 
 export default function ConditionList({ config, setModal }: I_ConditionList) {
   const conditions = config?.conditions ?? [];
-  const noConditions = Boolean(conditions?.length < 1); // Double check this
-
-  if (noConditions) {
+  if (conditions?.length === 0) {
     return (
       <>
         No conditions set yet
@@ -50,13 +48,12 @@ export default function ConditionList({ config, setModal }: I_ConditionList) {
 }
 
 const GridItem = ({ condition, setModal, index }: any) => {
-  const noCondition = Boolean(!condition);
-  if (noCondition) return <></>;
+  if (!condition) return <></>;
   return (
     <>
-      {condition?.label}
+      <span>{condition?.label}</span>
       <Grid item>
-        {createValueLabel(condition)}
+        <span>{createValueLabel(condition)}</span>
         <IconButton
           onClick={() => setModal({ isOpen: true, condition, index })}
         >

diff --git a/src/components/fields/Status/ConditionModal.tsx b/src/components/fields/Status/ConditionModal.tsx
@@ -4,7 +4,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 { isElement, isEmpty } from "lodash";
 
 export default function ConditionModal({
   modal,
@@ -90,7 +89,6 @@ export default function ConditionModal({
   useEffect(() => {
     handleUpdate("operator")(modal.condition.operator ?? "==");
   }, [modal.condition.type]);
-
   return (
     <Modal
       open={modal.isOpen}
@@ -103,6 +101,7 @@ export default function ConditionModal({
       }}
       children={
         <Content
+          isEditing={modal.index}
           condition={modal.condition}
           conditions={conditions}
           handleUpdate={handleUpdate}

diff --git a/src/components/fields/Status/ConditionModalContent.tsx b/src/components/fields/Status/ConditionModalContent.tsx
@@ -9,40 +9,33 @@ interface I_ConditionModalContent {
   modal: any;
 }
 
-const multiSelectOption = [
-  { label: "Boolean", value: "boolean" },
-  { label: "Number", value: "number" },
-  { label: "String", value: "string" },
-  { label: "Undefined", value: "undefined" },
-  { label: "Null", value: "null" },
-];
-
-const booleanOptions = [
-  { label: "True", value: "true" },
-  { label: "False", value: "false" },
-];
-
-const operatorOptions = [
-  { label: "Less than", value: "<" },
-  { label: "Less than or equal", value: "<=" },
-  { label: "Equal", value: "==" },
-  { label: "Equal or more than", value: ">=" },
-  { label: "More than", value: ">" },
-];
-
 export default function ConditionModalContent({
+  isEditing,
   condition,
   conditions,
   handleUpdate,
 }: any) {
   const { label, operator, type, value } = condition;
-  const duplicateCond = Boolean(_find(conditions, condition));
-  const labelReqLen = Boolean(condition.label.length < 4);
+  const labelReqLen = Boolean(condition.label.length < 1);
+  const onNewHasDuplicate = Boolean(_find(conditions, condition));
+  const onEditConditions = conditions.filter(
+    (c) => c.value !== condition.value
+  ); //remove the current condition from list of conditions, to prevent false positive error on duplicate value
+  const onEditHasDuplicate = Boolean(_find(onEditConditions, condition));
+
+  const errorTextType = (isEditing: boolean, error: string) => {
+    const hasError = isEditing ? onEditHasDuplicate : onNewHasDuplicate;
+    return hasError ? error : "";
+  };
+
   return (
     <>
       <Typography variant="overline">DATA TYPE (input)</Typography>
       <MultiSelect
-        options={multiSelectOption}
+        options={[
+          { label: "True", value: "true" },
+          { label: "False", value: "false" },
+        ]}
         onChange={(v) => handleUpdate("type")(v)}
         value={type}
         multiple={false}
@@ -52,7 +45,13 @@ export default function ConditionModalContent({
       {/** To add defaultValue into MultiSelect?*/}
       {type === "boolean" && (
         <MultiSelect
-          options={booleanOptions}
+          options={[
+            { label: "Boolean", value: "boolean" },
+            { label: "Number", value: "number" },
+            { label: "String", value: "string" },
+            { label: "Undefined", value: "undefined" },
+            { label: "Null", value: "null" },
+          ]}
           onChange={(v) => handleUpdate("value")(v === "true")}
           value={value ? "true" : "false"}
           multiple={false}
@@ -63,33 +62,37 @@ export default function ConditionModalContent({
         <Grid container direction="row" justifyContent="space-between">
           <div style={{ width: "45%" }}>
             <MultiSelect
-              options={operatorOptions}
+              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={(v) => handleUpdate("operator")(v)}
               value={operator}
               multiple={false}
               label="Select operator"
             />
           </div>
           <TextField
-            error={duplicateCond}
+            error={isEditing ? onEditHasDuplicate : onNewHasDuplicate}
             type="number"
             label="Value"
             value={value}
             onChange={(e) => handleUpdate("value")(Number(e.target.value))}
-            helperText={
-              duplicateCond ? "Numeric Conditional already exists" : ""
-            }
+            helperText={errorTextType(isEditing, "Number value already exists")}
           />
         </Grid>
       )}
       {type === "string" && (
         <TextField
-          error={duplicateCond}
+          error={isEditing ? onEditHasDuplicate : onNewHasDuplicate}
           fullWidth
           label="Value"
           value={value}
           onChange={(e) => handleUpdate("value")(e.target.value)}
-          helperText={duplicateCond ? "string value already exists" : ""}
+          helperText={errorTextType(isEditing, "String value already exists")}
         />
       )}
       <TextField