Storing filter value by left operand (#3866)

* Update expression value

* Changeset

* Fix linter

.changeset/giant-bobcats-sip.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Update ExpressionValue for fitlers

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -1,16 +1,49 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import { InitialStateResponse } from "../API/InitialStateResponse";
 import { LeftOperand } from "./../useLeftOperands";
-import { UrlEntry, UrlToken } from "./../ValueProvider/UrlToken";
+import { TokenType, UrlEntry, UrlToken } from "./../ValueProvider/UrlToken";
 import { Condition } from "./Condition";
 import { ConditionItem, ConditionOptions } from "./ConditionOptions";
 import { ConditionSelected } from "./ConditionSelected";
 import { ConditionValue, ItemOption } from "./ConditionValue";
 
-interface ExpressionValue {
+
-  value: string;
+class ExpressionValue {
-  label: string;
+  constructor(
-  type: string;
+    public value: string,
+    public label: string,
+    public type: string
+  ) {}
+
+  public static fromLeftOperand(leftOperand: LeftOperand) {
+    return new ExpressionValue(
+      leftOperand.slug,
+      leftOperand.label,
+      leftOperand.type
+    )
+  }
+
+  public static fromUrlToken(token: UrlToken) {
+    return new ExpressionValue(
+      token.name,
+      token.name,
+      token.name
+    )
+  }
+
+  public static forAttribute(attributeName: string, response: InitialStateResponse) {
+    const attribute = response.attributeByName(attributeName);
+
+    return new ExpressionValue(
+      attributeName,
+      attribute.label,
+      attribute.inputType,
+    )
+  }
+
+  public static emptyStatic() {
+    return new ExpressionValue("", "", TokenType.STATIC)
+  }
 }
 
 export class FilterElement {
@@ -33,11 +66,7 @@ export class FilterElement {
   }
 
   public updateLeftOperator(leftOperand: LeftOperand) {
-    this.value = {
+    this.value = ExpressionValue.fromLeftOperand(leftOperand);
-      value: leftOperand.slug,
-      label: leftOperand.label,
-      type: leftOperand.type,
-    };
     this.condition = Condition.emptyFromLeftOperand(leftOperand);
   }
 
@@ -109,7 +138,7 @@ export class FilterElement {
 
   public static createEmpty() {
     return new FilterElement(
-      { value: "", label: "", type: "s" },
+      ExpressionValue.emptyStatic(),
       Condition.createEmpty(),
       false,
     );
@@ -118,21 +147,15 @@ export class FilterElement {
   public static fromUrlToken(token: UrlToken, response: InitialStateResponse) {
     if (token.isStatic()) {
       return new FilterElement(
-        { value: token.name, label: token.name, type: token.name },
+        ExpressionValue.fromUrlToken(token),
         Condition.fromUrlToken(token, response),
         false,
       );
     }
 
     if (token.isAttribute()) {
-      const attribute = response.attributeByName(token.name);
-
       return new FilterElement(
-        {
+        ExpressionValue.forAttribute(token.name, response),
-          value: token.name,
-          label: attribute.label,
-          type: attribute.inputType,
-        },
         Condition.fromUrlToken(token, response),
         false,
       );

src/components/ConditionalFilter/ValueProvider/UrlToken.ts

@@ -53,14 +53,17 @@ export class UrlEntry {
     tokenSlug: TokenTypeValue
   ) {
     const { conditionValue } = condition;
+    const slug = slugFromConditionValue(condition.value)
+
+    if (!conditionValue) {
+      return new UrlEntry(tokenSlug, slug)
+    }
+
     const conditionIndex = CONDITIONS.findIndex(
-      el => conditionValue && el === conditionValue.label,
+      el => el === conditionValue.label,
     );
     
-    return new UrlEntry(
+    return new UrlEntry(`${tokenSlug}${conditionIndex}.${paramName}`, slug)
-      `${tokenSlug}${conditionIndex}.${paramName}`,
-      slugFromConditionValue(condition.value)
-    )
   }
 }