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:
@ -57,6 +57,7 @@
|
||||
height: 3rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.address .protocol,
|
||||
|
@ -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}>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user