Added typing to filter objects and improved graph typing

CLIMB-TRE · Jan 2, 2025 · ea650aa · ea650aa
1 parent 03532ca
commit ea650aa
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 31 deletions.
diff --git a/lib/components/Filter.tsx b/lib/components/Filter.tsx
@@ -17,34 +17,37 @@ interface FilterProps extends DataProps {
   setEditMode: (value: boolean) => void;
 }
 
+function getValueList(v: string) {
+  return v ? v.split(",") : [];
+}
+
 function Filter(props: FilterProps) {
   const [filter, setFilter] = useState(props.filterList[props.index]);
 
   const handleFieldChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const updatedFilter = { ...filter };
+    updatedFilter.type = props.projectFields.get(e.target.value)?.type || "";
     updatedFilter.field = e.target.value;
-    updatedFilter.lookup =
-      props.typeLookups.get(
-        props.projectFields.get(e.target.value)?.type || ""
-      )?.[0] || "";
+    updatedFilter.lookup = props.typeLookups.get(updatedFilter.type)?.[0] || "";
+
+    if (updatedFilter.lookup === "isnull") updatedFilter.value = "true";
+    else updatedFilter.value = "";
 
-    if (updatedFilter.lookup === "isnull") {
-      updatedFilter.value = "true";
-    } else {
-      updatedFilter.value = "";
-    }
     setFilter(updatedFilter);
   };
 
   const handleLookupChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const updatedFilter = { ...filter };
     updatedFilter.lookup = e.target.value;
 
-    if (updatedFilter.lookup === "isnull") {
-      updatedFilter.value = "true";
-    } else {
-      updatedFilter.value = "";
-    }
+    if (updatedFilter.lookup === "isnull") updatedFilter.value = "true";
+    else if (updatedFilter.lookup.endsWith("range"))
+      updatedFilter.value = getValueList(updatedFilter.value)
+        .slice(0, 2)
+        .join(",");
+    else if (!updatedFilter.lookup.endsWith("in"))
+      updatedFilter.value = getValueList(updatedFilter.value)[0];
+
     setFilter(updatedFilter);
   };
 
@@ -66,10 +69,6 @@ function Filter(props: FilterProps) {
   };
 
   let f: JSX.Element;
-  const getValueList = (v: string) => {
-    return v ? v.split(",") : [];
-  };
-  const filterType = props.projectFields.get(filter.field)?.type || "";
 
   switch (true) {
     case filter.lookup === "isnull":
@@ -81,7 +80,7 @@ function Filter(props: FilterProps) {
         />
       );
       break;
-    case filterType === "choice" && filter.lookup.endsWith("in"):
+    case filter.type === "choice" && filter.lookup.endsWith("in"):
       f = (
         <MultiChoice
           project={props.project}
@@ -93,7 +92,7 @@ function Filter(props: FilterProps) {
         />
       );
       break;
-    case filterType === "choice":
+    case filter.type === "choice":
       f = (
         <Choice
           project={props.project}
@@ -106,7 +105,7 @@ function Filter(props: FilterProps) {
         />
       );
       break;
-    case filterType === "array" && !filter.lookup.includes("length"):
+    case filter.type === "array" && !filter.lookup.includes("length"):
       f = (
         <MultiInput
           value={getValueList(filter.value)}
@@ -131,7 +130,7 @@ function Filter(props: FilterProps) {
         />
       );
       break;
-    case filterType === "bool":
+    case filter.type === "bool":
       f = (
         <Dropdown
           isClearable
@@ -167,11 +166,7 @@ function Filter(props: FilterProps) {
           onChange={handleFieldChange}
         />
         <Dropdown
-          options={
-            props.typeLookups.get(
-              props.projectFields.get(filter.field)?.type || ""
-            ) || []
-          }
+          options={props.typeLookups.get(filter.type) || []}
           titles={props.lookupDescriptions}
           value={filter.lookup}
           placeholder="Select lookup..."

diff --git a/lib/components/FilterPanel.tsx b/lib/components/FilterPanel.tsx
@@ -83,6 +83,7 @@ function FilterPanel(props: FilterPanelProps) {
       ...props.filterList.slice(0, index),
       {
         key: generateKey(),
+        type: "",
         field: "",
         lookup: "",
         value: "",

diff --git a/lib/pages/Stats.tsx b/lib/pages/Stats.tsx
@@ -16,7 +16,7 @@ import {
   GroupedBarGraph,
 } from "../components/Graphs";
 import { StatsProps } from "../interfaces";
-import { GraphConfig } from "../types";
+import { GraphType, GraphConfig } from "../types";
 import { generateKey } from "../utils/functions";
 import {
   MdCreate,
@@ -314,7 +314,8 @@ function Stats(props: StatsProps) {
         list[index].groupMode = "";
       }
     }
-    list[index].type = e.target.value;
+
+    list[index].type = e.target.value as GraphType;
     setGraphConfigList(list);
   };
 

diff --git a/lib/types.ts b/lib/types.ts
@@ -1,5 +1,20 @@
+type FieldType =
+  | "text"
+  | "choice"
+  | "integer"
+  | "decimal"
+  | "date"
+  | "datetime"
+  | "bool"
+  | "relation"
+  | "array"
+  | "structure"
+  | "";
+
+type GraphType = "line" | "bar" | "pie" | "";
+
 type ProjectField = {
-  type: string;
+  type: FieldType;
   description: string;
   actions: string[];
   values?: string[];
@@ -8,14 +23,15 @@ type ProjectField = {
 
 type FilterConfig = {
   key: string;
+  type: FieldType;
   field: string;
   lookup: string;
   value: string;
 };
 
 type GraphConfig = {
   key: string;
-  type: string;
+  type: GraphType;
   field: string;
   groupBy: string;
   groupMode: string;
@@ -98,6 +114,8 @@ type AnalysisDetailResponse = SuccessResponse & {
 //     };
 
 export type {
+  FieldType,
+  GraphType,
   ProjectField,
   FilterConfig,
   GraphConfig,