interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add functionality to table screen

Browse source 
- New templates for rows with different content
- Rows can now be repositioned
- Change of rows now causes a reindex
This commit is contained in:
sthag 2026-02-21 09:28:50 +01:00
parent fd5f3ba89f
commit b10379782f
1 changed files with 156 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

161
source/screens/demo/examples/ui/table.liquid
View file

@ -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 %}