src/components/multiselectToolbar/MultiselectToolbar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { ReactElement } from 'react';
   6 import { connect } from 'react-redux';
   7 import { StyleRulesCallback, withStyles, WithStyles, Toolbar, Button } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { RootState } from 'store/store';
  10 import { Dispatch } from 'redux';
  11 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
  12 import { TCheckedList } from 'components/data-table/data-table';
  13 import { openRemoveProcessDialog, openRemoveManyProcessesDialog } from 'store/processes/processes-actions';
  14 import { processResourceActionSet } from '../../views-components/context-menu/action-sets/process-resource-action-set';
  15 import { ContextMenuResource } from 'store/context-menu/context-menu-actions';
  16 import { toggleTrashed } from 'store/trash/trash-actions';
  17
  18 type CssRules = 'root' | 'expanded' | 'button';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     root: {
  22         display: 'flex',
  23         flexDirection: 'row',
  24         justifyContent: 'start',
  25         width: '0px',
  26         padding: 0,
  27         marginTop: '0.5rem',
  28         marginLeft: '0.5rem',
  29         overflow: 'hidden',
  30         transition: 'width 150ms',
  31         transitionTimingFunction: 'ease',
  32     },
  33     expanded: {
  34         transition: 'width 150ms',
  35         transitionTimingFunction: 'ease-in',
  36         width: '40%',
  37     },
  38     button: {
  39         backgroundColor: '#017ead',
  40         color: 'white',
  41         fontSize: '0.75rem',
  42         width: 'fit-content',
  43         margin: '2px',
  44         padding: '1px',
  45     },
  46 });
  47
  48 type MultiselectToolbarAction = {
  49     name: string;
  50     action: string;
  51 };
  52
  53 export const defaultActions: Array<MultiselectToolbarAction> = [
  54     {
  55         name: 'copy',
  56         action: 'copySelected',
  57     },
  58     {
  59         name: 'move',
  60         action: 'moveSelected',
  61     },
  62     {
  63         name: 'remove',
  64         action: 'removeSelected',
  65     },
  66 ];
  67
  68 export type MultiselectToolbarProps = {
  69     buttons: Array<MultiselectToolbarAction>;
  70     isVisible: boolean;
  71     checkedList: TCheckedList;
  72     copySelected: () => void;
  73     moveSelected: () => void;
  74     removeSelected: (selectedList: TCheckedList) => void;
  75 };
  76
  77 export const MultiselectToolbar = connect(
  78     mapStateToProps,
  79     mapDispatchToProps
  80 )(
  81     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  82         // console.log(props);
  83         const { classes, buttons, isVisible, checkedList } = props;
  84         return (
  85             <Toolbar className={isVisible ? `${classes.root} ${classes.expanded}` : classes.root}>
  86                 {buttons.map((btn) => (
  87                     <Button key={btn.name} className={`${classes.button} ${classes.expanded}`} onClick={() => props[btn.action](checkedList)}>
  88                         {btn.name}
  89                     </Button>
  90                 ))}
  91             </Toolbar>
  92         );
  93     })
  94 );
  95
  96 function selectedToString(checkedList: TCheckedList) {
  97     let stringifiedSelectedList: string = '';
  98     for (const [key, value] of Object.entries(checkedList)) {
  99         if (value === true) {
 100             stringifiedSelectedList += key + ',';
 101         }
 102     }
 103     return stringifiedSelectedList.slice(0, -1);
 104 }
 105
 106 function selectedToArray<T>(checkedList: TCheckedList): Array<T | string> {
 107     const arrayifiedSelectedList: Array<T | string> = [];
 108     for (const [key, value] of Object.entries(checkedList)) {
 109         if (value === true) {
 110             arrayifiedSelectedList.push(key);
 111         }
 112     }
 113     return arrayifiedSelectedList;
 114 }
 115
 116 function mapStateToProps(state: RootState) {
 117     // console.log(state.resources, state.multiselect.checkedList);
 118     const { isVisible, checkedList } = state.multiselect;
 119     return {
 120         isVisible: isVisible,
 121         checkedList: checkedList as TCheckedList,
 122         // selectedList: state.multiselect.checkedList.forEach(processUUID=>containerRequestUUID)
 123     };
 124 }
 125
 126 function mapDispatchToProps(dispatch: Dispatch) {
 127     return {
 128         copySelected: () => {},
 129         moveSelected: () => {},
 130         removeSelected: (checkedList: TCheckedList) => removeMany(dispatch, checkedList),
 131     };
 132 }
 133
 134 function removeMany(dispatch: Dispatch, checkedList: TCheckedList): void {
 135     dispatch<any>(openRemoveManyProcessesDialog(selectedToArray(checkedList)));
 136 }