Added drag and drop for moving table columns and rows

Has confirmation for deleting tables

src/css/style.css

@@ -29,3 +29,17 @@ td.inline-edit > textarea, th.inline-edit > textarea {
   width: 100%;
   height: 100%;
 }
+
+.recent-files {
+  width: 300px;
+  height: 500px;
+  float: left;
+  overflow-y: auto;
+  border-right:1px solid #dee2e6;
+}
+
+#splash {
+  width: 500px;
+  height: 500px;
+  float: right;
+}

src/editor.html

@@ -45,7 +45,7 @@
         <div class="form-check">
           <label class="form-check-label">
             <input type="checkbox" class="form-check-input" id="detail-column-sortable">
-            Column sortable
+            Column Sortable
           </label>
         </div>
       </div>
@@ -54,11 +54,28 @@
         <label class="form-label">Cell Text</label>
         <textarea class="form-control" id="detail-cell-text"></textarea>
       </div>
+      <div>
+        <button id="position-edit" class="btn btn-secondary" data-bs-toggle=tooltip" data-bs-placement=bottom" title="move columns, rows, and tables">Start Edit Position</button>
+      </div>
     </div>
     <div id="tables" class="col-9 tab-content"></div>
   </div>
 </div>
 
+<div class="modal fade" id="delete-table" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body">
+        <h5>Are you sure that you want to delete the table?</h5>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, keep table</button>
+        <button id="confirm-delete-table" type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete table</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
 	if (typeof module === 'object') {
 		window.module = module;
@@ -68,6 +85,7 @@
 <script src="js/jquery-3.5.1.min.js"></script>
 <script src="js/bootstrap.bundle.min.js"></script>
 <script>if (window.module) module = window.module;</script>
+<script src="js/Sortable.js"></script>
 <script src="js/editor.js"></script>
 </body>
 </html>

src/index.js

@@ -80,12 +80,14 @@ app.on('activate', () => {
 
 function createSplashScreen() {
   const splash_screen = new BrowserWindow({
-    width: 800,
+    width: 806,
-    height: 600,
+    height: 529,
     autoHideMenuBar: true,
     webPreferences: {
       nodeIntegration: true
-    }
+    },
+    resizable: false,
+    frame: true
   });
 
   if (!store.has("recent_files")) {
@@ -108,7 +110,7 @@ function createEditorWindow() {
       nodeIntegration: true
     }
   });
-
+  main_window.maximize();
   updateMenuBar();
 
   main_window.loadFile("src/editor.html");
@@ -157,6 +159,7 @@ function openFile(file_path="", new_file=false) {
   }
   if (file_path) {
     updateRecentFiles(file_path);
+    current_file = file_path
     if (new_file) {
       let old_window = BrowserWindow.getFocusedWindow();
       let window = createEditorWindow();
@@ -282,7 +285,7 @@ function updateRecentFiles(new_file) {
     recent_files.splice(recent_files.indexOf(new_file), 1);
   }
   recent_files.splice(0, 0, new_file);
-  store.set("recent_files", recent_files)
+  store.set("recent_files", recent_files);
   updateMenuBar();
 }
 
@@ -306,6 +309,10 @@ function updateMenuBar() {
   Menu.setApplicationMenu(menu);
 }
 
+ipcMain.handle("get-store-value", (event, key) => {
+  return store.get(key)
+})
+
 ipcMain.on("create-new", (event) => {
   createNew();
 })

src/js/editor.js

@@ -3,6 +3,7 @@ let tables_data;
 let current_table;
 let selected_cells = [];
 let selected_cell_data;
+let is_positioning = false;
 let nav = $("nav");
 let nav_scroll = nav.scrollLeft();
 let detail_tab_name = $("#detail-tab-name");
@@ -12,6 +13,7 @@ let detail_column_name = $("#detail-column-name");
 let detail_column_selectable = $("#detail-column-selectable");
 let detail_column_sortable = $("#detail-column-sortable");
 let detail_cell_text = $("#detail-cell-text");
+let position_edit_btn = $("#position-edit");
 
 function openFile(file_name) {
 	$.ajax({
@@ -20,6 +22,7 @@ function openFile(file_name) {
 		cache: false,
 		success: (json, textStatus, jqXHR) => {
 			tables_data = json;
+			current_table = null;
 			refreshPage();
 		}
 	});
@@ -33,23 +36,30 @@ function clearPage() {
 	$("#tables").empty();
 	nav.empty();
 	$("#details input, #details textarea").val("");
+	selected_cells = [];
+	selected_cell_data = null;
 }
 
 function refreshPage() {
+	toggleMovement();
 	clearPage();
 	generateTables();
-	showTab(tables_data[0]["id"]);
+	showTab(current_table ? current_table: tables_data[0]["id"]);
+	toggleMovement()
 }
 
-function generateTable(table_data) {
+function generateTable(table_data, table_index) {
 	const table_id = table_data["id"];
 	let a = $("<a></a>")
 		.attr("id", table_id + "-nav")
-		.addClass("nav-link")
+		.addClass("nav-link table-nav")
 		.attr("href", "#" + table_id)
 		.text(table_data["name"])
 		.on("click", () => {
 			showTab(table_id);
+		})
+		.on("contextmenu", (event) => {
+			navContextMenu(event, table_id);
 		});
 	let add_table_btn = nav.find("a[id='add-table']");
 	if (add_table_btn.length !== 0) {
@@ -60,7 +70,8 @@ function generateTable(table_data) {
 
 	let table_div = $("<div></div>")
 		.attr("id", table_id + "-tab")
-		.addClass("tab-pane table-responsive");
+		.addClass("tab-pane table-responsive text-nowrap")
+		.css({"margin-right": "100px"});
 
 	let table = $("<table></table>")
 		.attr("id", table_id)
@@ -74,7 +85,7 @@ function generateTable(table_data) {
 		const col_id = col["field"];
 		let header_id = table_id + "-" + col_id;
 		table.find("thead > tr")
-			.append(makeHeader(header_id, col["title"]));
+			.append(makeHeader(header_id, i, col["title"]));
 	})
 
 	$.each(table_data["rows"], (i, row) => {
@@ -90,8 +101,14 @@ function generateTable(table_data) {
 		table.find("tbody").append(tr);
 	})
 
-	table_div.append(table)
+	table_div.append(table);
-	$("#tables").append(table_div);
+	let table_container = $("#tables");
+	let add_row_div = table_container.find("div[id='add-row-div']");
+	if (add_row_div.length !== 0) {
+		add_row_div.before(table_div);
+	} else {
+		table_container.append(table_div);
+	}
 }
 
 function makeCell(cell_id, cell_text) {
@@ -109,9 +126,10 @@ function makeCell(cell_id, cell_text) {
 		});
 }
 
-function makeHeader(header_id, col_title) {
+function makeHeader(header_id, header_index, col_title) {
 	return $("<th>")
 		.attr("id", header_id)
+		.css("user-select", "none")
 		.text(col_title)
 		.on("click", () => {
 			selectCell(header_id);
@@ -125,13 +143,33 @@ function makeHeader(header_id, col_title) {
 }
 
 function generateTables() {
-	for (let table_data of tables_data) {
+	$("#tables").append($("<div>")
-		generateTable(table_data);
+		.attr("id", "add-col-div")
-	}
+		.css({"position": "absolute", "top": "46px", "right": "0"})
+		.append($("<button>")
+			.attr("id", "btn-add-column")
+			.addClass("btn btn-primary")
+			.text("add column")
+			.on("click", () => {
+				insertColumn(current_table, -1)
+			})))
+	$.each(tables_data, (i, table_data) => {
+		generateTable(table_data, i);
+	})
+	$("#tables").append($("<div>")
+		.attr("id", "add-row-div")
+		.append($("<button>")
+			.attr("id", "btn-add-row")
+			.addClass("btn btn-primary")
+			.text("add row")
+			.on("click", () => {
+				insertRow(current_table, -1)
+			})))
 	nav.append($("<a></a>")
 		.attr("id", "add-table")
-		.addClass("nav-link btn-success")
+		.addClass("nav-link btn btn-success")
 		.html("<i class='fa fa-plus'></i>")
+		.attr({"data-bs-toggle": "tooltip", "data-bs-placement": "bottom", "title": "add table"})
 		.on("click", () => {
 			addTable();
 		}))
@@ -186,6 +224,7 @@ function getSelectedCellData(force_update=false) {
 		"table_id": table_match[0],
 		"table_nav_id": table_match[0]+"-nav",
 		"col_id": table_match[0]+"-"+column_match[0],
+		"num_tables": tables_data.length,
 	}
 	$.each(tables_data, (i, table_data) => {
 		if (table_data["id"] === table_match[0]) {
@@ -193,6 +232,8 @@ function getSelectedCellData(force_update=false) {
 			cell_data["table_name"] = table_data["name"];
 			cell_data["tab_name"] = table_data["tab_name"];
 			cell_data["table_hidden"] = table_data["hidden"];
+			cell_data["num_rows"] = table_data["rows"].length;
+			cell_data["num_cols"] = table_data["col-def"].length;
 			$.each(table_data["col-def"], (j, col) => {
 				if (col["field"] === column_match[0]) {
 					cell_data["col_index"] = j;
@@ -253,13 +294,34 @@ function addTable() {
 		]
 	}
 	tables_data.push(table_data);
+	getSelectedCellData(true);
 	generateTable(table_data);
 }
 
-function insertColumn(table_id, index) {
+function duplicateTable(table_id) {
-	if (index < 0){return;}
+	for (let i=0; i < tables_data.length; i++) {
+		if (tables_data[i]["id"] === table_id) {
+			let new_table = JSON.parse(JSON.stringify(tables_data[i]));
+			let table_ids = getTableIDs();
+			let table_num = 0;
+			for (let id of table_ids) {
+				if (table_ids.includes(`table${table_num}`)) {
+					table_num++;
+				} else {break;}
+			}
+			new_table["id"] = `table${table_num}`;
+			new_table["name"] = "copy of "+new_table["name"];
+			tables_data.splice(i+1, 0, new_table);
+			break;
+		}
+	}
+	refreshPage();
+}
+
+function insertColumn(table_id, index=-1) {
 	$.each(tables_data, (i, table_data) => {
 		if (table_data["id"] === table_id) {
+			if (index === -1) {index = table_data["col-def"].length}
 			let col_ids = getColumnIDs(table_data["col-def"]);
 			let col_num = 0;
 			for (let id of col_ids) {
@@ -288,7 +350,7 @@ function insertColumn(table_id, index) {
 			}
 			let header_id = table_id + "-" + col_id;
 			$(`#${table_id} > thead > tr > th:nth-child(${index + 1})`)
-				.insert(makeHeader(header_id, "New Column"));
+				.insert(makeHeader(header_id, index, "New Column"));
 
 			$(`#${table_id} > tbody > tr`).each((j, tr) => {
 				tr = $(tr);
@@ -303,9 +365,9 @@ function insertColumn(table_id, index) {
 }
 
 function insertRow(table_id, index) {
-	if (index < 0){return;}
 	$.each(tables_data, (i, table_data) => {
 		if (table_data["id"] === table_id) {
+			if (index === -1) {index = table_data["rows"].length}
 			let row_ids = getRowIDs(table_data["rows"]);
 			let row_num = 0;
 			for (let id of row_ids) {
@@ -346,42 +408,103 @@ function insertRow(table_id, index) {
 	})
 }
 
+function deleteTable(table_id) {
+	for (let i=0; i<tables_data.length; i++) {
+		if (tables_data[i]["id"] === table_id) {
+			tables_data.splice(i, 1);
+			if (table_id === current_table) {
+				current_table = null;
+			}
+		}
+	}
+	refreshPage();
+}
+
+function deleteColumn(table_id, col_index) {
+	for (let table_data of tables_data) {
+		if (table_data["id"] === table_id) {
+			let field = table_data["col-def"][col_index]["field"];
+			table_data["col-def"].splice(col_index, 1);
+
+			for (let row of table_data["rows"]) {
+				delete row[field];
+			}
+			break;
+		}
+	}
+	refreshPage();
+}
+
+function deleteRow(table_id, row_index) {
+	for (let table_data of tables_data) {
+		if (table_data["id"] === table_id) {
+			table_data["rows"].splice(row_index, 1);
+			break;
+		}
+	}
+	refreshPage();
+}
+
 function cellContextMenu(event, cell_id) {
-	selectCell(cell_id);
+	if (is_positioning) {return;}
-	let menu = $("<div></div>")
+	if (!selected_cells.includes(cell_id)) {
+		selectCell(cell_id);
+	}
+	let menu = $("<div>")
 		.attr("id", "context-menu-"+cell_id)
-		.addClass("border context-menu text-nowrap")
+		.addClass("border context-menu text-nowrap list-group")
 		.on("mouseleave", () => {
 			menu.remove();
 		})
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertRow(data["table_id"], data["row_index"]);
 			})
 			.text("Insert row above"))
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertRow(data["table_id"], data["row_index"]+1);
 			})
 			.text("Insert row below"))
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertColumn(data["table_id"], data["col_index"]);
 			})
 			.text("Insert column left"))
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertColumn(data["table_id"], data["col_index"]+1);
 			})
 			.text("Insert column right"))
+	let data = getSelectedCellData();
+	if (data["num_cols"] > 1) {
+		menu.append($("<button>")
+			.addClass("list-group-item list-group-item-action list-group-item-danger")
+			.on("click", () => {
+				let data = getSelectedCellData();
+				deleteColumn(data["table_id"], data["col_index"]);
+				menu.remove();
+			})
+			.text("Delete column"))
+	}
+	if (data["num_rows"] > 1) {
+		menu.append($("<button>")
+			.addClass("list-group-item list-group-item-action list-group-item-danger")
+			.on("click", () => {
+				let data = getSelectedCellData();
+				deleteRow(data["table_id"], data["row_index"]);
+				menu.remove();
+			})
+			.text("Delete row"));
+	}
 
 	let max_height = $(document).height();
 	let max_width = $(document).width();
@@ -394,29 +517,42 @@ function cellContextMenu(event, cell_id) {
 }
 
 function headerContextMenu(event, header_id) {
+	if (is_positioning) {return;}
 	if (!selected_cells.includes(header_id)) {
 		selectCell(header_id);
 	}
-	let menu = $("<div></div>")
+	let menu = $("<div>")
 		.attr("id", "context-menu-"+header_id)
-		.addClass("border context-menu text-nowrap")
+		.addClass("border context-menu text-nowrap list-group")
 		.on("mouseleave", () => {
 			menu.remove();
 		})
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertColumn(data["table_id"], data["col_index"]);
 			})
 			.text("Insert column left"))
-		.append($("<button></button>")
+		.append($("<button>")
-			.addClass("btn d-block")
+			.addClass("list-group-item list-group-item-action")
 			.on("click", () => {
 				let data = getSelectedCellData();
 				insertColumn(data["table_id"], data["col_index"]+1);
 			})
-			.text("Insert column right"))
+			.text("Insert column right"));
+
+	let data = getSelectedCellData();
+	if (data["num_cols"] > 1) {
+		menu.append($("<button>")
+			.addClass("list-group-item list-group-item-action list-group-item-danger")
+			.on("click", () => {
+				let data = getSelectedCellData();
+				deleteColumn(data["table_id"], data["col_index"]);
+				menu.remove();
+			})
+			.text("Delete column"))
+	}
 
 	let max_height = $(document).height();
 	let max_width = $(document).width();
@@ -428,7 +564,45 @@ function headerContextMenu(event, header_id) {
 	menu.css({"top": y_pos, "left": x_pos});
 }
 
+function navContextMenu(event, table_id) {
+	if (is_positioning) {return;}
+	let data = getSelectedCellData();
+	let menu = $("<div>")
+		.attr("id", "context-menu-"+table_id)
+		.addClass("border context-menu text-nowrap list-group")
+		.on("mouseleave", () => {
+			menu.remove();
+		})
+		.append($("<button>")
+			.addClass("list-group-item list-group-item-action")
+			.text("duplicate table")
+			.on("click", () => {
+				duplicateTable(table_id);
+			}));
+	if (data["num_tables"] > 1) {
+		menu.append($("<button>")
+			.addClass("list-group-item list-group-item-action list-group-item-danger")
+			.text("Delete Table")
+			.attr({"data-bs-toggle": "modal", "data-bs-target": "#delete-table"})
+			.on("click", () => {
+				$("#confirm-delete-table").one("click", (event) => {
+					deleteTable(table_id);
+				})
+				menu.remove();
+			}));
+	}
+	let max_height = $(document).height();
+	let max_width = $(document).width();
+	let x_pos = event.pageX-5;
+	let y_pos = event.pageY-5;
+	$("body").append(menu);
+	y_pos = Math.min(y_pos, max_height-menu.height());
+	x_pos = Math.min(x_pos, max_width-menu.width());
+	menu.css({"top": y_pos, "left": x_pos});
+}
+
 function cellInlineEdit(event) {
+	if (is_positioning) {return;}
 	let data = getSelectedCellData()
 	let target = $(event.target);
 	let text_area = $("<textarea>")
@@ -465,6 +639,7 @@ function closeCellInlineEdit(save=false) {
 }
 
 function headerInlineEdit(event) {
+	if (is_positioning) {return;}
 	let data = getSelectedCellData()
 	let target = $(event.target);
 	let text_area = $("<textarea>")
@@ -500,6 +675,96 @@ function closeHeaderInlineEdit(save=false) {
 	}
 }
 
+function moveTable(old_index, new_index) {
+	let table_data = tables_data[old_index];
+	tables_data.splice(old_index, 1);
+	tables_data.splice(new_index, 0, table_data);
+	getSelectedCellData(true);
+}
+
+function moveRow(table_id, old_index, new_index) {
+	for (let table_data of tables_data) {
+		if (table_data["id"] === table_id) {
+			let row = table_data["rows"][old_index];
+
+			table_data["rows"].splice(old_index, 1);
+			table_data["rows"].splice(new_index, 0, row);
+		}
+	}
+	getSelectedCellData(true);
+}
+
+function moveCol(table_id, old_index, new_index) {
+	for (let table_data of tables_data) {
+		if (table_data["id"] === table_id) {
+			let col = table_data["col-def"][old_index];
+			table_data["col-def"].splice(old_index, 1);
+			table_data["col-def"].splice(new_index, 0, col);
+		}
+	}
+	refreshPage();
+}
+
+function enableMovement() {
+	is_positioning = true;
+	$("table > tbody").each((i, elm) => {
+		Sortable.create(elm, {
+			animation: 50,
+			easing: "cubic-bezier(1, 0, 0, 1)",
+			onEnd: function (event) {
+				moveRow(current_table, event.oldIndex, event.newIndex);
+			}
+		});
+	})
+	$("table > thead > tr").each((i, elm) => {
+		Sortable.create(elm, {
+			animation: 50,
+			easing: "cubic-bezier(1, 0, 0, 1)",
+			onEnd: function (event) {
+				moveCol(current_table, event.oldIndex, event.newIndex);
+			}
+		});
+	})
+	Sortable.create($("nav")[0], {
+		animation: 50,
+		easing: "cubic-bezier(1, 0, 0, 1)",
+		draggable: ".table-nav",
+		onend: function (event) {
+			moveTable(event.oldIndex, event.newIndex);
+		}
+	})
+	position_edit_btn.text("Stop Edit Position");
+}
+
+function disableMovement() {
+	is_positioning = false;
+	$("table > tbody").each((i, elm) => {
+		let sortable_tbody = Sortable.get(elm);
+		if (sortable_tbody) {
+			sortable_tbody.destroy();
+		}
+	})
+	$("table > thead > tr").each((i, elm) => {
+		let sortable_thead = Sortable.get(elm);
+		if (sortable_thead) {
+			sortable_thead.destroy();
+		}
+	})
+	let sortable_nav = Sortable.get($("nav")[0]);
+	if (sortable_nav) {
+		sortable_nav.destroy();
+	}
+	position_edit_btn.text("Start Edit Position");
+}
+
+function toggleMovement() {
+	if (is_positioning) {
+		disableMovement();
+	} else {
+		enableMovement();
+	}
+}
+
 function getColumnIDs(columns) {
 	let ids = [];
 	for (let col of columns) {
@@ -600,6 +865,10 @@ detail_cell_text.on("input", (event) => {
 	selected_cell_data["cell_text"] = new_cell_text;
 });
 
+position_edit_btn.on("click", () => {
+	toggleMovement();
+})
+
 ipcRenderer.on("open-default", (event) => {
 	openFile("default.json");
 });

src/js/splash.js

@@ -1,6 +1,25 @@
 const { ipcRenderer } = require('electron')
 
-$("#recent-files").css("display", "none");
+async function showRecentFiles() {
+	let recent_files = await ipcRenderer.invoke("get-store-value", "recent_files");
+	if (recent_files.length === 0) {
+		$("#recent-files").css("display", "none");
+		$("#splash").css("width", "100%")
+	} else {
+		for (let file of recent_files) {
+			let recent_file_link = $("<a>")
+				.addClass("btn list-group-item list-group-item-action")
+				.text(file.replace(/^.*[\\\/]/, ''))
+				.attr({"data-bs-toggle": "tooltip", "data-bs-placement": "bottom", "title": file})
+				.on("click", () => {
+					ipcRenderer.send("open", file);
+				});
+			$("#recent-files").append(recent_file_link);
+		}
+	}
+}
+
+showRecentFiles();
 
 $("#create-new").on("click", () => {
 	ipcRenderer.send("create-new");

src/splash.html

@@ -6,17 +6,13 @@
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
-<body>
+<body style="overflow: hidden">
-<div class="container-fluid">
+<div id="recent-files" class="list-group list-group-flush recent-files"></div>
-  <div class="row">
+<div id="splash" class="text-center">
-    <div id="recent-files" class="col-4"></div>
+  <h1 class="text-center">Web Editor</h1>
-    <div class="col-12 text-center">
+  <button id="create-new" class="btn btn-primary mb-1">Create New!</button>
-      <h1 class="text-center">Web Editor</h1>
+  <br/>
-      <button id="create-new" class="btn btn-primary mb-1">Create New!</button>
+  <button id="open-file" class="btn btn-secondary">Open</button>
-      <br/>
-      <button id="open-file" class="btn btn-secondary">Open</button>
-    </div>
-  </div>
 </div>
 <script>
   if (typeof module === 'object') {