Use new tree control to select account

okcodes · Oct 16, 2020 · bf73e7d · bf73e7d
1 parent c872e97
commit bf73e7d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/src/views/FlowOperationList/components/AccountPicker.tsx b/src/views/FlowOperationList/components/AccountPicker.tsx
@@ -25,9 +25,11 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 type Props = {
-    open: boolean,
-    handleClose: () => void,
-    dropDownDataForCashAccounts: CashAccountModel[],
+    open: boolean
+    handleClose: () => void
+    dropDownDataForCashAccounts: CashAccountModel[]
+    onAccountPicked: (account: CashAccountModel) => void
+    value: string
 };
 
 type BranchClickArgs = {
@@ -83,7 +85,7 @@ const Branch = ({tree, baseNodeId, parentBranch, separator, onClick}: BranchProp
     );
 };
 
-const TreefyExample = ({accountNames, separator}: { accountNames: string[], separator: string }) => {
+const AccountPickerTree = ({accountNames, separator, onClick}: { accountNames: string[], separator: string, onClick: (data: BranchClickArgs) => void }) => {
     const classes = useStyles();
     const tree = treefy({stringArray: accountNames, separator});
     return (
@@ -93,19 +95,34 @@ const TreefyExample = ({accountNames, separator}: { accountNames: string[], sepa
             defaultExpandIcon={<ChevronRightIcon/>}
         >
             <Branch tree={tree} baseNodeId={'account-picker-tree'} parentBranch={''} separator={separator}
-                    onClick={data => console.log('%c click', 'background: white; color: black', data)}/>
+                    onClick={onClick}/>
         </TreeView>
     );
 };
 
-export const AccountPicker = ({open, handleClose, dropDownDataForCashAccounts: accounts}: Props) => {
+const normalizePathRegex = /(\s*\/\s*)/gm;
+const normalizePath = (value: string) => value.replace(normalizePathRegex, '/');
+
+export const AccountPicker = ({open, handleClose, dropDownDataForCashAccounts: accounts, onAccountPicked, value}: Props) => {
     const classes = useStyles();
 
     return (
         <Dialog open={open} onClose={handleClose} TransitionComponent={Transition} className={classes.dialogRoot}>
             <DialogTitle>Account</DialogTitle>
             <DialogContent>
-                <TreefyExample accountNames={accounts.map(account => account.name)} separator={'/'}/>
+                <AccountPickerTree accountNames={accounts.map(account => account.name)} separator={'/'}
+                                   onClick={data => {
+                                       const isLeaf = !data.subBranches.length;
+                                       if (isLeaf) {
+                                           const account = accounts.find(account => normalizePath(account.name) === data.fullPath);
+                                           if (account) {
+                                               onAccountPicked(account);
+                                           } else {
+                                               console.error('Could not find account', {account, data, accounts});
+                                           }
+                                       }
+                                   }}
+                />
             </DialogContent>
             <DialogActions>
                 <Button onClick={handleClose} color="primary">

diff --git a/src/views/FlowOperationList/components/FlowOperationFormDialog.tsx b/src/views/FlowOperationList/components/FlowOperationFormDialog.tsx
@@ -13,10 +13,6 @@ import {showAlert} from "../../../utils/ui";
 import moment from 'moment';
 import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
 import {CashAccountModel} from "../../../models/CashAccountModel";
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
 import {Transition} from "../../../components/common/Transition";
 import accounting from 'accounting';
 import {NumberFormatCustom} from '../../../components/common/NumberFormatCusrom';
@@ -37,10 +33,6 @@ const useStyles = makeStyles((theme: Theme) =>
         title: {
             fontSize: 14,
         },
-        formControl: {
-            margin: theme.spacing(1, 0, 1, 0),
-            minWidth: 120,
-        },
         stonks: {
             color: stonksTextColor,
         },
@@ -157,29 +149,17 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
                             Account
                         </Typography>
                         <Typography variant="h5" component="h2">
-                            {dirty.issuerCashAccount?.name}
+                            {dropDownDataForCashAccounts.find(x => x.id === dirty.issuerCashAccountID)?.name || ''}
                         </Typography>
                     </CardContent>
                 </Card>
                 <AccountPicker
                     open={showAccountPicker}
                     handleClose={() => setShowAccountPicker(false)}
                     dropDownDataForCashAccounts={dropDownDataForCashAccounts}
+                    onAccountPicked={account => onTextFieldChange(account.id, 'issuerCashAccountID')}
+                    value={dirty.issuerCashAccountID}
                 />
-                <FormControl className={classes.formControl}>
-                    <InputLabel id="FlowOperationFromDialog-IssuerCashAccountId-Label">Account</InputLabel>
-                    <Select
-                        labelId="FlowOperationFromDialog-IssuerCashAccountId-Label"
-                        value={dirty.issuerCashAccountID}
-                        onChange={e => onTextFieldChange(e.target.value + '', 'issuerCashAccountID')}
-                    >
-                        {dropDownDataForCashAccounts.map(cashAccount => (
-                            <MenuItem key={`FlowOperationFormDialog-${cashAccount.id}`} value={cashAccount.id}>
-                                {cashAccount.name}
-                            </MenuItem>
-                        ))}
-                    </Select>
-                </FormControl>
                 <TextField
                     margin="dense"
                     label="Description"