@talxis/base-controls 1.2406.2

package/src/components/Decimal/Decimal.tsx

@@ -0,0 +1,120 @@
+import { TextField } from "@talxis/react-components/dist/components/TextField";
+import { useInputBasedComponent } from "../../hooks/useInputBasedComponent";
+import { IDecimal, IDecimalOutputs, IDecimalParameters, IDecimalTranslations } from "./interfaces";
+import React, { useEffect } from "react";
+import numeral from "numeral";
+import { NumeralPCF } from "../../utils/NumeralPCF";
+
+export const Decimal = (props: IDecimal) => {
+    const context = props.context;
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const numberFormatting = context.userSettings.numberFormattingInfo;
+
+    const formatter = (value: string | number | null): string | undefined => {
+        if (value == null) {
+            return undefined;
+        }
+        if (isNaN(value as number)) {
+            return value as string;
+        }
+        if (props.parameters.value.type === 'Decimal') {
+            return context.formatting.formatDecimal(parseFloat(value as string), boundValue.attributes?.Precision);
+        }
+        if(props.parameters.value.type === 'Currency') {
+            return props.parameters.value.formatted;
+        }
+        return context.formatting.formatInteger(parseInt(value as string));
+    };
+
+    const extractNumericPart = (str: any): number | undefined => {
+        // Currency control just sends the string up and lets the framework decide whether the value is correct
+        // It only tries to parse the number based on the current user format
+        // This means that the value will also pass if the user inputs his own currency even though
+        // the currency is different on the field
+        const escapeRegExp = (string: string) => {
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escaping utility function
+        }
+    
+        let regex: RegExp;
+        NumeralPCF.decimal(numberFormatting);
+        if (props.parameters.value.type === 'Decimal') {
+            regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberDecimalSeparator) + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
+        } else if (props.parameters.value.type === 'Currency') {
+            NumeralPCF.currency(numberFormatting);
+            regex = new RegExp(
+                '^\\s*' + 
+                '(?:' + escapeRegExp(numberFormatting.currencySymbol) + '\\s*)?' + 
+                '[' +
+                '\\d' + 
+                escapeRegExp(numberFormatting.currencyDecimalSeparator) +
+                escapeRegExp(numberFormatting.currencyGroupSeparator) +
+                '\\s' + 
+                escapeRegExp(numberFormatting.negativeSign) + 
+                ']*' +
+                '(?:\\s*' + escapeRegExp(numberFormatting.currencySymbol) + ')?' +
+                '\\s*$'
+            );
+        } else {
+            regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
+        }
+        if (regex.test(str)) {
+            return numeral(str).value() ?? undefined;
+        }
+        return str; // Return undefined if no numeric part is extracted
+    };
+    
+    
+    
+    const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | undefined, IDecimalParameters, IDecimalOutputs, IDecimalTranslations>('Decimal', props, {
+        formatter: formatter,
+        valueExtractor: extractNumericPart
+    });
+
+    return (
+        <TextField
+            readOnly={context.mode.isControlDisabled}
+            autoFocus={parameters.AutoFocus?.raw}
+            borderless={parameters.EnableBorder?.raw === false}
+            errorMessage={boundValue.errorMessage}
+            styles={{
+                fieldGroup: {
+                    height: context.mode.allocatedHeight || undefined,
+                    width: context.mode.allocatedWidth || undefined
+                }
+            }}
+            deleteButtonProps={
+                parameters.EnableDeleteButton?.raw === true
+                    ? {
+                        key: "delete",
+                        showOnlyOnHover: true,
+                        iconProps: {
+                            iconName: "Delete",
+                        },
+                        onClick: () => setValue(undefined),
+                    }
+                    : undefined
+            }
+            clickToCopyProps={
+                parameters.EnableCopyButton?.raw === true
+                    ? {
+                        key: "copy",
+                        showOnlyOnHover: true,
+                        iconProps: {
+                            iconName: "Copy",
+                        },
+                    }
+                    : undefined
+            }
+            value={value ?? ""}
+            onBlur={(event) => {
+                onNotifyOutputChanged({
+                    value: extractNumericPart(event.target.value)
+                });
+            }}
+            onChange={(e, value) => {
+                setValue(value);
+            }}
+        />
+    );
+};

package/src/components/Decimal/index.ts

@@ -0,0 +1,2 @@
+export * from "./Decimal";
+export * from "./interfaces";

package/src/components/Decimal/interfaces.ts

@@ -0,0 +1,20 @@
+import { IDecimalNumberProperty } from "../../interfaces";
+import { IInputParameters } from "../../interfaces/parameters";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+
+export interface IDecimal extends IComponent<IDecimalParameters, IDecimalOutputs, IDecimalTranslations> {
+    
+}
+
+export interface IDecimalParameters extends IInputParameters {
+    //bound parameter
+    value: IDecimalNumberProperty;
+}
+
+export interface IDecimalOutputs extends IOutputs {
+    value?: number;
+}
+
+export interface IDecimalTranslations extends ITranslations {
+
+}

package/src/components/Duration/Duration.tsx

@@ -0,0 +1,143 @@
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import React, { useEffect } from 'react';
+import { useInputBasedComponent } from '../../hooks/useInputBasedComponent';
+import { IDuration, IDurationOutputs, IDurationParameters, IDurationTranslations } from './interfaces';
+import { IComboBoxOption } from '@fluentui/react';
+import { durationOptions } from '../../sandbox/shared/durationList';
+import { UserSettings } from '../../sandbox/mock/UserSettings';
+import numeral from "numeral";
+import { NumeralPCF } from '../../utils/NumeralPCF';
+import { getDefaultDurationTranslations } from './translations';
+
+export const Duration = (props: IDuration) => {
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const context = props.context;
+    const humanizeDuration = require("humanize-duration");
+    const formattingInfo = context.userSettings as UserSettings;
+    const language = formattingInfo.locale;
+    const numberFormatting = context.userSettings.numberFormattingInfo;
+
+    const formatter = (value: number | null) => {
+        //all duration formatting should happen here
+        if (value === null) return null;
+        const durationInMilliseconds = value * 60000;
+        const units = value < 60 ? ['m'] : value >= 1440 ? ['d'] : ['h'];
+        const options = {
+            units: units,
+            maxDecimalPoints: 2,
+            language: language.slice(0, language.indexOf("-")),
+            decimal: context.userSettings.numberFormattingInfo.numberDecimalSeparator,
+            fallbacks: ["en"]
+        };
+        return humanizeDuration(durationInMilliseconds, options);
+    };
+
+    const valueExtractor = (str: string | null): number | undefined => {
+        //extraction of number of minutes from formatted string should happen here
+       // parsing because labels are string that represent array of strings
+        const minuteLabels= JSON.parse(labels.minute());
+        const minutesLabels= JSON.parse(labels.minutes());
+        const hourLabels= JSON.parse(labels.hour());
+        const hoursLabels= JSON.parse(labels.hours());
+        const dayLabels= JSON.parse(labels.day());
+        const daysLabels= JSON.parse(labels.days());
+        const minuteRegex = new RegExp("^(" + minuteLabels.join('|') + ")\\s|\\s(" + minuteLabels.join('|') + ")$|^(" + minutesLabels.join('|') + ")\\s|\\s(" + minutesLabels.join('|') + ")$", "i");
+        const hourRegex = new RegExp("^(" + hourLabels.join('|') + ")\\s|\\s(" + hourLabels.join('|') + ")$|^(" + hoursLabels.join('|') + ")\\s|\\s(" + hoursLabels.join('|') + ")$", "i");
+        const dayRegex = new RegExp("^(" + dayLabels.join('|') + ")\\s|\\s(" + dayLabels.join('|') + ")$|^(" + daysLabels.join('|') + ")\\s|\\s(" + daysLabels.join('|') + ")$", "i");
+
+        if (str && str.trim()) {
+            let input = str.trim().toLowerCase();
+            let unit = 'minute';
+
+            if (minuteRegex.test(input)) {
+                input = input.replace(minuteRegex, "").trim();
+            } else if (hourRegex.test(input)) {
+                input = input.replace(hourRegex, "").trim();
+                unit = 'hour';
+            } else if (dayRegex.test(input)) {
+                input = input.replace(dayRegex, "").trim();
+                unit = 'day';
+            }
+            const parsedNumber = parseNumber(input);
+            if (parsedNumber && !isNaN(parsedNumber)) {
+                return getDurationInMinutes(parsedNumber, unit);
+            }
+            return NaN;
+        }
+        return undefined;
+    };
+
+    const parseNumber = (input: string): number | undefined => {
+        NumeralPCF.decimal(numberFormatting);
+        return numeral(input).value() ?? undefined;
+    };
+
+    const getDurationInMinutes = (value: number, unit: string): number => {
+        switch (unit) {
+            case 'hour':
+                return 60 * value;
+            case 'day':
+                return 60 * value * 24;
+            case 'minute':
+            default:
+                return value;
+        }
+    };
+
+    const presetOptions = (): IComboBoxOption[] => {
+        const formattedOptions = durationOptions.map(option => ({
+            key: option.Value.toString(),
+            text: formatter(parseInt(option.Label)),
+        }));
+        return formattedOptions;
+    };
+
+    const comboBoxOptions: IComboBoxOption[] = presetOptions();
+
+    const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | null, IDurationParameters, IDurationOutputs, IDurationTranslations>('Duration', props, {
+        formatter: formatter,
+        valueExtractor: valueExtractor,
+        defaultTranslations: getDefaultDurationTranslations(),
+    });
+
+    return (
+            <ComboBox
+                borderless={parameters.EnableBorder?.raw === false}
+                options={comboBoxOptions}
+                allowFreeInput={true}
+                autoComplete='on'
+                autofill={parameters.AutoFocus?.raw === true ? {
+                    autoFocus: true
+                } : undefined}
+                readOnly={context.mode.isControlDisabled}
+                useComboBoxAsMenuWidth
+                errorMessage={boundValue.errorMessage}
+                text={value ?? ''}
+                styles={{
+                    root: {
+                        height: context.mode.allocatedHeight || undefined,
+                        width: context.mode.allocatedWidth || undefined,
+                        display: 'flex',
+                        alignItems: 'center',
+                    },
+                    callout: {
+                        height: 300
+                    }
+                }}
+                onInputValueChange={(text) => {
+                    setValue(text ?? '');
+                }}
+                onBlur={(event) => {
+                    onNotifyOutputChanged({
+                        value: valueExtractor(value)
+                    });
+                }}
+                onChange={(e, value) => {
+                    onNotifyOutputChanged({
+                        value: valueExtractor(value?.text ?? '')
+                    });
+                }}
+            />
+    );
+};

package/src/components/Duration/index.ts

@@ -0,0 +1,2 @@
+export * from './Duration';
+export * from './interfaces';

package/src/components/Duration/interfaces.ts

@@ -0,0 +1,22 @@
+import { IWholeNumberProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+
+export interface IDuration extends IComponent<IDurationParameters, IDurationOutputs, IDurationTranslations> {
+}
+
+export interface IDurationParameters extends IBaseParameters {
+    value: IWholeNumberProperty;
+}
+
+export interface IDurationOutputs extends IOutputs {
+    value?: number
+}
+export interface IDurationTranslations extends ITranslations {
+    minute?: {[LCID: number]: string []}
+    minutes?: {[LCID: number]: string[]}
+    hour?: {[LCID: number]: string[]}
+    hours?: {[LCID: number]: string[]}
+    day?: {[LCID: number]: string[]}
+    days?: {[LCID: number]: string[]}
+}

package/src/components/Duration/translations.ts

@@ -0,0 +1,30 @@
+import { IDurationTranslations } from "./interfaces";
+
+export const getDefaultDurationTranslations = (): Required<IDurationTranslations> => {
+    return {
+        minute: {
+            1029: ['min','minuta', 'minuty', 'minute', 'minutu', 'minutě', 'minutou', 'minuta', 'minuty', 'minute', 'minutu', 'minute', 'minutou'],
+            1033: ['min','minute']
+        },
+        minutes: {
+            1029: ['minuty', 'minut', 'minutám', 'minutách', 'minutami', 'minuty', 'minut', 'minutam', 'minutach', 'minutami'],
+            1033: ['minutes']
+        },
+        hour: {
+            1029: ['hod','hodina', 'hodiny', 'hodině', 'hodinu', 'hodinou', 'hodina', 'hodiny', 'hodine', 'hodinu', 'hodinou'],
+            1033: ['hour']
+        },
+        hours: {
+            1029: ['hodiny', 'hodin', 'hodinám', 'hodinách', 'hodinami', 'hodiny', 'hodin', 'hodinam', 'hodinach', 'hodinami'],
+            1033: ['hours']
+        },
+        day: {
+            1029: ['den', 'dne', 'dni', 'dnu', 'dnem', 'den', 'dne', 'dni', 'dnu', 'dnem'],
+            1033: ['day']
+        },
+        days: {
+            1029: ['dny', 'dnů', 'dnům', 'dnech', 'dny', 'dní', 'dny', 'dnu', 'dnom', 'dnech', 'dny', 'dni'],
+            1033: ['days']
+        },
+    };
+};

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,24 @@
+import { createContext, useMemo } from "react";
+import { useComponent } from "../../hooks"
+import { IGridContext } from "./core/interfaces/IGridContext";
+import { Grid as GridModel } from "./core/model/Grid";
+import { IGrid } from "./interfaces";
+import { AgGrid } from './core/components/AgGrid/AgGrid';
+import React from 'react';
+import { gridTranslations } from './translations';
+
+export const GridContext = createContext<IGridContext>(null as any);
+
+export const Grid = (props: IGrid) => {
+    const [labels, notifyOutputChanged] = useComponent('Grid', props, gridTranslations);
+    const grid = useMemo(() => new GridModel(props, labels), []);
+    grid.updateDependencies(props);
+    
+    return (
+        <GridContext.Provider value={{
+            gridInstance: grid
+        }}>
+        <AgGrid />
+        </GridContext.Provider>
+    )
+}

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

@@ -0,0 +1,206 @@
+import { AgGridReact } from '@ag-grid-community/react';
+import { MessageBar, MessageBarType, useTheme } from "@fluentui/react";
+import { ColumnApi, GridApi, GridState } from "@ag-grid-community/core";
+import { useEffect, useRef } from "react";
+import { useSelectionController } from "../../../selection/controllers/useSelectionController";
+import { useGridInstance } from "../../hooks/useGridInstance";
+import { getGridStyles } from "./styles";
+import React from 'react';
+import { useAgGridController } from "./controllers/useAgGridController";
+import { Paging } from "../../../paging/components/Paging/Paging";
+import { EmptyRecords } from "./components/EmptyRecordsOverlay/EmptyRecords";
+import { Save } from "../Save/Save";
+import { LoadingOverlay } from "./components/LoadingOverlay/LoadingOverlay";
+import { useStateValues } from '@talxis/react-components/dist/hooks';
+import { usePagingController } from '../../../paging/controllers/usePagingController';
+import { IUpdatedRecord } from '../../services/RecordUpdateService/model/RecordUpdateService';
+
+interface IAgGridState extends GridState {
+    '__updatedRecords'?: IUpdatedRecord[]
+}
+
+export const AgGrid = () => {
+    const grid = useGridInstance();
+    const selection = useSelectionController();
+    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();
+    const gridColumnApiRef = useRef<ColumnApi>();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const theme = useTheme();
+    //used for grid sizing - only the initial pageSize is relevant for this case
+    let { agColumns, records, onGridReady } = useAgGridController(gridApiRef);
+    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<IAgGridState>(grid.state as IAgGridState);
+    const pagingController = usePagingController();
+    const pageSizeRef = useRef<number>(pagingController.pageSize);
+    const firstRenderRef = useRef(true);
+
+    useEffect(() => {
+        const globalClickHandler = (e: MouseEvent) => {
+            const hasAncestorWithClass = (element: HTMLElement, className: string): boolean => {
+                let parent = element;
+                while (!parent.classList.contains('ag-theme-balham')) {
+                    if (parent.classList.contains(className)) {
+                        return true;
+                    }
+                    if (parent.tagName === 'HTML') {
+                        return false;
+                    }
+                    parent = parent.parentElement!;
+                    if (!parent) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            try {
+                if (!hasAncestorWithClass(e.target as HTMLElement, 'ag-cell')) {
+                    gridApiRef.current?.stopEditing();
+                }
+            }
+            catch (err) {
+            }
+        }
+        document.addEventListener('click', globalClickHandler)
+        return () => {
+            document.removeEventListener('click', globalClickHandler);
+            if (!gridApiRef.current || grid.isNested) {
+                return;
+            }
+            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;
+            grid.pcfContext.mode.setControlState(getNewStateValues());
+        }
+    }, []);
+
+    useEffect(() => {
+        const onBeforeUnload = (ev: BeforeUnloadEvent) => {
+            if(grid.recordUpdateService.isDirty) {
+                ev.preventDefault();
+                return 'Unsaved changes!'
+            }
+        }
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', onBeforeUnload);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (!gridApiRef.current) {
+            return;
+        }
+        if (grid.loading) {
+            gridApiRef.current.showLoadingOverlay();
+            return;
+        }
+        gridApiRef.current.hideOverlay()
+    }, [grid.loading]);
+
+    useEffect(() => {
+        if (firstRenderRef.current) {
+            firstRenderRef.current = false;
+            return;
+        }
+        gridApiRef.current?.ensureIndexVisible(0)
+    }, [pagingController.pageNumber]);
+
+
+
+    const getColumnsWidth = () => {
+        let width = 0;
+        for (const column of gridColumnApiRef.current!.getAllGridColumns()) {
+            width = width + column.getActualWidth();
+        }
+        return width;
+    }
+
+    const getAvailableWidth = () => {
+        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');
+        return rootWrapper?.clientWidth ?? 0;
+    }
+
+    const sizeColumnsIfSpaceAvailable = () => {
+        const totalWidth = getColumnsWidth();
+        const availableWidth = getAvailableWidth();
+        if (availableWidth > totalWidth) {
+            gridApiRef.current!.sizeColumnsToFit();
+        }
+    }
+
+    const getGridHeight = () => {
+        if (pageSizeRef.current < grid.records.length) {
+            return pageSizeRef.current;
+        }
+        return grid.records.length;
+    }
+
+    const styles = getGridStyles(theme, getGridHeight());
+    return (
+        <div ref={containerRef} className={`${styles.root} ag-theme-balham`}>
+            {((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&
+                <Save />
+            }
+            {grid.error &&
+                <MessageBar messageBarType={MessageBarType.error}>
+                    <span dangerouslySetInnerHTML={{
+                        __html: grid.errorMessage!
+                    }} />
+                </MessageBar>
+            }
+            <AgGridReact
+                animateRows
+                rowBuffer={0}
+                rowSelection={grid.selection.type}
+                noRowsOverlayComponent={EmptyRecords}
+                loadingOverlayComponent={LoadingOverlay}
+                onRowSelected={(e) => {
+                    //prevent infinite loop since we are also setting the rows
+                    //when the selection comes from above
+                    if (e.source.includes('api')) {
+                        return;
+                    }
+                    selection.toggle(e.data!, e.node.isSelected()!)
+                }}
+                onCellDoubleClicked={(e) => {
+                    if (grid.isNavigationEnabled && !grid.isEditable) {
+                        grid.openDatasetItem(e.data!.getNamedReference())
+                    }
+                }}
+                onCellMouseOver={(e) => {
+                    if (e.colDef.colId === '__checkbox') {
+                        gridApiRef.current?.setSuppressRowClickSelection(true);
+                    }
+                }}
+                onCellMouseOut={(e) => {
+                    gridApiRef.current?.setSuppressRowClickSelection(false);
+                }}
+                getRowId={(params) => params.data.getRecordId()}
+                onGridReady={(e) => {
+                    gridApiRef.current = e.api as any;
+                    gridColumnApiRef.current = e.columnApi;
+                    if (grid.loading) {
+                        gridApiRef.current?.showLoadingOverlay();
+                    }
+                    setDefaultStateValues({
+                        ...e.api.getState(),
+                        __updatedRecords: []
+                    });
+                    sizeColumnsIfSpaceAvailable();
+                    onGridReady();
+                }}
+                initialState={!grid.isNested ? stateValuesRef.current : undefined}
+                onStateUpdated={(e) => {
+                    if (grid.isNested) {
+                        return;
+                    }
+                    stateValuesRef.current = e.state
+                }}
+                rowHeight={42}
+                columnDefs={agColumns as any}
+                rowData={records}
+            >
+            </AgGridReact>
+            {grid.props.parameters.EnablePagination?.raw !== false &&
+                <Paging />
+            }
+        </div>
+    );
+}

package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Icon} from '@fluentui/react';
+import { useGridInstance } from '../../../../hooks/useGridInstance';
+import { Text } from '@fluentui/react/lib/Text';
+import { emptyRecordStyles } from './styles';
+
+export const EmptyRecords = () => {
+    const labels = useGridInstance().labels;
+
+    return (
+    <div className={`${emptyRecordStyles.root} TALXIS__grid__empty-records`}>
+    <Icon className={emptyRecordStyles.icon} iconName='SearchAndApps' />
+    <Text>{labels.norecordsfound()}</Text>
+    </div>
+    )
+}

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

@@ -0,0 +1,20 @@
+import { mergeStyleSets } from "@fluentui/react";
+
+export const emptyRecordStyles = mergeStyleSets({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        alignItems: 'center',
+        position: 'relative',
+        top: 18
+    },
+    icon: {
+        fontSize: 46
+    },
+    image: {
+        'img': {
+            width: '100px'
+        }
+    }
+})

package/src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx

@@ -0,0 +1,7 @@
+import { SpinnerSize } from '@fluentui/react';
+import { Spinner } from '@fluentui/react/lib/components/Spinner/Spinner';
+import React from 'react';
+
+export const LoadingOverlay = () => {
+    return <Spinner size={SpinnerSize.large} />
+}