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

Multiple improvements to the frontend

Browse Source 
* Consistent usage of modal footer
* Remove hosts
* Moved hosts to dedicated store
This commit is contained in:
Romein van Buren
2023-05-31 20:20:39 +02:00
parent 27dc1f9117
commit 415efe9ac4
17 changed files with 163 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,12 +56,13 @@
<Icon name="cog" />
</button>
</label>
<button class="btn" type="submit">
<Icon name="play" />
Start export
</button>
</form>
<svelte:fragment slot="footer">
<button class="btn" on:click={performExport}>
<Icon name="play" /> Start export
</button>
</svelte:fragment>
</Modal>
<style>

20
frontend/src/organisms/connection/collection/components/indexdetail.svelte
View File

@ -86,16 +86,16 @@
No rules
{/each}
</div>
<div class="buttons">
<button class="btn" type="button" on:click={addRule} disabled={index.model.some(r => r.sort === 'hashed')}>
<Icon name="+" /> Add rule
</button>
<button class="btn" type="submit" disabled={!index.model.length || index.model.some(r => !r.key)}>
<Icon name="+" /> Create index
</button>
</div>
</form>
<div class="buttons" slot="footer">
<button class="btn" on:click={addRule} disabled={index.model.some(r => r.sort === 'hashed')}>
<Icon name="+" /> Add rule
</button>
<button class="btn" on:click={create} disabled={!index.model.length || index.model.some(r => !r.key)}>
<Icon name="+" /> Create index
</button>
</div>
</Modal>
<style>
@ -128,7 +128,7 @@
display: flex;
gap: 0.5rem;
}
.buttons button[type="submit"] {
.buttons:nth-child(2) {
margin-left: auto;
}
</style>

26
frontend/src/organisms/connection/collection/components/querychooser.svelte
View File

@ -4,13 +4,13 @@
import Icon from '$components/icon.svelte';
import Modal from '$components/modal.svelte';
import input from '$lib/actions/input';
import hosts from '$lib/stores/hosts';
import queries from '$lib/stores/queries';
import { createEventDispatcher } from 'svelte';
export let queryToSave = undefined;
export let collection = {};
export let show = false;
export let hosts = {};
const dispatch = createEventDispatcher();
let gridSelectedPath = [];
@ -88,7 +88,7 @@
columns={[ { key: 'n', title: 'Query name' }, { key: 'h', title: 'Host' }, { key: 'ns', title: 'Namespace' } ]}
key="n"
items={Object.entries($queries).reduce((object, [ name, query ]) => {
object[query.name] = { n: name, h: hosts[query.hostKey]?.name || '?', ns: `${query.dbKey}.${query.collKey}` };
object[query.name] = { n: name, h: $hosts[query.hostKey]?.name || '?', ns: `${query.dbKey}.${query.collKey}` };
return object;
}, {})}
showHeaders={true}
@ -100,23 +100,25 @@
/>
</div>
{#if queryToSave && Object.keys($queries).includes(queryToSave.name)}
<Hint>
You are about to <strong>overwrite</strong> a saved query. Give it
another name if you do not want to overwrite.
</Hint>
{/if}
</form>
<svelte:fragment slot="footer">
{#if queryToSave}
<button class="btn" type="submit">
<button class="btn" on:click={submit}>
<Icon name="save" /> Save query
</button>
{#if Object.keys($queries).includes(queryToSave.name)}
<Hint>
You are about to <strong>overwrite</strong> a saved query. Give it
another name if you do not want to overwrite.
</Hint>
{/if}
{:else}
<button class="btn" type="submit" disabled={!selectedKey}>
<button class="btn" on:click={submit} disabled={!selectedKey}>
<Icon name="upload" /> Load query
</button>
{/if}
</form>
</svelte:fragment>
</Modal>
<style>

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

@ -16,7 +16,6 @@
import QueryChooser from './components/querychooser.svelte';
export let collection;
export let hosts = {};
const dispatch = createEventDispatcher();
const defaults = {
@ -252,7 +251,6 @@
bind:queryToSave
bind:show={showQueryChooser}
on:select={queryChosen}
{hosts}
{collection}
/>

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

@ -16,7 +16,6 @@
export let hostKey;
export let dbKey;
export let collectionKey;
export let hosts = {};
let tab = 'find';
let find;
@ -62,7 +61,7 @@
<div class="container">
{#if tab === 'stats'} <Stats {collection} />
{:else if tab === 'find'} <Find {collection} {hosts} bind:this={find} on:openViewConfig={openViewConfig} />
{:else if tab === 'find'} <Find {collection} bind:this={find} on:openViewConfig={openViewConfig} />
{:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} on:openViewConfig={openViewConfig} />
{:else if tab === 'update'} <Update {collection} on:performFind={catchQuery} />
{:else if tab === 'remove'} <Remove {collection} />

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

@ -3,12 +3,12 @@
import Grid from '$components/grid.svelte';
import Modal from '$components/modal.svelte';
import { startProgress } from '$lib/progress';
import { connections } from '$lib/stores/connections';
import connections from '$lib/stores/connections';
import hosts from '$lib/stores/hosts';
import applicationSettings from '$lib/stores/settings';
import { OpenConnection, OpenDatabase, PerformDump } from '$wails/go/app/App';
export let info;
export let hosts = {};
$: if (info) {
info.outdir = info.outdir || $applicationSettings.defaultExportDirectory;
@ -83,7 +83,7 @@
hideChildrenToggles
items={[
{ id: undefined, name: '(localhost)' },
...Object.keys(hosts).map(id => ({ id, name: hosts[id]?.name })),
...Object.keys($hosts).map(id => ({ id, name: $hosts[id]?.name })),
]}
on:select={e => selectHost(e.detail?.itemKey)}
/>
@ -123,11 +123,11 @@
/>
</div>
</div>
<div>
<button type="submit" class="btn">Perform dump</button>
</div>
</form>
<svelte:fragment slot="footer">
<button class="btn" on:click={performDump}>Perform dump</button>
</svelte:fragment>
</Modal>
<style>

31
frontend/src/organisms/connection/hostdetail.svelte
View File

@ -1,18 +1,18 @@
<script>
import Modal from '$components/modal.svelte';
import input from '$lib/actions/input';
import hosts from '$lib/stores/hosts';
import { AddHost, UpdateHost } from '$wails/go/app/App';
import { createEventDispatcher } from 'svelte';
export let show = false;
export let hostKey = '';
export let hosts = {};
const dispatch = createEventDispatcher();
let form = {};
let error = '';
$: valid = validate(form);
$: host = hosts[hostKey];
$: host = $hosts[hostKey];
$: if (show || !show) {
init();
@ -36,7 +36,10 @@
await UpdateHost(hostKey, JSON.stringify(form));
}
else {
await AddHost(JSON.stringify(form));
const newHostKey = await AddHost(JSON.stringify(form));
if (newHostKey) {
hostKey = newHostKey;
}
}
show = false;
dispatch('reload');
@ -58,18 +61,18 @@
<span class="label">Connection string</span>
<input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" use:input />
</label>
<div class="result">
<div>
{#if error}
<div class="error">{error}</div>
{/if}
</div>
<button class="btn" disabled={!valid} type="submit">
{host ? 'Save' : 'Create'}
</button>
</div>
</form>
<div class="result" slot="footer">
<div>
{#if error}
<div class="error">{error}</div>
{/if}
</div>
<button class="btn" disabled={!valid} on:click={submit}>
{host ? 'Save' : 'Create'}
</button>
</div>
</Modal>
<style>

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

@ -1,12 +1,13 @@
<script>
import Grid from '$components/grid.svelte';
import { startProgress } from '$lib/progress';
import { connections } from '$lib/stores/connections';
import connections from '$lib/stores/connections';
import { WindowSetTitle } from '$wails/runtime/runtime';
import { createEventDispatcher } from 'svelte';
import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, 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 { tick } from 'svelte';
export let hosts = {};
export let activeHostKey = '';
export let activeDbKey = '';
export let activeCollKey = '';
@ -16,7 +17,7 @@
$: activeHostKey = activeGridPath[0] || activeHostKey;
$: activeDbKey = activeGridPath[1];
$: activeCollKey = activeGridPath[2];
$: host = hosts[activeHostKey];
$: host = $hosts[activeHostKey];
$: connection = $connections[activeHostKey];
$: database = connection?.databases[activeDbKey];
$: collection = database?.collections?.[activeCollKey];
@ -38,12 +39,21 @@
});
activeHostKey = hostKey;
dispatch('connected', hostKey);
WindowSetTitle(`${hosts[activeHostKey].name} - Rolens`);
WindowSetTitle(`${$hosts[activeHostKey].name} - Rolens`);
}
progress.end();
}
async function removeHost(hostKey) {
activeCollKey = '';
activeDbKey = '';
activeHostKey = '';
await tick();
await RemoveHost(hostKey);
hosts.update();
}
async function openDatabase(dbKey) {
const progress = startProgress(`Opening database "${dbKey}"…`);
const collections = await OpenDatabase(activeHostKey, dbKey);
@ -88,9 +98,9 @@
<Grid
striped={false}
columns={[ { key: 'name' }, { key: 'count', right: true } ]}
items={Object.keys(hosts).map(hostKey => ({
items={Object.keys($hosts).map(hostKey => ({
id: hostKey,
name: hosts[hostKey].name,
name: $hosts[hostKey].name,
icon: 'server',
children: Object.keys(connection?.databases || {}).sort().map(dbKey => ({
id: dbKey,
@ -122,7 +132,8 @@
menu: [
{ label: 'New database…', fn: () => dispatch('newDatabase') },
{ 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) },
],
}))}
bind:activePath={activeGridPath}

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

@ -1,6 +1,6 @@
<script>
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 { EnterText } from '$wails/go/ui/UI';
import { EventsOn } from '$wails/runtime/runtime';
@ -10,8 +10,9 @@
import HostDetail from './hostdetail.svelte';
import HostTree from './hosttree.svelte';
import sharedState from '$lib/stores/sharedstate';
import Icon from '$components/icon.svelte';
import hosts from '$lib/stores/hosts';
export let hosts = {};
export let activeHostKey = '';
export let activeDbKey = '';
export let activeCollKey = '';
@ -25,10 +26,6 @@
$: sharedState.currentDb.set(activeDbKey);
$: sharedState.currentColl.set(activeCollKey);
async function getHosts() {
hosts = await Hosts();
}
export function createHost() {
hostDetailKey = '';
showHostDetail = true;
@ -89,12 +86,16 @@
EventsOn('CreateHost', createHost);
EventsOn('CreateDatabase', createDatabase);
EventsOn('CreateCollection', createCollection);
onMount(getHosts);
</script>
<div class="tree">
<div class="tree-buttons">
<button class="button-small" on:click={createHost}>
<Icon name="+" /> New host
</button>
</div>
<HostTree
{hosts}
bind:activeHostKey
bind:activeCollKey
bind:activeDbKey
@ -114,21 +115,22 @@
hostKey={activeHostKey}
dbKey={activeDbKey}
collectionKey={activeCollKey}
{hosts}
/>
<HostDetail
bind:show={showHostDetail}
on:reload={getHosts}
on:reload={hosts.update}
hostKey={activeHostKey}
{hosts}
/>
<DumpInfo bind:info={exportInfo} {hosts} />
<DumpInfo bind:info={exportInfo} />
<style>
.tree {
padding: 0.5rem;
background-color: #fff;
}
.tree-buttons {
margin-bottom: 1rem;
}
</style>