@talxis/base-controls 1.2406.2

package/src/components/Grid/filtering/components/FilterCallout/FilterCallout.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Callout, IconButton, PrimaryButton, Button, ICalloutProps } from '@fluentui/react';
+import { Text } from '@fluentui/react/lib/Text';
+import { filterCalloutStyles } from './styles';
+import { IColumnFilterConditionController, useColumnFilterConditionController } from '../../controller/useColumnFilterConditionController';
+import { IGridColumn } from '../../../core/interfaces/IGridColumn';
+import { FilteringUtils } from '../../utils/FilteringUtilts';
+import { ConditionOperator } from './components/ConditionOperator/ConditionOperator';
+import { ConditionValue } from './components/ConditionValue/ConditionValue';
+import { useGridInstance } from '../../../core/hooks/useGridInstance';
+
+export interface IFilterCallout extends ICalloutProps {
+    column: IGridColumn;
+    onDismiss: () => void;
+}
+
+export const FilterCallout = (props: IFilterCallout) => {
+    const {column, onDismiss} = {...props};
+    const condition = useColumnFilterConditionController(column);
+    const grid = useGridInstance();
+    const conditionRef = React.useRef<IColumnFilterConditionController | null>();
+    conditionRef.current = condition;
+    const conditionOperator = condition?.operator.get();
+    const conditionValue = condition?.value.get();
+    const conditionUtils = FilteringUtils.condition();
+
+    const isDeleteButtonDisabled = () => {
+        switch(conditionValue) {
+            case null:
+            case undefined:
+            case "": {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    React.useEffect(() => {
+        return () => {
+            conditionRef.current?.clear();
+        }
+    }, []);
+
+    return (
+        <Callout
+            {...props}
+            calloutWidth={230}
+            className={filterCalloutStyles.root}>
+            <div className={filterCalloutStyles.header}>
+                <Text className={filterCalloutStyles.title} variant="mediumPlus">{grid.labels['filtermenu-filterby']()}</Text>
+                <IconButton onClick={() => onDismiss()} iconProps={{
+                    iconName: 'ChromeClose',
+                }} />
+            </div>
+            {condition &&
+                <>
+                    <div className={filterCalloutStyles.controls}>
+                        <ConditionOperator column={column} />
+                        {conditionUtils.value(conditionOperator!).isEditable &&
+                        <ConditionValue
+                            column={column} />
+                        }
+                    </div>
+                    <div className={filterCalloutStyles.footer}>
+                        <PrimaryButton text={grid.labels['filtermenu-applybutton']()}
+                            onClick={async () => {
+                                if(await condition.save()) {
+                                    props.onDismiss();
+                                }
+                            }} />
+                        {conditionUtils.value(conditionOperator!).isEditable &&
+                            <Button text={grid.labels['filtermenu-clearbutton']()}
+                                disabled={isDeleteButtonDisabled()}
+                                onClick={() => {
+                                    condition.value.set(null);
+                                }} />
+                        }
+                    </div>
+                </>
+            }
+        </Callout>
+    );
+};

package/src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx

@@ -0,0 +1,66 @@
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import { DataType } from '../../../../../core/enums/DataType';
+import { IComboBoxOption } from '@fluentui/react/lib/components/ComboBox/ComboBox.types';
+import { FilteringUtils } from '../../../../utils/FilteringUtilts';
+import { useGridInstance } from '../../../../../core/hooks/useGridInstance';
+import { useColumnFilterConditionController } from '../../../../controller/useColumnFilterConditionController';
+import { IGridColumn } from '../../../../../core/interfaces/IGridColumn';
+import { DatasetConditionOperator } from '../../../../../core/enums/ConditionOperator';
+import React from 'react';
+
+interface IConditionOperator {
+    column: IGridColumn;
+}
+export const ConditionOperator = (props: IConditionOperator) => {
+    const { column } = { ...props };
+    const operatorUtils = FilteringUtils.condition().operator();
+    const grid = useGridInstance();
+    const condition = useColumnFilterConditionController(column);
+
+    //TODO: add missing text operator (begins with, ends with)
+    const getOptions = (): IComboBoxOption[] => {
+        let operators = operatorUtils.textFieldOperators;
+        switch (column.dataType) {
+            case DataType.WHOLE_NONE:
+            case DataType.DECIMAL:
+            case DataType.FP:
+            case DataType.CURRENCY:
+                operators = operatorUtils.numberOperators;
+                break;
+            case DataType.DATE_AND_TIME_DATE_AND_TIME:
+            case DataType.DATE_AND_TIME_DATE_ONLY:
+                operators = operatorUtils.dateOperators;
+                break;
+            case DataType.MULTI_SELECT_OPTIONSET:
+                operators = operatorUtils.multipleOptionSetOperators;
+                break;
+            case DataType.FILE:
+            case DataType.IMAGE: {
+                operators = operatorUtils.fileOperators;
+            }
+        }
+        return operators.map(operator => {
+            return {
+                key: operator.type,
+                text: grid.labels[operator.key]()
+            };
+        });
+    };
+    if(!condition) {
+        return <></>
+    }
+    return <ComboBox
+        {...props}
+        selectedKey={condition.operator.get()}
+        shouldRestoreFocus={false}
+        options={getOptions()}
+        useComboBoxAsMenuWidth
+        styles={{
+            callout: {
+                maxHeight: '300px !important'
+            }
+        }}
+        onChange={(e, option) => {
+            condition.operator.set(option!.key as DatasetConditionOperator)
+        }} />;
+}

package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Component } from "../../../../../core/components/Component/Component";
+import { IGridColumn } from "../../../../../core/interfaces/IGridColumn";
+import { IColumnFilterConditionController, useColumnFilterConditionController } from "../../../../controller/useColumnFilterConditionController";
+import { ConditionComponentValue } from "./model/ConditionComponentValue";
+import React from 'react';
+
+interface IConditionValue {
+    column: IGridColumn;
+}
+
+export const ConditionValue = (props: IConditionValue) => {
+    const condition = useColumnFilterConditionController(props.column);
+    if (!condition) {
+        return <></>
+    }
+    return <InternalConditionValue {...condition} />
+}
+
+const InternalConditionValue = (controller: IColumnFilterConditionController) => {
+    const componentContainerRef = useRef<HTMLDivElement>(null);
+    const controllerRef = useRef<IColumnFilterConditionController>(controller);
+    controllerRef.current = controller;
+    const conditionComponentValue = useMemo(() => new ConditionComponentValue(controllerRef), []);
+    const column = conditionComponentValue.column;
+
+    useEffect(() => {
+        if (conditionComponentValue.get() === null) {
+            const input = componentContainerRef.current?.querySelector('input')
+            input?.focus()
+        }
+    }, [conditionComponentValue.get()])
+
+    return (
+        <div ref={componentContainerRef}>
+            <Component
+                column={column}
+                value={conditionComponentValue.get()}
+                onNotifyOutputChanged={(value) => conditionComponentValue.set(value)}
+                additionalParameters={{
+                    MultipleEnabled: {
+                        raw: true
+                    }
+                }}
+            />
+        </div>
+    )
+}

package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.ts

@@ -0,0 +1,120 @@
+import dayjs from "dayjs";
+import { DatasetConditionOperator } from "../../../../../../core/enums/ConditionOperator";
+import { DataType } from "../../../../../../core/enums/DataType";
+import { IColumnFilterConditionController } from "../../../../../controller/useColumnFilterConditionController";
+import { FilteringUtils } from "../../../../../utils/FilteringUtilts";
+
+export class ConditionComponentValue {
+    //needs to be ref to keep the current reference
+    private _columnFilterConditionControllerRef: React.MutableRefObject<IColumnFilterConditionController>;
+    private _conditionUtils = FilteringUtils.condition();
+
+    constructor(columnFilterConditionControllerRef: React.MutableRefObject<IColumnFilterConditionController>) {
+        this._columnFilterConditionControllerRef = columnFilterConditionControllerRef;
+    }
+
+    public get column() {
+        const _column = {...this._columnFilterConditionController.column};
+        //always needs to be required for filter values if non valid value is present
+        if(!this._columnFilterConditionController.value.valid) {
+            _column.isRequired = true;
+        }
+        switch (this._columnFilterConditionController.column.dataType) {
+            case DataType.OPTIONSET:
+            case DataType.TWO_OPTIONS: {
+                _column.dataType = DataType.MULTI_SELECT_OPTIONSET;
+                break;
+            }
+            //In Power Apps, DateTime fields filters do not allow setting filters for time, only for the date
+            case DataType.DATE_AND_TIME_DATE_AND_TIME: {
+                _column.dataType = DataType.DATE_AND_TIME_DATE_ONLY;
+                break;
+            }
+        }
+        this._conditionUtils.operator(this._operator.get()).allowsOnlyNumber
+        if (this._conditionUtils.operator(this._operator.get()).allowsOnlyNumber) {
+            _column.dataType = DataType.WHOLE_NONE;
+        }
+        if (this._conditionUtils.operator(this._operator.get()).allowsOnlyFreeText) {
+            _column.dataType = DataType.SINGLE_LINE_TEXT;
+        }
+        return _column;
+    }
+    public get() {
+        let value = this._value.get();
+        if (!value) {
+            return null;
+        }
+        switch (this.column.dataType) {
+            case DataType.MULTI_SELECT_OPTIONSET: {
+                if (typeof value === 'string') {
+                    value = [value];
+                }
+                return value.map((x: string) => parseInt(x))
+            }
+            case DataType.LOOKUP_OWNER:
+            case DataType.LOOKUP_SIMPLE: {
+                if (typeof value === 'string') {
+                    value = [value];
+                }
+                return value.map((x: string) => {
+                    return {
+                        entityType: "",
+                        name: "",
+                        id: x
+                    } as ComponentFramework.LookupValue;
+                })
+            }
+        }
+        return value;
+    }
+    public set(value: any) {
+        switch (this.column.dataType) {
+            case DataType.DATE_AND_TIME_DATE_AND_TIME:
+            case DataType.DATE_AND_TIME_DATE_ONLY: {
+                if(value instanceof Date) {
+
+                     //the column of date time is always converted to Date column in Power Apps
+                     value = dayjs(value).format('YYYY-MM-DD');
+                }
+                break;
+            }
+            case DataType.MULTI_SELECT_OPTIONSET: {
+                switch (this._operator.get()) {
+                    case DatasetConditionOperator.Equal:
+                    case DatasetConditionOperator.NotEqual: {
+                        if (value?.length === 1) {
+                            value = value[0].toString();
+                            this._value.set(value);
+                            return;
+                        }
+                    }
+                }
+                for (let i = 0; i < value?.length; i++) {
+                    value[i] = value[i].toString()
+                }
+                this._value.set(value);
+                return;
+            }
+            case DataType.LOOKUP_OWNER:
+            case DataType.LOOKUP_SIMPLE: {
+                if(value?.length > 1) {
+                    value = value.map((x: ComponentFramework.LookupValue) => x.id);
+                    break;
+                }
+                value = value[0]?.id;
+            }
+
+        }
+        this._value.set(value);
+    }
+    private get _columnFilterConditionController() {
+        return this._columnFilterConditionControllerRef.current;
+    }
+    private get _value() {
+        return this._columnFilterConditionController.value;
+    }
+    private get _operator() {
+        return this._columnFilterConditionController.operator;
+    }
+}

package/src/components/Grid/filtering/components/FilterCallout/styles.ts

@@ -0,0 +1,37 @@
+import { mergeStyleSets } from "@fluentui/react";
+
+export const filterCalloutStyles = mergeStyleSets({
+    controls: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        flexGrow: 1
+    },
+    root: {
+        minHeight: 200,
+        padding: 16,
+        '.ms-Callout-main': {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+        },
+        '.TALXIS__combobox__root, [class*="TALXIS__textfield__root"], [class*="TALXIS__tag-picker__root"]': {
+            padding: `0x !important`
+        }
+    },
+    title: {
+        fontWeight: 600,
+        flexGrow: 1
+    },
+    header: {
+        display: 'flex',
+        'i': {
+            fontSize: 12
+        }
+    },
+    footer: {
+        display: 'flex',
+        gap: 10,
+        justifyContent: 'flex-end'
+    }
+});

package/src/components/Grid/filtering/constants.ts

@@ -0,0 +1,48 @@
+import { DatasetConditionOperator } from "../core/enums/ConditionOperator";
+
+export const OPERATORS = [
+    { type: DatasetConditionOperator.None, key: 'condition-none' },
+    { type: DatasetConditionOperator.Equal, key: 'condition-equal' },
+    { type: DatasetConditionOperator.NotEqual, key: 'condition-notequal' },
+    { type: DatasetConditionOperator.GreaterThan, key: 'condition-greaterthan' },
+    { type: DatasetConditionOperator.LessThan, key: 'condition-lessthan' },
+    { type: DatasetConditionOperator.GreaterEqual, key: 'condition-greaterequal' },
+    { type: DatasetConditionOperator.LessEqual, key: 'condition-lessequal' },
+    { type: DatasetConditionOperator.Like, key: 'condition-like' },
+    { type: DatasetConditionOperator.NotLike, key: 'condition-notlike' },
+    { type: DatasetConditionOperator.In, key: 'condition-in' },
+    { type: DatasetConditionOperator.NotIn, key: 'condition-notin' },
+    { type: DatasetConditionOperator.Null, key: 'condition-null' },
+    { type: DatasetConditionOperator.NotNull, key: 'condition-notnull' },
+    { type: DatasetConditionOperator.Yesterday, key: 'condition-yesterday' },
+    { type: DatasetConditionOperator.Today, key: 'condition-today' },
+    { type: DatasetConditionOperator.Tomorrow, key: 'condition-tomorrow' },
+    { type: DatasetConditionOperator.Last7Days, key: 'condition-last7days' },
+    { type: DatasetConditionOperator.Next7Days, key: 'condition-next7days' },
+    { type: DatasetConditionOperator.LastWeek, key: 'condition-lastweek' },
+    { type: DatasetConditionOperator.ThisWeek, key: 'condition-thisweek' },
+    { type: DatasetConditionOperator.LastMonth, key: 'condition-lastmonth' },
+    { type: DatasetConditionOperator.ThisMonth, key: 'condition-thismonth' },
+    { type: DatasetConditionOperator.On, key: 'condition-on' },
+    { type: DatasetConditionOperator.OnOrBefore, key: 'condition-onorbefore' },
+    { type: DatasetConditionOperator.OnOrAfter, key: 'condition-onorafter' },
+    { type: DatasetConditionOperator.LastYear, key: 'condition-lastyear' },
+    { type: DatasetConditionOperator.ThisYear, key: 'condition-thisyear' },
+    { type: DatasetConditionOperator.LastXDays, key: 'condition-lastxdays' },
+    { type: DatasetConditionOperator.NextXDays, key: 'condition-nextxdays' },
+    { type: DatasetConditionOperator.LastXMonths, key: 'condition-lastxmonths' },
+    { type: DatasetConditionOperator.NextXMonths, key: 'condition-nextxmonths' },
+    { type: DatasetConditionOperator.Contains, key: 'condition-contains' },
+    { type: DatasetConditionOperator.BeginWith, key: 'condition-beginwith' },
+    { type: DatasetConditionOperator.DoesNotBeginWith, key: 'condition-doesnotbeginwith' },
+    { type: DatasetConditionOperator.EndsWith, key: 'condition-endswith' },
+    { type: DatasetConditionOperator.DoesNotEndWith, key: 'condition-doesnotendwith' },
+    { type: DatasetConditionOperator.InFiscalPeriodAndYear, key: 'condition-infiscalperiodandyear' },
+    { type: DatasetConditionOperator.Above, key: 'condition-above' },
+    { type: DatasetConditionOperator.Under, key: 'condition-under' },
+    { type: DatasetConditionOperator.NotUnder, key: 'condition-notunder' },
+    { type: DatasetConditionOperator.AboveOrEqual, key: 'condition-aboveorequal' },
+    { type: DatasetConditionOperator.UnderOrEqual, key: 'condition-underorequal' },
+    { type: DatasetConditionOperator.ContainValues, key: 'condition-containvalues' },
+    { type: DatasetConditionOperator.DoesNotContainValues, key: 'condition-doesnotcontainvalues' }, // Added missing operator
+];

package/src/components/Grid/filtering/controller/useColumnFilterConditionController.ts

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { DatasetConditionOperator } from "../../core/enums/ConditionOperator";
+import { useGridInstance } from "../../core/hooks/useGridInstance"
+import { useRefreshCallback } from "../../core/hooks/useRefreshCallback";
+import { useRerender } from "../../core/hooks/useRerender";
+import { IGridColumn } from "../../core/interfaces/IGridColumn";
+import { Condition } from "../model/Condition";
+
+export interface IColumnFilterConditionController {
+    isAppliedToDataset: boolean,
+    column: IGridColumn,
+    value: {
+        valid: boolean;
+        get: () => any;
+        set: (value: any) => void;
+    }
+    operator: {
+        get: () => DatasetConditionOperator | undefined;
+        set: (operator: DatasetConditionOperator) => void;
+    },
+    remove: () => void;
+    save: () => Promise<boolean>;
+    clear: () => void;
+}
+
+export const useColumnFilterConditionController = (column: IGridColumn): IColumnFilterConditionController | null => {
+    const filtering = useGridInstance().filtering;
+    const conditionPromise = useMemo(() => filtering.condition(column), []);
+    const [controller, setController] = useState<IColumnFilterConditionController>();
+    
+    const refresh = async () => {
+        const condition = await conditionPromise;
+        setController(prevState => ({
+            ...prevState,
+            isAppliedToDataset: condition.isAppliedToDataset,
+            column: condition?.column,
+            operator: {
+                get: () => condition.operator.get(),
+                set: (operator) => condition.operator.set(operator)
+            },
+            value: {
+                valid: condition.isValid,
+                get: () => condition.value.get(),
+                set: (value) => condition.value.set(value)
+            },
+            remove: () => condition?.remove(),
+            save: () => condition?.save(),
+            clear: () => condition?.clear()
+        }))
+    }
+    useRefreshCallback(conditionPromise, refresh);
+    useEffect(() => {
+        (async () => {
+            refresh();
+        })();
+    }, []);
+
+
+    if(!controller) {
+        return null;
+    }
+    return controller;
+}