[WC-2870] filtering dropdown

packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json

@@ -41,6 +41,7 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@mendix/widget-plugin-dropdown-filter": "workspace:^",
         "@mendix/widget-plugin-external-events": "workspace:*",
         "@mendix/widget-plugin-filtering": "workspace:*",
         "classnames": "^2.3.2"

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

@@ -1,4 +1,4 @@
-import { hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { hidePropertiesIn, hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
 import { chevronDownIcon, chevronDownIconDark } from "@mendix/widget-plugin-filtering/preview/editor-preview-icons";
 import {
     ContainerProps,
@@ -13,8 +13,10 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     const showSelectedItemsStyle = values.filterable && values.multiSelect;
     const showSelectionMethod = showSelectedItemsStyle && values.selectedItemsStyle === "boxes";
 
-    if (values.auto) {
-        hidePropertyIn(defaultProperties, values, "filterOptions");
+    if (values.baseType === "attr") {
+        defaultProperties = attrGroupProperties(values, defaultProperties);
+    } else {
+        hidePropertiesIn(defaultProperties, values, ["attr", "attrChoice", "filterOptions", "auto"]);
     }
 
     if (values.filterable) {
@@ -33,6 +35,21 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     return defaultProperties;
 }
 
+function attrGroupProperties(values: DatagridDropdownFilterPreviewProps, defaultProperties: Properties): Properties {
+    hidePropertiesIn(defaultProperties, values, ["refEntity", "refOptions", "refCaption", "fetchOptionsLazy"]);
+
+    if (values.attrChoice === "auto") {
+        hidePropertyIn(defaultProperties, {} as { linkedDs: unknown }, "linkedDs");
+        hidePropertyIn(defaultProperties, values, "attr");
+    }
+
+    if (values.auto) {
+        hidePropertyIn(defaultProperties, values, "filterOptions");
+    }
+
+    return defaultProperties;
+}
+
 export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
     const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     return {

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx

@@ -1,10 +1,10 @@
 import { enableStaticRendering } from "mobx-react-lite";
-enableStaticRendering(true);
-
 import { createElement, ReactElement } from "react";
 import { DatagridDropdownFilterPreviewProps } from "../typings/DatagridDropdownFilterProps";
 import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
-import { Select } from "@mendix/widget-plugin-filtering/controls/select/Select";
+import { Select } from "@mendix/widget-plugin-dropdown-filter/controls/select/Select";
+
+enableStaticRendering(true);
 
 function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
     return (

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

@@ -1,42 +1,17 @@
 import { createElement, ReactElement } from "react";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { DatagridDropdownFilterContainerProps } from "../typings/DatagridDropdownFilterProps";
-import { StaticFilterContainer } from "./components/StaticFilterContainer";
-import { withSelectFilterAPI, Select_FilterAPIv2 } from "./hocs/withSelectFilterAPI";
-import { RefFilterContainer } from "./components/RefFilterContainer";
+import { AttrFilter } from "./components/AttrFilter";
+import { RefFilter } from "./components/RefFilter";
 
-function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAPIv2): React.ReactElement {
-    const commonProps = {
-        ariaLabel: props.ariaLabel?.value,
-        className: props.class,
-        tabIndex: props.tabIndex,
-        styles: props.style,
-        onChange: props.onChange,
-        valueAttribute: props.valueAttribute,
-        parentChannelName: props.parentChannelName,
-        name: props.name,
-        multiselect: props.multiSelect,
-        emptyCaption: props.emptyOptionCaption?.value,
-        defaultValue: props.defaultValue?.value,
-        filterable: props.filterable,
-        selectionMethod: props.selectionMethod,
-        selectedItemsStyle: props.selectedItemsStyle,
-        clearable: props.clearable
-    };
-
-    if (props.filterStore.storeType === "refselect") {
-        return <RefFilterContainer {...commonProps} filterStore={props.filterStore} />;
+function Container(props: DatagridDropdownFilterContainerProps): ReactElement {
+    if (props.baseType === "attr") {
+        return <AttrFilter {...props} />;
     }
 
-    return (
-        <StaticFilterContainer {...commonProps} filterStore={props.filterStore} filterOptions={props.filterOptions} />
-    );
+    return <RefFilter {...props} />;
 }
 
-const container = withPreloader(Container, props => props.defaultValue?.status === "loading");
-
-const Widget = withSelectFilterAPI(container);
+const DatagridDropdownFilter = withPreloader(Container, props => props.defaultValue?.status === "loading");
 
-export default function DatagridDropdownFilter(props: DatagridDropdownFilterContainerProps): ReactElement {
-    return <Widget {...props} />;
-}
+export default DatagridDropdownFilter;

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

@@ -7,16 +7,41 @@
     <helpUrl>https://docs.mendix.com/appstore/modules/data-grid-2#7-2-drop-down-filter</helpUrl>
     <properties>
         <propertyGroup caption="General">
-            <propertyGroup caption="General">
+            <propertyGroup caption="Data source">
+                <property key="baseType" type="enumeration" defaultValue="attr">
+                    <caption>Filter by</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="attr">Attribute</enumerationValue>
+                        <enumerationValue key="ref">Association</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="linkedDs" type="datasource" isLinked="true" isList="true">
+                    <caption>Datasource to Filter</caption>
+                    <description />
+                </property>
+
+                <!-- start: Attr type -->
+                <property key="attrChoice" type="enumeration" defaultValue="auto">
+                    <caption>Attribute config</caption>
+                    <description>"Auto" works only when the widget is placed in a Data grid column.</description>
+                    <enumerationValues>
+                        <enumerationValue key="auto">Auto</enumerationValue>
+                        <enumerationValue key="linked">Custom</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="attr" type="attribute" dataSource="linkedDs" isMetaData="true">
+                    <caption>Attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="Enum" />
+                        <attributeType name="Boolean" />
+                    </attributeTypes>
+                </property>
                 <property key="auto" type="boolean" defaultValue="true">
                     <caption>Automatic options</caption>
                     <description>Show options based on the references or the enumeration values and captions.</description>
                 </property>
-                <property key="defaultValue" type="expression" required="false">
-                    <caption>Default value</caption>
-                    <description>Empty option caption will be shown by default or if configured default value matches none of the options</description>
-                    <returnType type="String" />
-                </property>
                 <property key="filterOptions" type="object" isList="true" required="false">
                     <caption>Options</caption>
                     <description />
@@ -34,6 +59,40 @@
                         </property>
                     </properties>
                 </property>
+                <!-- end: Attr type -->
+
+                <!-- start: Ref type -->
+                <property key="refEntity" type="association" selectableObjects="refOptions" required="true" dataSource="linkedDs" isMetaData="true">
+                    <caption>Entity</caption>
+                    <description>Set the entity to enable filtering over association.</description>
+                    <associationTypes>
+                        <associationType name="Reference" />
+                        <associationType name="ReferenceSet" />
+                    </associationTypes>
+                </property>
+                <property key="refOptions" type="datasource" isList="true" required="false">
+                    <caption>Selectable objects</caption>
+                    <description>The options to show in the Drop-down filter widget.</description>
+                </property>
+                <property key="refCaption" type="attribute" dataSource="refOptions" required="false">
+                    <caption>Caption</caption>
+                    <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>
+                </property>
+                <!-- end: Ref type -->
+            </propertyGroup>
+            <propertyGroup caption="General">
+                <property key="defaultValue" type="expression" required="false">
+                    <caption>Default value</caption>
+                    <description>Empty option caption will be shown by default or if configured default value matches none of the options</description>
+                    <returnType type="String" />
+                </property>
                 <property key="filterable" type="boolean" defaultValue="false">
                     <caption>Filterable</caption>
                     <description />

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/AttrFilter.tsx

@@ -0,0 +1,33 @@
+import { ReactElement, createElement } from "react";
+import { StaticFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/StaticFilterContainer";
+import { withParentProvidedEnumStore } from "../hocs/withParentProvidedEnumStore";
+import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
+import { withLinkedEnumStore } from "../hocs/withLinkedEnumStore";
+import { EnumFilterAPI } from "./typings";
+
+export function AttrFilter(props: DatagridDropdownFilterContainerProps): ReactElement {
+    if (props.auto) {
+        return <AutoAttrFilter {...props} />;
+    }
+
+    return <LinkedAttrFilter {...props} />;
+}
+
+const AutoAttrFilter = withParentProvidedEnumStore(Connector);
+
+const LinkedAttrFilter = withLinkedEnumStore(Connector);
+
+function Connector(props: DatagridDropdownFilterContainerProps & EnumFilterAPI): ReactElement {
+    return (
+        <StaticFilterContainer
+            {...props}
+            multiselect={props.multiSelect}
+            ariaLabel={props.ariaLabel?.value}
+            className={props.class}
+            styles={props.style}
+            emptyCaption={props.emptyOptionCaption?.value}
+            defaultValue={props.defaultValue?.value}
+            parentChannelName={props.parentChannelName}
+        />
+    );
+}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx

@@ -0,0 +1,22 @@
+import { createElement, ReactElement } from "react";
+import { withLinkedRefStore } from "../hocs/withLinkedRefStore";
+import { RefFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/RefFilterContainer";
+import { RefFilterAPI } from "./typings";
+import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
+
+function Connector(props: DatagridDropdownFilterContainerProps & RefFilterAPI): ReactElement {
+    return (
+        <RefFilterContainer
+            {...props}
+            multiselect={props.multiSelect}
+            ariaLabel={props.ariaLabel?.value}
+            className={props.class}
+            styles={props.style}
+            emptyCaption={props.emptyOptionCaption?.value}
+            defaultValue={props.defaultValue?.value}
+            parentChannelName={props.parentChannelName}
+        />
+    );
+}
+
+export const RefFilter = withLinkedRefStore(Connector);