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

Update items (needs refinement)

Browse Source
This commit is contained in:
Romein van Buren
2023-01-18 11:22:02 +01:00
parent 1571eaa897
commit 1c12dcabc0
8 changed files with 281 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app.svelte
View File

@ -44,6 +44,8 @@
});
</script>
<svelte:window on:contextmenu|preventDefault />
<div id="app" class="platform-{environment?.platform}">
<div class="titlebar"></div>

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

@ -7,6 +7,7 @@
import Insert from './insert.svelte';
import Remove from './remove.svelte';
import Stats from './stats.svelte';
import Update from './update.svelte';
export let collection;
export let hostKey;
@ -45,6 +46,7 @@
{#if tab === 'stats'} <Stats {collection} />
{:else if tab === 'find'} <Find {collection} bind:this={find} />
{:else if tab === 'insert'} <Insert {collection} on:performFind={catchQuery} />
{:else if tab === 'update'} <Update {collection} on:performFind={catchQuery} />
{:else if tab === 'remove'} <Remove {collection} />
{:else if tab === 'indexes'} <Indexes {collection} />
{/if}

160
frontend/src/organisms/connection/collection/update.svelte Normal file
View File

@ -0,0 +1,160 @@
<script>
import Icon from '../../../components/icon.svelte';
import { input } from '../../../actions';
import { UpdateItems } from '../../../../wailsjs/go/app/App';
import CodeExample from '../../../components/code-example.svelte';
export let collection = {};
const atomicUpdateOperators = {
'Fields': {
$currentDate: 'Current Date',
$inc: 'Increment',
$min: 'Min',
$max: 'Max',
$mul: 'Multiply',
$rename: 'Rename',
$set: 'Set',
$setOnInsert: 'Set on Insert',
$unset: 'Unset',
},
'Array': {
$addToSet: 'Add to Set',
$pop: 'Pop',
$pull: 'Pull',
$push: 'Push',
$pullAll: 'Push All',
},
'Modifiers': {
$each: 'Each',
$position: 'Position',
$slice: 'Slice',
$sort: 'Sort',
},
'Bitwise': {
$bit: 'Bit',
},
};
const form = { query: '{}', parameters: [ {} ] };
$: code = `db.${collection.key}.${form.many ? 'updateMany' : 'updateOne'}()`;
async function submitQuery() {
// form = { query: '{}', parameters: [ {} ] };
const result = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
console.log(result);
}
function removeParam(index) {
if (form.parameters.length < 2) {
return;
}
form.parameters.splice(index, 1);
form.parameters = form.parameters;
}
function addParameter(index) {
if (typeof index !== 'number') {
form.parameters = [ ...form.parameters, {} ];
}
else {
form.parameters = [
...form.parameters.slice(0, index),
{},
...form.parameters.slice(index),
];
}
}
</script>
<form class="update" on:submit|preventDefault={submitQuery}>
<CodeExample language="json" {code} />
<div class="options">
<label class="field">
<span class="label">Upsert</span>
<span class="checkbox">
<input type="checkbox" bind:checked={form.upsert} />
</span>
</label>
<label class="field">
<span class="label">Many</span>
<span class="checkbox">
<input type="checkbox" bind:checked={form.many} />
</span>
</label>
</div>
<label class="field">
<span class="label">Filter</span>
<input type="text" class="code" bind:value={form.query} use:input={{ json: true, autofocus: true }} placeholder={'{}'} />
</label>
<fieldset class="parameters">
{#each form.parameters as param, index}
<fieldset class="parameter">
<label class="field">
<select bind:value={param.type}>
{#each Object.entries(atomicUpdateOperators) as [groupName, options]}
<optgroup label={groupName}>
{#each Object.entries(options) as [key, label]}
<option value={key} disabled={form.parameters.some(p => p.type === key)}>
{label}
</option>
{/each}
</optgroup>
{/each}
</select>
</label>
<label class="field">
<input type="text" class="code" bind:value={param.value} placeholder={'{}'} use:input={{ json: true }} />
</label>
<button class="btn" on:click={() => addParameter()} type="button">
<Icon name="+" />
</button>
<button class="btn" disabled={form.parameters.length < 2} on:click={() => removeParam(index)} type="button">
<Icon name="-" />
</button>
</fieldset>
{/each}
</fieldset>
<div class="result">
<div></div>
<button class="btn" type="submit">Update</button>
</div>
</form>
<style>
.update {
display: grid;
gap: 0.5rem;
grid-template: auto auto auto 1fr / 1fr;
}
.options {
display: flex;
gap: 0.5rem;
}
.parameters {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.parameter {
display: grid;
grid-template: 1fr / auto 1fr auto auto;
gap: 0.5rem;
}
.result {
display: flex;
justify-content: space-between;
}
</style>

7
frontend/src/reset.css
View File

@ -59,13 +59,12 @@ button {
}
/* Inputs */
input {
input,
textarea,
select {
font: inherit;
}
input:not([type="checkbox"]) {
min-width: 100px;
width: 100%;
}
textarea {
font: inherit;
}

17
frontend/src/style.css
View File

@ -72,17 +72,20 @@ p strong {
border-bottom-right-radius: 10px;
}
.field > input,
.field > textarea {
.field > textarea,
.field > select {
flex: 1;
}
.field > input:focus,
.field > textarea:focus,
.field > input:focus {
.field > select:focus {
outline: none;
border-color: #00008b;
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
}
.field > input.invalid,
.field > textarea.invalid {
.field > textarea.invalid,
.field > select.invalid {
background-color: rgba(255, 80, 80, 0.3);
border-color: rgb(255, 80, 80);
}
@ -90,6 +93,14 @@ p strong {
text-align: center;
min-width: 75px;
}
.field > select {
appearance: none;
padding: 0.5rem 2rem 0.5rem 0.5rem;
background: #fff;
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
}
.btn {
background-color: #00008b;