@reltio/interactions 1.4.1584 → 1.4.1586-mui5

package/src/InteractionsTableView/index.tsx

@@ -0,0 +1,200 @@
+import React, {useCallback, useEffect, useMemo, useReducer, useRef} from 'react';
+import {useSelector} from 'react-redux';
+
+import {
+    BasicTablePagination,
+    BasicView,
+    LinearLoadIndicator,
+    useActions,
+    useDidUpdateEffect,
+    useSavedStateForEntityType
+} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {
+    Entity,
+    getInteractionType,
+    getInteractionTypesForEntityType,
+    InteractionsPerspectiveConfig,
+    Metadata
+} from '@reltio/mdm-sdk';
+import {pipe, propEq} from 'ramda';
+import {buildInteractionsFilter} from './helpers/filtersHelpers';
+import {DEFAULT_COLUMNS, getColumnsData, getRowsPerPageOptions} from './helpers/tableHelpers';
+import useInteractions from './hooks/useInteractions';
+import InteractionsTable from './InteractionsTable/InteractionsTable';
+import InteractionsTableHeader from './InteractionsTableHeader/InteractionsTableHeader';
+import reducer, {actions} from './stateReducer';
+import {InteractionsSavedState} from './types';
+
+import {useStyles} from './styles';
+
+const DEFAULT_ROWS_PER_PAGE = 15;
+const DEFAULT_SORT_ORDER = 'desc';
+const [DEFAULT_SORT_FIELD] = DEFAULT_COLUMNS;
+
+type Props = {
+    config: InteractionsPerspectiveConfig;
+    saveState: (state: Record<string, InteractionsSavedState>) => void;
+    getSavedState: () => Promise<Record<string, InteractionsSavedState>>;
+};
+const InteractionsTableView = ({config, getSavedState, saveState}: Props) => {
+    const entity: Entity = useSelector(mdmModule.selectors.getEntity);
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const styles = useStyles();
+
+    const initialState = {
+        currentInteractionType: null,
+        filters: null,
+        visibleColumns: DEFAULT_COLUMNS,
+        sorting: {
+            order: config.sortOrder || DEFAULT_SORT_ORDER,
+            field: config.sortColumn || DEFAULT_SORT_FIELD
+        },
+        page: 0,
+        rowsPerPage: config.max || DEFAULT_ROWS_PER_PAGE,
+        stateToSave: null,
+        entityTypeOfAppliedSavedState: null,
+        visibleColumnsForInteractionTypes: {}
+    };
+
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const {
+        visibleColumns,
+        filters,
+        sorting,
+        page,
+        rowsPerPage,
+        currentInteractionType,
+        stateToSave,
+        entityTypeOfAppliedSavedState
+    } = state;
+    const {
+        applySavedState,
+        saveCurrentState,
+        toggleFilters,
+        toggleSort,
+        changeFilter,
+        changeColumns,
+        changeInteractionType,
+        changePage,
+        changeRowsPerPage
+    } = useActions({actions, dispatch});
+
+    const {uri: entityUri, type: entityType} = entity || {};
+
+    const isSavedStateApplied = entityTypeOfAppliedSavedState === entityType;
+
+    const {
+        isLoaded: isSavedStateLoaded,
+        savedState,
+        updateSavedState
+    } = useSavedStateForEntityType<InteractionsSavedState>({
+        entityTypeUri: entityType,
+        getSavedState,
+        saveState
+    });
+
+    useEffect(() => {
+        if (isSavedStateLoaded) {
+            const interactionTypes = getInteractionTypesForEntityType(metadata, entityType);
+            const currentInteractionType = savedState?.currentInteractionType;
+            const isInteractionTypeExist =
+                !currentInteractionType || getInteractionType({interactionTypes}, currentInteractionType);
+            const savedStateToApply = isInteractionTypeExist ? savedState : null;
+            applySavedState({savedState: savedStateToApply, entityType});
+        }
+    }, [isSavedStateLoaded, entityType, metadata]); // eslint-disable-line
+
+    useDidUpdateEffect(() => {
+        if (isSavedStateApplied) {
+            updateSavedState(stateToSave);
+        }
+    }, [stateToSave]); // eslint-disable-line
+
+    const resetPage = () => {
+        changePage(0);
+    };
+    useDidUpdateEffect(resetPage, [entityUri]);
+
+    const interactionTypes = useMemo(
+        () => getInteractionTypesForEntityType(metadata, entityType),
+        [entityType, metadata]
+    );
+
+    const allColumnsData = useMemo(
+        () => getColumnsData(metadata, config, interactionTypes, currentInteractionType),
+        [metadata, config, interactionTypes, currentInteractionType]
+    );
+
+    const visibleColumnsData = useMemo(
+        () => visibleColumns.map((id) => allColumnsData.find(propEq('id', id))),
+        [visibleColumns, allColumnsData]
+    );
+
+    const filter = useMemo(
+        () => buildInteractionsFilter(currentInteractionType, filters, visibleColumnsData),
+        [currentInteractionType, filters] //eslint-disable-line
+    );
+
+    const {
+        isLoading: isInteractionsLoading,
+        interactions,
+        total
+    } = useInteractions({
+        enabled: !!entityUri && isSavedStateApplied,
+        entityUri,
+        filter,
+        sorting,
+        rowsPerPage,
+        page
+    });
+
+    const rowsPerPageOptions = useMemo(() => getRowsPerPageOptions(initialState.rowsPerPage), []); // eslint-disable-line
+
+    const isLoading = !isSavedStateApplied || isInteractionsLoading;
+
+    const handleFilterChange = useCallback(pipe(changeFilter, saveCurrentState), [changeFilter, saveCurrentState]);
+
+    const basicTableRef = useRef(null);
+
+    return (
+        <BasicView className={styles.basicView}>
+            <InteractionsTableHeader
+                title={config.caption}
+                total={total}
+                columnsData={allColumnsData}
+                selectedColumns={visibleColumns}
+                onChangeColumns={pipe(changeColumns, saveCurrentState)}
+                filtersEnabled={!!filters}
+                onToggleFilters={pipe(toggleFilters, saveCurrentState)}
+                interactionTypes={interactionTypes}
+                currentInteractionType={currentInteractionType}
+                onInteractionTypeChange={pipe(changeInteractionType, saveCurrentState)}
+            />
+            <div className={styles.tableView}>
+                <InteractionsTable
+                    columnsData={visibleColumnsData}
+                    interactions={interactions}
+                    metadata={metadata}
+                    filters={filters}
+                    onFilter={handleFilterChange}
+                    sorting={sorting}
+                    onSort={pipe(toggleSort, saveCurrentState)}
+                    basicTableRef={basicTableRef}
+                />
+                <BasicTablePagination
+                    count={total}
+                    rowsPerPageOptions={rowsPerPageOptions}
+                    rowsPerPage={rowsPerPage}
+                    onChangeRowsPerPage={changeRowsPerPage}
+                    page={page}
+                    onChangePage={changePage}
+                    basicTableRef={basicTableRef}
+                />
+                {isLoading && <LinearLoadIndicator />}
+            </div>
+        </BasicView>
+    );
+};
+
+export default InteractionsTableView;

package/src/InteractionsTableView/stateReducer.ts

@@ -0,0 +1,132 @@
+import {
+    always,
+    assoc,
+    concat,
+    dissoc,
+    either,
+    evolve,
+    ifElse,
+    intersection,
+    path,
+    pick,
+    pipe,
+    prop,
+    propOr,
+    when,
+    without,
+    unless,
+    isNil,
+    filter
+} from 'ramda';
+import {ACTORS_COLUMN_ID, ALL_TYPES_COLUMNS, DEFAULT_COLUMNS} from './helpers/tableHelpers';
+import {basicTableViewState, createStandardAction, Sorting} from '@reltio/components';
+import {SearchFilter, validateFilterValue} from '@reltio/mdm-sdk';
+import {InteractionsSavedState} from './types';
+
+const CHANGE_INTERACTION_TYPE = 'CHANGE_INTERACTION_TYPE';
+const APPLY_SAVED_STATE = 'APPLY_SAVED_STATE';
+const SAVE_CURRENT_STATE = 'SAVE_CURRENT_STATE';
+
+const actions = {
+    ...basicTableViewState.actions,
+    changeInteractionType: createStandardAction(CHANGE_INTERACTION_TYPE),
+    applySavedState: createStandardAction(APPLY_SAVED_STATE),
+    saveCurrentState: createStandardAction(SAVE_CURRENT_STATE)
+};
+
+const resetActorsColumnFilters = evolve({
+    filters: when(prop(ACTORS_COLUMN_ID), dissoc(ACTORS_COLUMN_ID))
+});
+
+const resetPageNumber = assoc('page', 0);
+
+const getDefaultVisibleColumnsForCurrentInteractionType = (state) =>
+    pipe(
+        prop('visibleColumns'),
+        ifElse(always(state.currentInteractionType), without(ALL_TYPES_COLUMNS), concat(ALL_TYPES_COLUMNS)),
+        intersection(DEFAULT_COLUMNS)
+    )(state);
+
+const getSavedVisibleColumnsForCurrentInteractionType = (state) =>
+    path(['visibleColumnsForInteractionTypes', `${state.currentInteractionType}`], state);
+
+const changeVisibleColumnsForCurrentInteractionType = (state) => {
+    const nextVisibleColumns = either(
+        getSavedVisibleColumnsForCurrentInteractionType,
+        getDefaultVisibleColumnsForCurrentInteractionType
+    )(state);
+    return basicTableViewState.changeVisibleColumns(state, nextVisibleColumns);
+};
+
+const getVisibleColumnsFromSavedState = either(getSavedVisibleColumnsForCurrentInteractionType, prop('visibleColumns'));
+const getFiltersFromSavedState = pipe(
+    propOr(null, 'filters'),
+    unless(
+        isNil,
+        filter(({filter, value}) => validateFilterValue(filter, value))
+    )
+);
+
+const saveVisibleColumnsForCurrentInteractionType = (state) => {
+    const {currentInteractionType, visibleColumns} = state;
+    return evolve(
+        {
+            visibleColumnsForInteractionTypes: assoc(`${currentInteractionType}`, visibleColumns)
+        },
+        state
+    );
+};
+
+const getStateToSave = pipe(
+    saveVisibleColumnsForCurrentInteractionType,
+    pick(['currentInteractionType', 'visibleColumnsForInteractionTypes', 'filters', 'sorting'])
+);
+
+type InitialState = {
+    currentInteractionType?: string;
+    filters: SearchFilter[];
+    visibleColumns: string[];
+    sorting: Sorting;
+    page: number;
+    rowsPerPage: number;
+    saveToState?: InteractionsSavedState;
+    entityTypeOfAppliedSavedState?: string;
+    visibleColumnsForInteractionTypes: Record<string, string[]>;
+};
+
+const reducer = (state: InitialState, action) => {
+    switch (action.type) {
+        case CHANGE_INTERACTION_TYPE: {
+            const nextInteractionType = action.payload;
+            return pipe(
+                saveVisibleColumnsForCurrentInteractionType,
+                assoc('currentInteractionType', nextInteractionType),
+                changeVisibleColumnsForCurrentInteractionType,
+                resetActorsColumnFilters,
+                resetPageNumber
+            )(state);
+        }
+        case APPLY_SAVED_STATE: {
+            const {savedState, entityType} = action.payload;
+            const visibleColumns = savedState ? getVisibleColumnsFromSavedState(savedState) : state.visibleColumns;
+            const filters = savedState ? getFiltersFromSavedState(savedState) : state.filters;
+            return {
+                ...state,
+                ...savedState,
+                filters,
+                visibleColumns,
+                entityTypeOfAppliedSavedState: entityType
+            };
+        }
+        case SAVE_CURRENT_STATE: {
+            return {
+                ...state,
+                stateToSave: getStateToSave(state)
+            };
+        }
+        default:
+            return basicTableViewState.reducer(state, action);
+    }
+};
+
+export {reducer as default, actions};

package/src/InteractionsTableView/styles.ts

@@ -0,0 +1,18 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((_) => ({
+    basicView: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        boxShadow: 'none'
+    },
+    tableView: {
+        position: 'relative',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column'
+    }
+}));

package/src/InteractionsTableView/types/index.ts

@@ -0,0 +1,8 @@
+import {ColumnFilter, Sorting} from '@reltio/components';
+
+export type InteractionsSavedState = {
+    currentInteractionType: string;
+    visibleColumnsForInteractionTypes: Record<string, string[]>;
+    filters: ColumnFilter[];
+    sorting: Sorting;
+};

package/src/index.tsx

@@ -0,0 +1,59 @@
+import React, {useCallback} from 'react';
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
+import StylesProvider from '@mui/styles/StylesProvider';
+import ReactResizeDetector from 'react-resize-detector';
+import {Store} from 'redux';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {ErrorPopup, ViewIdContext} from '@reltio/components';
+import {InteractionsPerspectiveConfig, promisifyCallback} from '@reltio/mdm-sdk';
+import {identity} from 'ramda';
+import {Provider} from 'react-redux';
+import InteractionsTableView from './InteractionsTableView';
+import {InteractionsSavedState} from './InteractionsTableView/types';
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: 'interactionTable',
+    disableGlobal: true,
+    seed: 'intr'
+});
+
+type Props = {
+    config: InteractionsPerspectiveConfig;
+    store: Store<unknown>;
+    onResize?: (width: number, height: number) => void;
+    saveState: (state: Record<string, InteractionsSavedState>) => void;
+    getSavedState: () => Record<string, InteractionsSavedState>;
+};
+
+const InteractionsView = ({config, store, onResize = identity, saveState, getSavedState}: Props) => {
+    const getSavedStatePromisified: () => Promise<Record<string, InteractionsSavedState>> = useCallback(
+        promisifyCallback(getSavedState),
+        [getSavedState]
+    );
+
+    return (
+        <Provider store={store}>
+            <ViewIdContext.Provider value={config.id}>
+                <StylesProvider generateClassName={generateClassName}>
+                    <LocalizationProvider dateAdapter={AdapterMoment}>
+                        <ReactResizeDetector
+                            handleHeight
+                            onResize={(width, height) => onResize(Math.floor(width), Math.floor(height))}
+                        />
+                        {config && (
+                            <InteractionsTableView
+                                config={config}
+                                saveState={saveState}
+                                getSavedState={getSavedStatePromisified}
+                            />
+                        )}
+                        <ErrorPopup />
+                    </LocalizationProvider>
+                </StylesProvider>
+            </ViewIdContext.Provider>
+        </Provider>
+    );
+};
+
+export default InteractionsView;

package/stories/Interactions.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import InteractionsView from '../src/';
+import mdmStore from './utils/mdmStore';
+import interactionsViewConfig from './utils/interactionsViewConfig';
+import interactionResponse from './utils/interactions';
+import {createTheme, ThemeProvider, StyledEngineProvider} from '@mui/material/styles';
+import {storiesOf} from '@storybook/react';
+import {setRequestProvider, theme} from '@reltio/mdm-sdk';
+
+const muiTheme = createTheme(theme);
+
+const request = () => Promise.resolve({});
+
+setRequestProvider(request);
+
+storiesOf('InteractionsView', module).add('test', () => {
+    const request = () => Promise.resolve(interactionResponse);
+    setRequestProvider(request);
+    return (
+        <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={muiTheme}>
+                <InteractionsView
+                    config={interactionsViewConfig}
+                    store={mdmStore}
+                    saveState={() => {}}
+                    getSavedState={(resolve) => resolve()}
+                />
+            </ThemeProvider>
+        </StyledEngineProvider>
+    );
+});

package/stories/utils/entity.js

@@ -0,0 +1,11 @@
+export default {
+    uri: 'entities/369r06C',
+    type: 'configuration/entityTypes/Tenant',
+    createdBy: 'test',
+    createdTime: 1486575286175,
+    updatedBy: 'sfdc.connector.reltio360',
+    updatedTime: 1543530347506,
+    attributes: {},
+    label: 'Test',
+    secondaryLabel: ''
+};