@talxis/base-controls 1.2406.2 → 1.2406.4

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

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

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

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

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

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

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

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

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

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

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

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

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