Added new models. Major changes to the table widget. Still has problems with the editing in the table widget.
This commit is contained in:
@@ -1,17 +1,29 @@
|
||||
<script>
|
||||
export let rows;
|
||||
export let columns;
|
||||
export let rowKey;
|
||||
export let rowKey; //Must only be null/undefined if the row is a new object (not associated with a row in the table). Should not change.
|
||||
export let edited;
|
||||
export let actions;
|
||||
|
||||
// Setup a width for each column.
|
||||
columns.forEach(column => {
|
||||
let min = column.minWidth ? Math.max(10, column.minWidth) : 10;
|
||||
let weight = column.weight ? Math.max(1, column.weight) : 1;
|
||||
column.width = 'minmax(' + min + 'px, ' + weight + 'fr)';
|
||||
column.isActions = false;
|
||||
});
|
||||
// Add the actions column to the end.
|
||||
// TODO: Allow it to be positioned.
|
||||
if(actions) {
|
||||
// TODO: make this fixed width based on the possible widget widths.
|
||||
actions.width = 'minmax(10px, 1fr)';
|
||||
actions.isActions = true;
|
||||
columns[columns.length] = actions;
|
||||
}
|
||||
// Collect the column widths for the layout.
|
||||
let gridTemplateColumns = columns.map(({width}) => width).join(' ');
|
||||
|
||||
// Resize column code.
|
||||
let headerBeingResized = null;
|
||||
let horizontalScrollOffset = 0;
|
||||
const initResize = ({target}) => {
|
||||
@@ -46,6 +58,7 @@
|
||||
} catch(e) {console.log(e);}
|
||||
}
|
||||
|
||||
// Select row code.
|
||||
let selectedRowElement = null;
|
||||
const selectRow = (e, row) => {
|
||||
let element = e.target;
|
||||
@@ -60,12 +73,44 @@
|
||||
element.classList.add('selected');
|
||||
}
|
||||
|
||||
// Edit row code.
|
||||
let editorContainer;
|
||||
let editorTable;
|
||||
// Listen for changes to the edited variable. Move the editor row and display it when there is a value.
|
||||
// Relies on the table row being hidden when the edited value matches the row's value.
|
||||
$: {
|
||||
if(editorContainer) {
|
||||
if($edited) {
|
||||
let id = rowKey($edited);
|
||||
let hiddenRow = editorTable.querySelector('tbody tr[data-key="' + id + '"]');
|
||||
|
||||
if(!hiddenRow) {
|
||||
let body = editorTable.querySelector('tbody');
|
||||
body.firstChild ? body.insertBefore(editorContainer, body.firstChild) : body.appendChild(editorContainer);
|
||||
editorContainer.classList.remove('hidden');
|
||||
}
|
||||
else {
|
||||
//let editor = hiddenRow.querySelector('.editor');
|
||||
let body = editorTable.querySelector('tbody');
|
||||
let next = hiddenRow.nextSibling;
|
||||
//editor.appendChild(editorContainer);
|
||||
next ? body.insertBefore(editorContainer, next) : body.appendChild(editorContainer);
|
||||
editorContainer.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log("Edited cleared");
|
||||
editorContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
const editRow = (e, row) => {
|
||||
let element = e.target;
|
||||
while(element && element.nodeName !== "TR") element = element.parentNode;
|
||||
let editor = element.querySelector('.editor');
|
||||
|
||||
isNew = false;
|
||||
// Save the edited row so the editor has access to it.
|
||||
$edited = row;
|
||||
|
||||
@@ -74,73 +119,101 @@
|
||||
}
|
||||
editorContainer.classList.remove('hidden');
|
||||
}
|
||||
const newRow = () => {
|
||||
isNew = true;
|
||||
newEditor.appendChild(editorContainer);
|
||||
editorContainer.classList.remove('hidden');
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<div bind:this={editorContainer} class="hidden"><slot>Slot</slot></div>
|
||||
<table style="--grid-template-columns: {gridTemplateColumns}">
|
||||
<div bind:this={editorContainer} class="editor2 hidden"><slot>Slot</slot></div>
|
||||
<table bind:this={editorTable} style="--grid-template-columns: {gridTemplateColumns}">
|
||||
<thead>
|
||||
<tr>
|
||||
{#each columns as column}
|
||||
<th bind:this={column.element}>{column.title} <span class="resize-handle" on:mousedown={initResize}></span></th>
|
||||
{#if column.isActions}
|
||||
<th bind:this={column.element}>{column.title}
|
||||
{#each column.headerWidgets as widget}
|
||||
<span class="material-icons material-symbols-outlined" on:click={widget.action} title="{widget.tooltip}">{widget.icon}</span>
|
||||
{/each}
|
||||
</th>
|
||||
{:else}
|
||||
<th bind:this={column.element}>{column.title} <span class="resize-handle" on:mousedown={initResize}></span></th>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $rows as row (rowKey(row))}
|
||||
<!-- data-key="{rowKey(row)}"-->
|
||||
<tr class:hidden={row === $edited} on:mousedown={(e) => selectRow(e, row)} on:dblclick={(e) => editRow(e, row)}>
|
||||
<!-- on:dblclick={(e) => editRow(e, row)} -->
|
||||
<tr data-key="{rowKey(row)}" class:hidden={row === $edited} on:mousedown={(e) => selectRow(e, row)} on:dblclick={(e) => {$edited = row}}>
|
||||
{#each columns as column}
|
||||
<td>{column.value(row)}</td>
|
||||
{#if column.isActions}
|
||||
<td>
|
||||
{#each column.rowWidgets as widget}
|
||||
<span class="material-icons material-symbols-outlined" on:click={widget.action(row)}>{widget.icon}</span>
|
||||
{/each}
|
||||
</td>
|
||||
{:else}
|
||||
<td>{column.value(row)}</td>
|
||||
{/if}
|
||||
{/each}
|
||||
<td class="editor"></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<button on:click={() => {$edited = null}} type="button">Stop Editing</button>
|
||||
<!--<button on:click={() => {$edited = null}} type="button">Stop Editing</button>-->
|
||||
|
||||
<style>
|
||||
.material-icons {
|
||||
cursor: pointer;
|
||||
}
|
||||
thead .material-icons {
|
||||
color: white;
|
||||
}
|
||||
table {
|
||||
width: auto;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
border-collapse: collapse;
|
||||
grid-template-columns: var(--grid-template-columns);
|
||||
width: auto;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
border-collapse: collapse;
|
||||
grid-template-columns: var(--grid-template-columns);
|
||||
}
|
||||
thead, tbody, tr {
|
||||
display: contents;
|
||||
}
|
||||
th, td {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
th {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #5cb85c;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #3f4f3f;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
th:last-child {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: black;
|
||||
opacity: 0;
|
||||
width: 3px;
|
||||
cursor: col-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: black;
|
||||
opacity: 0;
|
||||
width: 3px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
th:last-child .resize-handle {
|
||||
display: none;
|
||||
@@ -163,7 +236,7 @@
|
||||
background-color: yellow;
|
||||
}
|
||||
.editor {
|
||||
grid-column: 1 / 4;
|
||||
grid-column: 1 / -1;
|
||||
display: none;
|
||||
}
|
||||
/*:global(td.hidden) {*/
|
||||
@@ -178,4 +251,8 @@
|
||||
:global(div.hidden) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.editor2 {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user