feat: add store injector to date filter

Author: iobuhov

Diff for: packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.editorConfig.ts

@@ -35,6 +35,11 @@ export function getProperties(values: DatagridDateFilterPreviewProps, defaultPro
     if (!values.adjustable) {
         hidePropertyIn(defaultProperties, values, "screenReaderButtonCaption");
     }
+
+    if (values.attrChoice === "auto") {
+        hidePropertyIn(defaultProperties, values, "attributes");
+    }
+
     if (values.defaultFilter !== "between") {
         hidePropertiesIn(defaultProperties, values, [
             "defaultStartDate",

Diff for: packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.tsx

@@ -4,10 +4,18 @@ import { DatagridDateFilterContainerProps } from "../typings/DatagridDateFilterP
 import { Container } from "./components/DateFilterContainer";
 import { withDateFilterAPI } from "./hocs/withDateFilterAPI";
 import { isLoadingDefaultValues } from "./utils/widget-utils";
+import { withDateLinkedAttributes } from "./hocs/withDateLinkedAttributes";
 
 const container = withPreloader(Container, isLoadingDefaultValues);
-const Widget = withDateFilterAPI(container);
+const FilterAuto = withDateFilterAPI(container);
+const FilterLinked = withDateLinkedAttributes(container);
 
 export default function DatagridDateFilter(props: DatagridDateFilterContainerProps): ReactElement | null {
-    return <Widget {...props} />;
+    const isAuto = props.attrChoice === "auto";
+
+    if (isAuto) {
+        return <FilterAuto {...props} />;
+    }
+
+    return <FilterLinked {...props} />;
 }

Diff for: packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.xml

@@ -29,7 +29,7 @@
                                 <caption>Attribute</caption>
                                 <description />
                                 <attributeTypes>
-                                    <attributeType name="String" />
+                                    <attributeType name="DateTime" />
                                 </attributeTypes>
                             </property>
                         </propertyGroup>

Diff for: packages/pluggableWidgets/datagrid-date-filter-web/src/hocs/withDateLinkedAttributes.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 { Date_InputFilterInterface } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
+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 { DateStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/DateStoreProvider";
+import { ISetupable } from "@mendix/widget-plugin-mobx-kit/setupable";
+
+interface RequiredProps {
+    attributes: Array<{
+        attribute: AttributeMetaData<Date>;
+    }>;
+    name: string;
+}
+
+interface StoreProvider extends ISetupable {
+    store: Date_InputFilterInterface;
+}
+
+type Component<P extends object> = (props: P) => React.ReactElement;
+
+export function withDateLinkedAttributes<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: Date_InputFilterInterface;
+    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 DateStoreProvider(filterAPI.value, {
+                attributes: props.attributes.map(obj => obj.attribute),
+                dataKey: props.name
+            }),
+            channel: filterAPI.value.parentChannelName
+        });
+    });
+}

Diff for: packages/pluggableWidgets/datagrid-date-filter-web/typings/DatagridDateFilterProps.d.ts

@@ -9,7 +9,7 @@ import { ActionValue, AttributeMetaData, DynamicValue, EditableValue } from "men
 export type AttrChoiceEnum = "auto" | "linked";
 
 export interface AttributesType {
-    attribute: AttributeMetaData<string>;
+    attribute: AttributeMetaData<Date>;
 }
 
 export type DefaultFilterEnum = "between" | "greater" | "greaterEqual" | "equal" | "notEqual" | "smaller" | "smallerEqual" | "empty" | "notEmpty";