@talxis/base-controls 1.2406.2

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,176 @@
+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()
+        }
+
+    }
+}