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
This commit is contained in:
parent
d533563569
commit
e9c383b41e
2 changed files with 125 additions and 64 deletions
|
|
@ -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></td>
|
||||
<td><input class="input_io" name="number" type="text"></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="6">
|
||||
<td colspan="7">
|
||||
<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>
|
||||
<template id="rowGroup">
|
||||
<tr draggable="true">
|
||||
<tr class="footer">
|
||||
<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>
|
||||
<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>
|
||||
<td class="pos-num"></td>
|
||||
<td colspan="8">End</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 tr = clone.querySelector('tr');
|
||||
const th = clone.querySelector('th');
|
||||
const td = clone.querySelectorAll('td');
|
||||
const t = Math.random();
|
||||
let type = undefined;
|
||||
|
||||
const j = i % placeholderNames.length;
|
||||
const k = randomIntFrom(0, placeholderContents.length - 1);
|
||||
const amount = randomIntFrom(1, 100);
|
||||
const price = randomFloatFrom(1, 10000, 2);
|
||||
const sum = amount * price;
|
||||
if (t < .2) {
|
||||
type = 'default';
|
||||
} else if (t >= .2 && t < .4) {
|
||||
type = 'text';
|
||||
} else if (t >= .4 && t < .5) {
|
||||
type = 'group';
|
||||
} else {
|
||||
type = 'article';
|
||||
}
|
||||
|
||||
tr.setAttribute('data-id', i);
|
||||
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);
|
||||
tbodyPosition.appendChild(cloneRow(i, type));
|
||||
}
|
||||
|
||||
const selectNum = document.getElementById('sltNum');
|
||||
|
|
@ -377,11 +381,51 @@ tags:
|
|||
console.debug('Drop');
|
||||
});
|
||||
|
||||
function cloneRow(type = 'default') {
|
||||
type = 'row' + capitalizeFirstLetter(type);
|
||||
function cloneRow(index, type = 'article') {
|
||||
const id = 'row' + capitalizeFirstLetter(type);
|
||||
|
||||
const rowFragment = document.getElementById(type).content;
|
||||
// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
|
||||
const rowFragment = document.getElementById(id).content;
|
||||
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 %}
|
||||
|
|
@ -1 +1 @@
|
|||
Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211
|
||||
Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984
|
||||
Loading…
Add table
Add a link
Reference in a new issue