@talxis/base-controls 1.2406.2 → 1.2406.4

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

@@ -1,83 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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;
-}