romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2024-12-01 14:20:54 +01:00
Code Issues Releases Activity

A lot of improvements

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/grid-items.svelte
View File

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

23
frontend/src/components/grid.svelte
View File

@ -9,6 +9,7 @@
export let activePath = [];
export let striped = true;
export let hideObjectIndicators = false;
export let showHeaders = false;
</script>
<div class="grid">
@ -24,6 +25,17 @@
{/if}
<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>
<GridItems
{items}
@ -60,4 +72,15 @@
width: 100%;
background-color: #fff;
}
table thead {
border-bottom: 2px solid #ccc;
}
th {
font-weight: 600;
text-align: left;
}
th {
padding: 2px;
}
</style>

8
frontend/src/components/icon.svelte vendored
View File

@ -11,6 +11,12 @@
<polyline points="9 18 15 12 9 6"></polyline>
{:else if name === 'chev-d'}
<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'}
<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'}
@ -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"/>
{: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"/>
{:else if name === 'zap'}
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
{/if}
</svg>

8
frontend/src/components/objectgrid.svelte
View File

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

20
frontend/src/components/objectviewer.svelte
View File

@ -8,9 +8,19 @@
let copySucceeded = false;
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() {
await navigator.clipboard.writeText(JSON.stringify(data));
await navigator.clipboard.writeText(JSON.stringify(_data));
copySucceeded = true;
timeout = setTimeout(() => copySucceeded = false, 1500);
}
@ -19,7 +29,7 @@
</script>
{#if data}
<Modal bind:show={data} title="Object viewer" contentPadding={false}>
<Modal bind:show={data} title="Object viewer">
<div class="objectviewer">
<div class="buttons">
<button class="btn" on:click={copy}>
@ -27,7 +37,7 @@
</button>
</div>
<div class="code">
<ObjectTree {data} />
<ObjectTree data={_data} />
</div>
</div>
</Modal>
@ -37,14 +47,10 @@
.objectviewer {
position: relative;
}
.code {
padding: 1rem;
}
.buttons {
position: absolute;
top: 0;
right: 0;
margin: 1rem;
}
.buttons button {
margin-left: 1rem;

81
frontend/src/organisms/connection/collection/find-viewconfig.svelte
View File

@ -1,6 +1,7 @@
<script>
import TabBar from '../../../components/tabbar.svelte';
import Modal from '../../../components/modal.svelte';
import Icon from '../../../components/icon.svelte';
export let show = false;
export let activeView = 'list';
@ -8,15 +9,55 @@
hideObjectIndicators: false,
columns: [],
};
export let firstItem = {};
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>
<Modal title="View configuration" bind:show contentPadding={false}>
<TabBar
tabs={[
{ key: 'list', title: 'List view' },
{ key: 'table', title: 'Table view' },
{ key: 'table', title: 'Table view columns' },
]}
bind:selectedKey={activeTab}
/>
@ -30,11 +71,31 @@
</label>
</div>
{:else if activeTab === 'table'}
<input
type="text"
value={config.columns?.map(c => c.key).join(', ') || ''}
on:input={e => config.columns = e.currentTarget.value?.split(',').map(k => ({ key: k.trim() })) || ''}
/>
{#each config.columns as column, columnIndex}
<div class="column">
<label class="field">
<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}
</div>
</Modal>
@ -48,7 +109,11 @@
display: flex;
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>

99
frontend/src/organisms/connection/collection/find.svelte
View File

@ -7,6 +7,7 @@
import ObjectViewer from '../../../components/objectviewer.svelte';
import FindViewConfigModal from './find-viewconfig.svelte';
import { onMount } from 'svelte';
import Grid from '../../../components/grid.svelte';
export let collection;
@ -28,6 +29,8 @@
let viewConfigModalOpen = false;
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})` : ''};`;
$: 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();
$: 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() {
activePath = [];
result = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
@ -57,22 +75,6 @@
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() {
form.skip -= form.limit;
if (form.skip < 0) {
@ -86,6 +88,16 @@
submitQuery();
}
function first() {
form.skip = 0;
submitQuery();
}
function last() {
form.skip = lastPage * submittedForm.limit;
submitQuery();
}
async function removeActive() {
if (!activePath[0]) {
return;
@ -140,12 +152,12 @@
<label class="field">
<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 class="field">
<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>
<button type="submit" class="btn">Run</button>
@ -157,12 +169,23 @@
<div class="result">
<div class="grid">
{#key result}
<ObjectGrid
data={result.results}
hideObjectIndicators={viewConfig?.hideObjectIndicators}
bind:activePath
on:trigger={e => openJson(e.detail?.itemKey)}
/>
{#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
data={result.results}
hideObjectIndicators={viewConfig?.hideObjectIndicators}
bind:activePath
on:trigger={e => openJson(e.detail?.itemKey)}
/>
{/if}
{/key}
</div>
@ -177,24 +200,44 @@
<Icon name="cog" />
</button>
<button class="btn" on:click={toggleView} title="Toggle view">
<Icon name={view} />
<Icon name={view === 'table' ? 'list' : 'table'} />
</button>
<button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
<Icon name="-" />
</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" />
</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" />
</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>
<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>
.find {

15
frontend/src/organisms/connection/collection/indexes.svelte
View File

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

5
frontend/src/organisms/connection/collection/insert.svelte
View File

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

5
frontend/src/organisms/connection/collection/remove.svelte
View File

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

4
frontend/src/organisms/connection/collection/update.svelte
View File

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

2
frontend/src/reset.css
View File

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

5
frontend/src/style.css
View File

@ -63,6 +63,11 @@ p strong {
display: flex;
align-items: center;
}
.field svg {
width: 13px;
height: 13px;
margin-right: 2px;
}
.field > :first-child {
border-top-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;
}