Experimental filters: additional empty values & full support for ranges (#4028)

.changeset/tricky-olives-jog.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: additional empty values & full support for ranges

src/components/ConditionalFilter/FilterElement/ConditionSelected.ts

@@ -1,6 +1,6 @@
 import { getDefaultByControlName } from "../controlsType";
 import { ConditionItem } from "./ConditionOptions";
-import { ConditionValue } from "./ConditionValue";
+import { ConditionValue, isItemOptionArray, isTuple } from "./ConditionValue";
 
 export class ConditionSelected {
   private constructor(
@@ -11,7 +11,11 @@ export class ConditionSelected {
   ) {}
 
   public isEmpty() {
-    return this.value === ""
+    return (
+      this.value === "" ||
+      (isItemOptionArray(this.value) && this.value.length === 0) ||
+      (isTuple(this.value) && this.value.includes(""))
+    );
   }
 
   public static empty() {

src/components/ConditionalFilter/constants.ts

@@ -92,8 +92,14 @@ export const ATTRIBUTE_INPUT_TYPE_CONDITIONS = {
     { type: "number", label: "greater", value: "input-3" },
     { type: "number.range", label: "between", value: "input-4" },
   ],
-  DATE_TIME: [{ type: "date", label: "is", value: "input-1" }],
-  DATE: [{ type: "date", label: "is", value: "input-1" }],
+  DATE_TIME: [
+    { type: "datetime", label: "is", value: "input-1" },
+    { type: "datetime.range", label: "between", value: "input-4" },
+  ],
+  DATE: [
+    { type: "date", label: "is", value: "input-1" },
+    { type: "date.range", label: "between", value: "input-4" },
+  ],
   SWATCH: [{ type: "multiselect", label: "in", value: "input-2" }],
 };
 

src/components/ConditionalFilter/controlsType.ts

@@ -7,6 +7,10 @@ export const CONTROL_DEFAULTS = {
   multiselect: [] as ConditionValue,
   select: "",
   combobox: "",
+  date: "",
+  datetime: "",
+  "date.range": ["", ""] as [string, string],
+  "datetime.range": ["", ""] as [string, string],
 };
 
 export const getDefaultByControlName = (name: string): ConditionValue =>

src/components/ConditionalFilter/queryVariables.ts

@@ -58,13 +58,27 @@ const createStaticQueryPart = (
   return value;
 };
 
+const getRangeQueryPartByType = (value: [string, string], type: string) => {
+  const [lte, gte] = value;
+
+  switch (type) {
+    case "datetime.range":
+      return { dateTime: { lte, gte } };
+    case "date.range":
+      return { date: { lte, gte } };
+    case "number.range":
+    default:
+      return { valuesRange: { lte: parseFloat(lte), gte: parseFloat(gte) } };
+  }
+};
+
 const createAttributeQueryPart = (
   attributeSlug: string,
   selected: ConditionSelected,
 ): AttributeInput => {
   if (!selected.conditionValue) return { slug: attributeSlug };
 
-  const { label } = selected.conditionValue;
+  const { label, type } = selected.conditionValue;
   const { value } = selected;
 
   if (label === "lower" && typeof value === "string") {
@@ -76,10 +90,9 @@ const createAttributeQueryPart = (
   }
 
   if (isTuple(value) && label === "between") {
-    const [lte, gte] = value;
     return {
       slug: attributeSlug,
-      valuesRange: { lte: parseFloat(lte), gte: parseFloat(gte) },
+      ...getRangeQueryPartByType(value, type),
     };
   }