feat: Add functionality to table screen

- New templates for rows with different content
- Rows can now be repositioned
- Change of rows now causes a reindex

source/screens/demo/examples/ui/table.liquid

@@ -19,6 +19,8 @@ tags:
 					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
+			</nav>
+			<nav>
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
@@ -31,10 +33,10 @@ tags:
 					</select>
 					<button id="setPosNum" title="Set numbering" type="button"><i class="bi bi-list-ol"></i></button>
 				</div>
+				{% comment %}TODO: Auswahl für ziehbares Element hinzufügen{% endcomment %}
 			</nav>
-			<nav></nav>
 		</header>
-		<table id="content">
+		<table id="content" class="draggable">
 			<thead>
 			<tr>
 				<th scope="col" title="Index">#</th>
@@ -56,11 +58,101 @@ tags:
 	</section>
 </main>
 <template id="rowDefault">
-	<tr>
+	<tr draggable="true">
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<button title="Drag"><i class="bi bi-grip-horizontal"></i></button>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowArticle">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowText">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td class="rigid"></td>
+		<td colspan="6">
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
 			</nav>
 		</td>
@@ -90,6 +182,7 @@ tags:
 		</td>
 	</tr>
 </template>
+
 {% render 'hippie/partials/frame-mode.liquid' %}
 {% endblock %}
 
@@ -233,7 +326,55 @@ tags:
 				elementNew.scrollIntoView({behavior: 'smooth', block: 'nearest'});
 			}
 		}
-		// TODO: Neuen index bilden
+
+		reindexRows(tbodyPosition);
+	});
+
+	let draggedRow = null;
+
+	tbodyPosition.addEventListener('dragstart', (event) => {
+		const rowTarget = event.target.closest('tr[draggable="true"]');
+
+		if (rowTarget) {
+			draggedRow = rowTarget;
+			rowTarget.classList.add('dragging');
+			event.dataTransfer.effectAllowed = 'move';
+
+			console.debug('Drag', rowTarget);
+		}
+	});
+
+	tbodyPosition.addEventListener('dragend', () => {
+		if (draggedRow) {
+			draggedRow.classList.remove('dragging');
+			draggedRow = null;
+		}
+	});
+
+	tbodyPosition.addEventListener('dragover', (event) => {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = 'move';
+
+		const rowTarget = event.target.closest('tr');
+
+		if (rowTarget && rowTarget !== draggedRow) {
+			const rows = [...tbodyPosition.querySelectorAll('tr')];
+			const draggedIndex = rows.indexOf(draggedRow);
+			const targetIndex = rows.indexOf(rowTarget);
+
+			if (draggedIndex < targetIndex) {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget.nextSibling);
+			} else {
+				rowTarget.parentNode.insertBefore(draggedRow, rowTarget);
+			}
+		}
+	});
+
+	tbodyPosition.addEventListener('drop', (event) => {
+		event.preventDefault();
+		reindexRows(event.currentTarget);
+
+		console.debug('Drop');
 	});
 
 	function cloneRow(type = 'default') {
@@ -244,5 +385,15 @@ tags:
 
 		return document.importNode(rowFragment, true);
 	}
+
+	function reindexRows(parent, selector = 'tr') {
+		const rows = parent.querySelectorAll(selector);
+		let th = undefined;
+
+		for (let i = 0; i < rows.length; i++) {
+			th = rows[i].querySelector('th');
+			th.textContent = i + 1;
+		}
+	}
 </script>
 {% endblock %}