romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

Fixed frontend coding style problems

Browse Source
This commit is contained in:
Romein van Buren 2023-06-11 09:34:00 +02:00
parent 6cc329982a
commit 2ee5c7dadd
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
27 changed files with 213 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json.md5
View File

@ -1 +1 @@
679b6f6f86f66d3499bdecbee288c567 499da1237327bf4ddd2de74bfd6635c7

6
frontend/src/app.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import BlankState from '$components/blankstate.svelte'; import BlankState from '$components/blankstate.svelte';
import ContextMenu from '$components/contextmenu.svelte'; import ContextMenu from '$components/contextmenu.svelte';
import connections from '$lib/stores/connections';
import contextMenu from '$lib/stores/contextmenu'; import contextMenu from '$lib/stores/contextmenu';
import environment from '$lib/stores/environment'; import environment from '$lib/stores/environment';
import hosts from '$lib/stores/hosts'; import hosts from '$lib/stores/hosts';
@ -10,7 +9,7 @@
import About from '$organisms/about.svelte'; import About from '$organisms/about.svelte';
import Connection from '$organisms/connection/index.svelte'; import Connection from '$organisms/connection/index.svelte';
import Settings from '$organisms/settings/index.svelte'; import Settings from '$organisms/settings/index.svelte';
import { EventsEmit, EventsOn } from '$wails/runtime'; import { EventsOn } from '$wails/runtime';
import { tick } from 'svelte'; import { tick } from 'svelte';
const activeHostKey = ''; const activeHostKey = '';
@ -21,9 +20,6 @@
let connectionManager; let connectionManager;
let showWelcomeScreen = undefined; let showWelcomeScreen = undefined;
$: host = hosts[activeHostKey];
$: connection = $connections[activeHostKey];
hosts.subscribe(h => { hosts.subscribe(h => {
if (h && (showWelcomeScreen === undefined)) { if (h && (showWelcomeScreen === undefined)) {
showWelcomeScreen = !Object.keys($hosts || {}).length; showWelcomeScreen = !Object.keys($hosts || {}).length;

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

@ -50,7 +50,9 @@
return obj; return obj;
} }
else if ((typeof obj === 'object') && (obj !== null)) { else if ((typeof obj === 'object') && (obj !== null)) {
return Object.entries(obj).map(([ k, item ]) => ({ ...item, [key]: k })); return Object.entries(obj).map(([ k, item ]) => {
return { ...item, [key]: k };
});
} }
else { else {
return obj; return obj;

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

@ -12,7 +12,7 @@
export let canSelect = true; export let canSelect = true;
export let canRemoveItems = false; export let canRemoveItems = false;
export let inputsValid = false; export let inputsValid = false;
// export let actions = []; // export let actions = [];
</script> </script>
<div class="grid"> <div class="grid">

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

@ -16,7 +16,15 @@
} }
</style> </style>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
{#if name === 'radio'} {#if name === 'radio'}
<circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path> <circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
{:else if name === 'chev-l'} {:else if name === 'chev-l'}
@ -26,13 +34,13 @@
{: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'} {:else if name === 'chev-u'}
<path d="m18 15-6-6-6 6"/> <path d="m18 15-6-6-6 6" />
{:else if name === 'chevs-l'} {:else if name === 'chevs-l'}
<path d="m11 17-5-5 5-5M18 17l-5-5 5-5"/> <path d="m11 17-5-5 5-5M18 17l-5-5 5-5" />
{:else if name === 'chevs-r'} {:else if name === 'chevs-r'}
<path d="m13 17 5-5-5-5M6 17l5-5-5-5"/> <path d="m13 17 5-5-5-5M6 17l5-5-5-5" />
{:else if name === 'arr-d'} {:else if name === 'arr-d'}
<path d="M12 5v14M19 12l-7 7-7-7"/> <path d="M12 5v14M19 12l-7 7-7-7" />
{: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'}
@ -44,53 +52,78 @@
{:else if name === 'reload'} {:else if name === 'reload'}
<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path> <polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
{:else if name === 'clipboard'} {:else if name === 'clipboard'}
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect> <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8"
y="2"
width="8"
height="4"
rx="1"
ry="1"></rect>
{:else if name === 'edit'} {:else if name === 'edit'}
<path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path> <path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
{:else if name === 'check'} {:else if name === 'check'}
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>
{:else if name === 'list'} {:else if name === 'list'}
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/> <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
{:else if name === 'table'} {:else if name === 'table'}
<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 === 'form'} {:else if name === 'form'}
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
{: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'} {:else if name === 'zap'}
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/> <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
{:else if name === 'server'} {:else if name === 'server'}
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><path d="M6 6h.01M6 18h.01"/> <rect x="2"
y="2"
width="20"
height="8"
rx="2"
ry="2" /><rect x="2"
y="14"
width="20"
height="8"
rx="2"
ry="2" /><path d="M6 6h.01M6 18h.01" />
{:else if name === 'text'} {:else if name === 'text'}
<path d="M4 7V4h16v3M9 20h6M12 4v16"/> <path d="M4 7V4h16v3M9 20h6M12 4v16" />
{:else if name === 'hash'} {:else if name === 'hash'}
<path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/> <path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" />
{:else if name === 'toggle-l'} {:else if name === 'toggle-l'}
<rect x="1" y="5" width="22" height="14" rx="7" ry="7"/><circle cx="8" cy="12" r="3"/> <rect x="1"
y="5"
width="22"
height="14"
rx="7"
ry="7" /><circle cx="8" cy="12" r="3" />
{:else if name === 'cal'} {:else if name === 'cal'}
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/> <rect x="3"
y="4"
width="18"
height="18"
rx="2"
ry="2" /><path d="M16 2v4M8 2v4M3 10h18" />
{:else if name === 'code'} {:else if name === 'code'}
<path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/> <path d="m16 18 6-6-6-6M8 6l-6 6 6 6" />
{:else if name === 'target'} {:else if name === 'target'}
<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/> <circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" />
{:else if name === 'trash'} {:else if name === 'trash'}
<path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6"/> <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6" />
{:else if name === 'anchor'} {:else if name === 'anchor'}
<circle cx="12" cy="5" r="3"/><path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3"/> <circle cx="12" cy="5" r="3" /><path d="M12 22V8M5 12H2a10 10 0 0 0 20 0h-3" />
{:else if name === 'o'} {:else if name === 'o'}
<circle cx="12" cy="12" r="10"/> <circle cx="12" cy="12" r="10" />
{:else if name === 'info'} {:else if name === 'info'}
<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/> <circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" />
{:else if name === 'play'} {:else if name === 'play'}
<path d="m5 3 14 9-14 9V3z"/> <path d="m5 3 14 9-14 9V3z" />
{:else if name === 'upload'} {:else if name === 'upload'}
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
{:else if name === 'save'} {:else if name === 'save'}
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/> <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><path d="M17 21v-8H7v8M7 3v5h8" />
{:else if name === 're'} {:else if name === 're'}
<path d="m17 1 4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/> <path d="m17 1 4 4-4 4" /><path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4" /><path d="M21 13v2a4 4 0 0 1-4 4H3" />
{:else if name === 'chart'} {:else if name === 'chart'}
<path d="M18 20V10M12 20V4M6 20v-6"/> <path d="M18 20V10M12 20V4M6 20v-6" />
{:else if name === '?'} {:else if name === '?'}
<circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line> <circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line>
{/if} {/if}

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

@ -1,5 +1,5 @@
<script> <script>
import { jsonLooseParse, looseJsonIsValid } from '$lib/strings'; import { looseJsonIsValid } from '$lib/strings';
import { createEventDispatcher, onDestroy } from 'svelte'; import { createEventDispatcher, onDestroy } from 'svelte';
import Icon from './icon.svelte'; import Icon from './icon.svelte';
import Modal from './modal.svelte'; import Modal from './modal.svelte';

2
frontend/src/lib/mongo/collation.svelte
View File

@ -20,7 +20,7 @@
<label for="collationLocale">Locale</label> <label for="collationLocale">Locale</label>
<div class="field"> <div class="field">
<select id="collationLocale" bind:value={collation.locale}> <select id="collationLocale" bind:value={collation.locale}>
{#each Object.entries(locales) as [value, name]} {#each Object.entries(locales) as [ value, name ]}
<option {value}>({value}) {name}</option> <option {value}>({value}) {name}</option>
{/each} {/each}
</select> </select>

2
frontend/src/lib/stores/inited.js
View File

@ -10,7 +10,7 @@ const defer = listener => {
listener(); listener();
} }
else { else {
listeners.push(listener) listeners.push(listener);
} }
}; };

2
frontend/src/organisms/about.svelte
View File

@ -14,7 +14,7 @@
Rolens Rolens
<span class="version">{$environment.version}</span> <span class="version">{$environment.version}</span>
</div> </div>
<div class="description">Intuitive MongoDB <br/> administration tool</div> <div class="description">Intuitive MongoDB <br /> administration tool</div>
</div> </div>
</div> </div>

7
frontend/src/organisms/connection/collection/aggregate.svelte
View File

@ -31,7 +31,9 @@
} }
async function run() { async function run() {
const pipeline = stages.map(stage => ({ [stage.type]: jsonLooseParse(stage.data) })); const pipeline = stages.map(stage => {
return { [stage.type]: jsonLooseParse(stage.data) };
});
await Aggregate( await Aggregate(
collection.hostKey, collection.hostKey,
collection.dbKey, collection.dbKey,
@ -66,7 +68,8 @@
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field"> <label class="field">
<ObjectEditor bind:text={stage.data} on:inited={e => { <ObjectEditor bind:text={stage.data}
on:inited={e => {
e.detail.editor.dispatch({ e.detail.editor.dispatch({
changes: { changes: {
from: 0, from: 0,

2
frontend/src/organisms/connection/collection/components/export.svelte
View File

@ -48,7 +48,7 @@
<label class="field"> <label class="field">
<span class="label">View to use</span> <span class="label">View to use</span>
<select bind:value={viewKey}> <select bind:value={viewKey}>
{#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [key, { name }]} {#each Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) as [ key, { name } ]}
<option value={key}>{name}</option> <option value={key}>{name}</option>
{/each} {/each}
</select> </select>

2
frontend/src/organisms/connection/collection/components/form.svelte
View File

@ -38,7 +38,7 @@
{#if item && view} {#if item && view}
{#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column, index} {#each view?.columns?.filter(c => inputTypes.includes(c.inputType)) || [] as column, index}
<!-- svelte-ignore a11y-label-has-associated-control because FormInput contains one --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="column"> <label class="column">
<div class="label"> <div class="label">
<Icon name={iconMap[column.inputType]} /> <Icon name={iconMap[column.inputType]} />

10
frontend/src/organisms/connection/collection/components/viewconfig.svelte
View File

@ -13,7 +13,9 @@
$: tabs = Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key)) $: tabs = Object.entries(views.forCollection(collection.hostKey, collection.dbKey, collection.key))
.sort((a, b) => sortTabKeys(a[0], b[0])) .sort((a, b) => sortTabKeys(a[0], b[0]))
.map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' })); .map(([ key, v ]) => {
return { key, title: v.name, closable: key !== 'list' };
});
function sortTabKeys(a, b) { function sortTabKeys(a, b) {
if (a === 'list') { if (a === 'list') {
@ -70,11 +72,13 @@
return; return;
} }
$views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => ({ $views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => {
return {
key, key,
showInTable: true, showInTable: true,
inputType: 'none', inputType: 'none',
})); };
});
} }
function moveColumn(oldIndex, delta) { function moveColumn(oldIndex, delta) {

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

@ -38,8 +38,8 @@
let querying = false; let querying = false;
let objectViewerSuccessMessage = ''; let objectViewerSuccessMessage = '';
// $: 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})` : ''};`;
$: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key); $: viewsForCollection = views.forCollection(collection.hostKey, collection.dbKey, collection.key);
$: 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; $: 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; $: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
@ -162,7 +162,12 @@
<div class="form-row one"> <div class="form-row one">
<label class="field"> <label class="field">
<span class="label">Query or id</span> <span class="label">Query or id</span>
<input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ type: 'json', autofocus: true }} placeholder={defaults.query} /> <input type="text"
class="code"
bind:this={queryField}
bind:value={form.query}
use:input={{ type: 'json', autofocus: true }}
placeholder={defaults.query} />
</label> </label>
<label class="field"> <label class="field">
@ -179,12 +184,22 @@
<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} list="skipstops" /> <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} list="limits" /> <input type="number"
min="0"
bind:value={form.limit}
use:input
placeholder={defaults.limit}
list="limits" />
</label> </label>
</div> </div>
@ -219,7 +234,9 @@
{:else} {:else}
<Grid <Grid
key="_id" key="_id"
columns={$views[collection.viewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []} columns={$views[collection.viewKey]?.columns?.map(c => {
return { key: c.key, title: c.key };
}) || []}
showHeaders={true} showHeaders={true}
items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []} items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
bind:activePath bind:activePath
@ -238,7 +255,7 @@
<div> <div>
<label class="field inline"> <label class="field inline">
<select bind:value={collection.viewKey}> <select bind:value={collection.viewKey}>
{#each Object.entries(viewsForCollection) as [key, view]} {#each Object.entries(viewsForCollection) as [ key, view ]}
<option value={key}>{view.name}</option> <option value={key}>{view.name}</option>
{/each} {/each}
</select> </select>

3
frontend/src/organisms/connection/collection/index.svelte
View File

@ -57,7 +57,8 @@
{ key: 'remove', icon: 'trash', title: 'Remove' }, { key: 'remove', icon: 'trash', title: 'Remove' },
{ key: 'indexes', icon: 'list', title: 'Indexes' }, { key: 'indexes', icon: 'list', title: 'Indexes' },
{ key: 'aggregate', icon: 're', title: 'Aggregate' }, { key: 'aggregate', icon: 're', title: 'Aggregate' },
]} bind:selectedKey={tab} /> ]}
bind:selectedKey={tab} />
<div class="container"> <div class="container">
{#if tab === 'stats'} <Stats {collection} /> {#if tab === 'stats'} <Stats {collection} />

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

@ -1,7 +1,6 @@
<script> <script>
import Icon from '$components/icon.svelte'; import Icon from '$components/icon.svelte';
import ObjectGrid from '$components/objectgrid.svelte'; import ObjectGrid from '$components/objectgrid.svelte';
import ObjectViewer from '$components/objectviewer.svelte';
import { DropIndex, GetIndexes } from '$wails/go/app/App'; import { DropIndex, GetIndexes } from '$wails/go/app/App';
import IndexDetail from './components/indexdetail.svelte'; import IndexDetail from './components/indexdetail.svelte';

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

@ -60,9 +60,7 @@
function showDocs() { function showDocs() {
dispatch('performFind', { dispatch('performFind', {
query: insertedIds.length === 1 query: insertedIds.length === 1 ? `{ "_id": ${JSON.stringify(insertedIds[0])} }` : `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
? `{ "_id": ${JSON.stringify(insertedIds[0])} }`
: `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
}); });
} }
@ -146,11 +144,11 @@
<Grid <Grid
key="id" key="id"
items={newItems} items={newItems}
columns={ columns={$views[collection.viewKey]?.columns
$views[collection.viewKey]?.columns
?.filter(c => inputTypes.includes(c.inputType)) ?.filter(c => inputTypes.includes(c.inputType))
.map(c => ({ ...c, id: randomString(8), title: c.key })) || [] .map(c => {
} return { ...c, id: randomString(8), title: c.key };
}) || []}
showHeaders={true} showHeaders={true}
canSelect={false} canSelect={false}
canRemoveItems={true} canRemoveItems={true}
@ -188,7 +186,7 @@
{/if} {/if}
<label class="field inline"> <label class="field inline">
<select bind:value={collection.viewKey}> <select bind:value={collection.viewKey}>
{#each Object.entries(viewsForCollection) as [key, view]} {#each Object.entries(viewsForCollection) as [ key, view ]}
<option value={key}>{key === 'list' ? 'Raw JSON' : view.name}</option> <option value={key}>{key === 'list' ? 'Raw JSON' : view.name}</option>
{/each} {/each}
</select> </select>

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

@ -11,7 +11,7 @@
let many = true; let many = true;
let result = undefined; let result = undefined;
let editor; let editor;
$: code = `db.${collection.key}.remove(${json});`; // $: code = `db.${collection.key}.remove(${json});`;
async function removeItems() { async function removeItems() {
result = await RemoveItems( result = await RemoveItems(

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

@ -11,7 +11,7 @@
const allOperators = Object.values(atomicUpdateOperators).map(Object.keys).flat(); const allOperators = Object.values(atomicUpdateOperators).map(Object.keys).flat();
const form = { query: '{}', parameters: [ { type: '$set' } ] }; const form = { query: '{}', parameters: [ { type: '$set' } ] };
let updatedCount; let updatedCount;
$: code = buildCode(form); // $: code = buildCode(form);
$: invalid = !form.query || form.parameters?.some(param => { $: invalid = !form.query || form.parameters?.some(param => {
if (!param.value) { if (!param.value) {
return true; return true;
@ -26,26 +26,28 @@
} }
}); });
function buildCode(form) { // function buildCode(form) {
let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }'; // let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
if (operation === '{ }') { // if (operation === '{ }') {
operation = '{}'; // operation = '{}';
} // }
let options = (form.upsert || form.many) ? ', { ' : ''; // let options = (form.upsert || form.many) ? ', { ' : '';
form.upsert && (options += 'upsert: true'); // form.upsert && (options += 'upsert: true');
form.upsert && form.many && (options += ', '); // form.upsert && form.many && (options += ', ');
form.many && (options += 'multi: true'); // form.many && (options += 'multi: true');
(form.upsert || form.many) && (options += ' }'); // (form.upsert || form.many) && (options += ' }');
const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`; // const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
return code; // return code;
} // }
async function submitQuery() { async function submitQuery() {
const f = deepClone(form); const f = deepClone(form);
f.query = convertLooseJson(f.query); f.query = convertLooseJson(f.query);
f.parameters = f.parameters.map(param => ({ ...param, value: convertLooseJson(param.value) })); f.parameters = f.parameters.map(param => {
return { ...param, value: convertLooseJson(param.value) };
});
updatedCount = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(f)); updatedCount = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(f));
} }
@ -120,9 +122,9 @@
<fieldset class="parameter"> <fieldset class="parameter">
<label class="field"> <label class="field">
<select bind:value={param.type} class="type"> <select bind:value={param.type} class="type">
{#each Object.entries(atomicUpdateOperators) as [groupName, options]} {#each Object.entries(atomicUpdateOperators) as [ groupName, options ]}
<optgroup label={groupName}> <optgroup label={groupName}>
{#each Object.entries(options) as [key, label]} {#each Object.entries(options) as [ key, label ]}
<option value={key} disabled={form.parameters.some(p => p.type === key) && (key !== param.type)}> <option value={key} disabled={form.parameters.some(p => p.type === key) && (key !== param.type)}>
{label} {label}
</option> </option>

2
frontend/src/organisms/connection/database/stats.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false; let copySucceeded = false;
async function copy() { async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t'); const json = JSON.stringify(database.stats, undefined, '\t');
await navigator.clipboard.writeText(json); await navigator.clipboard.writeText(json);
copySucceeded = true; copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500); setTimeout(() => copySucceeded = false, 1500);

17
frontend/src/organisms/connection/dump.svelte
View File

@ -65,7 +65,6 @@
<Modal bind:show={info} title="Perform dump"> <Modal bind:show={info} title="Perform dump">
<form on:submit|preventDefault={performDump}> <form on:submit|preventDefault={performDump}>
<!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser -->
<label class="field"> <label class="field">
<span class="label">Output destination:</span> <span class="label">Output destination:</span>
<DirectoryChooser bind:value={info.outdir} /> <DirectoryChooser bind:value={info.outdir} />
@ -83,7 +82,9 @@
hideChildrenToggles hideChildrenToggles
items={[ items={[
{ id: undefined, name: '(localhost)' }, { id: undefined, name: '(localhost)' },
...Object.keys($hosts).map(id => ({ id, name: $hosts[id]?.name })), ...Object.keys($hosts).map(id => {
return { id, name: $hosts[id]?.name };
}),
]} ]}
on:select={e => selectHost(e.detail?.itemKey)} on:select={e => selectHost(e.detail?.itemKey)}
/> />
@ -97,9 +98,9 @@
hideChildrenToggles hideChildrenToggles
items={[ items={[
{ id: undefined, name: '(all databases)' }, { id: undefined, name: '(all databases)' },
...($connections[info.hostKey]?.databases ...($connections[info.hostKey]?.databases ? Object.keys($connections[info.hostKey].databases).map(id => {
? Object.keys($connections[info.hostKey].databases).map(id => ({ id, name: id })) return { id, name: id };
: [] }) : []
), ),
]} ]}
on:select={e => selectDatabase(e.detail?.itemKey)} on:select={e => selectDatabase(e.detail?.itemKey)}
@ -114,9 +115,9 @@
hideChildrenToggles hideChildrenToggles
items={[ items={[
{ id: undefined, name: '(all collections)' }, { id: undefined, name: '(all collections)' },
...($connections[info.hostKey]?.databases[info.dbKey]?.collections ...($connections[info.hostKey]?.databases[info.dbKey]?.collections ? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => {
? Object.keys($connections[info.hostKey].databases[info.dbKey].collections).map(id => ({ id, name: id })) return { id, name: id };
: [] }) : []
), ),
]} ]}
on:select={e => selectCollection(e.detail?.itemKey)} on:select={e => selectCollection(e.detail?.itemKey)}

7
frontend/src/organisms/connection/host/index.svelte
View File

@ -14,7 +14,7 @@
host.hostKey = hostKey; host.hostKey = hostKey;
} }
$: if (hostKey || dbKey) { $: if (hostKey) {
tab = 'status'; tab = 'status';
} }
@ -26,8 +26,9 @@
{#key host} {#key host}
<TabBar tabs={[ <TabBar tabs={[
{ key: 'status', icon: 'chart', title: 'Host status' }, { key: 'status', icon: 'chart', title: 'Host status' },
{ key: 'systemInfo', icon: 'server', title: 'System info' } { key: 'systemInfo', icon: 'server', title: 'System info' },
]} bind:selectedKey={tab} /> ]}
bind:selectedKey={tab} />
<div class="container"> <div class="container">
{#if tab === 'status'} <Status {host} /> {#if tab === 'status'} <Status {host} />

2
frontend/src/organisms/connection/host/status.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false; let copySucceeded = false;
async function copy() { async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t'); const json = JSON.stringify(host.status, undefined, '\t');
await navigator.clipboard.writeText(json); await navigator.clipboard.writeText(json);
copySucceeded = true; copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500); setTimeout(() => copySucceeded = false, 1500);

2
frontend/src/organisms/connection/host/systeminfo.svelte
View File

@ -7,7 +7,7 @@
let copySucceeded = false; let copySucceeded = false;
async function copy() { async function copy() {
const json = JSON.stringify(collection.stats, undefined, '\t'); const json = JSON.stringify(host.systemInfo, undefined, '\t');
await navigator.clipboard.writeText(json); await navigator.clipboard.writeText(json);
copySucceeded = true; copySucceeded = true;
setTimeout(() => copySucceeded = false, 1500); setTimeout(() => copySucceeded = false, 1500);

28
frontend/src/organisms/connection/hosttree.svelte
View File

@ -2,10 +2,9 @@
import Grid from '$components/grid.svelte'; import Grid from '$components/grid.svelte';
import { startProgress } from '$lib/progress'; import { startProgress } from '$lib/progress';
import connections from '$lib/stores/connections'; import connections from '$lib/stores/connections';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher, tick } from 'svelte';
import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, RemoveHost, TruncateCollection } from '../../../wailsjs/go/app/App'; import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, RemoveHost, TruncateCollection } from '../../../wailsjs/go/app/App';
import hosts from '$lib/stores/hosts'; import hosts from '$lib/stores/hosts';
import { tick } from 'svelte';
import windowTitle from '$lib/stores/windowtitle'; import windowTitle from '$lib/stores/windowtitle';
export let activeHostKey = ''; export let activeHostKey = '';
@ -17,10 +16,7 @@
// $: activeGridPath[0] = activeHostKey || undefined; // $: activeGridPath[0] = activeHostKey || undefined;
// $: activeGridPath[1] = activeDbKey || undefined; // $: activeGridPath[1] = activeDbKey || undefined;
// $: activeGridPath[2] = activeCollKey || undefined; // $: activeGridPath[2] = activeCollKey || undefined;
$: host = $hosts[activeHostKey];
$: connection = $connections[activeHostKey]; $: connection = $connections[activeHostKey];
$: database = connection?.databases[activeDbKey];
$: collection = database?.collections?.[activeCollKey];
export async function reload() { export async function reload() {
activeHostKey && await openConnection(activeHostKey); activeHostKey && await openConnection(activeHostKey);
@ -79,7 +75,7 @@
for (const collKey of collections || []) { for (const collKey of collections || []) {
$connections[activeHostKey].databases[dbKey].collections[collKey] = $connections[activeHostKey].databases[dbKey].collections[collKey] =
$connections[activeHostKey].databases[dbKey].collections[collKey] ||{}; $connections[activeHostKey].databases[dbKey].collections[collKey] || {};
} }
progress.end(); progress.end();
@ -129,16 +125,19 @@
striped={false} striped={false}
columns={[ { key: 'name' }, { key: 'count', right: true } ]} columns={[ { key: 'name' }, { key: 'count', right: true } ]}
bind:activePath={activeGridPath} bind:activePath={activeGridPath}
items={Object.keys($hosts).map(hostKey => ({ items={Object.keys($hosts).map(hostKey => {
return {
id: hostKey, id: hostKey,
name: $hosts[hostKey].name, name: $hosts[hostKey].name,
icon: 'server', icon: 'server',
children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({ children: Object.keys(connection?.databases || {}).sort().map(dbKey => {
return {
id: dbKey, id: dbKey,
name: dbKey, name: dbKey,
icon: 'db', icon: 'db',
count: Object.keys(connection.databases[dbKey].collections || {}).length || '', count: Object.keys(connection.databases[dbKey].collections || {}).length || '',
children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({ children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => {
return {
id: collKey, id: collKey,
name: collKey, name: collKey,
icon: 'list', icon: 'list',
@ -152,21 +151,24 @@
{ separator: true }, { separator: true },
{ label: 'New collection…', fn: () => dispatch('newCollection') }, { label: 'New collection…', fn: () => dispatch('newCollection') },
], ],
})) || [], };
}) || [],
menu: [ menu: [
{ label: 'Drop database…', fn: () => dropDatabase(dbKey) }, { label: 'Drop database…', fn: () => dropDatabase(dbKey) },
{ separator: true }, { separator: true },
{ label: 'New database…', fn: () => dispatch('newDatabase') }, { label: 'New database…', fn: () => dispatch('newDatabase') },
{ label: 'New collection…', fn: () => dispatch('newCollection') }, { label: 'New collection…', fn: () => dispatch('newCollection') },
], ],
})), };
}),
menu: [ menu: [
{ label: 'New database…', fn: () => dispatch('newDatabase') }, { label: 'New database…', fn: () => dispatch('newDatabase') },
{ separator: true }, { separator: true },
{ label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) }, { label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
{ label: `Remove host…`, fn: () => removeHost(hostKey) }, { label: 'Remove host…', fn: () => removeHost(hostKey) },
], ],
}))} };
})}
on:select={e => { on:select={e => {
const key = e.detail.itemKey; const key = e.detail.itemKey;
switch (e.detail?.level) { switch (e.detail?.level) {

5
frontend/src/organisms/connection/index.svelte
View File

@ -1,10 +1,9 @@
<script> <script>
import { startProgress } from '$lib/progress'; import { startProgress } from '$lib/progress';
import connections from '$lib/stores/connections'; import connections from '$lib/stores/connections';
import { Hosts, RenameCollection } from '$wails/go/app/App'; import { RenameCollection } from '$wails/go/app/App';
import { EnterText } from '$wails/go/ui/UI'; import { EnterText } from '$wails/go/ui/UI';
import { EventsOn } from '$wails/runtime/runtime'; import { EventsOn } from '$wails/runtime/runtime';
import { onMount } from 'svelte';
import HostView from './host/index.svelte'; import HostView from './host/index.svelte';
import DatabaseView from './database/index.svelte'; import DatabaseView from './database/index.svelte';
import CollectionView from './collection/index.svelte'; import CollectionView from './collection/index.svelte';
@ -135,7 +134,7 @@
<HostDetail <HostDetail
bind:show={showHostDetail} bind:show={showHostDetail}
on:reload={hosts.update} on:reload={hosts.update}
hostKey={activeHostKey} hostKey={hostDetailKey}
/> />
<DumpInfo bind:info={exportInfo} /> <DumpInfo bind:info={exportInfo} />

2
frontend/src/organisms/settings/index.svelte
View File

@ -27,7 +27,7 @@
</span> </span>
<label for="defaultExportDirectory">Default export directory</label> <label for="defaultExportDirectory">Default export directory</label>
<!-- svelte-ignore a11y-label-has-associated-control - input is in DirectoryChooser --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field"> <label class="field">
<DirectoryChooser id="defaultExportDirectory" bind:value={$settings.defaultExportDirectory} /> <DirectoryChooser id="defaultExportDirectory" bind:value={$settings.defaultExportDirectory} />
</label> </label>