feat: dropdown filter caption expressions

Author: iobuhov

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts

@@ -24,6 +24,16 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
     }
 
+    if (!values.filterable) {
+        hidePropertyIn(defaultProperties, values, "refSearchAttr");
+    }
+
+    if (values.refCaptionSource === "attr") {
+        hidePropertiesIn(defaultProperties, values, ["refCaptionExp", "refSearchAttr"]);
+    } else {
+        hidePropertyIn(defaultProperties, values, "refCaption");
+    }
+
     if (!showSelectedItemsStyle) {
         hidePropertyIn(defaultProperties, values, "selectedItemsStyle");
     }
@@ -36,7 +46,15 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
 }
 
 function attrGroupProperties(values: DatagridDropdownFilterPreviewProps, defaultProperties: Properties): Properties {
-    hidePropertiesIn(defaultProperties, values, ["refEntity", "refOptions", "refCaption", "fetchOptionsLazy"]);
+    hidePropertiesIn(defaultProperties, values, [
+        "fetchOptionsLazy",
+        "refCaption",
+        "refCaptionExp",
+        "refCaptionSource",
+        "refEntity",
+        "refOptions",
+        "refSearchAttr"
+    ]);
 
     if (values.attrChoice === "auto") {
         hidePropertyIn(defaultProperties, {} as { linkedDs: unknown }, "linkedDs");

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

@@ -74,13 +74,33 @@
                     <caption>Selectable objects</caption>
                     <description>The options to show in the Drop-down filter widget.</description>
                 </property>
+                <property key="refCaptionSource" type="enumeration" defaultValue="attr">
+                    <caption>Caption source</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="attr">Attribute</enumerationValue>
+                        <enumerationValue key="exp">Expression</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="refCaption" type="attribute" dataSource="refOptions" required="false">
                     <caption>Caption</caption>
                     <description />
                     <attributeTypes>
                         <attributeType name="String" />
                     </attributeTypes>
                 </property>
+                <property key="refCaptionExp" type="expression" dataSource="refOptions" required="false">
+                    <caption>Caption</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+                <property key="refSearchAttr" type="attribute" dataSource="refOptions" required="true">
+                    <caption>Search attribute</caption>
+                    <description>Required when Filterable is set to yes</description>
+                    <attributeTypes>
+                        <attributeType name="String" />
+                    </attributeTypes>
+                </property>
                 <property key="fetchOptionsLazy" type="boolean" defaultValue="false">
                     <caption>Use lazy load</caption>
                     <description>Lazy loading enables faster parent loading, but with personalization enabled, value restoration will be limited.</description>

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -1,24 +1,27 @@
-import { useEffect, createElement } from "react";
 import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 import { RefFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/RefFilterStore";
 import { FilterAPI, useFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { BaseStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/BaseStoreProvider";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
-import { ListValue, ListAttributeValue, AssociationMetaData } from "mendix";
-import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
+import { AssociationMetaData, ListAttributeValue, ListExpressionValue, ListValue } from "mendix";
+import { createElement, useEffect } from "react";
+import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 import { RefFilterProps } from "../components/typings";
 
-type WidgetProps = Pick<DatagridDropdownFilterContainerProps, "name" | "refEntity" | "refOptions" | "refCaption">;
+type WidgetProps = Pick<
+    DatagridDropdownFilterContainerProps,
+    "name" | "refEntity" | "refOptions" | "refCaption" | "refCaptionExp" | "refCaptionSource" | "refSearchAttr"
+>;
 
 export interface RequiredProps {
     name: string;
     refEntity: AssociationMetaData;
     refOptions: ListValue;
-    refCaption: ListAttributeValue<string>;
-    searchAttrId: ListAttributeValue["id"];
+    refCaption: ListAttributeValue<string> | ListExpressionValue<string>;
+    searchAttrId?: ListAttributeValue["id"];
 }
 
 type Component<P extends object> = (props: P) => React.ReactElement;
@@ -49,16 +52,29 @@ function mapProps(props: WidgetProps): RequiredProps {
         throw new Error("RefFilterStoreProvider: refOptions is required");
     }
 
-    if (!props.refCaption) {
-        throw new Error("RefFilterStoreProvider: refCaption is required");
+    if (props.refCaptionSource === "attr") {
+        if (!props.refCaption) {
+            throw new Error("RefFilterStoreProvider: 'Caption' settings is required");
+        }
+        return {
+            name: props.name,
+            refEntity: props.refEntity,
+            refOptions: props.refOptions,
+            refCaption: props.refCaption,
+            searchAttrId: props.refCaption.id
+        };
+    } else {
+        if (!props.refCaptionExp) {
+            throw new Error("RefFilterStoreProvider: 'Caption' settings is required");
+        }
+        return {
+            name: props.name,
+            refEntity: props.refEntity,
+            refOptions: props.refOptions,
+            refCaption: props.refCaptionExp,
+            searchAttrId: props.refSearchAttr?.id
+        };
     }
-    return {
-        name: props.name,
-        refEntity: props.refEntity,
-        refOptions: props.refOptions,
-        refCaption: props.refCaption,
-        searchAttrId: props.refCaption.id
-    };
 }
 
 function useGate(props: WidgetProps): DerivedPropsGate<RequiredProps> {

packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, AssociationMetaData, AttributeMetaData, DynamicValue, EditableValue, ListValue, ListAttributeValue } from "mendix";
+import { ActionValue, AssociationMetaData, AttributeMetaData, DynamicValue, EditableValue, ListValue, ListAttributeValue, ListExpressionValue } from "mendix";
 
 export type BaseTypeEnum = "attr" | "ref";
 
@@ -15,6 +15,8 @@ export interface FilterOptionsType {
     value: DynamicValue<string>;
 }
 
+export type RefCaptionSourceEnum = "attr" | "exp";
+
 export type SelectedItemsStyleEnum = "text" | "boxes";
 
 export type SelectionMethodEnum = "checkbox" | "rowClick";
@@ -36,7 +38,10 @@ export interface DatagridDropdownFilterContainerProps {
     filterOptions: FilterOptionsType[];
     refEntity: AssociationMetaData;
     refOptions?: ListValue;
+    refCaptionSource: RefCaptionSourceEnum;
     refCaption?: ListAttributeValue<string>;
+    refCaptionExp?: ListExpressionValue<string>;
+    refSearchAttr?: ListAttributeValue<string>;
     fetchOptionsLazy: boolean;
     defaultValue?: DynamicValue<string>;
     filterable: boolean;
@@ -68,7 +73,10 @@ export interface DatagridDropdownFilterPreviewProps {
     filterOptions: FilterOptionsPreviewType[];
     refEntity: string;
     refOptions: {} | { caption: string } | { type: string } | null;
+    refCaptionSource: RefCaptionSourceEnum;
     refCaption: string;
+    refCaptionExp: string;
+    refSearchAttr: string;
     fetchOptionsLazy: boolean;
     defaultValue: string;
     filterable: boolean;