1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-19 22:18:03 +00:00

Table view

This commit is contained in:
2023-01-31 16:58:23 +01:00
parent dc5b12ee0d
commit 14e5b1f806
20 changed files with 674 additions and 172 deletions

View File

@ -6,6 +6,8 @@
import Icon from '../../../components/icon.svelte';
import Form from './components/form.svelte';
import ObjectViewer from '../../../components/objectviewer.svelte';
import Grid from '../../../components/grid.svelte';
import { inputTypes, randomString } from '../../../utils';
export let collection;
@ -50,6 +52,10 @@
objectViewerData = [ ...newItems ];
}
}
function addRow() {
newItems = [ ...newItems, {} ];
}
</script>
<form on:submit|preventDefault={insert}>
@ -64,10 +70,29 @@
use:input={{ type: 'json', autofocus: true }}
></textarea>
</label>
{:else}
{:else if viewType === 'form'}
<div class="form">
<Form bind:item={newItems[0]} bind:valid={formValid} view={$views[collection.viewKey]} />
</div>
{:else if viewType === 'table'}
<div class="table">
<Grid
key="id"
items={newItems}
columns={
$views[collection.viewKey]?.columns
?.filter(c => inputTypes.includes(c.inputType))
.map(c => ({ ...c, id: randomString(8), title: c.key })) || []
}
showHeaders={true}
canAddRows={true}
canSelect={false}
canRemoveItems={true}
hideChildrenToggles={true}
on:addRow={addRow}
bind:inputsValid={formValid}
/>
</div>
{/if}
<div class="flex">
@ -114,6 +139,11 @@
gap: 0.5rem;
}
.table {
background-color: #fff;
border: 1px solid #ccc;
}
.flex {
display: flex;
justify-content: space-between;