feat: Update table screen

- Move logic for rows to cloneRow function
- Add random selection of type to loop
- Refine row types
- Add event for group toggle

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

@@ -62,12 +62,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<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><input class="input_io" name="number" type="text"></td>
-		<td></td>
+		<td><input class="input_io" name="name" type="text"></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
@@ -80,7 +81,7 @@ tags:
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td class="unit"></td>
+		<td><input class="input_io" name="price" type="text"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -96,13 +97,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<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>
@@ -130,14 +131,44 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
+				<input class="input_io" name="active" type="checkbox">
 				<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="7">
-		<td colspan="6">
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+</template>
+<template id="rowGroup">
+	<tr draggable="true" class="header">
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<input class="input_io" name="active" type="checkbox">
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
+		<td class="pos-num"></td>
+		<td colspan="7">Group</td>
+		<td class="io">
+			<nav>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
+	</tr>
+	<tr>
+		<th scope="row"></th>
+		<td></td>
+		<td class="pos-num"></td>
+		<td colspan="7">Content</td>
 		<td class="io">
 			<nav>
 				<button title="Event"><i class="bi bi-calendar-event"></i></button>
@@ -146,40 +177,11 @@ tags:
 			</nav>
 		</td>
 	</tr>
-</template>
+	<tr class="footer">
-<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>
-		<td class="pos-num"></td>
-		<td class="rigid"></td>
 		<td></td>
-		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td class="pos-num"></td>
-		<td>
+		<td colspan="8">End</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>
 
@@ -226,6 +228,7 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
+		const groupTarget = event.target.closest('[name="group"]');
 
 		if (rowTarget && event.button === 0) {
 			for (row of rows) {
@@ -234,32 +237,33 @@ tags:
 
 			rowTarget.classList.add('active');
 		}
+
+		if (groupTarget && event.button === 0) {
+			console.log('group');
+			let currentRow = groupTarget.closest('tr').nextElementSibling;
+
+			while (currentRow && !currentRow.classList.contains('footer')) {
+				currentRow.classList.toggle('di_none');
+				currentRow = currentRow.nextElementSibling;
+			}
+		}
 	});
 
 	for (let i = 0; i < 256; i++) {
-		const clone = cloneRow();
+		const t = Math.random();
-		const tr = clone.querySelector('tr');
+		let type = undefined;
-		const th = clone.querySelector('th');
-		const td = clone.querySelectorAll('td');
 
-		const j = i % placeholderNames.length;
+		if (t < .2) {
-		const k = randomIntFrom(0, placeholderContents.length - 1);
+			type = 'default';
-		const amount = randomIntFrom(1, 100);
+		} else if (t >= .2 && t < .4) {
-		const price = randomFloatFrom(1, 10000, 2);
+			type = 'text';
-		const sum = amount * price;
+		} else if (t >= .4 && t < .5) {
+			type = 'group';
+		} else {
+			type = 'article';
+		}
 
-		tr.setAttribute('data-id', i);
+		tbodyPosition.appendChild(cloneRow(i, type));
-		th.textContent = i + 1;
-		td[2].textContent = getRandomFormattedString();
-		td[3].textContent = placeholderNames[j];
-		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
-		td[4].firstElementChild.textContent = placeholderContents[k];
-		td[5].firstElementChild.value = amount;
-		td[5].firstElementChild.style.width = '4em';
-		td[7].textContent = currencyEuro.format(price);
-		td[8].textContent = currencyEuro.format(sum);
-
-		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -377,11 +381,51 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(type = 'default') {
+	function cloneRow(index, type = 'article') {
-		type = 'row' + capitalizeFirstLetter(type);
+		const id = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(type).content;
+		const rowFragment = document.getElementById(id).content;
-		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
+		const tr = rowFragment.querySelector('tr');
+		const th = rowFragment.querySelector('th');
+		const td = rowFragment.querySelectorAll('td');
+
+		const j = index % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const l = Math.random() > .2;
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
+
+		tr.setAttribute('data-id', index);
+		th.textContent = index + 1;
+		td[0].querySelector('[name="active"]').checked = l;
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+
+		switch (type) {
+			case 'default':
+				td[2].firstElementChild.style.width = '9ch';
+				td[3].firstElementChild.style.width = '6ch';
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].firstElementChild.style.width = '8ch';
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'article':
+				td[2].textContent = getRandomFormattedString();
+				td[3].textContent = placeholderNames[j];
+				td[4].firstElementChild.textContent = placeholderContents[k];
+				td[5].firstElementChild.value = amount;
+				td[5].firstElementChild.style.width = '4em';
+				td[7].textContent = currencyEuro.format(price);
+				td[8].textContent = currencyEuro.format(sum);
+				break;
+			case 'text':
+				td[2].firstElementChild.textContent = placeholderContents[k];
+				break;
+			default:
+				console.debug('No matching type found.');
+		}
 
 		return document.importNode(rowFragment, true);
 	}
@@ -395,5 +439,22 @@ tags:
 			th.textContent = i + 1;
 		}
 	}
+
+	function toggleGroup(headerRow) {
+		// Get the toggle icon
+		const icon = headerRow.querySelector('.toggle-icon');
+
+		// Get all rows after this header
+		let currentRow = headerRow.nextElementSibling;
+
+		// Toggle visibility of group rows until next header
+		while (currentRow && !currentRow.classList.contains('group-header')) {
+			currentRow.classList.toggle('hidden');
+			currentRow = currentRow.nextElementSibling;
+		}
+
+		// Toggle the icon rotation
+		icon.classList.toggle('collapsed');
+	}
 </script>
 {% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211
+Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984