@@ -17,21 +17,22 @@ type TablePropType = {
1717 dbConnection : DBConnection
1818 mSchema : string ,
1919 mName : string ,
20- isEditable : boolean ,
20+ isInteractive : boolean ,
2121 showHeader ?: boolean ,
2222 querySort ?: string [ ] ,
2323 onFilterChanged : ( newFilter : string [ ] | undefined ) => void ,
2424 onSortChanged : ( newSort : string [ ] | undefined ) => void ,
2525}
2626
27- const Table = ( { queryData, dbConnection, mSchema, mName, isEditable , showHeader, querySort, onFilterChanged, onSortChanged } : TablePropType ) => {
27+ const Table = ( { queryData, dbConnection, mSchema, mName, isInteractive , showHeader, querySort, onFilterChanged, onSortChanged } : TablePropType ) => {
2828
2929 const dispatch = useAppDispatch ( )
3030
3131 const activeTab : Tab = useContext ( TabContext ) !
3232
3333 const [ editCell , setEditCell ] = useState < ( string | number ) [ ] > ( [ ] )
3434 const [ isAdding , setIsAdding ] = useState < boolean > ( false )
35+ const [ isEditing , setIsEditing ] = useState < boolean > ( false )
3536 const [ isDeleting , setIsDeleting ] = useState < boolean > ( false )
3637
3738 const [ filterValue , setFilterValue ] = useState < string [ ] > ( [ 'default' , 'default' , '' ] )
@@ -41,8 +42,8 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
4142 [ queryData ]
4243 )
4344
44- const displayColumns = dbConnection . type === DBConnType . POSTGRES ? queryData . columns . filter ( col => col !== 'ctid' ) : queryData . columns
45- const ctidExists = queryData . columns . length !== displayColumns . length
45+ const displayColumns = queryData . columns ? dbConnection . type === DBConnType . POSTGRES ? queryData . columns . filter ( col => col !== 'ctid' ) : queryData . columns : [ ]
46+ const ctidExists = queryData . columns ? queryData . columns . length !== displayColumns . length : false
4647
4748 const columns = React . useMemo (
4849 ( ) => displayColumns . map ( ( col , i ) => ( {
@@ -107,7 +108,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
107108 } ,
108109 useRowSelect ,
109110 hooks => {
110- if ( isEditable )
111+ if ( isInteractive && isEditing )
111112 hooks . visibleColumns . push ( columns => [
112113 {
113114 id : 'selection' ,
@@ -146,7 +147,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
146147 }
147148
148149 const startEditing = ( cell : Cell < any , any > ) => {
149- if ( isEditable )
150+ if ( isInteractive && isEditing )
150151 setEditCell ( [ cell . row . index , cell . column . id ] )
151152 }
152153
@@ -169,7 +170,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
169170 }
170171
171172 const changeSort = ( newSortIdx : string ) => {
172- if ( ! isEditable ) {
173+ if ( ! isInteractive ) {
173174 return
174175 }
175176 const newSortName : string = displayColumns . find ( ( _ , i ) => {
@@ -196,7 +197,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
196197
197198 return (
198199 < React . Fragment >
199- { ( showHeader || isEditable ) && < div className = { styles . tableHeader } >
200+ { ( showHeader || ( isInteractive && isEditing ) ) && < div className = { styles . tableHeader } >
200201 < div className = "columns" >
201202 < div className = "column is-9" >
202203 < div className = "field has-addons" >
@@ -242,19 +243,34 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
242243 </ p > }
243244 </ div >
244245 </ div >
245- { isEditable && < React . Fragment >
246+ { isInteractive && ! isEditing && < React . Fragment >
247+ < div className = "column is-3 is-flex is-justify-content-flex-end" >
248+ < button className = "button is-primary" onClick = { ( ) => { setIsEditing ( true ) } } >
249+ < span className = "icon is-small" >
250+ < i className = "fas fa-pen" />
251+ </ span >
252+ </ button >
253+ </ div >
254+ </ React . Fragment > }
255+ { isInteractive && isEditing && < React . Fragment >
246256 < div className = "column is-3 is-flex is-justify-content-flex-end" >
247257 < button className = "button" disabled = { selectedIDs . length === 0 } onClick = { ( ) => { setIsDeleting ( true ) } } >
248258 < span className = "icon is-small" >
249259 < i className = "fas fa-trash" />
250260 </ span >
251261 </ button >
252262
253- < button className = "button is-primary " onClick = { ( ) => { setIsAdding ( true ) } } >
263+ < button className = "button is-secondary " onClick = { ( ) => { setIsAdding ( true ) } } >
254264 < span className = "icon is-small" >
255265 < i className = "fas fa-plus" />
256266 </ span >
257267 </ button >
268+
269+ < button className = "button is-primary" onClick = { ( ) => { setIsEditing ( false ) } } >
270+ < span className = "icon is-small" >
271+ < i className = "fas fa-check" />
272+ </ span >
273+ </ button >
258274 </ div >
259275 </ React . Fragment > }
260276 </ div >
0 commit comments