@talxis/base-controls 1.2406.2 → 1.2406.3

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
-  }

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

@@ -1,25 +0,0 @@
-export enum DataType {
-    SINGLE_LINE_TEXT = 'SingleLine.Text',
-    SINGLE_LINE_TEXT_AREA = 'SingleLine.TextArea',
-    SINGLE_LINE_EMAIL = 'SingleLine.Email',
-    SINGLE_LINE_PHONE = 'SingleLine.Phone',
-    SINGLE_LINE_URL = 'SingleLine.URL',
-    MULTIPLE = 'Multiple',
-    WHOLE_NONE = 'Whole.None',
-    DECIMAL = 'Decimal',
-    FP = 'FP',
-    DATE_AND_TIME_DATE_AND_TIME = 'DateAndTime.DateAndTime',
-    DATE_AND_TIME_DATE_ONLY = 'DateAndTime.DateOnly',
-    CURRENCY = 'Currency',
-    OPTIONSET = 'OptionSet',
-    MULTI_SELECT_OPTIONSET = 'MultiSelectPicklist',
-    TWO_OPTIONS = 'TwoOptions',
-    LOOKUP_SIMPLE = 'Lookup.Simple',
-    LOOKUP_OWNER = 'Lookup.Owner',
-    // Not supported in pcf dataset - https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/property-set#value-elements-that-are-not-supported
-    WHOLE_LANGUAGE = 'Whole.Language',
-    WHOLE_DURATION = 'Whole.Duration',
-    WHOLE_TIMEZONE = 'Whole.TimeZone',
-    FILE = 'File',
-    IMAGE = 'Image',
-  }

package/src/components/Grid/core/hooks/useGridInstance.ts

@@ -1,7 +0,0 @@
-import { useContext } from "react"
-import { GridContext } from "../../Grid"
-import { Grid } from "../model/Grid";
-
-export const useGridInstance = (): Grid => {
-    return useContext(GridContext).gridInstance;
-}

package/src/components/Grid/core/hooks/useRefreshCallback.ts

@@ -1,20 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { GridDependency } from "../model/GridDependency";
-
-export const useRefreshCallback = (model: GridDependency | Promise<GridDependency>, refreshCallback: () => any) => {
-    const id = useMemo(() => crypto.randomUUID(), [])
-    useEffect(() => {
-        (async () => {
-            const _model = await model;
-            _model.addRefreshCallback(id, refreshCallback);
-        })();
-        console.log('refresh callback added')
-        return () => {
-            (async () => {
-                const _model = await model;
-                _model.removeRefreshCallback(id);
-                
-            })();
-        }
-    }, []);
-};

package/src/components/Grid/core/hooks/useRerender.ts

@@ -1,15 +0,0 @@
-import { useEffect, useState } from "react"
-
-export const useRerender = (): [
-    number,
-    (fn?: () => any | Promise<any>) => void
-] => {
-    const [rerender, setRerender] = useState<number>(0);
-
-    const renderDecorator = async (fn?: () => any | Promise<any>) => {
-        await fn?.();
-        setRerender(c => c + 1);
-    }
-
-    return [rerender, renderDecorator];
-}

package/src/components/Grid/core/interfaces/IGridColumn.ts

@@ -1,19 +0,0 @@
-import { DataType } from "../enums/DataType";
-
-export interface IGridColumn {
-    key: string;
-    attributeName: string;
-    isPrimary?: boolean;
-    dataType?: DataType;
-    displayName?: string;
-    entityAliasName?: string;
-    isFilterable?: boolean;
-    isSortable?: boolean;
-    isSorted?: boolean;
-    isFiltered?: boolean;
-    isSortedDescending?: boolean;
-    isEditable?: boolean;
-    isResizable?: boolean;
-    isRequired?: boolean;
-    width?: number;
-}

package/src/components/Grid/core/interfaces/IGridContext.ts

@@ -1,7 +0,0 @@
-import { StringProps } from "../../../../types";
-import { IGrid, IGridTranslations } from "../../interfaces";
-import { Grid } from "../model/Grid";
-
-export interface IGridContext {
-    gridInstance: Grid;
-}