From f3a52d2e086c89c1251fe605e68d7ffd90c897e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Thu, 27 Jul 2023 16:03:38 +0200
Subject: [PATCH] Experimental filters: additional empty values & full support
 for ranges (#4028)

---
 .changeset/tricky-olives-jog.md               |  5 +++++
 .../FilterElement/ConditionSelected.ts        |  8 ++++++--
 src/components/ConditionalFilter/constants.ts | 10 ++++++++--
 .../ConditionalFilter/controlsType.ts         |  4 ++++
 .../ConditionalFilter/queryVariables.ts       | 19 ++++++++++++++++---
 5 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/tricky-olives-jog.md

diff --git a/.changeset/tricky-olives-jog.md b/.changeset/tricky-olives-jog.md
new file mode 100644
index 000000000..91aafaec8
--- /dev/null
+++ b/.changeset/tricky-olives-jog.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Experimental filters: additional empty values & full support for ranges
diff --git a/src/components/ConditionalFilter/FilterElement/ConditionSelected.ts b/src/components/ConditionalFilter/FilterElement/ConditionSelected.ts
index 85d133082..bbdccb296 100644
--- a/src/components/ConditionalFilter/FilterElement/ConditionSelected.ts
+++ b/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() {
diff --git a/src/components/ConditionalFilter/constants.ts b/src/components/ConditionalFilter/constants.ts
index 2ce3ab888..ace1a9a94 100644
--- a/src/components/ConditionalFilter/constants.ts
+++ b/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" }],
 };
 
diff --git a/src/components/ConditionalFilter/controlsType.ts b/src/components/ConditionalFilter/controlsType.ts
index 1a53d8c30..565ffcc06 100644
--- a/src/components/ConditionalFilter/controlsType.ts
+++ b/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 =>
diff --git a/src/components/ConditionalFilter/queryVariables.ts b/src/components/ConditionalFilter/queryVariables.ts
index a1a1919f8..1bc247a68 100644
--- a/src/components/ConditionalFilter/queryVariables.ts
+++ b/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),
     };
   }