@talxis/base-controls 1.2406.2

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

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

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

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

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

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

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

@@ -0,0 +1,74 @@
+import { CommandBar, CommandBarButton, MessageBar, MessageBarType, Spinner, SpinnerSize } from "@fluentui/react";
+import { useGridInstance } from "../../hooks/useGridInstance";
+import { useSave } from "./hooks/useSave";
+import React, { useState } from 'react';
+import { getSaveStyles } from "./styles";
+import { ChangeEditor } from "./components/ChangeEditor/ChangeEditor";
+import { useRecordUpdateServiceController } from "../../services/RecordUpdateService/controllers/useRecordUpdateServiceController";
+
+export const Save = () => {
+    const grid = useGridInstance();
+    const labels = grid.labels;
+    const styles = getSaveStyles();
+    const { isDirty, updatedRecords, hasInvalidRecords, clearAll } = useRecordUpdateServiceController();
+    const { isSaving, saveBtnProps, save } = useSave();
+    const [changeEditorOpened, setChangeEditorOpened] = useState<boolean>(false);
+
+    const onMessageClick = () => {
+        console.log('click')
+        if (!isDirty) {
+            //return;
+        }
+        setChangeEditorOpened(true);
+    }
+
+    return (
+        <>
+            <div onClick={onMessageClick} className={styles.root} data-dirty={isDirty}>
+                <MessageBar
+                    messageBarType={!hasInvalidRecords ? MessageBarType.info : MessageBarType.error}
+                    actions={
+                        <div className={styles.actions}>
+                            <CommandBarButton
+                                text={isSaving ? saveBtnProps.text : undefined}
+                                disabled={saveBtnProps.disabled}
+                                onRenderIcon={isSaving ? () => <Spinner size={SpinnerSize.small} /> : undefined}
+                                iconProps={{
+                                    iconName: saveBtnProps.iconName,
+                                }}
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    save();
+                                }}
+                            />
+                            <CommandBarButton
+                                disabled={saveBtnProps.disabled && !hasInvalidRecords && !grid.props.parameters.ChangeEditorMode}
+                                iconProps={{
+                                    iconName: 'Delete'
+                                }}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    clearAll();
+                                }}
+                            />
+                        </div>
+                    } isMultiline={false}>
+                    {isDirty &&
+                        <span className={styles.notificationText} dangerouslySetInnerHTML={{
+                            __html: labels["saving-changenotification"]({ numOfChanges: updatedRecords.length })
+                        }}></span>
+                    }
+                </MessageBar>
+            </div>
+            {changeEditorOpened &&
+                <ChangeEditor onDismiss={(e) => {
+                    //@ts-ignore
+                    if(e?.code === 'Escape') {
+                        return;
+                    }
+                    setChangeEditorOpened(false);
+                }} />
+            }
+        </>
+    )
+};

package/src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx

@@ -0,0 +1,63 @@
+import { DialogFooter, FocusTrapZone, ICommandBarItemProps, IDialogProps, PrimaryButton, Spinner, SpinnerSize, useTheme } from "@fluentui/react";
+import { useEffect } from 'react';
+import { useGridInstance } from "../../../../hooks/useGridInstance";
+import { useRecordUpdateServiceController } from "../../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController";
+import { IUpdatedRecord } from "../../../../services/RecordUpdateService/model/RecordUpdateService";
+import { IEntityColumn, IEntityRecord } from "../../../../../interfaces";
+import Dialog from "../../../Dialog";
+import { RecordGrids } from "./components/RecordGrids/RecordGrids";
+import { DataType } from "../../../../enums/DataType";
+import { getChangeEditorStyles } from "./styles";
+import { useSave } from "../../hooks/useSave";
+import React from 'react';
+
+export const ChangeEditor = (props: IDialogProps) => {
+    const grid = useGridInstance();
+    const labels = grid.labels;
+    const controller = useRecordUpdateServiceController();
+    const { isSaving, saveBtnProps, save } = useSave();
+    const updatedRecords = controller.updatedRecords;
+
+    const styles = getChangeEditorStyles(useTheme());
+    useEffect(() => {
+        if (updatedRecords.length === 0) {
+            props.onDismiss?.();
+        }
+    }, [updatedRecords]);
+
+
+    return <Dialog
+        {...props}
+        width={1000}
+        minWidth={'80%'}
+        modalProps={{
+            isBlocking: true,
+            className: styles.root,
+            layerProps: {
+                eventBubblingEnabled: true
+            }
+        }}
+        dialogContentProps={{
+            showCloseButton: true,
+            title: labels["saving-changepreview-title"]({
+                numOfChanges: updatedRecords.length
+            })
+        }}
+        hidden={false}>
+            <div className={styles.recordGrids}>
+                {updatedRecords.map(record => <RecordGrids key={record.getRecordId()} record={record} />)}
+            </div>
+        <DialogFooter>
+            <PrimaryButton
+                className={styles.saveBtn}
+                text={saveBtnProps.text}
+                disabled={saveBtnProps.disabled}
+                onClick={() => save()}
+            >
+                {isSaving &&
+                    <Spinner size={SpinnerSize.small} />
+                }
+            </PrimaryButton>
+        </DialogFooter>
+    </Dialog>
+}

package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { Grid } from '../../../../../../../Grid';
+import { useGridInstance } from '../../../../../../hooks/useGridInstance';
+import { IUpdatedRecord } from '../../../../../../services/RecordUpdateService/model/RecordUpdateService';
+import { Text } from '@fluentui/react/lib/Text';
+import { IEntityColumn, IEntityRecord, IGrid, IGridParameters } from '../../../../../../../interfaces';
+import { Icon } from '@fluentui/react/lib/components/Icon/Icon';
+import { getRecordGridStyles } from './styles';
+import { useTheme } from '@fluentui/react';
+
+interface IRecordGrids {
+    record: IUpdatedRecord;
+}
+export const RecordGrids = (props: IRecordGrids) => {
+    const grid = useGridInstance();
+    const record = { ...props.record };
+    const styles = getRecordGridStyles(useTheme());
+    const sharedProps: IGrid = {
+        context: grid.pcfContext,
+        parameters: {
+            EnableFiltering: {
+                raw: false
+            },
+            EnablePagination: {
+                raw: false
+            },
+            EnableSorting: {
+                raw: false
+            },
+            EnableNavigation: {
+                raw: false
+            },
+            IsNested: {
+                raw: true
+            },
+            Grid: {
+                ...grid.dataset,
+                sorting: [],
+                columns: [...record.columns.values()],
+                filtering: {
+                    ...grid.dataset.filtering,
+                    getFilter: () => {
+                        return {
+                            conditions: [],
+                            filterOperator: 0,
+                        }
+                    }
+                },
+                getSelectedRecordIds: () => [],
+                paging: {
+                    ...grid.dataset.paging,
+                    pageSize: 1
+                }
+            }
+        } as IGridParameters
+    }
+
+    const invalidColumns = (() => {
+        const columns: IEntityColumn[] = [];
+        for(const column of record.columns.values()) {
+            if(!record.isValid(column.name)) {
+                columns.push(column);
+            }
+        }
+        return columns;
+    })();
+
+    const hasInvalidColumn = invalidColumns.length > 0;
+
+    const getOriginalRecord = (record: IUpdatedRecord): IEntityRecord => {
+        return {
+            getFormattedValue: (columnKey: string) => record.getOriginalFormattedValue(columnKey),
+            getRecordId: () => record.getRecordId(),
+            getNamedReference: () => record.getNamedReference(),
+            getValue: (columnKey: string) => record.getOriginalValue(columnKey),
+            save: async () => {
+                const result = await record.save();
+                grid.pcfContext.factory.requestRender();
+            },
+            //only comes when clear is called to return to the original value
+            setValue: (columnKey: string, value: any) => {
+                record.clear();
+                //TODO: the internal record id map wont get updated
+                //with the references to updated records until they appear 
+                //in the grid => you cant see the changes 
+                grid.pcfContext.factory.requestRender();
+            }
+        }
+    }
+    const getUpdatedRecord = (record: IUpdatedRecord): IEntityRecord => {
+        return {
+            getFormattedValue: (columnKey: string) => record.getFormattedValue(columnKey),
+            getRecordId: () => record.getRecordId(),
+            getNamedReference: () => record.getNamedReference(),
+            getValue: (columnKey: string) => record.getValue(columnKey),
+            save: () => { throw new Error('Should not be called!') },
+            setValue: (columnKey: string, value: any) => {
+                record.setValue(columnKey, value)
+                grid.pcfContext.factory.requestRender();
+            }
+        }
+    }
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.readOnlyGrid}>
+                <div className={styles.gridTitleWrapper}>
+                    <Text title={record.getOriginalFormattedPrimaryNameValue()} variant='large'>{record.getOriginalFormattedPrimaryNameValue()}</Text>
+                </div>
+                <Grid
+                    {...sharedProps}
+                    parameters={{
+                        ...sharedProps.parameters,
+                        ChangeEditorMode: {
+                            raw: "read",
+                            error: hasInvalidColumn,
+                        },
+                        Grid: {
+                            ...sharedProps.parameters.Grid,
+                            error: hasInvalidColumn,
+                            errorMessage: hasInvalidColumn ? grid.labels['saving-validation-error']({
+                                columnDisplayNames: invalidColumns.map( x => x.displayName).join(', ')
+                            }): undefined,
+                            records: {
+                                [record.getRecordId()]: getOriginalRecord(record)
+                            }
+                        },
+
+                    } as IGridParameters} />
+            </div>
+            <Icon iconName="DoubleChevronDown8" />
+            <div className={styles.editableGrid}>
+                <Grid
+                    {...sharedProps}
+                    parameters={{
+                        ...sharedProps.parameters,
+                        ChangeEditorMode: {
+                            raw: "edit"
+                        },
+                        EnableEditing: {
+                            raw: true
+                        },
+                        Grid: {
+                            ...sharedProps.parameters.Grid,
+                            records: {
+                                [record.getRecordId()]: getUpdatedRecord(record)
+                            }
+                        }
+                    } as IGridParameters} />
+            </div>
+        </div>
+    )
+}

package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.ts

@@ -0,0 +1,52 @@
+import { ITheme, mergeStyleSets } from "@fluentui/react";
+
+export const getRecordGridStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        root: {
+            borderRadius: 5,
+            padding: 8,
+            paddingTop: 10,
+            gap: 15,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            backgroundColor: theme.semanticColors.bodyBackground,
+            boxShadow: theme.semanticColors.cardShadow,
+            '>span': {
+                fontWeight: 600
+            },
+            '>i': {
+                alignSelf: 'center',
+                fontSize: 22,
+            }
+
+        },
+        readOnlyGrid: {
+            '.ag-theme-balham > div > .ms-MessageBar': {
+                minHeight: 0,
+                height: 0,
+                '.ms-MessageBar-actionsSingleLine': {
+                    position: 'relative',
+                    top: -28
+                }
+            }
+        },
+        gridTitleWrapper: {
+            borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
+            paddingBottom: 10,
+            '>span': {
+                fontWeight: 600,
+                fontSize: 15,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                display: 'block',
+                maxWidth: 'calc(100% - 130px)'
+            },
+        },
+        editableGrid: {
+            position: 'relative',
+            top: -5
+        }
+    })
+}

package/src/components/Grid/core/components/Save/components/ChangeEditor/styles.ts

@@ -0,0 +1,34 @@
+import { ITheme, mergeStyleSets } from "@fluentui/react";
+
+export const getChangeEditorStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        root: {
+            '.ag-row': {
+                borderBottom: 'none'
+            },
+            '.ms-Dialog-title': {
+                borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`
+            },
+            '.ms-Dialog-content': {
+                backgroundColor: 'var(--talxis-main-bodyBackgroundMain, #faf9f8)'
+            }
+        },
+        recordGrids: {
+            marginTop: 15,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 15,
+        },
+        saveBtn: {
+            '.ms-Button-flexContainer': {
+                gap: 5,
+                '>span': {
+                    order: 2
+                },
+                '>div': {
+                    order: 1
+                }
+            }
+        }
+    })
+}

package/src/components/Grid/core/components/Save/hooks/useSave.ts

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { useGridInstance } from "../../../hooks/useGridInstance";
+import { useRecordUpdateServiceController } from "../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController";
+
+interface ISaveBtnProps {
+    disabled: boolean,
+    text: string,
+    iconName: string
+}
+
+interface ISave {
+    isSaving: boolean,
+    saveBtnProps: ISaveBtnProps,
+    save: () => Promise<boolean>
+}
+
+export const useSave = (): ISave => {
+    const grid = useGridInstance();
+    const labels = grid.labels;
+    const controller = useRecordUpdateServiceController();
+    const [isSaving, setIsSaving] = useState<boolean>(false);
+
+    const save = async (): Promise<boolean> => {
+        setIsSaving(true);
+        const result = await controller.saveAll();
+        setIsSaving(false);
+        return result;
+    }
+
+    const getSaveBtnProps = (): ISaveBtnProps => {
+        if (isSaving) {
+            return {
+                disabled: true,
+                iconName: 'SaveInPropgre',
+                text: labels["saving-saving"](),
+            }
+        }
+        if (controller.isDirty) {
+            return {
+                disabled: (controller.hasInvalidRecords || grid.props.parameters.ChangeEditorMode?.error) ? true : false,
+                iconName: 'Save',
+                text: labels["saving-save"]()
+
+            }
+        }
+        return {
+            disabled: true,
+            iconName: 'Save',
+            text: labels["saving-save"]()
+        }
+    }
+
+    return {
+        isSaving: isSaving,
+        saveBtnProps: getSaveBtnProps(),
+        save: save
+    }
+
+}

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

@@ -0,0 +1,41 @@
+import { mergeStyleSets } from "@fluentui/react"
+
+export const getSaveStyles = () => {
+    return mergeStyleSets({
+        root: {
+            '&[data-dirty="false"]': {
+                '.ms-MessageBar': {
+                    backgroundColor: 'transparent',
+                    '.ms-MessageBar-icon': {
+                        display: 'none'
+                    }
+                }
+            },
+            '.ms-MessageBar-icon': {
+                alignItems: 'center'
+            },
+            '.ms-MessageBar-actionsSingleLine': {
+                marginRight: 0
+            },
+            '.ms-MessageBar-innerText': {
+                textAlign: 'left'
+            },
+            '&[data-dirty="true"]': {
+                cursor: 'pointer'
+            }
+        },
+        notificationText: {
+            whiteSpace: 'normal',
+        },
+        actions: {
+            height: '100%',
+            '.ms-Button': {
+                height: '100%',
+                backgroundColor: 'transparent',
+                ':last-child': {
+                    marginLeft: 0
+                }
+            }
+        }
+    });
+}

package/src/components/Grid/core/controllers/useGridController.ts

@@ -0,0 +1,46 @@
+import { useContext, useEffect, useState } from "react"
+import equal from 'fast-deep-equal/es6';
+import { IEntityRecord } from "../../interfaces";
+import { Grid } from "../model/Grid";
+import { IGridColumn } from "../interfaces/IGridColumn";
+import { GridContext } from "../../Grid";
+
+interface IGridController {
+    columns: IGridColumn[],
+    records: IEntityRecord[]
+}
+
+export const useGridController = (gridInstance?: Grid): IGridController => {
+    const grid = gridInstance ?? useContext(GridContext).gridInstance;
+    const [columns, setColumns] = useState<IGridColumn[]>(grid.columns);
+    const [records, setRecords] = useState<IEntityRecord[]>(() => grid.refreshRecords());
+
+    const getRecordValues = (columns: IGridColumn[], records: IEntityRecord[]) => {
+        const newRecordValues = records.map(x => {
+            const values = [];
+            for(const column of columns) {
+                values.push(x.getValue(column.key))
+            }
+            return values;
+        });
+        return newRecordValues;
+    }
+
+    //only change columns and records reference if there is a change
+    useEffect(() => {
+        (async () => {
+            const newColumns = await grid.refreshColumns();
+            const newRecordValues = getRecordValues(newColumns, grid.refreshRecords());
+            if(!equal(newColumns, columns)) {
+                setColumns(newColumns);
+            }
+            if(!equal(newRecordValues, getRecordValues(newColumns, records))) {
+                setRecords(grid.records);
+            }
+        })();
+    }, [grid.shouldRerender]);
+    return {
+        columns,
+        records
+    }
+}

package/src/components/Grid/core/enums/ConditionOperator.ts

@@ -0,0 +1,46 @@
+export enum DatasetConditionOperator {
+    None = -1,
+    Equal = 0,
+    NotEqual = 1,
+    GreaterThan = 2,
+    LessThan = 3,
+    GreaterEqual = 4,
+    LessEqual = 5,
+    Like = 6,
+    NotLike = 7,
+    In = 8,
+    NotIn = 9,
+    Null = 12,
+    NotNull = 13,
+    Yesterday = 14,
+    Today = 15,
+    Tomorrow = 16,
+    Last7Days = 17,
+    Next7Days = 18,
+    LastWeek = 19,
+    ThisWeek = 20,
+    LastMonth = 22,
+    ThisMonth = 23,
+    On = 25,
+    OnOrBefore = 26,
+    OnOrAfter = 27,
+    LastYear = 28,
+    ThisYear = 29,
+    LastXDays = 33,
+    NextXDays = 34,
+    LastXMonths = 37,
+    NextXMonths = 38,
+    Contains = 49,
+    BeginWith = 54,
+    DoesNotBeginWith = 55,
+    EndsWith = 56,
+    DoesNotEndWith = 57,
+    InFiscalPeriodAndYear = 70,
+    Above = 75,
+    Under = 76,
+    NotUnder = 77,
+    AboveOrEqual = 78,
+    UnderOrEqual = 79,
+    ContainValues = 87,
+    DoesNotContainValues = 88
+  }