1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 13:20:54 +00:00

A lot of improvements

This commit is contained in:
Romein van Buren 2023-01-20 13:54:57 +01:00
parent 9811235be7
commit 6703950734
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
14 changed files with 248 additions and 61 deletions

View File

@ -2,6 +2,7 @@
import { contextMenu } from '../stores'; import { contextMenu } from '../stores';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Icon from './icon.svelte'; import Icon from './icon.svelte';
import { resolveKeypath } from '../utils';
export let items = []; export let items = [];
export let columns = []; export let columns = [];
@ -30,7 +31,7 @@
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
return obj; return obj;
} }
else if (typeof obj === 'object') { else if ((typeof obj === 'object') && (obj !== null)) {
return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k })); return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k }));
} }
else { else {
@ -81,10 +82,10 @@
if ((value === undefined) || (value === null)) { if ((value === undefined) || (value === null)) {
return ''; return '';
} }
if (new Date(value).toString() !== 'Invalid Date') { // if (new Date(value).toString() !== 'Invalid Date') {
return new Date(value); // return new Date(value);
} // }
if (typeof value === 'object') { if ((typeof value === 'object') && (value !== null)) {
return hideObjectIndicators ? '' : '{...}'; return hideObjectIndicators ? '' : '{...}';
} }
if (String(value).length <= 1000) { if (String(value).length <= 1000) {
@ -115,7 +116,7 @@
</td> </td>
{#each columns as column, columnIndex} {#each columns as column, columnIndex}
{@const value = item[column.key]} {@const value = column.key?.includes('.') ? resolveKeypath(item, column.key) : item[column.key]}
<td class:right={column.right} title={value}> <td class:right={column.right} title={value}>
<div class="value" style:margin-left="{level * 10}px"> <div class="value" style:margin-left="{level * 10}px">
{formatValue(value)} {formatValue(value)}

View File

@ -9,6 +9,7 @@
export let activePath = []; export let activePath = [];
export let striped = true; export let striped = true;
export let hideObjectIndicators = false; export let hideObjectIndicators = false;
export let showHeaders = false;
</script> </script>
<div class="grid"> <div class="grid">
@ -24,6 +25,17 @@
{/if} {/if}
<table> <table>
{#if showHeaders && columns.some(col => col.title)}
<thead>
<tr>
<th class="has-toggle"></th>
{#each columns as column}
<th scope="col">{column.title || ''}</th>
{/each}
</tr>
</thead>
{/if}
<tbody> <tbody>
<GridItems <GridItems
{items} {items}
@ -60,4 +72,15 @@
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
} }
table thead {
border-bottom: 2px solid #ccc;
}
th {
font-weight: 600;
text-align: left;
}
th {
padding: 2px;
}
</style> </style>

View File

@ -11,6 +11,12 @@
<polyline points="9 18 15 12 9 6"></polyline> <polyline points="9 18 15 12 9 6"></polyline>
{:else if name === 'chev-d'} {:else if name === 'chev-d'}
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
{:else if name === 'chev-u'}
<path d="m18 15-6-6-6 6"/>
{:else if name === 'chevs-l'}
<path d="m11 17-5-5 5-5M18 17l-5-5 5-5"/>
{:else if name === 'chevs-r'}
<path d="m13 17 5-5-5-5M6 17l5-5-5-5"/>
{:else if name === 'db'} {:else if name === 'db'}
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path> <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
{:else if name === 'x'} {:else if name === 'x'}
@ -33,5 +39,7 @@
<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/> <path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/>
{:else if name === 'cog'} {:else if name === 'cog'}
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/> <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
{:else if name === 'zap'}
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
{/if} {/if}
</svg> </svg>

View File

@ -42,10 +42,10 @@
} }
return 'integer'; return 'integer';
} }
else if (new Date(value).toString() !== 'Invalid Date') { // else if (new Date(value).toString() !== 'Invalid Date') {
return 'date'; // return 'date';
} // }
else if (typeof value === 'object') { else if ((typeof value === 'object') && (value !== null)) {
const keys = Object.keys(value); const keys = Object.keys(value);
return `object (${keys.length} item${keys.length === 1 ? '' : 's'})`; return `object (${keys.length} item${keys.length === 1 ? '' : 's'})`;
} }

View File

@ -8,9 +8,19 @@
let copySucceeded = false; let copySucceeded = false;
let timeout; let timeout;
let _data;
$: if (data) {
_data = JSON.parse(JSON.stringify(data));
for (const key of Object.keys(_data)) {
if (typeof _data[key] === 'undefined') {
delete _data[key];
}
}
}
async function copy() { async function copy() {
await navigator.clipboard.writeText(JSON.stringify(data)); await navigator.clipboard.writeText(JSON.stringify(_data));
copySucceeded = true; copySucceeded = true;
timeout = setTimeout(() => copySucceeded = false, 1500); timeout = setTimeout(() => copySucceeded = false, 1500);
} }
@ -19,7 +29,7 @@
</script> </script>
{#if data} {#if data}
<Modal bind:show={data} title="Object viewer" contentPadding={false}> <Modal bind:show={data} title="Object viewer">
<div class="objectviewer"> <div class="objectviewer">
<div class="buttons"> <div class="buttons">
<button class="btn" on:click={copy}> <button class="btn" on:click={copy}>
@ -27,7 +37,7 @@
</button> </button>
</div> </div>
<div class="code"> <div class="code">
<ObjectTree {data} /> <ObjectTree data={_data} />
</div> </div>
</div> </div>
</Modal> </Modal>
@ -37,14 +47,10 @@
.objectviewer { .objectviewer {
position: relative; position: relative;
} }
.code {
padding: 1rem;
}
.buttons { .buttons {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
margin: 1rem;
} }
.buttons button { .buttons button {
margin-left: 1rem; margin-left: 1rem;

View File

@ -1,6 +1,7 @@
<script> <script>
import TabBar from '../../../components/tabbar.svelte'; import TabBar from '../../../components/tabbar.svelte';
import Modal from '../../../components/modal.svelte'; import Modal from '../../../components/modal.svelte';
import Icon from '../../../components/icon.svelte';
export let show = false; export let show = false;
export let activeView = 'list'; export let activeView = 'list';
@ -8,15 +9,55 @@
hideObjectIndicators: false, hideObjectIndicators: false,
columns: [], columns: [],
}; };
export let firstItem = {};
let activeTab = activeView || 'list'; let activeTab = activeView || 'list';
$: activeView && (activeTab = activeView);
$: if (!config.columns || (config.columns.length === 0)) {
config.columns = [ { key: '_id' } ];
}
function addColumn(before) {
if (typeof before === 'number') {
config.columns = [
...config.columns.slice(0, before),
{},
...config.columns.slice(before),
];
}
else {
config.columns = [ ...config.columns, {} ];
}
}
function addSuggestedColumns() {
if ((typeof firstItem !== 'object') || (firstItem === null)) {
return;
}
config.columns = Object.keys(firstItem).map(key => ({ key }));
}
function moveColumn(oldIndex, delta) {
const column = config.columns[oldIndex];
const newIndex = oldIndex + delta;
config.columns.splice(oldIndex, 1);
config.columns.splice(newIndex, 0, column);
config.columns = config.columns;
}
function removeColumn(index) {
config.columns.splice(index, 1);
config.columns = config.columns;
}
</script> </script>
<Modal title="View configuration" bind:show contentPadding={false}> <Modal title="View configuration" bind:show contentPadding={false}>
<TabBar <TabBar
tabs={[ tabs={[
{ key: 'list', title: 'List view' }, { key: 'list', title: 'List view' },
{ key: 'table', title: 'Table view' }, { key: 'table', title: 'Table view columns' },
]} ]}
bind:selectedKey={activeTab} bind:selectedKey={activeTab}
/> />
@ -30,11 +71,31 @@
</label> </label>
</div> </div>
{:else if activeTab === 'table'} {:else if activeTab === 'table'}
<input {#each config.columns as column, columnIndex}
type="text" <div class="column">
value={config.columns?.map(c => c.key).join(', ') || ''} <label class="field">
on:input={e => config.columns = e.currentTarget.value?.split(',').map(k => ({ key: k.trim() })) || ''} <input type="text" bind:value={column.key} placeholder="Column keypath" />
/> </label>
<button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
<Icon name="+" />
</button>
<button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
<Icon name="chev-u" />
</button>
<button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === config.columns.length - 1} title="Move column one position down">
<Icon name="chev-d" />
</button>
<button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
<Icon name="x" />
</button>
</div>
{/each}
<button class="btn" on:click={addColumn}>
<Icon name="+" /> Add column
</button>
<button class="btn" on:click={addSuggestedColumns} disabled={!firstItem}>
<Icon name="zap" /> Add suggested columns
</button>
{/if} {/if}
</div> </div>
</Modal> </Modal>
@ -48,7 +109,11 @@
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
} }
.flex + .flex {
margin-top: 1rem; .column {
display: grid;
grid-template: 1fr / 1fr repeat(4, auto);
gap: 0.5rem;
margin-bottom: 0.5rem;
} }
</style> </style>

View File

@ -7,6 +7,7 @@
import ObjectViewer from '../../../components/objectviewer.svelte'; import ObjectViewer from '../../../components/objectviewer.svelte';
import FindViewConfigModal from './find-viewconfig.svelte'; import FindViewConfigModal from './find-viewconfig.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Grid from '../../../components/grid.svelte';
export let collection; export let collection;
@ -28,6 +29,8 @@
let viewConfigModalOpen = false; let viewConfigModalOpen = false;
let viewConfig = {}; let viewConfig = {};
$: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`; $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
$: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
$: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
$: collection && refresh(); $: collection && refresh();
$: updateConfig(viewConfig); $: updateConfig(viewConfig);
@ -43,6 +46,21 @@
} }
} }
async function updateConfig(viewConfig) {
try {
const hosts = await Hosts();
hosts[collection.hostKey].databases = hosts[collection.hostKey].databases || {};
hosts[collection.hostKey].databases[collection.dbKey] = hosts[collection.hostKey].databases[collection.dbKey] || {};
hosts[collection.hostKey].databases[collection.dbKey].collections = hosts[collection.hostKey].databases[collection.dbKey].collections || {};
hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] = hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] || {};
hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key].viewConfig = viewConfig;
await UpdateHost(collection.hostKey, JSON.stringify(hosts[collection.hostKey]));
}
catch (e) {
console.error(e);
}
}
async function submitQuery() { async function submitQuery() {
activePath = []; activePath = [];
result = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form)); result = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
@ -57,22 +75,6 @@
await submitQuery(); await submitQuery();
} }
async function updateConfig(viewConfig) {
try {
const hosts = await Hosts();
hosts[collection.hostKey].databases = hosts[collection.hostKey].databases || {};
hosts[collection.hostKey].databases[collection.dbKey] = hosts[collection.hostKey].databases[collection.dbKey] || {};
hosts[collection.hostKey].databases[collection.dbKey].collections = hosts[collection.hostKey].databases[collection.dbKey].collections || {};
hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] = hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] || {};
hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key].viewConfig = viewConfig;
await UpdateHost(collection.hostKey, JSON.stringify(hosts[collection.hostKey]));
}
catch (e) {
console.error(e);
}
console.log(viewConfig);
}
function prev() { function prev() {
form.skip -= form.limit; form.skip -= form.limit;
if (form.skip < 0) { if (form.skip < 0) {
@ -86,6 +88,16 @@
submitQuery(); submitQuery();
} }
function first() {
form.skip = 0;
submitQuery();
}
function last() {
form.skip = lastPage * submittedForm.limit;
submitQuery();
}
async function removeActive() { async function removeActive() {
if (!activePath[0]) { if (!activePath[0]) {
return; return;
@ -140,12 +152,12 @@
<label class="field"> <label class="field">
<span class="label">Skip</span> <span class="label">Skip</span>
<input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} /> <input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} list="skipstops" />
</label> </label>
<label class="field"> <label class="field">
<span class="label">Limit</span> <span class="label">Limit</span>
<input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} /> <input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} list="limits" />
</label> </label>
<button type="submit" class="btn">Run</button> <button type="submit" class="btn">Run</button>
@ -157,12 +169,23 @@
<div class="result"> <div class="result">
<div class="grid"> <div class="grid">
{#key result} {#key result}
{#if view === 'table'}
<Grid
key="_id"
columns={viewConfig.columns?.map(c => ({ key: c.key, title: c.key })) || []}
showHeaders={true}
items={result.results || []}
bind:activePath
on:trigger={e => openJson(e.detail?.itemKey)}
/>
{:else if view === 'list'}
<ObjectGrid <ObjectGrid
data={result.results} data={result.results}
hideObjectIndicators={viewConfig?.hideObjectIndicators} hideObjectIndicators={viewConfig?.hideObjectIndicators}
bind:activePath bind:activePath
on:trigger={e => openJson(e.detail?.itemKey)} on:trigger={e => openJson(e.detail?.itemKey)}
/> />
{/if}
{/key} {/key}
</div> </div>
@ -177,24 +200,44 @@
<Icon name="cog" /> <Icon name="cog" />
</button> </button>
<button class="btn" on:click={toggleView} title="Toggle view"> <button class="btn" on:click={toggleView} title="Toggle view">
<Icon name={view} /> <Icon name={view === 'table' ? 'list' : 'table'} />
</button> </button>
<button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item"> <button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
<Icon name="-" /> <Icon name="-" />
</button> </button>
<button class="btn" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results?.length} title="Previous {form.limit} items"> <button class="btn" on:click={first} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="First page">
<Icon name="chevs-l" />
</button>
<button class="btn" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="Previous {submittedForm.limit} items">
<Icon name="chev-l" /> <Icon name="chev-l" />
</button> </button>
<button class="btn" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results?.length} title="Next {form.limit} items"> <button class="btn" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Next {submittedForm.limit} items">
<Icon name="chev-r" /> <Icon name="chev-r" />
</button> </button>
<button class="btn" on:click={last} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Last page">
<Icon name="chevs-r" />
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ObjectViewer bind:data={objectViewerData} /> <ObjectViewer bind:data={objectViewerData} />
<FindViewConfigModal bind:show={viewConfigModalOpen} activeView={view} bind:config={viewConfig} /> <FindViewConfigModal bind:show={viewConfigModalOpen} activeView={view} bind:config={viewConfig} firstItem={result.results?.[0]} />
<datalist id="limits">
{#each [ 1, 5, 10, 25, 50, 100, 200 ] as value}
<option {value} />
{/each}
</datalist>
{#if submittedForm?.limit}
<datalist id="skipstops">
{#each Array(lastPage).fill('').map((_, i) => i * submittedForm.limit) as value}
<option {value} />
{/each}
</datalist>
{/if}
<style> <style>
.find { .find {

View File

@ -2,6 +2,7 @@
import ObjectViewer from '../../../components/objectviewer.svelte'; import ObjectViewer from '../../../components/objectviewer.svelte';
import ObjectGrid from '../../../components/objectgrid.svelte'; import ObjectGrid from '../../../components/objectgrid.svelte';
import { DropIndex, GetIndexes } from '../../../../wailsjs/go/app/App'; import { DropIndex, GetIndexes } from '../../../../wailsjs/go/app/App';
import Icon from '../../../components/icon.svelte';
export let collection; export let collection;
@ -9,6 +10,8 @@
let activePath = []; let activePath = [];
let objectViewerData = ''; let objectViewerData = '';
$: collection && getIndexes();
async function getIndexes() { async function getIndexes() {
const result = await GetIndexes(collection.hostKey, collection.dbKey, collection.key); const result = await GetIndexes(collection.hostKey, collection.dbKey, collection.key);
if (result) { if (result) {
@ -35,11 +38,15 @@
<div class="indexes"> <div class="indexes">
<div class="actions"> <div class="actions">
<button class="btn" on:click={getIndexes}>Get indexes</button> <button class="btn" on:click={getIndexes}>
<button class="btn danger" on:click={drop} disabled={!indexes?.length || !activePath[0]}> <Icon name="reload" /> Reload
Drop selected </button>
<button class="btn">
<Icon name="+" /> Create index…
</button>
<button class="btn danger" on:click={drop} disabled={!indexes?.length || !activePath[0]}>
<Icon name="x" /> Drop selected
</button> </button>
<button class="btn">Create…</button>
</div> </div>
<div class="grid"> <div class="grid">

View File

@ -2,6 +2,7 @@
import { input } from '../../../actions'; import { input } from '../../../actions';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { InsertItems } from '../../../../wailsjs/go/app/App'; import { InsertItems } from '../../../../wailsjs/go/app/App';
import Icon from '../../../components/icon.svelte';
export let collection; export let collection;
@ -44,7 +45,9 @@
{#if insertedIds} {#if insertedIds}
<button class="btn" type="button" on:click={showDocs}>View inserted docs</button> <button class="btn" type="button" on:click={showDocs}>View inserted docs</button>
{/if} {/if}
<button type="submit" class="btn" disabled={!json}>Insert</button> <button type="submit" class="btn" disabled={!json}>
<Icon name="+" /> Insert
</button>
</div> </div>
</div> </div>
</form> </form>

View File

@ -2,6 +2,7 @@
import { input } from '../../../actions'; import { input } from '../../../actions';
import { RemoveItems } from '../../../../wailsjs/go/app/App'; import { RemoveItems } from '../../../../wailsjs/go/app/App';
import CodeExample from '../../../components/code-example.svelte'; import CodeExample from '../../../components/code-example.svelte';
import Icon from '../../../components/icon.svelte';
export let collection; export let collection;
@ -45,7 +46,9 @@
{/if} {/if}
{/key} {/key}
</div> </div>
<button type="submit" class="btn">Remove</button> <button type="submit" class="btn danger">
<Icon name="-" /> Remove
</button>
</div> </div>
</form> </form>

View File

@ -114,7 +114,9 @@
{/if} {/if}
{/key} {/key}
<button class="btn" type="submit">Update</button> <button class="btn" type="submit">
<Icon name="check" /> Update
</button>
</div> </div>
<label class="field"> <label class="field">

View File

@ -21,7 +21,7 @@ time, mark, audio, video {
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; /* vertical-align: baseline; */
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,

View File

@ -63,6 +63,11 @@ p strong {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.field svg {
width: 13px;
height: 13px;
margin-right: 2px;
}
.field > :first-child { .field > :first-child {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;

21
frontend/src/utils.js Normal file
View File

@ -0,0 +1,21 @@
export function resolveKeypath(object, path) {
// Get a value from an object with a JSON path, from Webdesq core
const parts = path.split('.').flatMap(part => {
const indexMatch = part.match(/\[\d+\]/g);
if (indexMatch) {
// Convert strings to numbers
const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
const base = part.slice(0, part.indexOf(indexMatch[0]));
return base.length ? [ base, ...indexes ] : indexes;
}
return part;
});
let result = object;
while (result && parts.length) {
result = result[parts.shift()];
}
return result;
}