@@ -7,11 +7,13 @@ import TableCell from '@material-ui/core/TableCell';
77import TableHead from '@material-ui/core/TableHead' ;
88import TableRow from '@material-ui/core/TableRow' ;
99import Delete from '@material-ui/icons/Delete' ;
10+ import Edit from '@material-ui/icons/Edit' ;
1011import React , { Component , SFC } from 'react' ;
1112import ConfirmDialog from '../common/ConfirmDialog' ;
1213import DefaultPage from '../common/DefaultPage' ;
1314import ToggleVisibility from '../common/ToggleVisibility' ;
1415import AddClientDialog from './AddClientDialog' ;
16+ import UpdateDialog from './UpdateClientDialog' ;
1517import { observer } from 'mobx-react' ;
1618import { observable } from 'mobx' ;
1719import { inject , Stores } from '../inject' ;
@@ -22,12 +24,15 @@ class Clients extends Component<Stores<'clientStore'>> {
2224 private showDialog = false ;
2325 @observable
2426 private deleteId : false | number = false ;
27+ @observable
28+ private updateId : false | number = false ;
2529
2630 public componentDidMount = ( ) => this . props . clientStore . refresh ( ) ;
2731
2832 public render ( ) {
2933 const {
3034 deleteId,
35+ updateId,
3136 showDialog,
3237 props : { clientStore} ,
3338 } = this ;
@@ -47,6 +52,7 @@ class Clients extends Component<Stores<'clientStore'>> {
4752 < TableCell > Name</ TableCell >
4853 < TableCell style = { { width : 200 } } > token</ TableCell >
4954 < TableCell />
55+ < TableCell />
5056 </ TableRow >
5157 </ TableHead >
5258 < TableBody >
@@ -56,6 +62,7 @@ class Clients extends Component<Stores<'clientStore'>> {
5662 key = { client . id }
5763 name = { client . name }
5864 value = { client . token }
65+ fEdit = { ( ) => ( this . updateId = client . id ) }
5966 fDelete = { ( ) => ( this . deleteId = client . id ) }
6067 />
6168 ) ;
@@ -70,6 +77,13 @@ class Clients extends Component<Stores<'clientStore'>> {
7077 fOnSubmit = { clientStore . create }
7178 />
7279 ) }
80+ { updateId !== false && (
81+ < UpdateDialog
82+ fClose = { ( ) => ( this . updateId = false ) }
83+ fOnSubmit = { ( name ) => clientStore . update ( updateId , name ) }
84+ initialName = { clientStore . getByID ( updateId ) . name }
85+ />
86+ ) }
7387 { deleteId !== false && (
7488 < ConfirmDialog
7589 title = "Confirm Delete"
@@ -86,10 +100,11 @@ class Clients extends Component<Stores<'clientStore'>> {
86100interface IRowProps {
87101 name : string ;
88102 value : string ;
103+ fEdit : VoidFunction ;
89104 fDelete : VoidFunction ;
90105}
91106
92- const Row : SFC < IRowProps > = ( { name, value, fDelete} ) => (
107+ const Row : SFC < IRowProps > = ( { name, value, fEdit , fDelete} ) => (
93108 < TableRow >
94109 < TableCell > { name } </ TableCell >
95110 < TableCell >
@@ -99,6 +114,11 @@ const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
99114 />
100115 </ TableCell >
101116 < TableCell numeric padding = "none" >
117+ < IconButton onClick = { fEdit } className = "edit" >
118+ < Edit />
119+ </ IconButton >
120+ </ TableCell >
121+ < TableCell >
102122 < IconButton onClick = { fDelete } className = "delete" >
103123 < Delete />
104124 </ IconButton >
0 commit comments