@talxis/base-controls 1.2406.2

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

@@ -0,0 +1,67 @@
+import React, { ReactElement } from "react";
+import { useEffect, useState } from "react";
+import { Text } from '@fluentui/react/lib/Text';
+import { optionSetStyles } from "./styles";
+import color from 'color';
+import { useTheme } from "@fluentui/react";
+import { IGridColumn } from "../../../../interfaces/IGridColumn";
+import { useGridInstance } from "../../../../hooks/useGridInstance";
+import { DataType } from "../../../../enums/DataType";
+
+interface IReadOnlyOptionSet {
+    column: IGridColumn;
+    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
+    defaultRender: () => ReactElement
+}
+
+export const ReadOnlyOptionSet = (props: IReadOnlyOptionSet) => {
+    const grid = useGridInstance();
+    const { record, column, defaultRender } = { ...props }
+    const [options, setOptions] = useState<ComponentFramework.PropertyHelper.OptionMetadata[] | null>(null);
+    const theme = useTheme();
+    const defaultColor = theme.palette.neutralLight;
+
+    useEffect(() => {
+        (async () => {
+            const getOptions = async (): Promise<ComponentFramework.PropertyHelper.OptionMetadata[]> => {
+                const [defaultValue, options] = await grid.metadata.getOptions(column);
+                let value: any = record.getValue(column.key);
+                if (column.dataType === DataType.OPTIONSET) {
+                    value = value ? [parseInt(value)] : null;
+                }
+                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {
+                    value = value ? value.split(',').map((value: string) => parseInt(value)) : null;
+                }
+                if (column.dataType === DataType.TWO_OPTIONS) {
+                    value = [parseInt(value)];
+                }
+                return options.filter(option => value?.includes(option.Value)) ?? [];
+            }
+            const results = await getOptions();
+            setOptions(results);
+        })();
+    }, [record.getValue(column.key)]);
+
+    //options not loaded yet
+    if (options === null) {
+        return <></>
+    }
+    //options loaded but either no value selected or no colors are present
+    if (options.length === 0 || !options.find(x => x.Color)) {
+        return defaultRender();
+    }
+    else {
+        return (
+            <div className={optionSetStyles.root}>
+                {options.map(x => <div
+                    key={x.Value}
+                    title={x.Label}
+                    className={optionSetStyles.option}
+                    style={{ backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }}>
+                    <Text>{x.Label}</Text>
+                </div>)}
+            </div>
+        )
+    }
+
+}

package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts

@@ -0,0 +1,24 @@
+import { mergeStyleSets } from "@fluentui/react";
+
+export const optionSetStyles = mergeStyleSets({
+    root: {
+        display: 'flex',
+        gap: 5,
+        overflow: 'hidden',
+        '--light': 80,
+        '--threshold': 60,
+        flexGrow: 1
+    },
+    option: {
+        borderRadius: 5,
+        paddingLeft: 4,
+        paddingRight: 4,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        flexGrow: 1,
+        textAlign: 'center',
+        '>span': {
+            color: 'inherit',
+        }
+    }
+})

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

@@ -0,0 +1,56 @@
+import { ITheme, mergeStyleSets, keyframes } from "@fluentui/react";
+
+const shimmer = keyframes({
+    '100%': {
+      backgroundPosition: '150px 0'
+    },
+  });
+
+export const getReadOnlyCellStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        root: {
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            gap: 10
+        },
+        text: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        link: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        fileWrapper: {
+            display: 'flex',
+            gap: 3
+        },
+        image: {
+            marginRight: 5,
+            'img': {
+                width: 32
+            }
+        },
+        cellContent: {
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            flexGrow: 1,
+            overflow: 'hidden',
+            ':has([data-align="right"])': {
+                justifyContent: 'flex-end',
+            }
+        },
+        loadingLine: {
+            height: 7,
+            borderRadius: 5,
+            width: '100%',
+            animation: `${shimmer} 2s infinite`,
+            backgroundSize: '1000px 100%',
+            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`
+        }
+    })
+}

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

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

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

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

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

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

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

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

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