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 } 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' | 'button';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     root: {
  22         display: 'flex',
  23         flexDirection: 'row',
  24     },
  25     button: {
  26         color: theme.palette.text.primary,
  27         // margin: '0.5rem',
  28     },
  29 });
  30
  31 type MultiselectToolbarAction = {
  32     name: string;
  33     fn: string;
  34 };
  35
  36 export const defaultActions: Array<MultiselectToolbarAction> = [
  37     // {
  38     //     name: 'copy',
  39     //     fn: (name, checkedList) => MSToolbarCopyButton(name, checkedList),
  40     // },
  41     {
  42         name: 'remove',
  43         fn: 'REMOVE',
  44     },
  45 ];
  46
  47 export type MultiselectToolbarProps = {
  48     buttons: Array<MultiselectToolbarAction>;
  49     checkedList: TCheckedList;
  50     copySelected: () => void;
  51     removeSelected: (selectedList: TCheckedList) => void;
  52 };
  53
  54 export const MultiselectToolbar = connect(
  55     mapStateToProps,
  56     mapDispatchToProps
  57 )(
  58     withStyles(styles)((props: MultiselectToolbarProps & WithStyles<CssRules>) => {
  59         console.log(props);
  60         const actions = {
  61             COPY: props.copySelected,
  62             REMOVE: props.removeSelected,
  63         };
  64
  65         const { classes, buttons, checkedList } = props;
  66         return (
  67             <Toolbar className={classes.root}>
  68                 {buttons.map((btn) => (
  69                     <Button key={btn.name} className={classes.button} onClick={() => actions[btn.fn](checkedList)}>
  70                         {btn.name}
  71                     </Button>
  72                 ))}
  73             </Toolbar>
  74         );
  75     })
  76 );
  77
  78 function selectedToString(checkedList: TCheckedList) {
  79     let stringifiedSelectedList: string = '';
  80     for (const [key, value] of Object.entries(checkedList)) {
  81         if (value === true) {
  82             stringifiedSelectedList += key + ',';
  83         }
  84     }
  85     return stringifiedSelectedList.slice(0, -1);
  86 }
  87
  88 function selectedToArray<T>(checkedList: TCheckedList): Array<T | string> {
  89     const arrayifiedSelectedList: Array<string> = [];
  90     for (const [key, value] of Object.entries(checkedList)) {
  91         if (value === true) {
  92             arrayifiedSelectedList.push(key);
  93         }
  94     }
  95     return arrayifiedSelectedList;
  96 }
  97
  98 function mapStateToProps(state: RootState) {
  99     // console.log(state.resources, state.multiselect.checkedList);
 100     return {
 101         checkedList: state.multiselect.checkedList as TCheckedList,
 102         // selectedList: state.multiselect.checkedList.forEach(processUUID=>containerRequestUUID)
 103     };
 104 }
 105
 106 function mapDispatchToProps(dispatch: Dispatch) {
 107     return {
 108         copySelected: () => {},
 109         removeSelected: (selectedList) => removeMany(dispatch, selectedList),
 110     };
 111 }
 112
 113 function removeMany(dispatch: Dispatch, checkedList: TCheckedList): void {
 114     selectedToArray(checkedList).forEach((uuid: string) => dispatch<any>(openRemoveProcessDialog(uuid)));
 115 }