From: Lisa Knox Date: Fri, 12 May 2023 16:55:14 +0000 (-0400) Subject: 15768: checkedlist in redux store Arvados-DCO-1.1-Signed-off-by: Lisa Knox --- diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index 0446ee6f..3ef2e3f9 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -15,6 +15,7 @@ import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreOptionsIcon } fr import { PaperProps } from '@material-ui/core/Paper'; import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; import { MultiselectToolbar, defaultActions } from 'components/multiselectToolbar/MultiselectToolbar'; +import { TCheckedList } from 'components/data-table/data-table'; type CssRules = 'searchBox' | 'headerMenu' | 'toolbar' | 'footer' | 'root' | 'moreOptionsButton' | 'title' | 'dataTable' | 'container'; @@ -98,6 +99,7 @@ interface DataExplorerActionProps { onLoadMore: (page: number) => void; extractKey?: (item: T) => React.Key; toggleMSToolbar: (isVisible: boolean) => void; + setCheckedListOnStore: (checkedList: TCheckedList) => void; } type DataExplorerProps = DataExplorerDataProps & DataExplorerActionProps & WithStyles & MPVPanelProps; @@ -186,6 +188,7 @@ export const DataExplorer = withStyles(styles)( elementPath, isMSToolbarVisible, toggleMSToolbar, + setCheckedListOnStore, } = this.props; return ( @@ -248,6 +251,7 @@ export const DataExplorer = withStyles(styles)( currentItemUuid={currentItemUuid} currentRoute={paperKey} toggleMSToolbar={toggleMSToolbar} + setCheckedListOnStore={setCheckedListOnStore} /> diff --git a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx index 1b58f9e8..875f1818 100644 --- a/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx +++ b/src/components/data-table-multiselect-popover/data-table-multiselect-popover.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import React, { useEffect } from 'react'; -import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Button, Card, CardActions, Tooltip, IconButton } from '@material-ui/core'; +import { WithStyles, withStyles, ButtonBase, StyleRulesCallback, Theme, Popover, Card, Tooltip, IconButton } from '@material-ui/core'; import classnames from 'classnames'; import { DefaultTransformOrigin } from 'components/popover/helpers'; import debounce from 'lodash/debounce'; diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx index e89fe4dd..628405ce 100644 --- a/src/components/data-table/data-table.tsx +++ b/src/components/data-table/data-table.tsx @@ -53,6 +53,7 @@ export interface DataTableDataProps { currentItemUuid?: string; currentRoute?: string; toggleMSToolbar: (isVisible: boolean) => void; + setCheckedListOnStore: (checkedList: TCheckedList) => void; } type CssRules = @@ -145,7 +146,7 @@ export const DataTable = withStyles(styles)( } componentDidUpdate(prevProps: Readonly>, prevState: DataTableState) { - const { items, toggleMSToolbar } = this.props; + const { items, toggleMSToolbar, setCheckedListOnStore } = this.props; const { isSelected, checkedList } = this.state; if (!arraysAreCongruent(prevProps.items, items)) { if (isSelected === true) this.setState({ isSelected: false }); @@ -153,6 +154,7 @@ export const DataTable = withStyles(styles)( } if (prevState.checkedList !== checkedList) { toggleMSToolbar(this.isAnySelected() ? true : false); + setCheckedListOnStore(checkedList); } } diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx index 6620792e..b39fd657 100644 --- a/src/components/multiselectToolbar/MultiselectToolbar.tsx +++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx @@ -36,13 +36,11 @@ export const defaultActions: Array = [ }, ]; -const MSToolbarCopyButton = (classes, i) => { - return ( - - ); -}; +const MSToolbarCopyButton = (classes, i) => ( + +); type MultiselectToolbarProps = MultiselectToolbarActions & WithStyles; @@ -54,6 +52,7 @@ export const MultiselectToolbar = connect(mapStateToProps)( ); function mapStateToProps(state: RootState) { + // console.log(state); return { // state: state, }; diff --git a/src/store/multiselect/multiselect-actions.tsx b/src/store/multiselect/multiselect-actions.tsx index 307423b5..ba8edf42 100644 --- a/src/store/multiselect/multiselect-actions.tsx +++ b/src/store/multiselect/multiselect-actions.tsx @@ -4,6 +4,7 @@ export const multiselectActions = { TOGGLE_VISIBLITY: 'TOGGLE_VISIBLITY', + SET_CHECKEDLIST: 'SET_CHECKEDLIST', }; export const toggleMSToolbar = (isVisible: boolean) => { @@ -11,3 +12,9 @@ export const toggleMSToolbar = (isVisible: boolean) => { dispatch({ type: multiselectActions.TOGGLE_VISIBLITY, payload: isVisible }); }; }; + +export const setCheckedListOnStore = (checkedList) => { + return (dispatch) => { + dispatch({ type: multiselectActions.SET_CHECKEDLIST, payload: checkedList }); + }; +}; diff --git a/src/store/multiselect/multiselect-reducer.tsx b/src/store/multiselect/multiselect-reducer.tsx index 212f416b..6840df92 100644 --- a/src/store/multiselect/multiselect-reducer.tsx +++ b/src/store/multiselect/multiselect-reducer.tsx @@ -3,16 +3,20 @@ // SPDX-License-Identifier: AGPL-3.0 import { multiselectActions } from './multiselect-actions'; +import { TCheckedList } from 'components/data-table/data-table'; type MultiselectToolbarState = { isVisible: boolean; + checkedList: TCheckedList; }; const multiselectToolbarInitialState = { isVisible: false, + checkedList: {}, }; export const multiselectReducer = (state: MultiselectToolbarState = multiselectToolbarInitialState, action) => { if (action.type === multiselectActions.TOGGLE_VISIBLITY) return { ...state, isVisible: action.payload }; + if (action.type === multiselectActions.SET_CHECKEDLIST) return { ...state, checkedList: action.payload }; return state; }; diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx index be19319b..871389d4 100644 --- a/src/views-components/data-explorer/data-explorer.tsx +++ b/src/views-components/data-explorer/data-explorer.tsx @@ -9,10 +9,10 @@ import { getDataExplorer } from 'store/data-explorer/data-explorer-reducer'; import { Dispatch } from 'redux'; import { dataExplorerActions } from 'store/data-explorer/data-explorer-action'; import { DataColumn } from 'components/data-table/data-column'; -import { DataColumns } from 'components/data-table/data-table'; +import { DataColumns, TCheckedList } from 'components/data-table/data-table'; import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree'; import { LAST_REFRESH_TIMESTAMP } from 'components/refresh-button/refresh-button'; -import { toggleMSToolbar } from 'store/multiselect/multiselect-actions'; +import { toggleMSToolbar, setCheckedListOnStore } from 'store/multiselect/multiselect-actions'; interface Props { id: string; @@ -78,6 +78,10 @@ const mapDispatchToProps = (dispatchFn) => { dispatchFn(toggleMSToolbar(isVisible)); }, + setCheckedListOnStore: (checkedList: TCheckedList) => { + dispatchFn(setCheckedListOnStore(checkedList)); + }, + onRowClick, onRowDoubleClick,