@talxis/base-controls 1.2406.2 → 1.2406.3

package/src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx

@@ -1,71 +0,0 @@
-import { useRef, useState } from 'react';
-import { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';
-import { FilterCallout, IFilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout';
-import { IGridColumn } from '../../interfaces/IGridColumn';
-import { ISortingContextualMenu, SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu';
-import { getColumnHeaderStyles } from './styles';
-import { useGridInstance } from '../../hooks/useGridInstance';
-import React from 'react';
-
-export interface IColumnHeader {
-    baseColumn: IGridColumn;
-}
-
-export const ColumnHeader = (props: IColumnHeader) => {
-    console.log(props);
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<ISortingContextualMenu | null>(null);
-    const [filterCalloutProps, setFilterCalloutProps] = useState<IFilterCallout | null>(null);
-    const columnHeaderStyles = getColumnHeaderStyles(useTheme());
-    const buttonRef = useRef<HTMLElement>(null);
-
-    const onClick = () => {
-        if ((column.isFilterable === false && column.isSortable === false)) {
-            return;
-        }
-        setColumnHeaderContextualMenuProps({
-            column: column,
-            onDismiss: (e, dismissAll, showFilterCallout) => {
-                setColumnHeaderContextualMenuProps(null);
-                if (!showFilterCallout) {
-                    return;
-                }
-                setFilterCalloutProps({
-                    column: column,
-                    onDismiss: () => {
-                        setFilterCalloutProps(null)
-                    }
-                })
-            }
-        });
-    }
-    return (
-        <>
-            <CommandBarButton
-                elementRef={buttonRef}
-                title={column.displayName}
-                className={columnHeaderStyles.root}
-                onClick={onClick}
-            >
-                {grid.isEditable && !column.isEditable && <Icon className={columnHeaderStyles.editIcon} iconName='Uneditable' />}
-                <div className={columnHeaderStyles.labelWrapper}>
-                    <Label className={columnHeaderStyles.label}>{column.displayName}</Label>
-                    {column.isRequired &&
-                        <span className={columnHeaderStyles.requiredSymbol}>*</span>
-                    }
-                </div>
-                <div className={columnHeaderStyles.filterSortIcons}>
-                    {column.isSorted && <Icon iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'} />}
-                    {column.isFiltered && <Icon iconName='Filter' />}
-                </div>
-            </CommandBarButton>
-            {columnHeaderContextualMenuProps &&
-                <SortingContextualMenu target={buttonRef} {...columnHeaderContextualMenuProps} />
-            }
-            {filterCalloutProps &&
-                <FilterCallout target={buttonRef} {...filterCalloutProps} />
-            }
-        </>
-    )
-};

package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx

@@ -1,31 +0,0 @@
-import { Checkbox, useTheme } from "@fluentui/react";
-import React from "react";
-import { useSelectionController } from "../../../../../selection/controllers/useSelectionController";
-import { useGridInstance } from "../../../../hooks/useGridInstance";
-import { getGlobalCheckboxStyles } from "./styles";
-
-export const GlobalCheckBox = () => {
-    const grid = useGridInstance();
-    const theme = useTheme();
-    const styles = getGlobalCheckboxStyles(theme);
-    const selection = useSelectionController();
-    if(grid.dataset.sortedRecordIds.length === 0) {
-        return <></>
-    }
-    return (
-        <div className={styles.root}>
-            {selection.type === 'multiple' &&
-                <Checkbox
-                    checked={selection.allRecordsSelected}
-                    indeterminate={selection.selectedRecordIds.length > 0 && !selection.allRecordsSelected}
-                    onChange={(e, checked) => {
-                        if(checked) {
-                            selection.selectAll()
-                            return;
-                        }
-                        selection.clear();
-                    }} />
-            }
-        </div>
-    )
-};

package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts

@@ -1,16 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react"
-
-export const getGlobalCheckboxStyles = (theme: ITheme) => {
-    return mergeStyleSets({
-        root: {
-            backgroundColor: theme.palette.white,
-            flexGrow: 1,
-            display: 'flex',
-            justifyContent: 'center',
-            height: '100%',
-            alignItems: 'center',
-            position: 'relative',
-            left: 1
-        }
-    });
-}

package/src/components/Grid/core/components/ColumnHeader/styles.ts

@@ -1,40 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react";
-
-export const getColumnHeaderStyles = (theme: ITheme) => {
-    return mergeStyleSets({
-        root: {
-            width: '100%',
-            textAlign: 'left',
-            height: 42,
-            paddingLeft: 10,
-            paddingRight: 10,
-            '.ms-Button-flexContainer': {
-                justifyContent: 'flex-start',
-                gap: 2
-            }
-        },
-        labelWrapper: {
-            flex: 1,
-            display: 'flex',
-            minWidth: 0
-        },
-        label: {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            cursor: 'pointer',
-        },
-        requiredSymbol: {
-            color: theme.semanticColors.errorIcon,
-            position: 'relative',
-            top: 4,
-            left: 2
-        },
-        filterSortIcons: {
-            display: 'flex',
-            gap: 2
-        },
-        editIcon: {
-            marginRight: 3
-        }
-    })
-}

package/src/components/Grid/core/components/Component/Component.tsx

@@ -1,59 +0,0 @@
-import { IParameters } from "../../../../../interfaces/parameters";
-import { DateTime } from "../../../../DateTime/DateTime";
-import { Decimal } from "../../../../Decimal/Decimal";
-import { Lookup } from "../../../../Lookup/Lookup";
-import { MultiSelectOptionSet } from "../../../../MultiSelectOptionSet/MultiSelectOptionSet";
-import { OptionSet } from "../../../../OptionSet/OptionSet";
-import { TextField } from "../../../../TextField/TextField";
-import { TwoOptions } from "../../../../TwoOptions/TwoOptions";
-import { Duration } from "../../../../Duration/Duration";
-import { DataType } from "../../enums/DataType";
-import { IGridColumn } from "../../interfaces/IGridColumn";
-import { useComponentController } from "./controller/useComponentController";
-import React from 'react';
-
-export interface IComponentProps {
-    column: IGridColumn;
-    value: any;
-    formattedValue?: string;
-    onNotifyOutputChanged: (value: any) => void;
-    additionalParameters?: IParameters;
-}
-
-export const Component = (props: IComponentProps) => {
-    const controller = useComponentController(props);
-    const {column, componentProps} = {...controller};
-    if(!column) {
-        return <></>
-    }
-    switch(column.dataType) {
-        case DataType.TWO_OPTIONS: {
-            return <TwoOptions {...componentProps!} />
-        }
-        case DataType.OPTIONSET: {
-            return <OptionSet {...componentProps!} />
-        }
-        case DataType.MULTI_SELECT_OPTIONSET: {
-            return <MultiSelectOptionSet {...componentProps!} />
-        }
-        case DataType.DATE_AND_TIME_DATE_AND_TIME:
-        case DataType.DATE_AND_TIME_DATE_ONLY: {
-            return <DateTime {...componentProps!} />
-        }
-        case DataType.DECIMAL:
-        case DataType.WHOLE_NONE:
-        case DataType.CURRENCY: {
-            return <Decimal {...componentProps!} />
-        }
-        case DataType.LOOKUP_SIMPLE:
-        case DataType.LOOKUP_OWNER: {
-            return <Lookup {...componentProps!} />
-        }
-        case DataType.WHOLE_DURATION: {
-            return <Duration {...componentProps!} />
-        }
-        default: {
-            return <TextField {...componentProps!} />
-        }
-    }
-}

package/src/components/Grid/core/components/Component/controller/useComponentController.ts

@@ -1,39 +0,0 @@
-import { useEffect, useMemo,useRef,useState } from "react"
-import { IComponentProps } from "../Component";
-import { Component } from '../model/Component';
-import { useGridInstance } from "../../../hooks/useGridInstance";
-import { IComponent } from "../../../../../../interfaces/context";
-import { IGridColumn } from "../../../interfaces/IGridColumn";
-
-interface IComponentController {
-    column: IGridColumn;
-    componentProps: IComponent<any, any, any>;
-}
-
-export const useComponentController = (props: IComponentProps): IComponentController | undefined => {
-    const grid = useGridInstance();
-    const component = useMemo(() => new Component(grid), []);
-    const [controller, setController] = useState<IComponentController>();
-    const mountedRef = useRef<boolean>(true);
-    
-    useEffect(() => {
-        (async () => {
-            const componentProps = await component.getControlProps(props);
-            if(!mountedRef.current) {
-                return;
-            }
-            setController({
-                column: props.column,
-                componentProps: componentProps
-            })
-        })();
-    }, [props]);
-
-    useEffect(() => {
-        return () => {
-            mountedRef.current = false;
-        }
-    }, []);
-
-    return controller;
-}

package/src/components/Grid/core/components/Component/model/Component.ts

@@ -1,251 +0,0 @@
-import dayjs from "dayjs";
-import { IComponent } from "../../../../../../interfaces/context";
-import { IParameters } from "../../../../../../interfaces/parameters";
-import { IDateTime } from "../../../../../DateTime/interfaces";
-import { IDecimal } from "../../../../../Decimal/interfaces";
-import { IDuration } from "../../../../../Duration";
-import { ILookup } from "../../../../../Lookup/interfaces";
-import { IMultiSelectOptionSet } from "../../../../../MultiSelectOptionSet/interfaces";
-import { IOptionSet } from "../../../../../OptionSet/interfaces";
-import { ITextField } from "../../../../../TextField/interfaces";
-import { ITwoOptions } from "../../../../../TwoOptions/interfaces";
-import { ColumnValidation } from "../../../../validation/model/ColumnValidation";
-import { DataType } from "../../../enums/DataType";
-import { GridDependency } from "../../../model/GridDependency";
-import { IComponentProps } from "../Component";
-
-// Debounce utility function with async/await
-const debounce = (func: (...args: any[]) => Promise<any>, wait: number) => {
-    let timeout: NodeJS.Timeout | null = null;
-    let promiseCache: Promise<any> | null = null;
-
-    return async (...args: any[]) => {
-        if (!promiseCache) {
-            promiseCache = func(...args);
-        }
-
-        if (timeout) clearTimeout(timeout);
-
-        timeout = setTimeout(() => {
-            promiseCache = null;
-        }, wait);
-
-        return promiseCache;
-    };
-};
-
-export class Component extends GridDependency {
-    private _debouncedGetLookupValue = debounce(this._getLookupValue.bind(this), 50);
-    private static _lookupSavedQueriesCache = new Map<string, Promise<ComponentFramework.WebApi.Entity>>;
-
-    public async getControlProps(props: IComponentProps): Promise<IComponent<any, any, any>> {
-        const { column, value, onNotifyOutputChanged, additionalParameters, formattedValue } = { ...props };
-        const [isValid, validationErrorMessage] = new ColumnValidation(this._grid, props.column).validate(value);
-        switch (column.dataType) {
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                const columnMetadata = await this._grid.metadata.get(column);
-                const targets = columnMetadata.Attributes.get(column.attributeName).attributeDescriptor.Targets ?? [];
-                if (column.dataType === DataType.LOOKUP_OWNER) {
-                    targets.push('systemuser', 'team')
-                }
-                const result = {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            getAllViews: async (entityName: string) => {
-                                if (!Component._lookupSavedQueriesCache.get(entityName)) {
-                                    Component._lookupSavedQueriesCache.set(entityName, new Promise(async (resolve) => {
-                                        const response = await this._pcfContext.webAPI.retrieveMultipleRecords('savedquery', `?$filter=returnedtypecode eq '${entityName}' and querytype eq 64&$select=name,savedqueryid,fetchxml`);
-                                        resolve(response.entities[0])
-                                    }))
-                                }
-                                const result = await Component._lookupSavedQueriesCache.get(entityName)!;
-                                return [
-                                    {
-                                        isDefault: true,
-                                        viewName: result.name,
-                                        viewId: result.savedqueryid,
-                                        fetchXml: result.fetchxml
-                                    }
-                                ]
-                            },
-                            raw: await this._debouncedGetLookupValue(targets, value),
-                            attributes: {
-                                Targets: targets
-                            },
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-
-                } as ILookup;
-                return result;
-            }
-            case DataType.TWO_OPTIONS: {
-                const twoOptionsValue = value as boolean | undefined | null;
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: twoOptionsValue === true ? true : false,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as ITwoOptions
-            }
-            case DataType.OPTIONSET: {
-                const optionSetValue = value as number | null | undefined;
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IOptionSet;
-            }
-            case DataType.MULTI_SELECT_OPTIONSET: {
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                const optionSetValue = value as number[] | null | undefined;
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IMultiSelectOptionSet
-            }
-            case DataType.DATE_AND_TIME_DATE_AND_TIME:
-            case DataType.DATE_AND_TIME_DATE_ONLY: {
-                const dateTimeValue = value as Date | null | undefined;
-                const metadata = await this._grid.metadata.get(column);
-                const date = dayjs(dateTimeValue);
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: date.isValid() ? date.toDate() : dateTimeValue,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Behavior: metadata.Attributes.get(column.attributeName).Behavior,
-                                Format: column.dataType
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IDateTime;
-            }
-            case DataType.WHOLE_NONE:
-            case DataType.DECIMAL:
-            case DataType.CURRENCY:
-            case DataType.WHOLE_DURATION: {
-                const decimalValue = value as number | null | undefined
-                const metadata = await this._grid.metadata.get(column);
-                const precision = metadata.Attributes.get(column.attributeName).Precision;
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: decimalValue ?? null,
-                            error: !isValid,
-                            //formatted value is only used for currency => there is no way to get the currency symbol so the formatCurrency method is useless
-                            formatted: formattedValue,
-                            errorMessage: validationErrorMessage,
-                            type: column.dataType,
-                            attributes: {
-                                Precision: precision
-                            }
-                        },
-                        NotifyOutputChangedOnUnmount: {
-                            raw: true,
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-
-                } as IDecimal;
-            }
-            default: {
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        isResizable: {
-                            raw: false
-                        },
-                        NotifyOutputChangedOnUnmount: {
-                            raw: true,
-                        },
-                        value: {
-                            raw: value,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as ITextField
-            }
-        }
-    }
-    private _getInjectedContext(additionalParameters?: IParameters) {
-        return {
-            ...this._pcfContext,
-            mode: {
-                ...this._pcfContext.mode,
-                allocatedHeight: additionalParameters?.Height?.raw ?? this._pcfContext.mode.allocatedHeight,
-                allocatedWidth: additionalParameters?.Width?.raw ?? this._pcfContext.mode.allocatedWidth
-            }
-        }
-    }
-    private async _getLookupValue(targets: string[], value: ComponentFramework.LookupValue[] | null | undefined): Promise<ComponentFramework.LookupValue[]> {
-        if (!value || value.length === 0) {
-            return [];
-        }
-        //this is case from filters where we only have the id to work it => we need to go through targets and search for the records
-        if (!value[0].entityType) {
-            for (const lookup of value) {
-                for (const target of targets) {
-                    try {
-                        const lookupEntityMetadata = await this._pcfContext.utils.getEntityMetadata(target, []);
-                        const response = await this._pcfContext.webAPI.retrieveRecord(target, lookup.id, `?$select=${lookupEntityMetadata.PrimaryNameAttribute}`);
-                        lookup.entityType = target;
-                        lookup.name = response[lookupEntityMetadata.PrimaryNameAttribute];
-                        break;
-                    }
-                    catch (err) {
-                        continue;
-                    }
-                }
-            }
-        }
-        return value;
-    }
-}

package/src/components/Grid/core/components/Dialog/Constants.tsx

@@ -1,8 +0,0 @@
-import { IDialogProps } from "./interfaces";
-
-export const defaultProps: IDialogProps = {
-    dialogContentProps: {},
-    modalProps: {
-        className: ''
-    }
-};

package/src/components/Grid/core/components/Dialog/Styles.tsx

@@ -1,61 +0,0 @@
-import { mergeStyles, getTheme } from "@fluentui/react/lib/Styling";
-import { IDialogProps } from './interfaces/index';
-
-export const getRootStyles = (props: IDialogProps): string => {
-    const theme = getTheme();
-    const rootStyles = mergeStyles(({
-        selectors: {
-            '.ms-Dialog-main': {
-                width: props.width,
-                minHeight: props.minHeight ?? 0,
-                height: props.height,
-            },
-            '@media(max-width: 768px)': {
-                '.ms-Dialog-main': {
-                    width: '100vw',
-                    height: '100svh',
-                    maxWidth: '100vw',
-                    maxHeight: '100svh'
-                }
-            },
-            '.ms-Dialog-subText': {
-                color: theme.palette.black
-            },
-            '.ms-Dialog-content': {
-                overflow: 'auto',
-                paddingBottom: 24,
-                flex: 1
-            },
-            '.ms-Dialog-content, .ms-Dialog-actions': {
-                paddingLeft: 24,
-                paddingRight: 24,
-                width: 'initial'
-            },
-            '.ms-Dialog-actions': {
-                borderTop: `1px solid ${theme.semanticColors.bodyDivider}`,
-                paddingBottom: 24,
-                paddingTop: 24,
-                margin: 'initial',
-                flex: '0 0 auto'
-            },
-            '.ms-Dialog-inner': {
-                padding: 0,
-                display: 'flex',
-                flexDirection: 'column',
-                flexGrow: 1,
-                overflow: 'hidden'
-            },
-            '.ms-Modal-scrollableContent': {
-                overflow: 'hidden',
-                display: 'flex',
-                '> div': {
-                    display: 'flex',
-                    flexDirection: 'column'
-                }
-
-            },
-
-        }
-    }));
-    return rootStyles;
-};

package/src/components/Grid/core/components/Dialog/index.tsx

@@ -1,22 +0,0 @@
-import React, { useEffect } from 'react';
-import { Dialog as DialogBase } from '@fluentui/react/lib/Dialog';
-import { IDialogProps } from './interfaces';
-import { defaultProps } from './Constants';
-import { getRootStyles } from './Styles';
-
-const Dialog: React.FC<IDialogProps> = (props) => {
-    return (
-        <DialogBase
-            {...props}
-            modalProps={{
-                ...props.modalProps,
-                allowTouchBodyScroll: props.modalProps?.allowTouchBodyScroll ?? matchMedia('(hover: none)').matches ? true : undefined,
-                className: `${props.modalProps?.className} ${getRootStyles(props)}`
-            }}
-        >
-            {props.children}
-        </DialogBase>
-    );
-};
-export default Dialog;
-Dialog.defaultProps = defaultProps;

package/src/components/Grid/core/components/Dialog/interfaces/index.d.ts

@@ -1,7 +0,0 @@
-import { IDialogProps as IDialogPropsBase } from '@fluentui/react/lib/Dialog';
-
-export interface IDialogProps extends IDialogPropsBase {
-    width?: number | string;
-    height?: number | string;
-    minHeight?: number;
-}