@talxis/base-controls 1.2406.2 → 1.2406.4

package/src/components/Grid/core/components/AgGrid/controllers/useAgGridController.ts

@@ -1,68 +0,0 @@
-import { ColDef, GridApi } from "@ag-grid-community/core";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { IEntityRecord } from "../../../../interfaces";
-import { useGridController } from "../../../controllers/useGridController"
-import { useGridInstance } from "../../../hooks/useGridInstance";
-import { EditableCell } from "../../Cell/EditableCell/EditableCell";
-import { ReadOnlyCell } from "../../Cell/ReadOnlyCell/ReadOnlyCell";
-import { ColumnHeader } from "../../ColumnHeader/ColumnHeader";
-import { GlobalCheckBox } from "../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox";
-import { AgGrid } from "../model/AgGrid";
-import { ModuleRegistry } from '@ag-grid-community/core';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { useDebounce } from 'use-debounce';
-import "@ag-grid-community/styles/ag-grid.css";
-import "@ag-grid-community/styles/ag-theme-balham.css";
-ModuleRegistry.registerModules([ClientSideRowModelModule]);
-
-interface IAgGridController {
-    agColumns: ColDef[],
-    records: IEntityRecord[],
-    onGridReady: () => void;
-}
-
-export const useAgGridController = (gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>): IAgGridController => {
-    const grid = useGridInstance();
-    const agGridReadyRef = useRef<boolean>(false);
-    const agGrid = useMemo(() => new AgGrid(grid, gridApiRef), [])
-    const { columns, records } = useGridController();
-    const [agColumns, setAgColumns] = useState<ColDef[]>([]);
-    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-grid/ag-grid/issues/6013
-    const [agRecords] = useDebounce(records, 0);
-
-    useEffect(() => {
-        if (!agGridReadyRef.current) {
-            return;
-        }
-        agGrid.selectRows();
-    }, [grid.dataset.getSelectedRecordIds().join('')]);
-    
-
-    const onGridReady = () => {
-        agGridReadyRef.current = true;
-        agGrid.selectRows();
-    }
-    useEffect(() => {
-        if (columns.length === 0) {
-            return;
-        }
-        const _agColumns = agGrid.columns;
-        for (const agColumn of _agColumns) {
-            agColumn.cellRenderer = ReadOnlyCell;
-            agColumn.cellEditor = EditableCell;
-            agColumn.headerComponent = ColumnHeader;
-
-            if (agColumn.field === '__checkbox') {
-                agColumn.lockPosition = 'left';
-                agColumn.headerComponent = GlobalCheckBox
-            }
-        }
-        setAgColumns(_agColumns);
-    }, [columns]);
-
-    return {
-        agColumns: agColumns,
-        records: agRecords,
-        onGridReady: onGridReady
-    }
-}

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

@@ -1,100 +0,0 @@
-import { ColDef, GridApi, IRowNode } from "@ag-grid-community/core";
-import { Grid } from "../../../model/Grid";
-import { GridDependency } from "../../../model/GridDependency";
-import { DataType } from "../../../enums/DataType";
-import { IGridColumn } from "../../../interfaces/IGridColumn";
-
-export class AgGrid extends GridDependency {
-    private _gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>
-
-    constructor(grid: Grid, gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>) {
-        super(grid);
-        this._gridApiRef = gridApiRef;
-    }
-    public get columns() {
-        const agColumns: ColDef[] = [];
-        for (const column of this._grid.columns) {
-            const agColumn: ColDef = {
-                colId: column.key,
-                field: column.key,
-                headerName: column.displayName,
-                initialWidth: column.width,
-                sortable: column.isSortable,
-                editable: column.isEditable,
-                resizable: column.isResizable,
-                suppressMovable: this._grid.props.parameters.ChangeEditorMode ? true : undefined,
-                autoHeaderHeight: true,
-                suppressSizeToFit: column.key === '__checkbox',
-                cellClass: this._getCellClassName(column),
-                valueFormatter: (p) => {
-                    return p.data.getFormattedValue(column.key)
-                },
-                valueGetter: (p) => {
-                    return p.data.getValue(column.key)
-                },
-                cellRendererParams: {
-                    baseColumn: column
-                },
-                cellEditorParams: {
-                    baseColumn: column,
-                },
-                headerComponentParams: {
-                    baseColumn: column
-                },       
-                suppressKeyboardEvent: (params) => {
-                    if (params.event.key !== 'Enter' || params.api.getEditingCells().length === 0) {
-                        return false;
-                    }
-                    switch (column.dataType) {
-                        case DataType.DATE_AND_TIME_DATE_AND_TIME:
-                        case DataType.DATE_AND_TIME_DATE_ONLY:
-                        case DataType.LOOKUP_OWNER:
-                        case DataType.LOOKUP_SIMPLE:
-                        case DataType.MULTI_SELECT_OPTIONSET:
-                        case DataType.OPTIONSET:
-                        case DataType.TWO_OPTIONS:
-                        case DataType.WHOLE_DURATION: {
-                            return true;
-                        }
-                    }
-                    return false;
-                }
-            }
-            agColumns.push(agColumn)
-        }
-        return agColumns;
-    }
-    public selectRows() {
-        if (!this._gridApi) {
-            return;
-        }
-        const nodesToSelect: IRowNode[] = [];
-        this._gridApi.deselectAll();
-        this._gridApi.forEachNode((node: IRowNode) => {
-            if (this._grid.dataset.getSelectedRecordIds().includes(node.data.getRecordId())) {
-                nodesToSelect.push(node);
-            }
-        });
-        this._gridApi.setNodesSelected({
-            nodes: nodesToSelect,
-            newValue: true
-        });
-        this._gridApi.refreshCells({
-            columns: ['__checkbox'],
-            force: true
-        })
-    }
-    private get _gridApi() {
-        return this._gridApiRef.current;
-    }
-    private _getCellClassName(column: IGridColumn) {
-        switch (column.dataType) {
-            case DataType.CURRENCY:
-            case DataType.DECIMAL:
-            case DataType.WHOLE_NONE: {
-                return 'talxis-cell-align-right';
-            }
-        }
-        return 'talxis-cell-align-left';
-    }
-}

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

@@ -1,72 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react";
-
-export const getGridStyles = (theme: ITheme, numOfRecords?: number) => {
-    return mergeStyleSets({
-        root: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            '--height-offset': '64px',
-            ':has(.ag-body-horizontal-scroll-viewport[style*="height: 0px"])': {
-                '--height-offset': '45px'
-            } ,
-            '--ag-borders': 'none !important',
-            '.ag-root-wrapper': {
-                maxHeight: '100%',
-                '--ag-input-focus-border-color': 'transparent',
-                borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
-                ':has(.ag-overlay:not(.ag-hidden) .TALXIS__grid__empty-records)': {
-                    minHeight: 270
-                }
-            },
-            '.ag-root-wrapper.ag-layout-normal': {
-                height: numOfRecords ? `calc(${numOfRecords} * 42px + var(--height-offset))` : undefined,
-            },
-            '.ag-body': {
-                borderTop: `1px solid ${theme.semanticColors.bodyDivider}`
-            },
-            '.ag-header-viewport': {
-                backgroundColor: `${theme.semanticColors.bodyBackground}`
-            },
-            '.ag-center-cols-container': {
-                minWidth: '100%',
-            },
-            '.ag-layout-auto-height .ag-center-cols-clipper, .ag-layout-auto-height .ag-center-cols-container, .ag-layout-print .ag-center-cols-clipper, .ag-layout-print .ag-center-cols-container': {
-                minHeight: '42px !important'
-            },
-            '.ag-header-cell': {
-                paddingLeft: 0,
-                paddingRight: 0,
-                backgroundColor: `${theme.semanticColors.bodyBackground} !important`
-            },
-            '.ag-cell-inline-editing': {
-                overflow: 'visible',
-                top: -1,
-                backgroundColor: 'transparent',
-                'input': {
-                    paddingLeft: 10
-                },
-                '.TALXIS__error-message__root': {
-                    display: 'none'
-                }
-            },
-            '.talxis-cell-align-right': {
-                '[class^="cellContent"]': {
-                    justifyContent: 'flex-end',
-                },
-                '.talxis-cell-text, input': {
-                    textAlign: 'right'
-                },
-                'input': {
-                    paddingRight: 10
-                }
-            },
-            '.ag-cell-focus:has([data-is-valid="false"])': {
-                border: '1px solid red !important;'
-            },
-            '.TALXIS__combobox__root, [class*="TALXIS__textfield__root"], [class*="TALXIS__tag-picker__root"]': {
-                padding: '0px !important'
-            }
-        }
-    })
-}

package/src/components/Grid/core/components/Cell/Commands/Commands.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { useCommands } from './useCommands';
-import { CommandBar } from '@talxis/react-components/dist/components/CommandBar';
-import { commandStyles } from './styles';
-import { CommandBarButton } from '@fluentui/react';
-
-interface ICommands {
-    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-}
-
-export const Commands = ({ record }: ICommands) => {
-    const [items] = useCommands(record);
-    if (!items) {
-        return <></>
-    }
-    if (items?.length > 0) {
-        return <CommandBar className={commandStyles.talxisRoot} overflowButtonProps={{
-            styles: {
-                root: commandStyles.button,
-                rootHovered: commandStyles.button,
-                rootPressed: commandStyles.button,
-                rootExpanded: commandStyles.button
-            }
-        }} styles={{
-            root: commandStyles.root,
-
-        }} items={[]}
-        farItems={items}
-         />;
-    }
-    return <></>;
-};

package/src/components/Grid/core/components/Cell/Commands/Icon.tsx

@@ -1,17 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import 'external-svg-loader';
-import { commandStyles } from './styles';
-
-interface IIcon {
-    name: string
-}
-
-const IconComponent = ({ name }: IIcon) => {
-    //@ts-ignore - types
-    const src = !window.TALXIS?.Portal ? `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(name)}` : name;
-    return (
-        <svg data-src={src} className={commandStyles.icon} />
-    );
-};
-
-export const Icon = memo(IconComponent);

package/src/components/Grid/core/components/Cell/Commands/styles.ts

@@ -1,21 +0,0 @@
-import { mergeStyleSets } from "@fluentui/react";
-
-export const commandStyles = mergeStyleSets({
-    root: {
-        backgroundColor: 'transparent'
-    },
-    talxisRoot: {
-        minWidth: 0,
-        flexShrink: 1,
-        flexGrow: 1
-    },
-    button: {
-        backgroundColor: 'transparent',
-    },
-    icon: {
-        width: 16,
-        height: 16,
-        marginLeft: 4,
-        marginRight: 4,
-    }
-});

package/src/components/Grid/core/components/Cell/Commands/useCommands.tsx

@@ -1,53 +0,0 @@
-import { useState, useEffect } from "react";
-import { ICommandBarItemProps } from "@fluentui/react";
-import { Icon } from './Icon';
-import React from "react";
-import { commandStyles } from "./styles";
-import { useGridInstance } from "../../../hooks/useGridInstance";
-
-export const useCommands = (record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord): [
-    ICommandBarItemProps[] | null
-] => {
-
-    const dataset = useGridInstance().dataset
-    const [commandBarItems, setCommandBarItems] = useState<ICommandBarItemProps[] | null>(null);
-    useEffect(() => {
-        (async () => {
-            setCommandBarItems(await getCommandBarItems());
-        })();
-    }, []);
-
-    const getCommandBarItems = async () => {
-        const items: ICommandBarItemProps[] = [];
-        if(!dataset.retrieveRecordCommand) {
-            return []
-        }
-        const commands = await dataset.retrieveRecordCommand([record.getRecordId()]);
-        for (const command of commands) {
-            if (!command.shouldBeVisible) {
-                continue;
-            }
-            items.push({
-                key: command.commandButtonId,
-                text: command.label,
-                ["data-id"]: command.commandButtonId,
-                ["data-command"]: command.commandId,
-                buttonStyles: {
-                    root: commandStyles.button,
-                    rootHovered: commandStyles.button,
-                    rootPressed: commandStyles.button,
-                },
-                onClick: (e) => {
-                    e?.stopPropagation();
-                    command.execute();
-                },
-                onRenderIcon: command.icon?.includes('.svg') ? () => <Icon name={command.icon} /> : undefined,
-                iconProps: command.icon ? {
-                    iconName: command.icon
-                } : undefined
-            });
-        }
-        return items;
-    };
-    return [commandBarItems];
-};

package/src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { NumeralPCF } from '../../../../../../utils/NumeralPCF';
-import { DataType } from '../../../enums/DataType';
-import { useGridInstance } from '../../../hooks/useGridInstance';
-import { IGridColumn } from '../../../interfaces/IGridColumn';
-import { useRecordUpdateServiceController } from '../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController';
-import { Component } from '../../Component/Component';
-import { ICellEditorParams } from '@ag-grid-community/core';
-import numeral from "numeral";
-import { IEntityRecord } from '../../../../interfaces';
-
-interface ICell extends ICellEditorParams {
-    baseColumn: IGridColumn;
-    data: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-}
-
-export const EditableCell = (props: ICell) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const recordUpdateService = useRecordUpdateServiceController();
-    const mountedRef = React.useRef(true);
-    const hasBeenUpdatedRef = React.useRef<boolean>(false);
-    const record: IEntityRecord = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;
-        return updatedRecord ?? props.data;
-    })();
-    const valueRef = React.useRef(record.getValue(column.key));
-    const [value, setValue] = React.useState(valueRef.current);
-
-    React.useEffect(() => {
-        return () => {
-            mountedRef.current = false;
-            if (!hasBeenUpdatedRef.current) {
-                return;
-            }
-            recordUpdateService.record(record.getRecordId()).setValue(column.key, getRecordValue(valueRef.current))
-        }
-    }, []);
-
-    const getComponentValue = (value: any) => {
-        //already is component value;
-        if(hasBeenUpdatedRef.current) {
-            return value;
-        }
-        switch(column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === '1' ? true : false
-                break;
-            }
-            case DataType.OPTIONSET: {
-                value = value ? parseInt(value) : null;
-                break;
-
-            }
-            case DataType.MULTI_SELECT_OPTIONSET: {
-                value = value ? value.split(',').map((value: string) => parseInt(value)) : null;
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                if(value && !Array.isArray(value)) {
-                    value = [value];
-                }
-                value = value?.map((x: any) => {
-                    return {
-                        entityType: x.etn,
-                        id: x.id.guid,
-                        name: x.name
-                    }
-                })
-                break;
-            }
-        }
-        return value;
-    }
-    //this is just so the setValue API in Power Apps accepts the values that come from the components
-    const getRecordValue = (value: any) => {
-        switch (column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === true ? '1' : '0';
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                value = value?.map((x: any) => {
-                    return {
-                        entityName: x.entityType,
-                        name: x.name,
-                        id: x.id
-                    }
-                })?.[0];
-                break;
-            }
-        }
-        return value;
-    }
-
-    const onNotifyOutputChanged = (value: any) => {
-        valueRef.current = value;
-        hasBeenUpdatedRef.current = true;
-        if(!mountedRef.current) {
-            recordUpdateService.record(record.getRecordId()).setValue(column.key, getRecordValue(valueRef.current))
-            return;
-        }
-        switch(column.dataType) {
-            case DataType.OPTIONSET:
-            case DataType.DATE_AND_TIME_DATE_ONLY: {
-                props.stopEditing();
-                return;
-            }
-            case DataType.LOOKUP_OWNER:
-            case DataType.LOOKUP_SIMPLE: {
-                if(value?.length > 0) {
-                    props.stopEditing();
-                    return;
-                }
-            }
-        }
-        setValue(valueRef.current);
-    }
-
-    return <Component
-        column={column}
-        value={getComponentValue(value)}
-        formattedValue={record.getFormattedValue(column.key)}
-        onNotifyOutputChanged={onNotifyOutputChanged}
-        additionalParameters={{
-            AutoFocus: {
-                raw: true
-            },
-            Height: {
-                raw: 41
-            },
-            EnableNavigation: {
-                raw: false
-            }
-        }}
-    />
-}

package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import { ILinkProps } from '@fluentui/react/lib/components/Link/Link.types';
-import { Link } from '@fluentui/react/lib/components/Link/Link';
-import { Text } from '@fluentui/react/lib/Text';
-import { getReadOnlyCellStyles } from './styles';
-import { Commands } from '../Commands/Commands';
-import { Checkbox, Icon, TooltipHost, useTheme, Image } from '@fluentui/react';
-import { FileAttribute } from '@talxis/client-libraries';
-import { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet';
-import { IGridColumn } from '../../../interfaces/IGridColumn';
-import { DataType } from '../../../enums/DataType';
-import { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController';
-import { useGridInstance } from '../../../hooks/useGridInstance';
-import { useSelectionController } from '../../../../selection/controllers/useSelectionController';
-import { IEntityRecord } from '../../../../interfaces';
-import { ICellRendererParams } from '@ag-grid-community/core';
-
-interface ICellProps extends ICellRendererParams {
-    baseColumn: IGridColumn;
-    data: IEntityRecord;
-    [key: string]: any;
-}
-
-export const ReadOnlyCell = (props: ICellProps) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const record = props.data; 
-    const theme = useTheme();
-    const styles = getReadOnlyCellStyles(theme);
-    const tooltipId = React.useMemo(() => Math.random().toString(), []);
-
-    const [isValid, errorMessage] = useColumnValidationController({
-        column: column,
-        record: record,
-    })
-
-    return (
-        <TooltipHost
-            id={tooltipId}
-            content={!isValid && !grid.loading ? errorMessage : undefined}>
-            <div className={styles.root} data-is-valid={isValid}>
-                <div className={styles.cellContent}>
-                    <InternalReadOnlyCell {...props} />
-                </div>
-                {!isValid && !grid.loading && <Icon styles={{
-                    root: {
-                        color: theme.semanticColors.errorIcon
-                    }
-                }} iconName='Error' />}
-            </div>
-        </TooltipHost>
-    )
-};
-
-const InternalReadOnlyCell = (props: ICellProps) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const theme = useTheme();
-    const styles = getReadOnlyCellStyles(theme);
-    const selection = useSelectionController();
-    const record: IEntityRecord = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;
-        return updatedRecord ?? props.data;
-    })();
-    const formattedValue = record.getFormattedValue(column.key);
-
-    const renderLink = (props: ILinkProps, formattedValue: string): JSX.Element => {
-        switch(column.dataType) {
-            case DataType.LOOKUP_OWNER:
-            case DataType.LOOKUP_SIMPLE: {
-                if(!grid.isNavigationEnabled) {
-                    return renderText();
-                }
-            }
-        }
-        return (
-            <Link {...props} className={styles.link} title={formattedValue}>
-                {formattedValue}
-            </Link>
-        );
-    };
-    const renderText = (): JSX.Element => {
-        if (column.isPrimary && grid.isNavigationEnabled) {
-            return renderLink({
-                onClick: () => grid.openDatasetItem(record.getNamedReference())
-            }, formattedValue);
-        }
-        return <Text className={`${styles.text} talxis-cell-text`} title={formattedValue}>{formattedValue}</Text>
-    }
-    const downloadFile = () => {
-        const storage = new FileAttribute(grid.pcfContext.webAPI);
-        const namedReference = record.getNamedReference();
-        storage.downloadFileFromAttribute({
-            entityName: namedReference.etn,
-            recordId: record.getRecordId(),
-            fileAttribute: column.key,
-        }, true)
-    }
-
-    switch (column.dataType) {
-        case DataType.SINGLE_LINE_EMAIL: {
-            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);
-        }
-        case DataType.SINGLE_LINE_PHONE: {
-            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);
-        }
-        case DataType.SINGLE_LINE_URL: {
-            return renderLink({
-                href: formattedValue,
-                target: '_blank',
-                rel: 'noopener noreferrer'
-            }, formattedValue);
-        }
-        case DataType.LOOKUP_SIMPLE:
-        case DataType.LOOKUP_OWNER: {
-            return renderLink({
-                onClick: () => grid.openDatasetItem(record.getValue(column.key) as any)
-            }, formattedValue);
-        }
-        case DataType.FILE: {
-            if (!formattedValue) {
-                return <></>
-            }
-            return (
-                <div className={styles.fileWrapper}>
-                    <Icon iconName='Attach' />
-                    {
-                        renderLink({
-                            onClick: downloadFile
-                        }, 'Download')
-                    }
-                </div>
-            )
-        }
-        case DataType.IMAGE: {
-            if (!formattedValue) {
-                return <></>
-            }
-            return (
-                <div className={styles.fileWrapper}>
-                    <Image className={styles.image} src={`data:image/png;base64,${formattedValue}`} />
-                    {
-                        renderLink({
-                            onClick: downloadFile
-                        }, 'Download')
-                    }
-                </div>
-            )
-        }
-        case DataType.OPTIONSET:
-        case DataType.MULTI_SELECT_OPTIONSET:
-        case DataType.TWO_OPTIONS: {
-            return <ReadOnlyOptionSet
-                column={column}
-                record={record}
-                defaultRender={renderText} />
-        }
-        default: {
-            if(column.key === '__checkbox') {
-                return <Checkbox
-                checked={props.node.isSelected()}
-                onChange={(e, checked) => {
-                    e?.stopPropagation()
-                    console.log(props.api.getSelectedNodes())
-                    selection.toggle(record, checked!)
-                }} />
-            }
-            if(column.key === '__ribbon') {
-                return <Commands record={record} />
-            }
-            return renderText()
-        }
-
-    }
-}