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

Find: polish

Browse Source
This commit is contained in:
Romein van Buren 2023-01-10 20:22:57 +01:00
parent 11f6343843
commit de36aa57dc
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
4 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,4 +14,6 @@
<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" class="feather feather-database"><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></svg>
{:else if name === 'x'}
<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" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
{:else if name === '-'}
<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" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
{/if}

13
frontend/src/components/objectgrid.svelte
View File

@ -5,6 +5,13 @@
export let key = '_id';
export let showHeaders = false;
export let contained = true;
export let activeKey = '';
const columns = [
{ key: 'key', label: 'Key' },
{ key: 'value', label: 'Value' },
{ key: 'type', label: 'Type' },
];
let items = [];
@ -61,8 +68,4 @@
}
</script>
<Grid columns={[
{ key: 'key', label: 'Key' },
{ key: 'value', label: 'Value' },
{ key: 'type', label: 'Type' },
]} {items} {showHeaders} {contained} key="key" />
<Grid {columns} {items} {showHeaders} {contained} key="key" bind:activeKey />

33
frontend/src/organisms/collection-detail/find.svelte
View File

@ -26,6 +26,7 @@
let result = [];
let queryField;
let activeKey = '';
$: 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})` : ''};`;
$: if (collection) {
@ -33,11 +34,30 @@
}
async function submitQuery() {
activeKey = '';
result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
queryField?.focus();
queryField?.select();
}
function prev() {
form.skip -= form.limit;
if (form.skip < 0) {
form.skip = 0;
}
submitQuery();
}
function next() {
form.skip += form.limit;
submitQuery();
}
function remove() {
// eslint-disable-next-line no-alert
alert('yet to be implemented');
}
onMount(() => {
queryField?.focus();
queryField?.select();
@ -80,7 +100,7 @@
<CodeExample {code} />
<div class="result">
<ObjectGrid data={result} />
<ObjectGrid data={result} bind:activeKey />
<div class="controls">
<div>
{#if result}
@ -88,8 +108,15 @@
{/if}
</div>
<div>
<button class="btn"><Icon name="chev-l" /></button>
<button class="btn"><Icon name="chev-r" /></button>
<button class="btn danger" on:click={remove} disabled={!activeKey}>
<Icon name="-" />
</button>
<button class="btn" on:click={prev} disabled={!form.limit || (form.skip <= 0) || !result?.length}>
<Icon name="chev-l" />
</button>
<button class="btn" on:click={next} disabled={!form.limit || ((result?.length || Infinity) < form.limit) || !result?.length}>
<Icon name="chev-r" />
</button>
</div>
</div>
</div>

6
frontend/src/style.css
View File

@ -77,6 +77,12 @@ p {
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
outline: none;
}
.btn.danger {
background-color: #c00;
}
.btn.danger:focus {
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;