feat: add new set of properties

Author: iobuhov

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, ["ref", "refOptions", "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.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">
+                    <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,33 @@
                         </property>
                     </properties>
                 </property>
+                <!-- end: Attr type -->
+
+                <!-- start: Ref type -->
+                <property key="ref" type="association" selectableObjects="refOptions" required="false" dataSource="linkedDs">
+                    <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="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/hocs/withDropdownLinkedAttributes.tsx

@@ -0,0 +1,71 @@
+import { createElement } from "react";
+import { AttributeMetaData } from "mendix";
+import { useFilterAPI } from "@mendix/widget-plugin-filtering/context";
+import { APIError } from "@mendix/widget-plugin-filtering/errors";
+import { error, value, Result } from "@mendix/widget-plugin-filtering/result-meta";
+import { PickerFilterStore } from "@mendix/widget-plugin-filtering/typings/PickerFilterStore";
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
+import { ISetupable } from "@mendix/widget-plugin-mobx-kit/setupable";
+import { DropdownStoreProvider } from "@mendix/widget-plugin-filtering";
+
+interface RequiredProps {
+    attributes: Array<{
+        attribute: AttributeMetaData<string>;
+    }>;
+    name: string;
+}
+
+interface StoreProvider extends ISetupable {
+    store: PickerFilterStore;
+}
+
+type Component<P extends object> = (props: P) => React.ReactElement;
+
+export function withDropdownLinkedAttributes<P extends RequiredProps>(
+    component: Component<P & InjectableFilterAPI>
+): Component<P> {
+    const StoreInjector = withInjectedStore(component);
+
+    return function FilterAPIProvider(props) {
+        const api = useStoreProvider(props);
+
+        if (api.hasError) {
+            return <Alert bootstrapStyle="danger">{api.error.message}</Alert>;
+        }
+
+        return <StoreInjector {...props} {...api.value} />;
+    };
+}
+
+function withInjectedStore<P extends object>(
+    Component: Component<P & InjectableFilterAPI>
+): Component<P & { provider: StoreProvider; channel: string }> {
+    return function StoreInjector(props) {
+        const provider = useSetup(() => props.provider);
+        return <Component {...props} filterStore={provider.store} parentChannelName={props.channel} />;
+    };
+}
+
+interface InjectableFilterAPI {
+    filterStore: PickerFilterStore;
+    parentChannelName?: string;
+}
+
+function useStoreProvider(props: RequiredProps): Result<{ provider: StoreProvider; channel: string }, APIError> {
+    const filterAPI = useFilterAPI();
+    return useConst(() => {
+        if (filterAPI.hasError) {
+            return error(filterAPI.error);
+        }
+
+        return value({
+            provider: new DropdownStoreProvider(filterAPI.value, {
+                attributes: props.attributes.map(obj => obj.attribute),
+                dataKey: props.name
+            }),
+            channel: filterAPI.value.parentChannelName
+        });
+    });
+}

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

@@ -4,7 +4,11 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, DynamicValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue, ListAttributeValue, ListReferenceValue, ListReferenceSetValue } from "mendix";
+
+export type BaseTypeEnum = "attr" | "ref";
+
+export type AttrChoiceEnum = "auto" | "linked";
 
 export interface FilterOptionsType {
     caption: DynamicValue<string>;
@@ -25,9 +29,15 @@ export interface DatagridDropdownFilterContainerProps {
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
+    baseType: BaseTypeEnum;
+    attrChoice: AttrChoiceEnum;
+    attr: ListAttributeValue<string | boolean>;
     auto: boolean;
-    defaultValue?: DynamicValue<string>;
     filterOptions: FilterOptionsType[];
+    ref?: ListReferenceValue | ListReferenceSetValue;
+    refOptions?: ListValue;
+    fetchOptionsLazy: boolean;
+    defaultValue?: DynamicValue<string>;
     filterable: boolean;
     multiSelect: boolean;
     emptyOptionCaption?: DynamicValue<string>;
@@ -50,9 +60,15 @@ export interface DatagridDropdownFilterPreviewProps {
     readOnly: boolean;
     renderMode: "design" | "xray" | "structure";
     translate: (text: string) => string;
+    baseType: BaseTypeEnum;
+    attrChoice: AttrChoiceEnum;
+    attr: string;
     auto: boolean;
-    defaultValue: string;
     filterOptions: FilterOptionsPreviewType[];
+    ref: string;
+    refOptions: {} | { caption: string } | { type: string } | null;
+    fetchOptionsLazy: boolean;
+    defaultValue: string;
     filterable: boolean;
     multiSelect: boolean;
     emptyOptionCaption: string;

packages/shared/widget-plugin-filtering/src/custom-filter-api/DropdownStoreProvider.ts

@@ -0,0 +1,42 @@
+import { ListAttributeValue } from "mendix";
+import { FilterAPI } from "../context";
+import { StaticSelectFilterStore } from "../stores/picker/StaticSelectFilterStore";
+import { PickerFilterStore } from "../typings/PickerFilterStore";
+import { BaseStoreProvider } from "./BaseStoreProvider";
+import { FilterSpec } from "./typings";
+
+export class DropdownStoreProvider extends BaseStoreProvider<StaticSelectFilterStore> {
+    protected _store: StaticSelectFilterStore;
+    protected filterAPI: FilterAPI;
+    readonly dataKey: string;
+
+    constructor(filterAPI: FilterAPI, spec: FilterSpec<string>) {
+        super();
+        this.filterAPI = filterAPI;
+        this.dataKey = spec.dataKey;
+
+        // Convert AttributeMetaData to ListAttributeValue
+        const attributes = spec.attributes.map(attr => {
+            const defaultFormatter = {
+                format: (value: any) => String(value),
+                parse: (value: string) => ({ valid: true, value })
+            };
+
+            return {
+                ...attr,
+                isList: false,
+                get: (obj: any) => obj[attr.id],
+                formatter: defaultFormatter
+            } as ListAttributeValue;
+        });
+
+        this._store = new StaticSelectFilterStore(
+            attributes,
+            this.findInitFilter(filterAPI.sharedInitFilter, this.dataKey)
+        );
+    }
+
+    get store(): PickerFilterStore {
+        return this._store;
+    }
+}

packages/shared/widget-plugin-filtering/src/custom-filter-api/index.ts

@@ -0,0 +1,6 @@
+export * from "./BaseStoreProvider";
+export * from "./DateStoreProvider";
+export * from "./DropdownStoreProvider";
+export * from "./NumberStoreProvider";
+export * from "./StringStoreProvider";
+export * from "./typings";

packages/shared/widget-plugin-filtering/src/index.ts

@@ -0,0 +1 @@
+export * from "./custom-filter-api/DropdownStoreProvider";