Merge pull request #105 from slashbaseide/develop

Develop
paraswaykole · Mar 30, 2023 · f9ee97c · f9ee97c
2 parents efaaf83 + b2c88c4
commit f9ee97c
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 26 deletions.
diff --git a/frontend/src/components/dbfragments/jsontable/jsontable.tsx b/frontend/src/components/dbfragments/jsontable/jsontable.tsx
@@ -14,19 +14,20 @@ type JsonTablePropType = {
     queryData: DBQueryData,
     dbConnection: DBConnection
     mName: string,
-    isEditable: boolean,
+    isInteractive: boolean,
     showHeader?: boolean,
     onFilterChanged: (newFilter: string[] | undefined) => void,
     onSortChanged: (newSort: string[] | undefined) => void,
 }
 
-const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onFilterChanged, onSortChanged }: JsonTablePropType) => {
+const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader, onFilterChanged, onSortChanged }: JsonTablePropType) => {
 
     const dispatch = useAppDispatch()
 
     const activeTab: Tab = useContext(TabContext)!
 
     const [isAdding, setIsAdding] = useState<boolean>(false)
+    const [isEditing, setIsEditing] = useState<boolean>(false)
     const [isDeleting, setIsDeleting] = useState<boolean>(false)
     const [editingCellIndex, setEditingCellIndex] = useState<(number | null)>(null)
 
@@ -53,7 +54,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onF
     }
 
     const startEditing = (index: number | null) => {
-        if (!isEditable) {
+        if (!(isInteractive && isEditing)) {
             return
         }
         setEditingCellIndex(index)
@@ -69,7 +70,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onF
     }
 
     const changeSort = () => {
-        if (!isEditable) {
+        if (!isInteractive) {
             return
         }
         let sort: string[] | undefined = undefined
@@ -112,7 +113,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onF
         defaultColumn,
         ...{ editingCellIndex, startEditing, onSaveCell }
     }, useRowSelect, hooks => {
-        if (isEditable)
+        if (isInteractive && isEditing)
             hooks.visibleColumns.push(columns => [
                 {
                     id: 'selection',
@@ -145,7 +146,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onF
 
     return (
         <React.Fragment>
-            {(showHeader || isEditable) && <div className={styles.tableHeader}>
+            {(showHeader || (isInteractive && isEditing)) && <div className={styles.tableHeader}>
                 <div className="columns">
                     <div className="column is-3">
                         <div className="field has-addons">
@@ -167,19 +168,34 @@ const JsonTable = ({ queryData, dbConnection, mName, isEditable, showHeader, onF
                             </p>
                         </div>
                     </div>
-                    {isEditable && <React.Fragment>
+                    {isInteractive && !isEditing && <React.Fragment>
+                        <div className="column is-3 is-flex is-justify-content-flex-end">
+                            <button className="button is-primary" onClick={() => { setIsEditing(true) }}>
+                                <span className="icon is-small">
+                                    <i className="fas fa-pen" />
+                                </span>
+                            </button>
+                        </div>
+                    </React.Fragment>}
+                    {isInteractive && isEditing && <React.Fragment>
                         <div className="column is-3 is-flex is-justify-content-flex-end">
                             <button className="button" disabled={selectedUnderscoreIDs.length === 0} onClick={() => { setIsDeleting(true) }}>
                                 <span className="icon is-small">
                                     <i className="fas fa-trash" />
                                 </span>
                             </button>
                             &nbsp;&nbsp;
-                            <button className="button is-primary" onClick={() => { setIsAdding(true) }}>
+                            <button className="button is-secondary" onClick={() => { setIsAdding(true) }}>
                                 <span className="icon is-small">
                                     <i className="fas fa-plus" />
                                 </span>
                             </button>
+                            &nbsp;&nbsp;
+                            <button className="button is-primary" onClick={() => { setIsEditing(false) }}>
+                                <span className="icon is-small">
+                                    <i className="fas fa-check" />
+                                </span>
+                            </button>
                         </div>
                     </React.Fragment>}
                 </div>

diff --git a/frontend/src/components/dbfragments/query.tsx b/frontend/src/components/dbfragments/query.tsx
@@ -124,7 +124,7 @@ const DBQueryFragment = (_: DBQueryPropType) => {
                             mName={''}
                             onFilterChanged={() => { }}
                             onSortChanged={() => { }}
-                            isEditable={false} />
+                            isInteractive={false} />
                     }
                     {dbConnection!.type === DBConnType.MONGO &&
                         <JsonTable
@@ -133,7 +133,7 @@ const DBQueryFragment = (_: DBQueryPropType) => {
                             mName={''}
                             onFilterChanged={() => { }}
                             onSortChanged={() => { }}
-                            isEditable={false} />
+                            isInteractive={false} />
                     }
                 </React.Fragment>
                 : null

diff --git a/frontend/src/components/dbfragments/showdata.tsx b/frontend/src/components/dbfragments/showdata.tsx
@@ -107,7 +107,7 @@ const DBShowDataFragment = (_: DBShowDataPropType) => {
                     mName={String(mname)}
                     queryData={queryData}
                     querySort={querySort}
-                    isEditable={true}
+                    isInteractive={true}
                     showHeader={true}
                     onFilterChanged={onFilterChanged}
                     onSortChanged={onSortChanged}
@@ -120,7 +120,7 @@ const DBShowDataFragment = (_: DBShowDataPropType) => {
                     mName={String(mname)}
                     queryData={queryData}
                     querySort={querySort}
-                    isEditable={true}
+                    isInteractive={true}
                     showHeader={true}
                     onFilterChanged={onFilterChanged}
                     onSortChanged={onSortChanged}
@@ -131,7 +131,7 @@ const DBShowDataFragment = (_: DBShowDataPropType) => {
                     dbConnection={dbConnection}
                     mName={String(mname)}
                     queryData={queryData}
-                    isEditable={true}
+                    isInteractive={true}
                     showHeader={true}
                     onFilterChanged={onFilterChanged}
                     onSortChanged={onSortChanged}

diff --git a/frontend/src/components/dbfragments/table/editablecell.tsx b/frontend/src/components/dbfragments/table/editablecell.tsx
@@ -13,7 +13,7 @@ const EditableCell = ({
   initialValue = Array.isArray(initialValue) ?
     `{${initialValue.join(",")}}` : initialValue
 
-  initialValue = typeof initialValue === "object" ?
+  initialValue = (initialValue !== null && typeof initialValue === "object") ?
     JSON.stringify(initialValue) : initialValue
 
   // We need to keep and update the state of the cell normally

diff --git a/frontend/src/components/dbfragments/table/table.tsx b/frontend/src/components/dbfragments/table/table.tsx
@@ -17,21 +17,22 @@ type TablePropType = {
     dbConnection: DBConnection
     mSchema: string,
     mName: string,
-    isEditable: boolean,
+    isInteractive: boolean,
     showHeader?: boolean,
     querySort?: string[],
     onFilterChanged: (newFilter: string[] | undefined) => void,
     onSortChanged: (newSort: string[] | undefined) => void,
 }
 
-const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader, querySort, onFilterChanged, onSortChanged }: TablePropType) => {
+const Table = ({ queryData, dbConnection, mSchema, mName, isInteractive, showHeader, querySort, onFilterChanged, onSortChanged }: TablePropType) => {
 
     const dispatch = useAppDispatch()
 
     const activeTab: Tab = useContext(TabContext)!
 
     const [editCell, setEditCell] = useState<(string | number)[]>([])
     const [isAdding, setIsAdding] = useState<boolean>(false)
+    const [isEditing, setIsEditing] = useState<boolean>(false)
     const [isDeleting, setIsDeleting] = useState<boolean>(false)
 
     const [filterValue, setFilterValue] = useState<string[]>(['default', 'default', ''])
@@ -41,8 +42,8 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
         [queryData]
     )
 
-    const displayColumns = dbConnection.type === DBConnType.POSTGRES ? queryData.columns.filter(col => col !== 'ctid') : queryData.columns
-    const ctidExists = queryData.columns.length !== displayColumns.length
+    const displayColumns = queryData.columns ? dbConnection.type === DBConnType.POSTGRES ? queryData.columns.filter(col => col !== 'ctid') : queryData.columns : []
+    const ctidExists = queryData.columns ? queryData.columns.length !== displayColumns.length : false
 
     const columns = React.useMemo(
         () => displayColumns.map((col, i) => ({
@@ -107,7 +108,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
     },
         useRowSelect,
         hooks => {
-            if (isEditable)
+            if (isInteractive && isEditing)
                 hooks.visibleColumns.push(columns => [
                     {
                         id: 'selection',
@@ -146,7 +147,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
     }
 
     const startEditing = (cell: Cell<any, any>) => {
-        if (isEditable)
+        if (isInteractive && isEditing)
             setEditCell([cell.row.index, cell.column.id])
     }
 
@@ -169,7 +170,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
     }
 
     const changeSort = (newSortIdx: string) => {
-        if (!isEditable) {
+        if (!isInteractive) {
             return
         }
         const newSortName: string = displayColumns.find((_, i) => {
@@ -196,7 +197,7 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
 
     return (
         <React.Fragment>
-            {(showHeader || isEditable) && <div className={styles.tableHeader}>
+            {(showHeader || (isInteractive && isEditing)) && <div className={styles.tableHeader}>
                 <div className="columns">
                     <div className="column is-9">
                         <div className="field has-addons">
@@ -242,19 +243,34 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isEditable, showHeader
                             </p>}
                         </div>
                     </div>
-                    {isEditable && <React.Fragment>
+                    {isInteractive && !isEditing && <React.Fragment>
+                        <div className="column is-3 is-flex is-justify-content-flex-end">
+                            <button className="button is-primary" onClick={() => { setIsEditing(true) }}>
+                                <span className="icon is-small">
+                                    <i className="fas fa-pen" />
+                                </span>
+                            </button>
+                        </div>
+                    </React.Fragment>}
+                    {isInteractive && isEditing && <React.Fragment>
                         <div className="column is-3 is-flex is-justify-content-flex-end">
                             <button className="button" disabled={selectedIDs.length === 0} onClick={() => { setIsDeleting(true) }}>
                                 <span className="icon is-small">
                                     <i className="fas fa-trash" />
                                 </span>
                             </button>
                             &nbsp;&nbsp;
-                            <button className="button is-primary" onClick={() => { setIsAdding(true) }}>
+                            <button className="button is-secondary" onClick={() => { setIsAdding(true) }}>
                                 <span className="icon is-small">
                                     <i className="fas fa-plus" />
                                 </span>
                             </button>
+                            &nbsp;&nbsp;
+                            <button className="button is-primary" onClick={() => { setIsEditing(false) }}>
+                                <span className="icon is-small">
+                                    <i className="fas fa-check" />
+                                </span>
+                            </button>
                         </div>
                     </React.Fragment>}
                 </div>

diff --git a/pkg/queryengines/mysqlqueryengine/mysqlutils/utils.go b/pkg/queryengines/mysqlqueryengine/mysqlutils/utils.go
@@ -78,7 +78,11 @@ func MySqlRowsToJson(rows *sql.Rows) ([]string, []map[string]interface{}) {
 			}
 			b, ok := val.(sql.RawBytes)
 			if ok {
-				v = string(b)
+				if b == nil {
+					v = nil
+				} else {
+					v = string(b)
+				}
 			} else {
 				v = val
 			}

diff --git a/wails.json b/wails.json
@@ -12,7 +12,7 @@
   },
   "info": {
     "productName": "Slashbase",
-    "productVersion": "v0.8.2",
+    "productVersion": "v0.8.3",
     "copyright": "Copyright © Slashbase.com",
     "comments": "Modern database IDE"
   }