feat: Add column renaming support and enhance data editor with type-specific inputs and a 'commit & add another' option.

ahmetbilgay · ahmetbilgay · commit c50312648209 · 2025-12-24T22:51:57.000+03:00
diff --git a/database/mysql_driver.go b/database/mysql_driver.go
@@ -266,8 +266,15 @@ func (d *MySQLDriver) BuildAlterTableQuery(database, table string, alteration Ta
 		if col.Default != "" {
 			defaultStr = fmt.Sprintf(" DEFAULT '%s'", col.Default)
 		}
-		statements = append(statements, fmt.Sprintf("ALTER TABLE `%s`.`%s` MODIFY COLUMN `%s` %s %s%s %s",
-			database, table, col.Name, col.Type, nullStr, defaultStr, col.Extra))
+
+		// Use CHANGE COLUMN if renaming, otherwise MODIFY COLUMN
+		if col.OldName != "" && col.OldName != col.Name {
+			statements = append(statements, fmt.Sprintf("ALTER TABLE `%s`.`%s` CHANGE COLUMN `%s` `%s` %s %s%s %s",
+				database, table, col.OldName, col.Name, col.Type, nullStr, defaultStr, col.Extra))
+		} else {
+			statements = append(statements, fmt.Sprintf("ALTER TABLE `%s`.`%s` MODIFY COLUMN `%s` %s %s%s %s",
+				database, table, col.Name, col.Type, nullStr, defaultStr, col.Extra))
+		}
 	}
 
 	return statements, nil
diff --git a/database/types.go b/database/types.go
@@ -70,6 +70,7 @@ type ColumnInfo struct {
 	Key      string `json:"key"`
 	Default  string `json:"default"`
 	Extra    string `json:"extra"`
+	OldName  string `json:"oldName,omitempty"` // For renaming columns
 }
 
 // IndexInfo represents an index
diff --git a/frontend/src/components/DataEditor.tsx b/frontend/src/components/DataEditor.tsx
@@ -37,6 +37,13 @@ import { Badge } from "@/components/ui/badge";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 import { cn } from '@/lib/utils';
 import { toast } from "sonner";
 import {
@@ -170,7 +177,7 @@ export function DataEditor({ database, table, onClose }: Props) {
         }
     };
 
-    const handleAddRow = async () => {
+    const handleAddRow = async (keepOpen = false) => {
         if (!data) return;
 
         const rowData: Record<string, any> = {};
@@ -183,7 +190,9 @@ export function DataEditor({ database, table, onClose }: Props) {
         try {
             await InsertRow(database, table, rowData);
             setNewRowData({});
-            setShowAddRow(false);
+            if (!keepOpen) {
+                setShowAddRow(false);
+            }
             toast.success("New row inserted successfully");
             await loadData();
         } catch (err: any) {
@@ -437,18 +446,43 @@ export function DataEditor({ database, table, onClose }: Props) {
                                             <span className="text-[8px] opacity-40 uppercase">{col.type}</span>
                                         </div>
                                     </div>
-                                    <Input
-                                        className="h-7 text-xs bg-background"
-                                        value={newRowData[col.name] || ''}
-                                        onChange={(e) => setNewRowData({ ...newRowData, [col.name]: e.target.value })}
-                                        placeholder={col.nullable ? 'NULL' : col.name}
-                                    />
+                                    {col.type.includes('bool') || col.type.includes('tinyint(1)') ? (
+                                        <Select
+                                            value={newRowData[col.name]}
+                                            onValueChange={(val) => setNewRowData({ ...newRowData, [col.name]: val })}
+                                        >
+                                            <SelectTrigger className="h-7 text-xs bg-background">
+                                                <SelectValue placeholder={col.nullable ? "NULL" : "Select..."} />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                {col.nullable && <SelectItem value="">NULL</SelectItem>}
+                                                <SelectItem value="1">TRUE</SelectItem>
+                                                <SelectItem value="0">FALSE</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    ) : (
+                                        <Input
+                                            className="h-7 text-xs bg-background"
+                                            value={newRowData[col.name] || ''}
+                                            onChange={(e) => setNewRowData({ ...newRowData, [col.name]: e.target.value })}
+                                            placeholder={col.nullable ? 'NULL' : col.name}
+                                            type={col.type.includes('int') || col.type.includes('decimal') || col.type.includes('float') ? 'number' : 'text'}
+                                        />
+                                    )}
                                 </div>
                             ))}
                         </div>
                         <div className="flex justify-end gap-2 mt-6">
                             <Button variant="ghost" size="sm" className="h-8 text-[11px] font-bold" onClick={() => setShowAddRow(false)}>CANCEL</Button>
-                            <Button size="sm" className="h-8 px-6 text-[11px] font-bold uppercase" onClick={handleAddRow}>Commit Row</Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-8 px-4 text-[11px] font-bold uppercase border-primary/20 text-primary hover:bg-primary/5"
+                                onClick={() => handleAddRow(true)}
+                            >
+                                Commit & Add Another
+                            </Button>
+                            <Button size="sm" className="h-8 px-6 text-[11px] font-bold uppercase" onClick={() => handleAddRow(false)}>Commit Row</Button>
                         </div>
                     </CardContent>
                 </Card>
diff --git a/frontend/src/components/ModifyTableModal.tsx b/frontend/src/components/ModifyTableModal.tsx
@@ -90,7 +90,7 @@ export function ModifyTableModal({ database, table, columns, onSave, onClose, lo
     const handleSave = async () => {
         const alteration: TableAlteration = {
             addColumns: columnStates.filter(c => c.isNew && !c.isDeleted).map(({ isNew, isDeleted, isModified, oldName, ...c }) => c),
-            modifyColumns: columnStates.filter(c => !c.isNew && c.isModified && !c.isDeleted).map(({ isNew, isDeleted, isModified, oldName, ...c }) => c),
+            modifyColumns: columnStates.filter(c => !c.isNew && c.isModified && !c.isDeleted).map(({ isNew, isDeleted, isModified, ...c }) => ({ ...c, oldName: c.oldName })),
             dropColumns: columnStates.filter(c => !c.isNew && c.isDeleted).map(c => c.oldName || c.name),
             renameTo: table // For now, keep table name same
         };
@@ -171,6 +171,10 @@ export function ModifyTableModal({ database, table, columns, onSave, onClose, lo
                                                     <SelectValue />
                                                 </SelectTrigger>
                                                 <SelectContent>
+                                                    {/* Ensure current type is always an option */}
+                                                    {!mysqlTypes.includes(col.type) && (
+                                                        <SelectItem value={col.type} className="text-[11px] font-mono">{col.type.toUpperCase()}</SelectItem>
+                                                    )}
                                                     {mysqlTypes.map(t => (
                                                         <SelectItem key={t} value={t} className="text-[11px]">{t.toUpperCase()}</SelectItem>
                                                     ))}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -63,6 +63,7 @@ export interface ColumnInfo {
   key: string;
   default: string;
   extra: string;
+  oldName?: string;
 }
 
 export interface IndexInfo {
diff --git a/frontend/wailsjs/go/models.ts b/frontend/wailsjs/go/models.ts
@@ -7,6 +7,7 @@ export namespace database {
 	    key: string;
 	    default: string;
 	    extra: string;
+	    oldName?: string;
 	
 	    static createFrom(source: any = {}) {
 	        return new ColumnInfo(source);
@@ -20,6 +21,7 @@ export namespace database {
 	        this.key = source["key"];
 	        this.default = source["default"];
 	        this.extra = source["extra"];
+	        this.oldName = source["oldName"];
 	    }
 	}
 	export class ConnectionConfig {

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,7 @@ type ColumnInfo struct {`
`70`	`70`	Key string `json:"key"`
`71`	`71`	Default string `json:"default"`
`72`	`72`	Extra string `json:"extra"`
	`73`	+ OldName string `json:"oldName,omitempty"` // For renaming columns
`73`	`74`	`}`
`74`	`75`
`75`	`76`	`// IndexInfo represents an index`
Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,7 @@ export interface ColumnInfo {`
`63`	`63`	`key: string;`
`64`	`64`	`default: string;`
`65`	`65`	`extra: string;`
	`66`	`+ oldName?: string;`
`66`	`67`	`}`
`67`	`68`
`68`	`69`	`export interface IndexInfo {`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ export namespace database {`
`7`	`7`	`key: string;`
`8`	`8`	`default: string;`
`9`	`9`	`extra: string;`
	`10`	`+ oldName?: string;`
`10`	`11`
`11`	`12`	`static createFrom(source: any = {}) {`
`12`	`13`	`return new ColumnInfo(source);`
`@@ -20,6 +21,7 @@ export namespace database {`
`20`	`21`	`this.key = source["key"];`
`21`	`22`	`this.default = source["default"];`
`22`	`23`	`this.extra = source["extra"];`
	`24`	`+ this.oldName = source["oldName"];`
`23`	`25`	`}`
`24`	`26`	`}`
`25`	`27`	`export class ConnectionConfig {`