romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-20 06:28:04 +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
27 changed files with 213 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,9 @@
}
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(
collection.hostKey,
collection.dbKey,
@ -66,19 +68,20 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="field">
<ObjectEditor bind:text={stage.data} on:inited={e => {
e.detail.editor.dispatch({
changes: {
from: 0,
to: e.detail.editor.state.doc.length,
insert: '{\n\t\n}',
},
selection: {
anchor: 3,
},
});
e.detail.editor.focus();
}} />
<ObjectEditor bind:text={stage.data}
on:inited={e => {
e.detail.editor.dispatch({
changes: {
from: 0,
to: e.detail.editor.state.doc.length,
insert: '{\n\t\n}',
},
selection: {
anchor: 3,
},
});
e.detail.editor.focus();
}} />
</label>
</Details>
{/each}

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

@ -48,7 +48,7 @@
<label class="field">
<span class="label">View to use</span>
<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>
{/each}
</select>

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

@ -38,7 +38,7 @@
{#if item && view}
{#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">
<div class="label">
<Icon name={iconMap[column.inputType]} />

16
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))
.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) {
if (a === 'list') {
@ -70,11 +72,13 @@
return;
}
$views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => ({
key,
showInTable: true,
inputType: 'none',
}));
$views[activeViewKey].columns = Object.keys(firstItem).sort().map(key => {
return {
key,
showInTable: true,
inputType: 'none',
};
});
}
function moveColumn(oldIndex, delta) {

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

@ -38,8 +38,8 @@
let querying = false;
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);
$: 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;
@ -162,7 +162,12 @@
<div class="form-row one">
<label class="field">
<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 class="field">
@ -179,12 +184,22 @@
<label class="field">
<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 class="field">
<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>
</div>
@ -219,7 +234,9 @@
{:else}
<Grid
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}
items={result.results ? result.results.map(r => EJSON.deserialize(r)) : []}
bind:activePath
@ -238,7 +255,7 @@
<div>
<label class="field inline">
<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>
{/each}
</select>

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

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

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

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

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

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

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

@ -11,7 +11,7 @@
let many = true;
let result = undefined;
let editor;
$: code = `db.${collection.key}.remove(${json});`;
// $: code = `db.${collection.key}.remove(${json});`;
async function 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 form = { query: '{}', parameters: [ { type: '$set' } ] };
let updatedCount;
$: code = buildCode(form);
// $: code = buildCode(form);
$: invalid = !form.query || form.parameters?.some(param => {
if (!param.value) {
return true;
@ -26,26 +26,28 @@
}
});
function buildCode(form) {
let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
if (operation === '{ }') {
operation = '{}';
}
// function buildCode(form) {
// let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
// if (operation === '{ }') {
// operation = '{}';
// }
let options = (form.upsert || form.many) ? ', { ' : '';
form.upsert && (options += 'upsert: true');
form.upsert && form.many && (options += ', ');
form.many && (options += 'multi: true');
(form.upsert || form.many) && (options += ' }');
// let options = (form.upsert || form.many) ? ', { ' : '';
// form.upsert && (options += 'upsert: true');
// form.upsert && form.many && (options += ', ');
// form.many && (options += 'multi: true');
// (form.upsert || form.many) && (options += ' }');
const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
return code;
}
// const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
// return code;
// }
async function submitQuery() {
const f = deepClone(form);
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));
}
@ -120,9 +122,9 @@
<fieldset class="parameter">
<label class="field">
<select bind:value={param.type} class="type">
{#each Object.entries(atomicUpdateOperators) as [groupName, options]}
{#each Object.entries(atomicUpdateOperators) as [ groupName, options ]}
<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)}>
{label}
</option>

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

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

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

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

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

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

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

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

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

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

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

@ -2,10 +2,9 @@
import Grid from '$components/grid.svelte';
import { startProgress } from '$lib/progress';
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 hosts from '$lib/stores/hosts';
import { tick } from 'svelte';
import windowTitle from '$lib/stores/windowtitle';
export let activeHostKey = '';
@ -17,10 +16,7 @@
// $: activeGridPath[0] = activeHostKey || undefined;
// $: activeGridPath[1] = activeDbKey || undefined;
// $: activeGridPath[2] = activeCollKey || undefined;
$: host = $hosts[activeHostKey];
$: connection = $connections[activeHostKey];
$: database = connection?.databases[activeDbKey];
$: collection = database?.collections?.[activeCollKey];
export async function reload() {
activeHostKey && await openConnection(activeHostKey);
@ -79,7 +75,7 @@
for (const collKey of collections || []) {
$connections[activeHostKey].databases[dbKey].collections[collKey] =
$connections[activeHostKey].databases[dbKey].collections[collKey] ||{};
$connections[activeHostKey].databases[dbKey].collections[collKey] || {};
}
progress.end();
@ -129,44 +125,50 @@
striped={false}
columns={[ { key: 'name' }, { key: 'count', right: true } ]}
bind:activePath={activeGridPath}
items={Object.keys($hosts).map(hostKey => ({
id: hostKey,
name: $hosts[hostKey].name,
icon: 'server',
children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({
id: dbKey,
name: dbKey,
icon: 'db',
count: Object.keys(connection.databases[dbKey].collections || {}).length || '',
children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({
id: collKey,
name: collKey,
icon: 'list',
menu: [
{ label: 'Export collection (JSON, CSV)…', fn: () => dispatch('exportCollection', collKey) },
{ label: 'Dump collection (BSON via mongodump)…', fn: () => dispatch('dumpCollection', collKey) },
{ separator: true },
{ label: 'Rename collection…', fn: () => dispatch('renameCollection', collKey) },
{ label: 'Truncate collection…', fn: () => truncateCollection(dbKey, collKey) },
{ label: 'Drop collection…', fn: () => dropCollection(dbKey, collKey) },
{ separator: true },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
],
})) || [],
items={Object.keys($hosts).map(hostKey => {
return {
id: hostKey,
name: $hosts[hostKey].name,
icon: 'server',
children: Object.keys(connection?.databases || {}).sort().map(dbKey => {
return {
id: dbKey,
name: dbKey,
icon: 'db',
count: Object.keys(connection.databases[dbKey].collections || {}).length || '',
children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => {
return {
id: collKey,
name: collKey,
icon: 'list',
menu: [
{ label: 'Export collection (JSON, CSV)…', fn: () => dispatch('exportCollection', collKey) },
{ label: 'Dump collection (BSON via mongodump)…', fn: () => dispatch('dumpCollection', collKey) },
{ separator: true },
{ label: 'Rename collection…', fn: () => dispatch('renameCollection', collKey) },
{ label: 'Truncate collection…', fn: () => truncateCollection(dbKey, collKey) },
{ label: 'Drop collection…', fn: () => dropCollection(dbKey, collKey) },
{ separator: true },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
],
};
}) || [],
menu: [
{ label: 'Drop database…', fn: () => dropDatabase(dbKey) },
{ separator: true },
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
],
};
}),
menu: [
{ label: 'Drop database…', fn: () => dropDatabase(dbKey) },
{ separator: true },
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ label: 'New collection…', fn: () => dispatch('newCollection') },
{ separator: true },
{ label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
{ label: 'Remove host…', fn: () => removeHost(hostKey) },
],
})),
menu: [
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ separator: true },
{ label: `Edit host ${$hosts[hostKey].name}…`, fn: () => dispatch('editHost', hostKey) },
{ label: `Remove host…`, fn: () => removeHost(hostKey) },
],
}))}
};
})}
on:select={e => {
const key = e.detail.itemKey;
switch (e.detail?.level) {

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

@ -1,10 +1,9 @@
<script>
import { startProgress } from '$lib/progress';
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 { EventsOn } from '$wails/runtime/runtime';
import { onMount } from 'svelte';
import HostView from './host/index.svelte';
import DatabaseView from './database/index.svelte';
import CollectionView from './collection/index.svelte';
@ -135,7 +134,7 @@
<HostDetail
bind:show={showHostDetail}
on:reload={hosts.update}
hostKey={activeHostKey}
hostKey={hostDetailKey}
/>
<DumpInfo bind:info={exportInfo} />