1
0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-19 22:18:03 +00:00

More UI improvements

This commit is contained in:
2023-01-13 16:56:48 +01:00
parent 90ffdc6a8b
commit 516f25801f
9 changed files with 84 additions and 17 deletions

View File

@ -57,6 +57,7 @@
height: 3rem;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
}
.address .protocol,

View File

@ -16,7 +16,7 @@
limit: 30,
};
const form = {
let form = {
query: '{}',
sort: '{ "_id": 1 }',
fields: '{}',
@ -62,6 +62,12 @@
queryField?.select();
}
export function performQuery(q) {
form = { ...defaults, ...q };
console.log(form);
submitQuery();
}
onMount(resetFocus);
</script>
@ -110,9 +116,9 @@
<div class="controls">
<div>
{#if result}
Results: {result.total || 0}
{/if}
{#key result}
<span class="flash-green">Results: {result.total || 0}</span>
{/key}
</div>
<div>
<button class="btn danger" on:click={remove} disabled={!activeKey}>

View File

@ -1,4 +1,5 @@
<script>
import { tick } from 'svelte';
import TabBar from '../../components/tabbar.svelte';
import Find from './find.svelte';
import Indexes from './indexes.svelte';
@ -12,12 +13,20 @@
export let collectionKey;
let tab = 'find';
let find;
$: if (collection) {
collection.hostKey = hostKey;
collection.dbKey = dbKey;
collection.key = collectionKey;
}
async function catchQuery(event) {
tab = 'find';
await tick();
console.log(event, find);
find.performQuery(event.detail);
}
</script>
<div class="collection" class:empty={!collection}>
@ -34,8 +43,8 @@
<div class="container">
{#if tab === 'stats'} <Stats {collection} />
{:else if tab === 'find'} <Find {collection} />
{:else if tab === 'insert'} <Insert {collection} />
{:else if tab === 'find'} <Find {collection} bind:this={find} />
{:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} />
{:else if tab === 'remove'} <Remove {collection} />
{:else if tab === 'indexes'} <Indexes {collection} />
{/if}

View File

@ -1,35 +1,63 @@
<script>
import { input } from '../../actions';
import { createEventDispatcher } from 'svelte';
import { PerformInsert } from '../../../wailsjs/go/main/App';
export let collection;
let input = '';
const dispatch = createEventDispatcher();
let json = '';
let insertedIds;
async function insert() {
insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, input);
insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, json);
}
function showDocs() {
dispatch('performFind', {
query: insertedIds.length === 1
? `{ "_id": ${JSON.stringify(insertedIds[0])} }`
: `{ "_id": { "$in": [ ${insertedIds.map(id => JSON.stringify(id)).join(', ')} ] } }`,
});
}
</script>
<form on:submit|preventDefault={insert}>
<label class="field">
<textarea cols="30" rows="10" bind:value={input} placeholder="[]" class="code"></textarea>
<textarea
cols="30"
rows="10"
placeholder="[]"
class="code"
bind:value={json}
use:input={{ json: true }}
></textarea>
</label>
<div class="flex">
<div>
{#if insertedIds}
Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted
<span class="flash-green">Success! {insertedIds.length} document{insertedIds.length > 1 ? 's' : ''} inserted</span>
{/if}
</div>
<button type="submit" class="btn" disabled={!input}>Insert</button>
<div>
{#if insertedIds}
<button class="btn" type="button" on:click={showDocs}>View inserted docs</button>
{/if}
<button type="submit" class="btn" disabled={!json}>Insert</button>
</div>
</div>
</form>
<style>
form {
display: grid;
grid-template-rows: 1fr auto;
gap: 0.5rem;
}
.flex {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
}
</style>

View File

@ -23,9 +23,14 @@
</form>
<style>
form {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 0.5rem;
}
.flex {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
}
</style>